src/containers/PostsContainer.jsx

+import React, { useCallback, useMemo } from "react";
+import pick from "lodash/pick";
+
+import {
+  acceptProposal,
+  announceProposal,
+  archive,
+  dislike,
+  edit,
+  hide,
+  like,
+  loadPosts,
+  markSeen,
+  rejectProposal,
+  rejectProposalByChairman,
+} from "actions/posts";
+import { ban, inviteToJitsi, unban } from "actions/users";
+import Button from "components/Button";
+import ErrorMessage from "components/ErrorMessage";
+import ModalConfirm from "components/modals/ModalConfirm";
+import ModalWithActions from "components/modals/ModalWithActions";
+import PostEditModal from "components/posts/PostEditModal";
+import PostList from "components/posts/PostList";
+import { useActionState, useItemActionConfirm } from "hooks";
+import { AuthStore, GlobalInfoStore, PostStore } from "stores";
+
+const PostsContainer = ({ className, showAddPostCta }) => {
+  const [
+    userToBan,
+    setUserToBan,
+    onBanUserConfirm,
+    onBanUserCancel,
+    banUserState,
+  ] = useItemActionConfirm(ban);
+  const [
+    userToUnban,
+    setUserToUnban,
+    onUnbanUserConfirm,
+    onUnbanUserCancel,
+    unbanUserState,
+  ] = useItemActionConfirm(unban);
+  const [
+    userToInvite,
+    setUserToInvite,
+    onInviteUserConfirm,
+    onInviteUserCancel,
+    inviteUserState,
+  ] = useItemActionConfirm(inviteToJitsi);
+  const [
+    postToHide,
+    setPostToHide,
+    onPostHideConfirm,
+    onPostHideCancel,
+    postHideState,
+  ] = useItemActionConfirm(hide);
+  const [
+    postToArchive,
+    setPostToArchive,
+    onPostArchiveConfirm,
+    onPostArchiveCancel,
+    postArchiveState,
+  ] = useItemActionConfirm(archive);
+  const [
+    postToAnnounce,
+    setPostToAnnounce,
+    onAnnounceConfirm,
+    onAnnounceCancel,
+    announceState,
+  ] = useItemActionConfirm(announceProposal);
+  const [
+    postToAccept,
+    setPostToAccept,
+    onAcceptConfirm,
+    onAcceptCancel,
+  ] = useItemActionConfirm(acceptProposal, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+  const [
+    postToEdit,
+    setPostToEdit,
+    onEditConfirm,
+    onEditCancel,
+    editState,
+  ] = useItemActionConfirm(edit, (item, newContent) => ({
+    post: item,
+    newContent,
+  }));
+  const [
+    postToReject,
+    setPostToReject,
+    onRejectConfirm,
+    onRejectCancel,
+  ] = useItemActionConfirm(rejectProposal, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+  const [
+    postToRejectByChairman,
+    setPostToRejectByChairman,
+    onRejectByChairmanConfirm,
+    onRejectByChairmanCancel,
+  ] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+
+  const { isAuthenticated, user } = AuthStore.useState((state) =>
+    pick(state, ["isAuthenticated", "user"])
+  );
+  const { window, items } = PostStore.useState((state) =>
+    pick(state, ["window", "items"])
+  );
+  const showingArchivedOnly = PostStore.useState(
+    (state) => state.filters.flags === "archived"
+  );
+  const groupSizeHalf = GlobalInfoStore.useState(
+    (state) => state.groupSizeHalf
+  );
+
+  const [acceptingProposal, acceptingProposalError] = useActionState(
+    acceptProposal,
+    {
+      proposal: postToAccept,
+      archive: false,
+    }
+  );
+  const [
+    acceptingAndArchivingProposal,
+    acceptingAndArchivingProposalError,
+  ] = useActionState(acceptProposal, {
+    proposal: postToAccept,
+    archive: true,
+  });
+  const [rejectingProposal, rejectingProposalError] = useActionState(
+    rejectProposal,
+    {
+      proposal: postToReject,
+      archive: false,
+    }
+  );
+  const [
+    rejectingAndArchivingProposal,
+    rejectingAndArchivingProposalError,
+  ] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
+  const [
+    rejectingProposalByChairman,
+    rejectingProposalByChairmanError,
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: false,
+  });
+  const [
+    rejectingProposalByChairmanAndArchiving,
+    rejectingProposalByChairmanAndArchivingError,
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: true,
+  });
+
+  const { 2: loadResult } = loadPosts.useWatch();
+
+  /**
+   * Ban a post's author.
+   * @param {CF2021.Post} post
+   */
+  const onBanUser = useCallback(
+    (post) => {
+      setUserToBan(post.author);
+    },
+    [setUserToBan]
+  );
+  /**
+   * Ban a post's author.
+   * @param {CF2021.Post} post
+   */
+  const onUnbanUser = useCallback(
+    (post) => {
+      setUserToUnban(post.author);
+    },
+    [setUserToUnban]
+  );
+  /**
+   * Invite post's author to Jitsi.
+   * @param {CF2021.Post} post
+   */
+  const onInviteUser = useCallback(
+    (post) => {
+      setUserToInvite(post.author);
+    },
+    [setUserToInvite]
+  );
+
+  const windowItems = useMemo(() => {
+    return window.items.map((postId) => items[postId]);
+  }, [items, window.items]);
+
+  return (
+    <>
+      {loadResult && loadResult.error && (
+        <ErrorMessage>
+          Příspěvky se nepodařilo načíst: {loadResult.message}
+        </ErrorMessage>
+      )}
+      <PostList
+        items={windowItems}
+        showAddPostCta={showAddPostCta}
+        canThumb={isAuthenticated}
+        onLike={like.run}
+        onDislike={dislike.run}
+        onSeen={markSeen}
+        className={className}
+        dimArchived={!showingArchivedOnly}
+        currentUser={user}
+        supportThreshold={groupSizeHalf}
+        onHide={setPostToHide}
+        onBanUser={onBanUser}
+        onUnbanUser={onUnbanUser}
+        onInviteUser={onInviteUser}
+        onEdit={setPostToEdit}
+        onArchive={setPostToArchive}
+        onAnnounceProcedureProposal={setPostToAnnounce}
+        onAcceptProcedureProposal={setPostToAccept}
+        onRejectProcedureProposal={setPostToReject}
+        onRejectProcedureProposalByChairman={setPostToRejectByChairman}
+      />
+      <ModalConfirm
+        isOpen={!!userToBan}
+        onConfirm={onBanUserConfirm}
+        onCancel={onBanUserCancel}
+        confirming={banUserState.loading}
+        error={banUserState.error}
+        title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`}
+        yesActionLabel="Zablokovat"
+      >
+        Uživatel <strong>{userToBan ? userToBan.name : null}</strong> bude
+        zablokován a nebude dále moci vkládat nové příspěvky. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!userToUnban}
+        onConfirm={onUnbanUserConfirm}
+        onCancel={onUnbanUserCancel}
+        confirming={unbanUserState.loading}
+        error={unbanUserState.error}
+        title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`}
+        yesActionLabel="Odblokovat"
+      >
+        Uživatel <strong>{userToUnban ? userToUnban.name : null}</strong> bude
+        odblokován a bude mu opět umožněno přidávat nové příspěvky. Opravdu to
+        chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!userToInvite}
+        onConfirm={onInviteUserConfirm}
+        onCancel={onInviteUserCancel}
+        confirming={inviteUserState.loading}
+        error={inviteUserState.error}
+        title={`Pozvat uživatele ${
+          userToBan ? userToBan.name : null
+        } do Jitsi?`}
+        yesActionLabel="Pozvat"
+      >
+        Uživateli <strong>{userToInvite ? userToInvite.name : null}</strong>{" "}
+        přijde pozvánka do soukromého Jitsi kanálu. Určitě to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToHide}
+        onConfirm={onPostHideConfirm}
+        onCancel={onPostHideCancel}
+        confirming={postHideState.loading}
+        error={postHideState.error}
+        title="Skrýt příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek se skryje a uživatelé ho neuvidí. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToArchive}
+        onConfirm={onPostArchiveConfirm}
+        onCancel={onPostArchiveCancel}
+        confirming={postArchiveState.loading}
+        error={postArchiveState.error}
+        title="Archivovat příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek bude archivován a bude ve výpisu vizuálně odlišen. Opravdu to
+        chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToAnnounce}
+        onConfirm={onAnnounceConfirm}
+        onCancel={onAnnounceCancel}
+        confirming={announceState.loading}
+        error={announceState.errror}
+        title="Vyhlásit procedurální návrh?"
+        yesActionLabel="Vyhlásit návrh"
+      >
+        Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalWithActions
+        isOpen={!!postToAccept}
+        onCancel={onAcceptCancel}
+        error={acceptingProposalError || acceptingAndArchivingProposalError}
+        title="Schválit procedurální návrh?"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onAcceptConfirm(false)}
+              loading={acceptingProposal}
+            >
+              Schválit
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onAcceptConfirm(true)}
+              loading={acceptingAndArchivingProposal}
+            >
+              Schválit a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onAcceptCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
+      >
+        Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete?
+      </ModalWithActions>
+      <ModalWithActions
+        isOpen={!!postToReject}
+        onCancel={onRejectCancel}
+        error={rejectingProposalError || rejectingAndArchivingProposalError}
+        title="Zamítnout procedurální návrh?"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectConfirm(false)}
+              loading={rejectingProposal}
+            >
+              Zamítnout
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectConfirm(true)}
+              loading={rejectingAndArchivingProposal}
+            >
+              Zamítnout a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onRejectCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
+      >
+        Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
+      </ModalWithActions>
+      <ModalWithActions
+        isOpen={!!postToRejectByChairman}
+        onCancel={onRejectByChairmanCancel}
+        error={
+          rejectingProposalByChairmanError ||
+          rejectingProposalByChairmanAndArchivingError
+        }
+        title="Zamítnout procedurální návrh předsedajícícm?"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectByChairmanConfirm(false)}
+              loading={rejectingProposalByChairman}
+            >
+              Zamítnout
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectByChairmanConfirm(true)}
+              loading={rejectingProposalByChairmanAndArchiving}
+            >
+              Zamítnout a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onRejectCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
+      >
+        Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu
+        to chcete?
+      </ModalWithActions>
+      {postToEdit && (
+        <PostEditModal
+          isOpen={true}
+          post={postToEdit}
+          onConfirm={onEditConfirm}
+          onCancel={onEditCancel}
+          confirming={editState.loading}
+          error={editState.error}
+        />
+      )}
+    </>
+  );
+};
+
+export default PostsContainer;

