src/containers/GlobalStats.jsx

@@ -34,7 +34,10 @@ const GlobalStats = () => {
 
   return (
     <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap">
-      <div>
+      <div
+        data-tip="Počet přihlášených členů Pirátské strany."
+        data-tip-at="bottom"
+      >
         <strong>{onlineMembers}</strong>{" "}
         <span>
           {onlineMembers === 1 && "člen online"}
@@ -42,11 +45,17 @@ const GlobalStats = () => {
           {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
         </span>
       </div>
-      <div>
+      <div
+        data-tip="Celkový počet osob, které mají tuto stránku otevřenou."
+        data-tip-at="bottom"
+      >
         <strong>{onlineUsers}</strong> <span>online celkem</span>
       </div>
       {groupSizeHalf !== null && (
-        <div>
+        <div
+          data-tip="Velikost skupiny členů je důležitá při posuzování podpory návrhů postupu."
+          data-tip-at="bottom"
+        >
           <span>Vel. skupiny členů je</span> <strong>{groupSizeHalf}</strong>
         </div>
       )}
@@ -56,7 +65,9 @@ const GlobalStats = () => {
           <Link
             to="/program"
             className="font-bold"
-            title={nextProgramEntryCaption}
+            aria-label={nextProgramEntryCaption}
+            data-tip={"Následuje bod " + nextProgramEntryCaption}
+            data-tip-at="bottom"
           >
             {nextProgramEntryCaption}
           </Link>

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);
 
@@ -55,7 +59,12 @@ const JitsiInviteCard = () => {
           <h2 className="head-heavy-xs">
             <span>Pozvánka do Jitsi</span>
           </h2>
-          <button type="button" onClick={dismissPopup}>
+          <button
+            type="button"
+            onClick={dismissPopup}
+            aria-label="Zavřít"
+            data-tip="Zavřít"
+          >
             <i className="ico--cross"></i>
           </button>
         </div>

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,27 +35,9 @@ 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">
+      <div className="-mx-1 joyride-filters">
         <Dropdown
           value={filters.flags}
           onChange={onFlagsChange}
@@ -85,29 +57,6 @@ const PostFilters = () => {
           className="text-xs ml-1 mt-2 xl:mt-0"
         />
       </div>
-
-      <div>
-        <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";
+
 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) {
+    refreshAccessToken();
+  }
+}
 
-ReactDOM.render(
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+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

-import React, { useEffect, useState } from "react";
+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 {
@@ -11,7 +12,6 @@ import {
   renameProgramPoint,
 } from "actions/program";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
-import ErrorMessage from "components/ErrorMessage";
 import {
   AlreadyFinished,
   BreakInProgress,
@@ -45,6 +45,8 @@ const Home = () => {
   const programEntry = currentId ? programEntries[currentId] : null;
   const [showProgramEditModal, setShowProgramEditModal] = useState(false);
   const [runJoyRide, setRunJoyride] = useState(false);
+  // The easiest way to restart the joyride tour is by simply re-rendering the component.
+  const [joyrideRenderKey, setJoyrideRenderKey] = useState(0);
   const { innerWidth } = useWindowSize();
   const isLg = innerWidth >= 1024;
   const [
@@ -65,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)) {
@@ -80,6 +87,11 @@ const Home = () => {
     setShowProgramEditModal(false);
   };
 
+  const showTutorial = useCallback(() => {
+    setRunJoyride(true);
+    setJoyrideRenderKey(joyrideRenderKey + 1);
+  }, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
+
   const handleJoyrideCallback = ({ action, index, status, type }) => {
     if (type === EVENTS.TOUR_END) {
       localStorage.setItem(tourLSKey, "COMPLETED");
@@ -124,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
@@ -148,6 +160,7 @@ const Home = () => {
           next: "Další",
           skip: "Přeskočit intro",
         }}
+        key={joyrideRenderKey}
         run={runJoyRide}
         showProgress={true}
         showSkipButton={true}
@@ -194,46 +207,62 @@ const Home = () => {
       <article className="container container--wide py-8 lg:py-24 cf2021 bg-white">
         <div className="cf2021__title flex justify-between">
           <h1 className="head-alt-base lg:head-alt-lg">
-            Bod č. {programEntry.number}: {programEntry.title}
+            {programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
+            {programEntry.title}
           </h1>
-          {displayActions && (
-            <DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
-              <DropdownMenuItem
-                onClick={() => setShowProgramEditModal(true)}
-                icon="ico--pencil"
-                title="Přejmenovat bod programu"
-                titleSize="base"
-                iconSize="base"
+          <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 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="top"
+                onClick={showTutorial}
               />
-              {programEntry.discussionOpened && (
-                <DropdownMenuItem
-                  onClick={() => setShowCloseDiscussion(true)}
-                  icon="ico--bubbles"
-                  title="Ukončit rozpravu"
-                  titleSize="base"
-                  iconSize="base"
-                />
+              {displayActions && (
+                <DropdownMenu right triggerSize="lg" className="z-20">
+                  <DropdownMenuItem
+                    onClick={() => setShowProgramEditModal(true)}
+                    icon="ico--pencil"
+                    title="Přejmenovat bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                  {programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowCloseDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Ukončit rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  {!programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowOpenDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Otevřít rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  <DropdownMenuItem
+                    onClick={() => setShowEndProgramPoint(true)}
+                    icon="ico--switch"
+                    title="Ukončit bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                </DropdownMenu>
               )}
-              {!programEntry.discussionOpened && (
-                <DropdownMenuItem
-                  onClick={() => setShowOpenDiscussion(true)}
-                  icon="ico--bubbles"
-                  title="Otevřít rozpravu"
-                  titleSize="base"
-                  iconSize="base"
-                />
-              )}
-              <DropdownMenuItem
-                onClick={() => setShowEndProgramPoint(true)}
-                icon="ico--switch"
-                title="Ukončit bod programu"
-                titleSize="base"
-                iconSize="base"
-              />
-            </DropdownMenu>
-          )}
+            </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">
@@ -249,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>
@@ -269,42 +300,60 @@ 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>
-              {!programEntry.discussionOpened && (
-                <i
-                  className="ico--lock text-black ml-2 opacity-50 hover:opacity-100 transition duration-500 text-xl"
-                  title="Rozprava je uzavřena"
-                />
-              )}
             </h2>
             <PostFilters />
           </div>
 
-          <PostsContainer
-            className="container-padding--zero lg:container-padding--auto"
-            showAddPostCta={programEntry.discussionOpened}
-          />
           {!programEntry.discussionOpened &&
             (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
-              <p className="leading-normal">
+              <p className="alert alert--light items-center mb-4 elevation-4">
+                <i className="alert__icon ico--lock text-lg" />
                 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" />
+              Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než ti
+              ho předsedající odebere.
+            </p>
+          )}
           {programEntry.discussionOpened &&
             isAuthenticated &&
-            !user.isBanned && <AddPostForm className="my-8 space-y-4" />}
-
-          {programEntry.discussionOpened &&
-            isAuthenticated &&
-            user.isBanned && (
-              <ErrorMessage className="mt-8">
-                Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než
-                ti ho předsedající odebere.
-              </ErrorMessage>
+            !user.isBanned && (
+              <AddPostForm
+                className="mb-8"
+                canAddProposal={
+                  user.role === "member" || user.role === "chairman"
+                }
+              />
             )}
+
+          <PostsContainer
+            className="container-padding--zero lg:container-padding--auto"
+            showAddPostCta={programEntry.discussionOpened}
+          />
         </section>
       </article>
       <ProgramEntryEditModal

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">

src/pages/Program.jsx

@@ -28,22 +28,25 @@ const Schedule = () => {
   return (
     <>
       <Helmet>
-        <title>Program zasedání | CF 2021 | Pirátská strana</title>
+        <title>Program zasedání | CF 2024 | Pirátská strana</title>
         <meta
           name="description"
-          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
         <meta
           property="og:title"
-          content="Program zasedání | CF 2021 | Pirátská strana"
+          content="Program zasedání | CF 2024 | Pirátská strana"
         />
         <meta
           property="og:description"
-          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
       </Helmet>
       <article className="container container--default py-8 lg:py-24">
         <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
+        <div class="my-4">
+           Program zde neobsahuje z technických důvodů všechny podrobnosti. Kompletní program naleznete na <a href="https://cf2024.pirati.cz/program">webu</a>.
+        </div>
         <div className="flex flex-col">
           {scheduleIds.map((id) => {
             const isCurrent = id === currentId;

src/pages/Protocol.jsx

@@ -57,18 +57,18 @@ const Protocol = () => {
   return (
     <>
       <Helmet>
-        <title>Zápis ze zasedání | CF 2021 | Pirátská strana</title>
+        <title>Zápis ze zasedání | CF 2024 | Pirátská strana</title>
         <meta
           name="description"
-          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
         <meta
           property="og:title"
-          content="Zápis ze zasedání | CF 2021 | Pirátská strana"
+          content="Zápis ze zasedání | CF 2024 | Pirátská strana"
         />
         <meta
           property="og:description"
-          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
+          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
         />
       </Helmet>
       <article className="container container--default py-8 lg:py-24">

src/serviceWorker.js

@@ -16,8 +16,8 @@ const isLocalhost = Boolean(
     window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 export function register(config) {
@@ -43,7 +43,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit https://bit.ly/CRA-PWA"
+              "worker. To learn more, visit https://bit.ly/CRA-PWA",
           );
         });
       } else {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 "New content is available and will be used when all " +
-                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA.",
               );
 
               // Execute callback
@@ -123,7 +123,7 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        "No internet connection found. App is running in offline mode."
+        "No internet connection found. App is running in offline mode.",
       );
     });
 }

src/stores.js

@@ -48,8 +48,6 @@ const postStoreInitial = {
   window: {
     items: [],
     itemCount: 0,
-    page: 1,
-    perPage: 20,
   },
   filters: {
     flags: "active",
@@ -65,7 +63,7 @@ export const getGroupByCode = memoize(
   (groupMappings, groupCode) => {
     return groupMappings.find((gm) => gm.code === groupCode);
   },
-  (groupMappings, groupCode) => [groupMappings, groupCode]
+  (groupMappings, groupCode) => [groupMappings, groupCode],
 );
 
 export const getGroupsByCode = memoize((groupMappings, groupCodes) => {

src/utils.js

@@ -7,7 +7,8 @@ import WaitQueue from "wait-queue";
 
 import { markdownConverter } from "markdown";
 
-export const urlRegex = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+export const urlRegex =
+  /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
 export const seenPostsLSKey = "cf2021_seen_posts";
 export const seenAnnouncementsLSKey = "cf2021_seen_announcements";
 
@@ -38,7 +39,7 @@ export const filterPosts = (filters, allItems) => {
 
   if (!filters.showPendingProposals) {
     filteredItems = filteredItems.filter(
-      (item) => item.type === "post" || item.state !== "pending"
+      (item) => item.type === "post" || item.state !== "pending",
     );
   }
 
@@ -55,7 +56,7 @@ export const filterPosts = (filters, allItems) => {
  */
 export const updateWindowPosts = (state) => {
   state.window.items = filterPosts(state.filters, values(state.items)).map(
-    property("id")
+    property("id"),
   );
 };
 
@@ -168,7 +169,7 @@ export const parseRawAnnouncement = (rawAnnouncement) => {
     datetime: parse(
       rawAnnouncement.datetime,
       "yyyy-MM-dd HH:mm:ss",
-      new Date()
+      new Date(),
     ),
     type: announcementTypeMapping[rawAnnouncement.type],
     seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
@@ -183,7 +184,7 @@ export const createSeenWriter = (localStorageKey) => {
   const seenWriterWorker = async () => {
     const id = await queue.shift();
     const seen = new Set(
-      (localStorage.getItem(localStorageKey) || "").split(",")
+      (localStorage.getItem(localStorageKey) || "").split(","),
     );
 
     seen.add(id);

src/ws/connection.js

@@ -103,7 +103,7 @@ export const connect = ({ url, onConnect }) => {
       });
       console.log(
         "[ws] Socket is closed. Reconnect will be attempted in 1 second.",
-        event.reason
+        event.reason,
       );
 
       clearInterval(keepAliveInterval);
@@ -114,7 +114,7 @@ export const connect = ({ url, onConnect }) => {
       console.error(
         "[ws] Socket encountered error: ",
         err.message,
-        "Closing socket"
+        "Closing socket",
       );
       ws.close();
       reject(err);

src/ws/handlers/announcements.js

@@ -10,7 +10,7 @@ export const handleAnnouncementChanged = (payload) => {
       if (has(payload, "content")) {
         state.items[payload.id].content = payload.content;
         state.items[payload.id].contentHtml = markdownConverter.makeHtml(
-          payload.content
+          payload.content,
         );
       }
       if (has(payload, "link")) {

src/ws/handlers/posts.js

 import has from "lodash/has";
+import throttle from "lodash/throttle";
 
 import { markdownConverter } from "markdown";
 import { PostStore } from "stores";
 import { parseRawPost, postsStateMapping, updateWindowPosts } from "utils";
 
+/**
+ * Re-apply sorting by rank but no more than once every 3 seconds.
+ */
+const sortOnRankThrottled = throttle(() => {
+  PostStore.update((state) => {
+    if (state.filters.sort === "byScore") {
+      updateWindowPosts(state);
+    }
+  });
+}, 5000);
+
 export const handlePostRanked = (payload) => {
   PostStore.update((state) => {
     if (state.items[payload.id]) {
@@ -12,12 +24,11 @@ export const handlePostRanked = (payload) => {
       state.items[payload.id].ranking.score =
         state.items[payload.id].ranking.likes -
         state.items[payload.id].ranking.dislikes;
-
-      if (state.filters.sort === "byScore") {
-        updateWindowPosts(state);
-      }
     }
   });
+
+  // Run sorting in a throttled manner.
+  sortOnRankThrottled();
 };
 
 export const handlePostChanged = (payload) => {
@@ -26,20 +37,20 @@ export const handlePostChanged = (payload) => {
       if (has(payload, "content")) {
         state.items[payload.id].content = payload.content;
         state.items[payload.id].contentHtml = markdownConverter.makeHtml(
-          payload.content
+          payload.content,
         );
         state.items[payload.id].modified = true;
       }
 
       if (has(payload, "state")) {
         state.items[payload.id].state = postsStateMapping[payload.state];
+        updateWindowPosts(state);
       }
 
       if (has(payload, "is_archived")) {
         state.items[payload.id].archived = payload.is_archived;
+        updateWindowPosts(state);
       }
-
-      updateWindowPosts(state);
     }
   });
 };

src/ws/handlers/program.js

 import has from "lodash/has";
 
+import { loadPosts } from "actions/posts";
 import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
@@ -19,9 +20,18 @@ export const handleProgramEntryChanged = (payload) => {
       if (has(payload, "description")) {
         state.items[payload.id].description = payload.description;
         state.items[payload.id].htmlContent = markdownConverter.makeHtml(
-          payload.description
+          payload.description,
         );
       }
+
+      if (has(payload, "is_live") && payload.is_live) {
+        state.currentId = payload.id;
+      }
     }
   });
+
+  if (has(payload, "is_live") && payload.is_live) {
+    // Re-load posts - these are bound directly to the program schedule entry.
+    loadPosts.run({}, { respectCache: false });
+  }
 };

typings/cf2021.d.ts

@@ -158,8 +158,6 @@ declare namespace CF2021 {
     window: {
       items: string[];
       itemCount: number;
-      page: number;
-      perPage: number;
     };
     filters: PostStoreFilters;
   }