src/actions/program.js

@@ -4,7 +4,7 @@ import pick from "lodash/pick";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
@@ -13,7 +13,7 @@ import { loadPosts } from "./posts";
 export const loadProgram = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/program");
+      const resp = await fetchApi("/program");
       const mappings = await resp.json();
       return successResult(mappings);
     } catch (err) {
@@ -49,17 +49,17 @@ export const loadProgram = createAsyncAction(
                 expectedStartAt: parse(
                   entry.expected_start_at,
                   "yyyy-MM-dd HH:mm:ss",
-                  new Date()
+                  new Date(),
                 ),
                 expectedFinishAt: entry.expected_finish_at
                   ? parse(
                       entry.expected_finish_at,
                       "yyyy-MM-dd HH:mm:ss",
-                      new Date()
+                      new Date(),
                     )
                   : undefined,
               };
-            }
+            },
           )
           .sort((a, b) => a.expectedStartAt - b.expectedStartAt);
 
@@ -75,7 +75,7 @@ export const loadProgram = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -87,7 +87,7 @@ export const renameProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         title: newTitle,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -108,7 +108,7 @@ export const renameProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -124,7 +124,7 @@ export const endProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -142,7 +142,7 @@ export const endProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -158,7 +158,7 @@ export const activateProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -179,7 +179,7 @@ export const activateProgramPoint = createAsyncAction(
         loadPosts.run({}, { respectCache: false });
       }
     },