src/hooks.js

+import { useCallback, useState } from "react";
+
+const baseActionParamsBuilder = (item, args) => {
+  return item;
+};
+
+export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
+  const [item, setItem] = useState(null);
+  const [actionArgs, setActionArgs] = useState(null);
+
+  const onActionConfirm = useCallback(
+    async (args) => {
+      if (item) {
+        const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
+          item,
+          args,
+        );
+        setActionArgs(newActionArgs);
+        const result = await actionFn.run(newActionArgs);
+
+        if (!result.error) {
+          setItem(null);
+        }
+      }
+    },
+    [item, setItem, actionFn, actionParamsBuilder, setActionArgs],
+  );
+
+  const onActionCancel = useCallback(() => {
+    setItem(null);
+  }, [setItem]);
+
+  const [loading, error] = useActionState(actionFn, actionArgs);
+  const unwrappedActionState = { loading, error };
+
+  return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
+};
+
+export const useActionConfirm = (actionFn, actionArgs) => {
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const onActionConfirm = useCallback(async () => {
+    if (showConfirm) {
+      const result = await actionFn.run(actionArgs);
+
+      if (!result.error) {
+        setShowConfirm(false);
+      }
+    }
+  }, [showConfirm, setShowConfirm, actionFn, actionArgs]);
+
+  const onActionCancel = useCallback(() => {
+    setShowConfirm(false);
+  }, [setShowConfirm]);
+
+  return [showConfirm, setShowConfirm, onActionConfirm, onActionCancel];
+};
+
+export const useActionState = (actionFn, actionArgs) => {
+  const { 0: started, 1: finished, 2: result } = actionFn.useWatch(actionArgs);
+  return [started && !finished, result.error ? result.message : null];
+};

src/index.css

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import ReactModal from "react-modal";
 
-ReactDOM.render(
+import { refreshAccessToken } from "actions/users";
+
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+function handleVisibilityChange() {
+  if (!document.hidden) {
+    refreshAccessToken();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
+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

+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 = new Keycloak({
+  url: "https://auth.pirati.cz/auth",
+  realm: "pirati",
+  clientId: "cf-online",
+});
+
+export default keycloak;

src/markdown.js

+import Showdown from "showdown";
+import xss from "xss";
+
+const xssFilter = (converter) => [
+  {
+    type: "output",
+    filter: (text) => xss(text),
+  },
+];
+
+export const markdownConverter = new Showdown.Converter({
+  tables: true,
+  simplifiedAutoLink: true,
+  strikethrough: true,
+  tasklists: false,
+  omitExtraWLInCodeBlocks: true,
+  noHeaderId: true,
+  headerLevelStart: 2,
+  openLinksInNewWindow: true,
+  extensions: [xssFilter],
+});

src/pages/About.jsx

+import React from "react";
+import { Helmet } from "react-helmet-async";
+
+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:
+>
+> * 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.
+
+
+### Zasedání na Internetu
+
+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.
+>
+> **(2)** Při zasedání na Internetu jednají účastníci zasedání ve vzájemné okamžité součinnosti přes Internet s použitím určených systémů strany, případně systémů třetích stran.
+>
+> **(3)** Zasedání na Internetu předseda strany svolá tím, že členům řádně oznámí datum, dobu a jeho organizátora, a to nejméně 40 dnů předem. Nejméně 14 dní před začátkem zasedání organizátor oznámí zejména:
+>
+> * a) způsoby pro sledování veřejného přenosu ze zasedání,
+> * b) způsob pro registraci přítomnosti účastníků v průběhu zasedání,
+> * c) způsob pro účast v jednání zvukem a obrazem,
+> * d) způsob, kterým mohou přítomní členové a příznivci v rozpravě písemně pokládat dotazy a připomínky a vyjádřit jim podporu,
+> * e) způsob, kterým mohou přítomní členové předkládat písemně procedurální návrhy a vyjádřit jim podporu,
+> * f) způsob pro sčítané hlasování o procedurálních návrzích,
+> * g) pokyny pro účast novinářů.
+>
+> **(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.
+>
+> **(5)** Jinak se při zasedání na Internetu postupuje přiměřeně jako při běžném zasedání.
+>
+
+### Další informace
+
+* [Stanovy České pirátské strany](https://wiki.pirati.cz/rules/st)
+* [Jednací řád celostátního fóra](https://wiki.pirati.cz/rules/jdr)
+`);
+
+const About = () => {
+  const htmlContent = {
+    __html: content,
+  };
+  return (
+    <>
+      <Helmet>
+        <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 2024 | Pirátská strana"
+        />
+        <meta
+          property="og:description"
+          content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
+        />
+      </Helmet>
+      <article className="container container--default py-8 lg:py-24">
+        <h1 className="head-alt-md lg:head-alt-lg mb-8">Celostátní fórum</h1>
+
+        <div
+          className="content-block leading-normal"
+          dangerouslySetInnerHTML={htmlContent}
+        />
+      </article>
+    </>
+  );
+};
+
+export default About;

src/pages/Home.css

+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.iframe-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/pages/Home.jsx

+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 {
+  closeDiscussion,
+  endProgramPoint,
+  openDiscussion,
+  renameProgramPoint,
+} from "actions/program";
+import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
+import {
+  AlreadyFinished,
+  BreakInProgress,
+  NotYetStarted,
+} from "components/home";
+import ModalConfirm from "components/modals/ModalConfirm";
+import { Beacon, steps } from "components/onboarding";
+import ProgramEntryEditModal from "components/program/ProgramEntryEditModal";
+import AddAnnouncementForm from "containers/AddAnnouncementForm";
+import AddPostForm from "containers/AddPostForm";
+import AnnouncementsContainer from "containers/AnnoucementsContainer";
+import GlobalStats from "containers/GlobalStats";
+import JitsiInviteCard from "containers/JitsiInviteCard";
+import PostFilters from "containers/PostFilters";
+import PostsContainer from "containers/PostsContainer";
+import { useActionConfirm } from "hooks";
+import { AuthStore, GlobalInfoStore, ProgramStore } from "stores";
+
+import "./Home.css";
+
+const tourLSKey = "cf2021__tour";
+
+const Home = () => {
+  const {
+    currentId,
+    items: programEntries,
+    scheduleIds,
+  } = ProgramStore.useState();
+  const { isAuthenticated, user } = AuthStore.useState();
+  const { streamUrl } = GlobalInfoStore.useState();
+  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 [
+    showCloseDiscussion,
+    setShowCloseDiscussion,
+    onCloseDiscussionConfirm,
+    onCloseDiscussionCancel,
+  ] = useActionConfirm(closeDiscussion, programEntry);
+  const [
+    showOpenDiscussion,
+    setShowOpenDiscussion,
+    onOpenDiscussionConfirm,
+    onOpenDiscussionCancel,
+  ] = useActionConfirm(openDiscussion, programEntry);
+  const [
+    showEndProgramPoint,
+    setShowEndProgramPoint,
+    onEndProgramPointConfirm,
+    onEndProgramPointCancel,
+  ] = useActionConfirm(endProgramPoint, programEntry);
+  const { keycloak } = useKeycloak();
+
+  const login = useCallback(() => {
+    keycloak.login();
+  }, [keycloak]);
+
+  useEffect(() => {
+    if (isLg && !localStorage.getItem(tourLSKey)) {
+      setRunJoyride(true);
+    }
+  }, [isLg, setRunJoyride]);
+
+  const onEditProgramConfirm = async (newTitle) => {
+    await renameProgramPoint.run({ programEntry, newTitle });
+    setShowProgramEditModal(false);
+  };
+  const onEditProgramCancel = () => {
+    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");
+    }
+  };
+
+  const firstProgramEntry = scheduleIds.length
+    ? programEntries[scheduleIds[0]]
+    : null;
+
+  const lastProgramEntry = scheduleIds.length
+    ? programEntries[scheduleIds[0]]
+    : null;
+
+  if (
+    !programEntry &&
+    (!firstProgramEntry || new Date() < firstProgramEntry.expectedStartAt)
+  ) {
+    return (
+      <NotYetStarted
+        startAt={
+          firstProgramEntry ? firstProgramEntry.expectedStartAt : undefined
+        }
+      />
+    );
+  }
+
+  if (
+    !programEntry &&
+    lastProgramEntry &&
+    new Date() > lastProgramEntry.expectedStartAt
+  ) {
+    return <AlreadyFinished />;
+  }
+
+  if (!programEntry) {
+    return <BreakInProgress />;
+  }
+
+  const displayActions = isAuthenticated && user.role === "chairman";
+
+  return (
+    <>
+      <Helmet>
+        <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, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          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, 13. 1. 2024."
+        />
+      </Helmet>
+      <Joyride
+        beaconComponent={Beacon}
+        continuous={true}
+        locale={{
+          back: "Zpět",
+          close: "Zavřít",
+          last: "Poslední",
+          next: "Další",
+          skip: "Přeskočit intro",
+        }}
+        key={joyrideRenderKey}
+        run={runJoyRide}
+        showProgress={true}
+        showSkipButton={true}
+        scrollToFirstStep={true}
+        callback={handleJoyrideCallback}
+        steps={steps}
+        styles={{
+          options: {
+            arrowColor: "#fff",
+            backgroundColor: "#fff",
+            overlayColor: "rgba(255, 255, 255, 0.75)",
+            primaryColor: "#000",
+            textColor: "#000",
+            textAlign: "left",
+            outline: "none",
+            zIndex: 1000,
+            borderRadius: 0,
+          },
+          tooltip: {
+            borderRadius: 0,
+          },
+          tooltipContent: {
+            textAlign: "left",
+          },
+          buttonClose: {
+            borderRadius: 0,
+            fontSize: "0.875rem",
+          },
+          buttonNext: {
+            borderRadius: 0,
+            padding: ".75em 2em",
+            fontSize: "0.875rem",
+          },
+          buttonBack: {
+            color: "#4c4c4c",
+            fontSize: "0.875rem",
+          },
+          buttonSkip: {
+            color: "#4c4c4c",
+            fontSize: "0.875rem",
+          },
+        }}
+      />
+      <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">
+            {programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
+            {programEntry.title}
+          </h1>
+          <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}
+              />
+              {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>
+              )}
+            </div>
+          </div>
+        </div>
+        <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">
+                <ReactPlayer
+                  url={streamUrl}
+                  title="Video stream"
+                  controls={true}
+                  playing={true}
+                  muted={true}
+                  width="100%"
+                  height=""
+                />
+              </div>
+            )}
+            {!streamUrl && (
+              <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>
+        </section>
+
+        <section className="cf2021__notifications space-y-8">
+          <JitsiInviteCard />
+
+          <div className="lg:card lg:elevation-10 joyride-announcements">
+            <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
+            {isAuthenticated && user.role === "chairman" && (
+              <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
+            )}
+          </div>
+        </section>
+
+        {/* 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>
+            </h2>
+            <PostFilters />
+          </div>
+
+          {!programEntry.discussionOpened &&
+            (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
+              <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="mb-8"
+                canAddProposal={
+                  user.role === "member" || user.role === "chairman"
+                }
+              />
+            )}
+
+          <PostsContainer
+            className="container-padding--zero lg:container-padding--auto"
+            showAddPostCta={programEntry.discussionOpened}
+          />
+        </section>
+      </article>
+      <ProgramEntryEditModal
+        isOpen={showProgramEditModal}
+        onConfirm={onEditProgramConfirm}
+        onCancel={onEditProgramCancel}
+        programEntry={programEntry}
+      />
+      <ModalConfirm
+        isOpen={showCloseDiscussion}
+        onConfirm={onCloseDiscussionConfirm}
+        onCancel={onCloseDiscussionCancel}
+        title="Ukončit rozpravu?"
+        yesActionLabel="Ukončit"
+      >
+        Opravdu chcete ukončit rozpravu?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={showOpenDiscussion}
+        onConfirm={onOpenDiscussionConfirm}
+        onCancel={onOpenDiscussionCancel}
+        title="Otevřít rozpravu?"
+        yesActionLabel="Otevřít"
+      >
+        Opravdu chcete otevřít rozpravu k tomuto bodu programu?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={showEndProgramPoint}
+        onConfirm={onEndProgramPointConfirm}
+        onCancel={onEndProgramPointCancel}
+        title="Ukončit bod programu?"
+        yesActionLabel="Ukončit bod programu"
+      >
+        Bod programu <strong>bude ukončen</strong>. Opravdu to chcete?
+      </ModalConfirm>
+    </>
+  );
+};
+
+export default Home;

src/pages/NotFound.jsx

+import React from "react";
+import { Helmet } from "react-helmet-async";
+
+import Button from "components/Button";
+
+const NotFound = () => (
+  <>
+    <Helmet>
+      <title>404ka | CF 2024 | Pirátská strana</title>
+      <meta name="description" content="Tahle stránka tu není." />
+      <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">
+      <h1 className="head-alt-base lg:head-alt-lg mb-8">
+        404ka: tak tahle stránka tu není
+      </h1>
+      <p className="text-base lg:text-xl mb-8">
+        Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což
+        znamená, že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu
+        není. Zkontroluj, zda máš správný odkaz.
+      </p>
+      <Button
+        routerTo="/"
+        className="text-base lg:text-xl"
+        hoverActive
+        fullwidth
+      >
+        Přejít na hlavní stránku
+      </Button>
+    </article>
+  </>
+);
+
+export default NotFound;

src/pages/Program.jsx

+import React from "react";
+import { Helmet } from "react-helmet-async";
+import { Link } from "react-router-dom";
+import { format } from "date-fns";
+
+import { activateProgramPoint } from "actions/program";
+import Button from "components/Button";
+import Chip from "components/Chip";
+import ModalConfirm from "components/modals/ModalConfirm";
+import { useActionState, useItemActionConfirm } from "hooks";
+import { AuthStore, ProgramStore } from "stores";
+
+const Schedule = () => {
+  const { isAuthenticated, user } = AuthStore.useState();
+  const { currentId, scheduleIds, items } = ProgramStore.useState();
+  const [
+    entryToActivate,
+    setEntryToActivate,
+    onActivateConfirm,
+    onActivateCancel,
+  ] = useItemActionConfirm(activateProgramPoint);
+
+  const [activating, activationError] = useActionState(
+    activateProgramPoint,
+    entryToActivate
+  );
+
+  return (
+    <>
+      <Helmet>
+        <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, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          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, 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;
+            const entry = items[id];
+            const htmlContent = entry.htmlContent
+              ? {
+                  __html: entry.htmlContent,
+                }
+              : null;
+            return (
+              <div
+                className="flex flex-col md:flex-row my-4 duration-300 text-black"
+                key={entry.id}
+              >
+                <div className="w-28 md:text-right">
+                  {isCurrent && (
+                    <Chip condensed className="mt-2 mr-2" color="red-600">
+                      Právě probíhá
+                    </Chip>
+                  )}
+                </div>
+                <div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8">
+                  <p className="head-allcaps-2xs md:head-heavy-base">
+                    {format(entry.expectedStartAt, "H:mm")}
+                  </p>
+                  <p className="ml-auto md:ml-0 head-allcaps-2xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
+                    {format(entry.expectedStartAt, "d. M. Y")}
+                  </p>
+                </div>
+                <div className="flex-grow w-full">
+                  <h2 className="head-heavy-xs md:head-heavy-base mb-2">
+                    {isCurrent && <Link to="/">{entry.fullTitle}</Link>}
+                    {!isCurrent && entry.fullTitle}
+                  </h2>
+                  <div className="leading-snug">
+                    <div className="space-x-2">
+                      <strong>Navrhovatel:</strong>
+                      <span>{entry.proposer}</span>
+                    </div>
+                    {entry.speakers && (
+                      <div className="space-x-2">
+                        <strong>Řečníci:</strong>
+                        <span>{entry.speakers}</span>
+                      </div>
+                    )}
+                  </div>
+                  {htmlContent && (
+                    <div
+                      className="mt-2 leading-snug max-w-3xl content-block"
+                      dangerouslySetInnerHTML={htmlContent}
+                    />
+                  )}
+                  {isAuthenticated &&
+                    user.role === "chairman" &&
+                    entry.id !== currentId && (
+                      <div className="mt-4">
+                        <Button
+                          onClick={() => setEntryToActivate(entry)}
+                          color="grey-125"
+                          className="text-xs"
+                          fullwidth
+                        >
+                          Aktivovat tento bod programu
+                        </Button>
+                      </div>
+                    )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <ModalConfirm
+          isOpen={!!entryToActivate}
+          onConfirm={onActivateConfirm}
+          onCancel={onActivateCancel}
+          confirming={activating}
+          error={activationError}
+          title="Aktivovat bod programu?"
+          yesActionLabel="Aktivovat"
+        >
+          Pogramovaný bod{" "}
+          <strong>{entryToActivate && entryToActivate.title}</strong> bude
+          aktivován. Chcete pokračovat?
+        </ModalConfirm>
+      </article>
+    </>
+  );
+};
+
+export default Schedule;

src/pages/Protocol.jsx

+import React, { useCallback, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import useInterval from "@rooks/use-interval";
+
+import { loadProtocol } from "actions/global-info";
+import Button from "components/Button";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
+import { GlobalInfoStore } from "stores";
+
+const Protocol = () => {
+  const { protocolUrl, protocol } = GlobalInfoStore.useState();
+  const [protocolLoading, protocolLoadError] = useActionState(loadProtocol);
+  const [progressPercent, setProgressPercent] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const forceLoad = useCallback(async () => {
+    try {
+      setPaused(true);
+      setProgressPercent(1);
+      await loadProtocol.run();
+    } finally {
+      setPaused(false);
+    }
+  }, [setPaused, setProgressPercent]);
+
+  const tick = useCallback(async () => {
+    if (paused) {
+      return;
+    }
+
+    if (progressPercent % 100 === 0) {
+      forceLoad();
+    } else {
+      setProgressPercent(progressPercent + 1);
+    }
+  }, [forceLoad, paused, progressPercent, setProgressPercent]);
+
+  useInterval(tick, 100, true);
+
+  const htmlContent = protocol
+    ? {
+        __html: protocol,
+      }
+    : null;
+
+  const progressStyle = {
+    position: "absolute",
+    width: `${progressPercent}%`,
+    height: "100%",
+    left: "0",
+    background:
+      "linear-gradient(142deg, rgba(2,0,36,1) 0%, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%)",
+    opacity: "0.4",
+  };
+
+  return (
+    <>
+      <Helmet>
+        <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, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          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, 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">Zápis z jednání</h1>
+
+        <div className="flex items-start">
+          <div className="lg:w-2/3">
+            {!protocolUrl && (
+              <ErrorMessage>Zápis momentálně není k dispozici.</ErrorMessage>
+            )}
+            {protocolLoadError && (
+              <ErrorMessage>
+                Při stahování záznamu z jednání došlo k problému:{" "}
+                {protocolLoadError.toString()}
+              </ErrorMessage>
+            )}
+            {protocolUrl && <></>}
+            {htmlContent && (
+              <div
+                className="leading-tight text-sm lg:text-base content-block"
+                dangerouslySetInnerHTML={htmlContent}
+              ></div>
+            )}
+          </div>
+          <div className="hidden lg:block card elevation-10 w-1/3">
+            <div className="lg:card__body content-block">
+              <h2>Jak to funguje?</h2>
+              <p>
+                Zápis se aktualizuje automaticky každých 10 sekund. Pokud chceš
+                aktualizaci vynutit ručně, můžeš využít tlačítko níže.
+              </p>
+              <Button
+                icon="ico--refresh"
+                loading={protocolLoading}
+                className="btn--fullwidth"
+                onClick={forceLoad}
+                color="black"
+                bodyProps={{
+                  style: {
+                    position: "relative",
+                  },
+                }}
+              >
+                <span style={progressStyle}></span>
+                <span style={{ position: "relative" }}>
+                  {protocolLoading ? "Aktualizace..." : "Aktualizovat"}
+                </span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </article>
+    </>
+  );
+};
+
+export default Protocol;

src/serviceWorker.js

@@ -11,17 +11,17 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    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) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
@@ -31,7 +31,7 @@ export function register(config) {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -42,8 +42,8 @@ export function register(config) {
         // service worker/PWA documentation.
         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'
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://bit.ly/CRA-PWA",
           );
         });
       } else {
@@ -57,21 +57,21 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
           return;
         }
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // 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.'
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA.",
               );
 
               // Execute callback
@@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log("Content is cached for offline use.");
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -93,25 +93,25 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
     });
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
+    headers: { "Service-Worker": "script" },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get("content-type");
       if (
         response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        (contentType != null && contentType.indexOf("javascript") === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -123,18 +123,18 @@ 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.",
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready
-      .then(registration => {
+      .then((registration) => {
         registration.unregister();
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error.message);
       });
   }

src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

src/stores.js

+import memoize from "lodash/memoize";
+import { Store } from "pullstate";
+
+/** @type {CF2021.GlobalInfoStorePayload} */
+const globalInfoStoreInitial = {
+  connectionState: "connecting",
+  onlineMembers: 0,
+  onlineUsers: 0,
+  groupSizeHalf: null,
+  websocketUrl: null,
+  streamUrl: null,
+  protocolUrl: null,
+  protocol: null,
+};
+
+export const GlobalInfoStore = new Store(globalInfoStoreInitial);
+
+/** @type {CF2021.AuthStorePayload} */
+const authStoreInitial = {
+  isAuthenticated: false,
+  showJitsiInvitePopup: false,
+  jitsiPopupDismissed: false,
+};
+
+export const AuthStore = new Store(authStoreInitial);
+
+/** @type {CF2021.ProgramStorePayload} */
+const programStoreInitial = {
+  items: {},
+  currentId: undefined,
+  scheduleIds: [],
+};
+
+export const ProgramStore = new Store(programStoreInitial);
+
+/** @type {CF2021.AnnouncementStorePayload} */
+const announcementStoreInitial = {
+  items: {},
+  itemIds: [],
+};
+
+export const AnnouncementStore = new Store(announcementStoreInitial);
+
+/** @type {CF2021.PostStorePayload} */
+const postStoreInitial = {
+  items: {},
+  itemCount: 0,
+  window: {
+    items: [],
+    itemCount: 0,
+  },
+  filters: {
+    flags: "active",
+    sort: "byScore",
+    type: "all",
+    showPendingProposals: false,
+  },
+};
+
+export const PostStore = new Store(postStoreInitial);
+
+export const getGroupByCode = memoize(
+  (groupMappings, groupCode) => {
+    return groupMappings.find((gm) => gm.code === groupCode);
+  },
+  (groupMappings, groupCode) => [groupMappings, groupCode],
+);
+
+export const getGroupsByCode = memoize((groupMappings, groupCodes) => {
+  return groupCodes.map((code) => getGroupByCode(groupMappings, code));
+});

src/utils.js

+import { parse } from "date-fns";
+import filter from "lodash/filter";
+import pick from "lodash/pick";
+import property from "lodash/property";
+import values from "lodash/values";
+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 seenPostsLSKey = "cf2021_seen_posts";
+export const seenAnnouncementsLSKey = "cf2021_seen_announcements";
+
+/**
+ * Filter & sort collection of posts.
+ * @param {CF2021.PostStoreFilters} filters
+ * @param {CF2021.PostStoreItems} allItems
+ * @returns {CF2021.Post[]}
+ */
+export const filterPosts = (filters, allItems) => {
+  const predicate = {};
+
+  if (filters.flags === "active") {
+    predicate.archived = false;
+  }
+  if (filters.flags === "archived") {
+    predicate.archived = true;
+  }
+
+  if (filters.type === "proposalsOnly") {
+    predicate.type = "procedure-proposal";
+  }
+  if (filters.type === "discussionOnly") {
+    predicate.type = "post";
+  }
+
+  let filteredItems = filter(allItems, predicate);
+
+  if (!filters.showPendingProposals) {
+    filteredItems = filteredItems.filter(
+      (item) => item.type === "post" || item.state !== "pending",
+    );
+  }
+
+  if (filters.sort === "byDate") {
+    return filteredItems.sort((a, b) => b.datetime - a.datetime);
+  }
+
+  return filteredItems.sort((a, b) => b.ranking.score - a.ranking.score);
+};
+
+/**
+ * Update current posts window according to used filters.
+ * @param {CF2021.PostStorePayload} state
+ */
+export const updateWindowPosts = (state) => {
+  state.window.items = filterPosts(state.filters, values(state.items)).map(
+    property("id"),
+  );
+};
+
+/**
+ * Update itemIds from items.
+ * @param {CF2021.AnnouncementStorePayload} state
+ */
+export const syncAnnoucementItemIds = (state) => {
+  state.itemIds = values(state.items)
+    .sort((a, b) => b.datetime - a.datetime)
+    .map((announcement) => announcement.id);
+};
+
+export const postsMyVoteMapping = {
+  0: "none",
+  1: "like",
+  [-1]: "dislike",
+};
+
+export const postsTypeMapping = {
+  0: "procedure-proposal",
+  1: "post",
+};
+
+export const postsTypeMappingRev = {
+  post: 1,
+  "procedure-proposal": 0,
+};
+
+export const postsStateMapping = {
+  0: "pending",
+  1: "announced",
+  2: "accepted",
+  3: "rejected",
+  4: "rejected-by-chairman",
+};
+
+export const postsStateMappingRev = {
+  pending: 0,
+  announced: 1,
+  accepted: 2,
+  rejected: 3,
+  "rejected-by-chairman": 4,
+};
+
+export const announcementTypeMapping = {
+  0: "rejected-procedure-proposal",
+  1: "accepted-procedure-proposal",
+  2: "suggested-procedure-proposal",
+  3: "voting",
+  4: "announcement",
+  5: "user-ban",
+};
+
+export const announcementTypeMappingRev = {
+  "rejected-procedure-proposal": 0,
+  "accepted-procedure-proposal": 1,
+  "suggested-procedure-proposal": 2,
+  voting: 3,
+  announcement: 4,
+  "user-ban": 5,
+};
+
+/**
+ * Parse single post from the API.
+ *
+ * @param {any} rawPost
+ * @returns {CF2021.Post}
+ */
+export const parseRawPost = (rawPost) => {
+  const post = {
+    ...pick(rawPost, ["id", "content"]),
+    author: {
+      ...pick(rawPost.author, ["id", "name", "username", "group"]),
+      isBanned: rawPost.author.is_banned === 1,
+    },
+    contentHtml: markdownConverter.makeHtml(rawPost.content),
+    datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()),
+    historyLog: rawPost.history_log,
+    ranking: {
+      dislikes: rawPost.ranking.dislikes,
+      likes: rawPost.ranking.likes,
+      score: rawPost.ranking.score,
+      myVote: postsMyVoteMapping[rawPost.ranking.my_vote],
+    },
+    type: postsTypeMapping[rawPost.type],
+    modified: Boolean(rawPost.is_changed),
+    archived: Boolean(rawPost.is_archived),
+    hidden: false,
+    seen: isSeen(seenPostsLSKey, rawPost.id),
+  };
+
+  if (post.type === "procedure-proposal") {
+    post.state = postsStateMapping[rawPost.state];
+  }
+
+  return post;
+};
+
+/**
+ * Parse single announcement from the API.
+ *
+ * @param {any} rawAnnouncement
+ * @returns {CF2021.Announcement}
+ */
+export const parseRawAnnouncement = (rawAnnouncement) => {
+  const announcement = {
+    ...pick(rawAnnouncement, ["id", "content", "link"]),
+    contentHtml: markdownConverter.makeHtml(rawAnnouncement.content),
+    datetime: parse(
+      rawAnnouncement.datetime,
+      "yyyy-MM-dd HH:mm:ss",
+      new Date(),
+    ),
+    type: announcementTypeMapping[rawAnnouncement.type],
+    seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
+  };
+
+  return announcement;
+};
+
+export const createSeenWriter = (localStorageKey) => {
+  const queue = new WaitQueue();
+
+  const seenWriterWorker = async () => {
+    const id = await queue.shift();
+    const seen = new Set(
+      (localStorage.getItem(localStorageKey) || "").split(","),
+    );
+
+    seen.add(id);
+
+    localStorage.setItem(localStorageKey, Array.from(seen).join(","));
+
+    setTimeout(seenWriterWorker);
+  };
+
+  seenWriterWorker();
+
+  return {
+    markSeen: (id) => queue.push(id),
+  };
+};
+
+export const isSeen = (localStorageKey, id) => {
+  const val = localStorage.getItem(localStorageKey) || "";
+  return val.indexOf(id) !== -1;
+};

src/ws/connection.js

+import hex from "crypto-js/enc-hex";
+import hmacSHA1 from "crypto-js/hmac-sha1";
+import WaitQueue from "wait-queue";
+
+import { AuthStore, GlobalInfoStore } from "stores";
+
+import { handlers } from "./handlers";
+
+function Worker() {
+  const queue = new WaitQueue();
+
+  const doLoop = async () => {
+    const event = await queue.shift();
+    messageRouter(event);
+    setTimeout(doLoop);
+  };
+
+  const messageRouter = (event) => {
+    console.debug("[ws][worker] New message", event.data);
+
+    try {
+      const data = JSON.parse(event.data);
+
+      if (!data.event) {
+        return console.error("[ws][worker] Missing `event` field");
+      }
+
+      const handlerFn = handlers[data.event];
+
+      if (!handlerFn) {
+        return console.warn(`[ws][worker] Can't handle event '${data.event}'`);
+      }
+
+      handlerFn(data.payload || {});
+    } catch (err) {
+      console.error("[ws][worker] Could not parse message.", err);
+    }
+  };
+
+  return {
+    queue,
+    start: () => {
+      console.debug("[ws][worker] Start processing messages.");
+      doLoop();
+    },
+  };
+}
+
+const buildKeepalivePayload = async () => {
+  const { user } = AuthStore.getRawState();
+  const payload = user && user.id ? user.id.toString() : "";
+  const signature =
+    user && !!user.secret ? hmacSHA1(payload, user.secret) : null;
+
+  return {
+    event: "KEEPALIVE",
+    payload,
+    sig: signature ? hex.stringify(signature) : null,
+  };
+};
+
+export const connect = ({ url, onConnect }) => {
+  return new Promise((resolve, reject) => {
+    const worker = Worker();
+
+    GlobalInfoStore.update((state) => {
+      state.connectionState = "connecting";
+    });
+    const ws = new WebSocket(url);
+
+    let keepAliveInterval;
+    console.log("[ws] Connecting ...");
+
+    ws.onopen = () => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "connected";
+      });
+      console.log("[ws] Connected.");
+
+      const sendKeepalive = async () => {
+        ws.send(JSON.stringify(await buildKeepalivePayload()));
+        console.debug("[ws] Sending keepalive.");
+      };
+
+      sendKeepalive();
+
+      keepAliveInterval = setInterval(sendKeepalive, 15 * 1000);
+
+      const self = { ws, worker, sendKeepalive };
+
+      if (onConnect) {
+        return onConnect(self).then(() => resolve(self));
+      }
+
+      return resolve(self);
+    };
+
+    ws.onmessage = worker.queue.push.bind(worker.queue);
+
+    ws.onclose = (event) => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "offline";
+      });
+      console.log(
+        "[ws] Socket is closed. Reconnect will be attempted in 1 second.",
+        event.reason,
+      );
+
+      clearInterval(keepAliveInterval);
+      setTimeout(() => connect({ url, onConnect }), 1000);
+    };
+
+    ws.onerror = (err) => {
+      console.error(
+        "[ws] Socket encountered error: ",
+        err.message,
+        "Closing socket",
+      );
+      ws.close();
+      reject(err);
+    };
+  });
+};