-  }
+  },
 );
 
 /**
@@ -195,7 +195,7 @@ export const openDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -215,7 +215,7 @@ export const openDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -227,7 +227,7 @@ export const closeDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -247,5 +247,5 @@ export const closeDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );

src/actions/users.js

 import * as Sentry from "@sentry/react";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import keycloak from "keycloak";
 import { AuthStore, PostStore } from "stores";
 import { updateWindowPosts } from "utils";
@@ -12,7 +12,7 @@ export const loadMe = createAsyncAction(
    */
   async () => {
     try {
-      const response = await fetch(`/users/me`, {
+      const response = await fetchApi(`/users/me`, {
         method: "GET",
         expectedStatus: 200,
       });
@@ -35,7 +35,7 @@ export const loadMe = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const ban = createAsyncAction(
@@ -44,7 +44,7 @@ export const ban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/ban`, {
+      await fetchApi(`/users/${user.id}/ban`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -52,7 +52,7 @@ export const ban = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const unban = createAsyncAction(
@@ -61,7 +61,7 @@ export const unban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/unban`, {
+      await fetchApi(`/users/${user.id}/unban`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -69,7 +69,7 @@ export const unban = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const inviteToJitsi = createAsyncAction(
@@ -81,7 +81,7 @@ export const inviteToJitsi = createAsyncAction(
       const body = JSON.stringify({
         allowed: true,
       });
-      await fetch(`/users/${user.id}/jitsi`, {
+      await fetchApi(`/users/${user.id}/jitsi`, {
         method: "PATCH",
         body,
         expectedStatus: 204,
@@ -90,7 +90,7 @@ export const inviteToJitsi = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const refreshAccessToken = async () => {
@@ -105,7 +105,7 @@ export const refreshAccessToken = async () => {
     console.info("[auth] access token refreshed");
   } catch (exc) {
     console.warn(
-      "[auth] could not refresh the access token, refresh token possibly expired, logging out"
+      "[auth] could not refresh the access token, refresh token possibly expired, logging out",
     );
 
     Sentry.setUser(null);

src/api.js

-import baseFetch from "unfetch";
-
 import { AuthStore } from "./stores";
 
-export const fetch = async (
+export const fetchApi = async (
   url,
-  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {}
+  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
 ) => {
   const { isAuthenticated, user } = AuthStore.getRawState();
 
@@ -16,10 +14,11 @@ export const fetch = async (
     headers["Content-Type"] = "application/json";
   }
 
-  const response = await baseFetch(process.env.REACT_APP_API_BASE_URL + url, {
+  const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
     body,
     method,
     headers,
+    redirect: "follow",
   });
 
   if (!!expectedStatus && response.status !== expectedStatus) {

src/components/Footer.jsx

-import React from "react";
+import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
+import useWindowSize from "@rooks/use-window-size";
+import classNames from "classnames";
 
 const Footer = () => {
+  const { innerWidth } = useWindowSize();
+  const [showCfMenu, setShowCfMenu] = useState(false);
+  const [showOtherMenu, setShowOtherMenu] = useState(false);
+  const isLg = innerWidth >= 1024;
+
   return (
     <footer className="footer bg-grey-700 text-white">
       <div className="footer__main py-4 lg:py-16 container container--default">
@@ -12,17 +19,25 @@ const Footer = () => {
             className="w-32 md:w-40 pb-6"
           />
           <p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
-            Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
+            Piráti, 2024. Všechna práva vyhlazena. Sdílejte a nechte ostatní
             sdílet za stejných podmínek.
           </p>
         </section>
         <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-2 gap-4">
           <div className="pt-8 pb-4 lg:py-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
-                CF 2021
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showCfMenu,
+                  }
+                )}
+                onClick={() => setShowCfMenu(!showCfMenu)}
+              >
+                CF 2024
               </span>{" "}
-              <div className="">
+              <div className={showCfMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <NavLink to="/">Přímý přenos</NavLink>
@@ -42,10 +57,18 @@ const Footer = () => {
           </div>
           <div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showOtherMenu,
+                  }
+                )}
+                onClick={() => setShowOtherMenu(!showOtherMenu)}
+              >
                 Otevřenost
               </span>{" "}
-              <div className="">
+              <div className={showOtherMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <a href="https://ucet.pirati.cz">Transparentní účet</a>

src/components/Navbar.jsx

@@ -77,7 +77,7 @@ const Navbar = ({ onGetHelp }) => {
             to="/"
             className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
           >
-            Celostátní fórum 2021
+            Celostátní fórum 2024
           </NavLink>
         </div>
         <div className="navbar__menutoggle my-4 flex justify-end lg:hidden">

src/components/home/NotYetStarted.jsx

@@ -9,7 +9,7 @@ const NotYetStarted = ({ startAt }) => (
       Jejda ...
     </div>
     <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
-      Jednání ještě nebylo zahájeno :(
+      Jednání ještě nebylo zahájeno
     </h1>
     <p className="text-xl leading-snug mb-8">
       <span>Jednání celostátního fóra ještě nezačalo. </span>

src/components/onboarding/index.jsx

 import React from "react";
 
-import Chip from "components/Chip";
+// import Chip from "components/Chip";
 
 export { default as Beacon } from "./Beacon";
 
@@ -9,11 +9,12 @@ export const steps = [
     target: "body",
     content: (
       <>
-        <h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2021</h1>
+        <h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2024</h1>
         <p className="leading-snug text-base">
-          Letošní Pirátské fórum bude online. Abychom to celé zvládli,
-          připravili jsme tuhle aplikaci, která se snaží alespoň částečně
-          nahradit fyzickou přítomnost. Nejprve si vysvětlíme, jak funguje.
+            Víme, že volebního zasedání se nemohou zúčastnit všichni.
+            Abychom nepřítomným umožnili zasedání lépe sledovat, připravili
+            jsme tuhle aplikaci, která umožňuje zasáhnout do rozpravy.
+            Nejprve si vysvětlíme, jak funguje.
         </p>
       </>
     ),
@@ -60,24 +61,6 @@ export const steps = [
           <p>
             <strong>Běžné příspěvky</strong> se zobrazí ihned po přidání.
           </p>
-          <p>
-            <strong>Návrhy postupu</strong> po přidání nejprve zkontroluje
-            předsedající a pokud sezná, že je takový návrh přípusný, prohlásí ho
-            za{" "}
-            <Chip color="blue-300" condensed>
-              hlasovatelný
-            </Chip>
-            . Pro vyjádření podpory používej palce. Na základě míry podpory
-            předsedající buď návrh označí za{" "}
-            <Chip color="green-400" condensed>
-              schválený
-            </Chip>
-            , nebo za{" "}
-            <Chip color="red-600" condensed>
-              zamítnutý
-            </Chip>
-            .
-          </p>
           <p>
             U příspěvků se též zobrazuje celková míra podpory. Legenda barevného
             odlišení je následující:
@@ -110,10 +93,15 @@ export const steps = [
               je označen příspěvek, který zatím není ohodnocen.
             </li>
           </ul>
+          <p>
+            <strong>Návrhy postupui</strong> po přidání nejprve zkontroluje předsedající a pokud sezná,
+            že je takový návrh přípusný, prohlásí ho za hlasovatelný a předloží k hlasování
+            v plénu. Na základě toho návrh předsedající označí za schválený, nebo za zamítnutý.
+          </p>
         </div>
       </>
     ),
-    placement: "right",
+    placement: "center",
   },
   {
     target: ".joyride-filters",
@@ -132,21 +120,6 @@ export const steps = [
     ),
     placement: "bottom",
   },
-  {
-    target: ".joyride-pagination",
-    content: (
-      <>
-        <h1 className="head-alt-sm mb-4">Stránkování příspěvků</h1>
-        <div className="leading-snug text-base space-y-2">
-          <p>
-            Příspěvky jsou stránkované <strong>po dvaceti</strong>. Stránky
-            můžeš přepínat těmito šipkami.
-          </p>
-        </div>
-      </>
-    ),
-    placement: "bottom",
-  },
   {
     target: ".joyride-announcements",
     content: (
@@ -167,7 +140,7 @@ export const steps = [
       <>
         <h1 className="head-alt-sm mb-4">To je vše!</h1>
         <p className="leading-snug text-base">
-          Ať se ti letošní „CFko“ líbí i v těchto ztížených podmínkách.
+          Ať se ti letošní „CFko“ líbí.
         </p>
       </>
     ),

src/components/posts/Post.jsx

@@ -23,6 +23,7 @@ const Post = ({
   currentUser,
   supportThreshold,
   canThumb,
+  reportSeen = true,
   onLike,
   onDislike,
   onHide,
@@ -36,20 +37,21 @@ const Post = ({
   onEdit,
   onArchive,
   onSeen,
+  ...props
 }) => {
   const { ref, inView } = useInView({
     threshold: 0.8,
     trackVisibility: true,
-    delay: 1500,
-    skip: seen,
+    delay: 1000,
+    skip: !reportSeen,
     triggerOnce: true,
   });
 
   useEffect(() => {
-    if (!seen && inView && onSeen) {
+    if (inView && onSeen) {
       onSeen();
     }
-  });
+  }, [inView, onSeen]);
 
   const wrapperClassName = classNames(
     "flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
@@ -193,13 +195,13 @@ const Post = ({
   const thumbsVisible = !archived && (type === "post" || state === "announced");
 
   return (
-    <div className={wrapperClassName} ref={ref}>
+    <div className={wrapperClassName} ref={ref} {...props}>
       <img
         src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
         className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
         alt={author.name}
       />
-      <div className="flex-1 w-full">
+      <div className="flex-1 overflow-hidden">
         <div className="mb-1">
           <div className="flex justify-between items-start xl:items-center">
             <div className="flex flex-col xl:flex-row xl:items-center">
@@ -246,7 +248,7 @@ const Post = ({
                 supportThreshold={supportThreshold}
               />
               {showActions && (
-                <DropdownMenu right className="pl-4">
+                <DropdownMenu right className="pl-4 static">
                   {showAnnounceAction && (
                     <DropdownMenuItem
                       onClick={onAnnounceProcedureProposal}
@@ -325,15 +327,13 @@ const Post = ({
         <div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2">
           {labels}
         </div>
-        <div className="overflow-hidden">
         <div
-            className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll"
+          className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
           dangerouslySetInnerHTML={htmlContent}
         ></div>
       </div>
     </div>
-    </div>
   );
 };
 
-export default Post;
+export default React.memo(Post);

src/components/posts/PostList.jsx

-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import classNames from "classnames";
 
 import Post from "./Post";
@@ -30,6 +30,9 @@ const PostList = ({
     responderFn(post);
   };
 
+  const windowSize = 20;
+  const [window, setWindow] = useState(windowSize);
+
   const onPostLike = buildHandler(onLike);
   const onPostDislike = buildHandler(onDislike);
   const onPostEdit = buildHandler(onEdit);
@@ -47,15 +50,27 @@ const PostList = ({
     onRejectProcedureProposalByChairman
   );
 
-  const onPostSeen = (post) => () => {
+  const onPostSeen = useCallback(
+    (post) => () => {
+      if (!post.seen) {
         onSeen(post);
-  };
+      }
+
+      // Once last post in window is reached, attempt show more.
+      if (items.indexOf(post) === window - 1) {
+        setWindow(window + windowSize);
+      }
+    },
+    [items, onSeen, window]
+  );
+
+  const windowItems = useMemo(() => {
+    return items.slice(0, window).filter((item) => !item.hidden);
+  }, [items, window]);
 
   return (
     <div className={classNames("space-y-px", className)}>
-      {items
-        .filter((item) => !item.hidden)
-        .map((item) => (
+      {windowItems.map((item, idx) => (
         <Post
           key={item.id}
           datetime={item.datetime}
@@ -64,9 +79,9 @@ const PostList = ({
           state={item.state}
           content={item.contentHtml}
           ranking={item.ranking}
-            historyLog={item.historyLog}
           modified={item.modified}
           seen={item.seen}
+          reportSeen={!item.seen || idx === window - 1}
           archived={item.archived}
           dimIfArchived={dimArchived}
           currentUser={currentUser}

src/containers/AddAnnouncementForm.jsx

@@ -46,6 +46,8 @@ const AddAnnouncementForm = ({ className }) => {
   };
 
   const onAdd = async (evt) => {
+    evt.preventDefault();
+
     let preventAction = false;
     const payload = {
       content: text,
@@ -82,7 +84,7 @@ const AddAnnouncementForm = ({ className }) => {
   };
 
   return (
-    <div className={className}>
+    <form className={className} onSubmit={onAdd}>
       {addingError && (
         <ErrorMessage>
           Při přidávání oznámení došlo k problému: {addingError}.
@@ -150,7 +152,7 @@ const AddAnnouncementForm = ({ className }) => {
       </div>
 
       <Button
-        onClick={onAdd}
+        type="submit"
         className="text-sm mt-4"
         hoverActive
         loading={adding}
@@ -159,7 +161,7 @@ const AddAnnouncementForm = ({ className }) => {
       >
         Přidat oznámení
       </Button>
-    </div>
+    </form>
   );
 };
 

src/containers/AddPostForm.jsx

@@ -10,7 +10,7 @@ import ErrorMessage from "components/ErrorMessage";
 import MarkdownEditor from "components/mde/MarkdownEditor";
 import { useActionState } from "hooks";
 
-const AddPostForm = ({ className }) => {
+const AddPostForm = ({ className, canAddProposal }) => {
   const cardRef = useRef();
   const editorRef = useRef();
   const [expanded, setExpanded] = useState(false);
@@ -21,24 +21,37 @@ const AddPostForm = ({ className }) => {
   const [addingPost, addingPostError] = useActionState(addPost, {
     content: text,
   });
-  const [addingProposal, addingProposalError] = useActionState(addPost, {
+  const [addingProposal, addingProposalError] = useActionState(addProposal, {
     content: text,
   });
 
+  const apiError = addingPostError || addingProposalError;
+  const is429ApiError =
+    apiError &&
+    apiError.toString().indexOf("Unexpected status code 429") !== -1;
+
   const onOutsideClick = useCallback(() => {
     setExpanded(false);
   }, [setExpanded]);
 
-  const onWrite = useCallback(() => {
+  const onWrite = useCallback(
+    (evt) => {
+      setShowAddConfirm(false);
+
       if (!expanded) {
         setExpanded(true);
         setTimeout(() => {
-        if (editorRef.current && editorRef.current.finalRefs.textarea.current) {
+          if (
+            editorRef.current &&
+            editorRef.current.finalRefs.textarea.current
+          ) {
             editorRef.current.finalRefs.textarea.current.focus();
           }
         }, 0);
       }
-  }, [setExpanded, expanded]);
+    },
+    [setExpanded, expanded, setShowAddConfirm]
+  );
 
   const hideAddConfirm = useCallback(() => {
     setShowAddConfirm(false);
@@ -61,6 +74,8 @@ const AddPostForm = ({ className }) => {
   };
 
   const onAdd = async (evt) => {
+    evt.preventDefault();
+
     if (!!text) {
       if (!error) {
         const result = await (type === "post" ? addPost : addProposal).run({
@@ -83,7 +98,7 @@ const AddPostForm = ({ className }) => {
     className,
     "hover:elevation-16 transition duration-500",
     {
-      "elevation-4 cursor-text": !expanded,
+      "elevation-4 cursor-text": !expanded && !showAddConfirm,
       "lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
     }
   );
@@ -112,15 +127,19 @@ const AddPostForm = ({ className }) => {
           "p-4 lg:p-8 " + (showAddConfirm || !expanded ? "hidden" : "")
         }
       >
-        <div className="space-y-4">
-          {addingPostError && (
-            <ErrorMessage>
-              Při přidávání příspěvku došlo k problému: {addingPostError}.
-            </ErrorMessage>
+        <form className="space-y-4" onSubmit={onAdd}>
+          {apiError && is429ApiError && (
+            <div className="alert alert--warning">
+              <i className="alert__icon ico--clock text-lg" />
+              <span>
+                <strong>Zpomal!</strong> Další příspěvek můžeš přidat nejdříve
+                po 1 minutě od přidání posledního.
+              </span>
+            </div>
           )}
-          {addingProposalError && (
+          {apiError && !is429ApiError && (
             <ErrorMessage>
-              Při přidávání příspěvku došlo k problému: {addingProposalError}.
+              Při přidávání příspěvku došlo k problému: {apiError}.
             </ErrorMessage>
           )}
 
@@ -137,6 +156,7 @@ const AddPostForm = ({ className }) => {
             ]}
           />
 
+          {canAddProposal && (
             <div
               className="form-field"
               onChange={(evt) => setType(evt.target.value)}
@@ -170,6 +190,7 @@ const AddPostForm = ({ className }) => {
                 </div>
               </div>
             </div>
+          )}
 
           {type === "procedure-proposal" && (
             <p className="alert alert--light text-sm">
@@ -184,7 +205,7 @@ const AddPostForm = ({ className }) => {
 
           <div className="space-x-4">
             <Button
-              onClick={onAdd}
+              type="submit"
               disabled={error || addingPost || addingProposal}
               loading={addingPost || addingProposal}
               fullwidth
@@ -208,7 +229,7 @@ const AddPostForm = ({ className }) => {
               .
             </span>
           </div>
-        </div>
+        </form>
       </CardBody>
     </Card>
   );

src/containers/JitsiInviteCard.jsx

@@ -8,6 +8,10 @@ import { useActionState } from "hooks";
 import { AuthStore } from "stores";
 
 const JitsiInviteCard = () => {
+
+  // docasne zablokovano
+  return null;
+
   const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
   const [loading, errorMessage] = useActionState(loadMe);
 

src/containers/PostFilters.jsx

-import React, { useCallback } from "react";
-import pick from "lodash/pick";
+import React from "react";
 
-import Chip from "components/Chip";
 import Dropdown from "components/Dropdown";
 import { PostStore } from "stores";
 import { updateWindowPosts } from "utils";
 
 const PostFilters = () => {
-  const { window, filters } = PostStore.useState((state) =>
-    pick(state, ["window", "filters", "items"])
-  );
+  const filters = PostStore.useState((state) => state.filters);
 
   const flagsOptions = [
     { title: "Vše", value: "all" },
@@ -25,19 +21,13 @@ const PostFilters = () => {
     { title: "Jen návrhy", value: "proposalsOnly" },
     { title: "Jen příspěvky", value: "discussionOnly" },
   ];
-  const hasNextPage = window.page * window.perPage < window.itemCount;
-  const hasPrevPage = window.page > 1;
 
-  const setFilter = (prop, newValue, resetPage = true) => {
+  const setFilter = (prop, newValue) => {
     PostStore.update((state) => {
       state.filters[prop] = newValue;
       state.window.itemCount = state.window.items.length;
 
       updateWindowPosts(state);
-
-      if (resetPage) {
-        state.window.page = 1;
-      }
     });
   };
 
@@ -45,24 +35,6 @@ const PostFilters = () => {
   const onSortChange = (newValue) => setFilter("sort", newValue, false);
   const onTypeChange = (newValue) => setFilter("type", newValue);
 
-  const onNextPage = useCallback(() => {
-    if (hasNextPage) {
-      PostStore.update((state) => {
-        state.window.page = state.window.page + 1;
-      });
-    }
-  }, [hasNextPage]);
-  const onPrevPage = useCallback(() => {
-    if (hasPrevPage) {
-      PostStore.update((state) => {
-        state.window.page = state.window.page - 1;
-      });
-    }
-  }, [hasPrevPage]);
-
-  const enabledPaginatorClass = "cursor-pointer text-xs";
-  const disabledPaginatorClass = "opacity-25 cursor-not-allowed text-xs";
-
   return (
     <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
       <div className="-mx-1 joyride-filters">
@@ -85,29 +57,6 @@ const PostFilters = () => {
           className="text-xs ml-1 mt-2 xl:mt-0"
         />
       </div>
-
-      <div className="joyride-pagination">
-        <Chip
-          color="grey-125"
-          className={
-            hasPrevPage ? enabledPaginatorClass : disabledPaginatorClass
-          }
-          hoveractive
-          onClick={onPrevPage}
-        >
-          <span className="ico--chevron-left"></span>
-        </Chip>
-        <Chip
-          color="grey-125"
-          className={
-            hasNextPage ? enabledPaginatorClass : disabledPaginatorClass
-          }
-          hoveractive
-          onClick={onNextPage}
-        >
-          <span className="ico--chevron-right"></span>
-        </Chip>
-      </div>
     </div>
   );
 };

src/containers/PostsContainer.jsx

-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import pick from "lodash/pick";
 
 import {
@@ -191,9 +191,9 @@ const PostsContainer = ({ className, showAddPostCta }) => {
     [setUserToInvite]
   );
 
-  const sliceStart = (window.page - 1) * window.perPage;
-  const sliceEnd = window.page * window.perPage;
-  const windowItems = window.items.map((postId) => items[postId]);
+  const windowItems = useMemo(() => {
+    return window.items.map((postId) => items[postId]);
+  }, [items, window.items]);
 
   return (
     <>
@@ -203,7 +203,7 @@ const PostsContainer = ({ className, showAddPostCta }) => {
         </ErrorMessage>
       )}
       <PostList
-        items={windowItems.slice(sliceStart, sliceEnd)}
+        items={windowItems}
         showAddPostCta={showAddPostCta}
         canThumb={isAuthenticated}
         onLike={like.run}

src/hooks.js

@@ -13,7 +13,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
       if (item) {
         const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
           item,
-          args
+          args,
         );
         setActionArgs(newActionArgs);
         const result = await actionFn.run(newActionArgs);
@@ -23,7 +23,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
         }
       }
     },
-    [item, setItem, actionFn, actionParamsBuilder, setActionArgs]
+    [item, setItem, actionFn, actionParamsBuilder, setActionArgs],
   );
 
   const onActionCancel = useCallback(() => {

src/index.js

 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import ReactModal from "react-modal";
 
 import { refreshAccessToken } from "actions/users";
@@ -7,7 +7,7 @@ import { refreshAccessToken } from "actions/users";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
-const root = document.getElementById("root");
+const root = ReactDOM.createRoot(document.getElementById("root"));
 
 function handleVisibilityChange() {
   if (!document.hidden) {
@@ -17,14 +17,12 @@ function handleVisibilityChange() {
 
 document.addEventListener("visibilitychange", handleVisibilityChange, false);
 
-ReactDOM.render(
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  root
+  </React.StrictMode>
 );
-
-ReactModal.setAppElement(root);
+ReactModal.setAppElement(document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/keycloak.js

@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
 
 // Setup Keycloak instance as needed
 // Pass initialization options as required or leave blank to load from 'keycloak.json'
-const keycloak = Keycloak({
+const keycloak = new Keycloak({
   url: "https://auth.pirati.cz/auth",
   realm: "pirati",
   clientId: "cf-online",

src/pages/About.jsx

@@ -6,20 +6,30 @@ import { markdownConverter } from "markdown";
 const content = markdownConverter.makeHtml(`
 **Celostátní fórum Pirátské strany** je [podle Stanov](https://wiki.pirati.cz/rules/st#cl_8_celostatni_forum) nejvyšším orgánem strany a zasedání se podle možností účastní každý člen strany.
 
-Celostátní fórum ve výlučné působnosti:
+> #### Celostátní fórum ve výlučné působnosti:
+>
+> * a. volí a odvolává republikové předsednictvo,
+> * b. volí a odvolává členy republikového výboru volené celostátním fórem,
+> * c. zřizuje a ruší komise a odbory na celostátní úrovni,
+> * d. volí a odvolává členy komise a vedoucího odboru,
+> * e. schvaluje změny stanov,
+> * f. projednává a schvaluje výroční zprávu předsedy strany,
+> * g. mimořádně přezkoumává rozhodnutí orgánu strany,
+> * h. schvaluje zakládací dokument politického institutu,
+> * i. může schválit Předpis o institutu,
+> * j. může volit a odvolávat některé členy správní rady politického institutu.
+>
+> #### Celostátní fórum dále
+>
+> * a. přijímá v mezích stanov další předpisy,
+> * b. ukládá úkoly republikovému předsednictvu a republikovému výboru,
+> * c. může projednávat a schvalovat základní programové a ideové dokumenty,
+> * d. má veškerou působnost, kterou stanovy neurčují jinému orgánu strany.
 
-a. volí a odvolává republikové předsednictvo,
-b. volí a odvolává členy republikového výboru volené celostátním fórem,
-c. zřizuje a ruší komise a odbory,
-d. volí a odvolává členy komise a vedoucího odboru,
-e. schvaluje změny stanov,
-f. projednává a schvaluje výroční zprávu předsedy strany,
-g. projednává a schvaluje výroční finanční zprávu podle ZPS,
-h. mimořádně přezkoumává rozhodnutí orgánu strany
 
 ### Zasedání na Internetu
 
-Zimní zasedání Celostátního fóru, z důvodu mimořádných okolnosti spojenych s mimořádným stavem, bude probihat **na Internetu**. postup zasedání na Internetu je definovan [§42a](https://wiki.pirati.cz/rules/jdr#zasedani_na_internetu) Jednacího řádu Celostátního fóra v nasledujim znění:
+Zasedání Celostátního fóra může z důvodu mimořádných okolností probíhat na Internetu. Postup zasedání na Internetu je definován §42a Jednacího řádu Celostátního fóra v následujícím znění:
 
 > **(1)** Pokud mimořádné okolnosti nedovolují konání běžného zasedání, může, v rámci krizového řízení, republikové předsednictvo pověřit předsedu strany svoláním zasedání na Internetu nebo změnou již svolaného běžného zasedání na zasedání na Internetu.
 >
@@ -37,10 +47,10 @@ Zimní zasedání Celostátního fóru, z důvodu mimořádných okolnosti spoje
 >
 > **(4)** Právo účasti v jednání zvukem a obrazem mají zejména:
 >
-> a) předsedající a další činovníci jednání,
-> b) osoby s právem na závěrečné slovo v rozpravě k bodům k rozhodnutí,
-> c) osoby určené navrhovatelem bodu v rozpravě k jiným bodům,
-> d) další osoby, pro něž je schválen takový postup.
+> * a) předsedající a další činovníci jednání,
+> * b) osoby s právem na závěrečné slovo v rozpravě k bodům k rozhodnutí,
+> * c) osoby určené navrhovatelem bodu v rozpravě k jiným bodům,
+> * d) další osoby, pro něž je schválen takový postup.
 >
 > **(5)** Jinak se při zasedání na Internetu postupuje přiměřeně jako při běžném zasedání.
 >
@@ -58,14 +68,14 @@ const About = () => {
   return (
     <>
       <Helmet>
-        <title>Co je to celostátní fórum? | CF 2021 | Pirátská strana</title>
+        <title>Co je to celostátní fórum? | CF 2024 | Pirátská strana</title>
         <meta
           name="description"
           content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
         />
         <meta
           property="og:title"
-          content="Co je to celostátní fórum? | CF 2021 | Pirátská strana"
+          content="Co je to celostátní fórum? | CF 2024 | Pirátská strana"
         />
         <meta
           property="og:description"

src/pages/Home.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import Joyride, { EVENTS } from "react-joyride";
 import ReactPlayer from "react-player/lazy";
+import { useKeycloak } from "@react-keycloak/web";
 import useWindowSize from "@rooks/use-window-size";
 
 import {
@@ -66,6 +67,11 @@ const Home = () => {
     onEndProgramPointConfirm,
     onEndProgramPointCancel,
   ] = useActionConfirm(endProgramPoint, programEntry);
+  const { keycloak } = useKeycloak();
+
+  const login = useCallback(() => {
+    keycloak.login();
+  }, [keycloak]);
 
   useEffect(() => {
     if (isLg && !localStorage.getItem(tourLSKey)) {
@@ -130,18 +136,18 @@ const Home = () => {
   return (
     <>
       <Helmet>
-        <title>Přímý přenos | CF 2021 | Pirátská strana</title>
+        <title>Přímý přenos | CF 2024 | Pirátská strana</title>
         <meta
           name="description"
-          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
         <meta
           property="og:title"
-          content="Přímý přenos | CF 2021 | Pirátská strana"
+          content="Přímý přenos | CF 2024 | Pirátská strana"
         />
         <meta
           property="og:description"
-          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
       </Helmet>
       <Joyride
@@ -207,14 +213,14 @@ const Home = () => {
           <div className="pl-4 pt-1 lg:pt-5">
             <div className="space-x-4 inline-flex items-center">
               <button
-                className="ico--question text-grey-200 hover:text-black text-lg"
+                className="ico--question text-grey-200 hidden lg:block hover:text-black text-lg"
                 aria-label="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
                 data-tip="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
-                data-tip-at="left"
+                data-tip-at="top"
                 onClick={showTutorial}
               />
               {displayActions && (
-                <DropdownMenu right triggerSize="lg">
+                <DropdownMenu right triggerSize="lg" className="z-20">
                   <DropdownMenuItem
                     onClick={() => setShowProgramEditModal(true)}
                     icon="ico--pencil"
@@ -252,7 +258,11 @@ const Home = () => {
             </div>
           </div>
         </div>
-        <section className="cf2021__video">
+        <section
+          className="cf2021__video"
+          // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+          style={{ maxWidth: "calc(100vw - 2rem)" }}
+        >
           <div className="container-padding--zero md:container-padding--auto">
             {streamUrl && (
               <div className="iframe-container joyride-player">
@@ -268,10 +278,12 @@ const Home = () => {
               </div>
             )}
             {!streamUrl && (
-              <p>
-                Server neposlal informaci o aktuálním streamu. Vyčkejte na
-                aktualizaci.
-              </p>
+              <div className="px-4 py-16 lg:py-48 flex items-center justify-center bg-grey-400 text-center">
+                <span className="text-lg lg:text-xl text-grey-200">
+                  <i className="ico--warning mr-2" /> Stream teď není k
+                  dispozici. Vyčkej na aktualizaci.
+                </span>
+              </div>
             )}
             <GlobalStats />
           </div>
@@ -288,7 +300,12 @@ const Home = () => {
           </div>
         </section>
 
-        <section className="cf2021__posts joyride-posts">
+        {/* Relative is for fixing the dropdowns on the right which are detached from their immediate container. */}
+        <section
+          className="cf2021__posts relative joyride-posts"
+          // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+          style={{ maxWidth: "calc(100vw - 2rem)" }}
+        >
           <div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
             <h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
               <span>Příspěvky v rozpravě</span>
@@ -303,6 +320,18 @@ const Home = () => {
                 Rozprava je uzavřena - příspěvky teď nelze přidávat.
               </p>
             )}
+          {programEntry.discussionOpened && !isAuthenticated && (
+            <p className="alert alert--light items-center mb-4">
+              <i className="alert__icon ico--info text-lg" />
+              <span>
+                Pokud chceš přidat nový příspěvek,{"  "}
+                <button onClick={login} className="underline cursor-pointer">
+                  přihlaš se pomocí Pirátské identity
+                </button>
+                .
+              </span>
+            </p>
+          )}
           {programEntry.discussionOpened && isAuthenticated && user.isBanned && (
             <p className="alert alert--error items-center mb-4">
               <i className="alert__icon ico--warning text-lg" />
@@ -312,7 +341,14 @@ const Home = () => {
           )}
           {programEntry.discussionOpened &&
             isAuthenticated &&
-            !user.isBanned && <AddPostForm className="mb-8" />}
+            !user.isBanned && (
+              <AddPostForm
+                className="mb-8"
+                canAddProposal={
+                  user.role === "member" || user.role === "chairman"
+                }
+              />
+            )}
 
           <PostsContainer
             className="container-padding--zero lg:container-padding--auto"

src/pages/NotFound.jsx

@@ -6,9 +6,9 @@ import Button from "components/Button";
 const NotFound = () => (
   <>
     <Helmet>
-      <title>404ka | CF 2021 | Pirátská strana</title>
+      <title>404ka | CF 2024 | Pirátská strana</title>
       <meta name="description" content="Tahle stránka tu není." />
-      <meta property="og:title" content="404ka | CF 2021 | Pirátská strana" />
+      <meta property="og:title" content="404ka | CF 2024 | Pirátská strana" />
       <meta property="og:description" content="Tahle stránka tu není." />
     </Helmet>
     <article className="container container--default py-8 lg:py-24">