src/ws/handlers/announcements.js

+import has from "lodash/has";
+
+import { markdownConverter } from "markdown";
+import { AnnouncementStore } from "stores";
+import { parseRawAnnouncement, syncAnnoucementItemIds } from "utils";
+
+export const handleAnnouncementChanged = (payload) => {
+  AnnouncementStore.update((state) => {
+    if (state.items[payload.id]) {
+      if (has(payload, "content")) {
+        state.items[payload.id].content = payload.content;
+        state.items[payload.id].contentHtml = markdownConverter.makeHtml(
+          payload.content,
+        );
+      }
+      if (has(payload, "link")) {
+        state.items[payload.id].link = payload.link;
+      }
+    }
+  });
+};
+
+export const handleAnnouncementCreated = (payload) => {
+  AnnouncementStore.update((state) => {
+    state.items[payload.id] = parseRawAnnouncement(payload);
+    syncAnnoucementItemIds(state);
+  });
+};
+
+export const handleAnnouncementDeleted = (payload) => {
+  AnnouncementStore.update((state) => {
+    delete state.items[payload.id];
+    syncAnnoucementItemIds(state);
+  });
+};

src/ws/handlers/global.js

+import isNumber from "lodash/isNumber";
+
+import { GlobalInfoStore } from "stores";
+
+export const handleOnlineUsersUpdated = (payload) => {
+  GlobalInfoStore.update((state) => {
+    state.onlineUsers = isNumber(payload.all) ? payload.all : 0;
+    state.onlineMembers = isNumber(payload.members) ? payload.members : 0;
+    state.groupSizeHalf = isNumber(payload.group_size_half)
+      ? payload.group_size_half
+      : null;
+  });
+};

src/ws/handlers/index.js

+import {
+  handleAnnouncementChanged,
+  handleAnnouncementCreated,
+  handleAnnouncementDeleted,
+} from "./announcements";
+import { handleOnlineUsersUpdated } from "./global";
+import {
+  handlePostChanged,
+  handlePostCreated,
+  handlePostDeleted,
+  handlePostRanked,
+} from "./posts";
+import { handleProgramEntryChanged } from "./program";
+import {
+  handleUserBanned,
+  handleUserStatus,
+  handleUserUnbanned,
+} from "./users";
+
+export const handlers = {
+  announcement_changed: handleAnnouncementChanged,
+  announcement_created: handleAnnouncementCreated,
+  announcement_deleted: handleAnnouncementDeleted,
+  post_ranked: handlePostRanked,
+  post_changed: handlePostChanged,
+  post_created: handlePostCreated,
+  post_deleted: handlePostDeleted,
+  program_entry_changed: handleProgramEntryChanged,
+  user_banned: handleUserBanned,
+  user_unbanned: handleUserUnbanned,
+  user_status: handleUserStatus,
+  online_users_updated: handleOnlineUsersUpdated,
+};