src/components/home/index.js

+export { default as AlreadyFinished } from "./AlreadyFinished";
+export { default as BreakInProgress } from "./BreakInProgress";
+export { default as NotYetStarted } from "./NotYetStarted";

src/components/mde/MarkdownEditor.css

+.mde-header {
+  background: transparent;
+}
+
+.react-mde .invisible {
+  display: none;
+}
+
+.mde-header {
+  border: 0;
+  align-items: center;
+}
+
+.mde-header .mde-tabs {
+  display: inline-flex;
+  background-color: #000;
+  background-color: rgba(0,0,0,1);
+  padding: .25rem;
+}
+
+.mde-header .mde-tabs button {
+  padding: .25rem 0.25rem;
+  font-family: Bebas Neue,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1.1rem;
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255,255,255,var(--text-opacity));
+  text-align: center;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0;
+  margin: 0 !important;
+  outline: 0;
+}
+
+.mde-header {
+  /* grey-50 */
+  background-color: #f7f7f7;
+}
+
+.mde-header .mde-tabs button.selected {
+  /* blue-300 */
+  background: #027da8;
+  color: #fff;
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  outline: 0;
+}
+
+.mde-header .mde-tabs button:not(.selected):hover {
+  /* grey-500 */
+  background: #303132;
+}
+
+.mde-header .mde-header-item {
+  border: 1px transparent solid;
+  transition: border-color 100ms ease-in-out;
+}
+
+.mde-header ul.mde-header-group li.mde-header-item {
+  margin: 0;
+}
+
+.mde-header .mde-header-item:hover {
+  /* grey-200 */
+  border: 1px #adadad solid;
+}
+
+.mde-text {
+  font-family: monospace;
+}
+
+
+.mde-header ul.mde-header-group {
+  padding: 0;
+}
+
+.mde-header ul.mde-header-group:first-of-type {
+  padding-left: .5rem;
+}
+
+.mde-header ul.mde-header-group + .mde-header-group {
+  margin-left: 0;
+}
+
+@media (min-width: 992px) {
+  .mde-header .mde-tabs button {
+    padding: .5rem 1rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .mde-header ul.mde-header-group {
+    padding: 0 0.5rem;
+  }
+
+  .mde-header ul.mde-header-group + .mde-header-group {
+    margin-left: .5rem;
+  }
+}

src/components/mde/MarkdownEditor.jsx

+import React, { useState } from "react";
+import ReactMde from "react-mde";
+import classNames from "classnames";
+
+import { markdownConverter } from "markdown";
+
+import "react-mde/lib/styles/css/react-mde-toolbar.css";
+import "./MarkdownEditor.css";
+
+const MarkdownEditor = (
+  { value, onChange, error, placeholder = "", ...props },
+  ref
+) => {
+  const [selectedTab, setSelectedTab] = useState("write");
+
+  const classes = {
+    preview: "p-2 content-block text-input text-sm md:text-base",
+    textArea: "p-2 text-input text-sm md:text-base",
+  };
+
+  const l18n = {
+    write: "Psaní",
+    preview: "Náhled",
+    uploadingImage: "Nahrávám obrázek",
+  };
+
+  const childProps = {
+    textArea: {
+      placeholder,
+    },
+  };
+
+  return (
+    <div className={classNames("form-field", { "form-field--error": !!error })}>
+      <ReactMde
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        selectedTab={selectedTab}
+        onTabChange={setSelectedTab}
+        generateMarkdownPreview={(markdown) =>
+          Promise.resolve(markdownConverter.makeHtml(markdown))
+        }
+        classes={classes}
+        l18n={l18n}
+        childProps={childProps}
+        {...props}
+      />
+      {error && <div className="form-field__error">{error}</div>}
+    </div>
+  );
+};
+
+export default React.forwardRef(MarkdownEditor);

src/components/modals/Modal.jsx

+import React from "react";
+import Modal from "react-modal";
+import classNames from "classnames";
+
+const CustomModal = ({ children, containerClassName, ...props }) => (
+  <Modal
+    contentLabel={props.headline}
+    overlayClassName="modal__overlay"
+    className="modal__content"
+    {...props}
+  >
+    <div
+      className={classNames(
+        "modal__container w-full flex items-center justify-center",
+        containerClassName
+      )}
+    >
+      <div className="modal__container-body w-full">{children}</div>
+    </div>
+  </Modal>
+);
+
+export default CustomModal;

src/components/modals/ModalConfirm.jsx

+import React from "react";
+
+import Button from "components/Button";
+
+import ModalWithActions from "./ModalWithActions";
+
+const ModalConfirm = ({
+  title,
+  children,
+  yesActionLabel = "OK",
+  cancelActionLabel = "Zrušit",
+  onCancel,
+  onConfirm,
+  confirming,
+  error,
+  ...props
+}) => {
+  const actions = (
+    <>
+      <Button
+        hoverActive
+        color="blue-300"
+        className="text-sm"
+        onClick={onConfirm}
+        loading={confirming}
+      >
+        {yesActionLabel}
+      </Button>
+      <Button
+        hoverActive
+        color="grey-125"
+        className="text-sm"
+        onClick={onCancel}
+      >
+        {cancelActionLabel}
+      </Button>
+    </>
+  );
+
+  return (
+    <ModalWithActions
+      onClose={onCancel}
+      title={title}
+      error={error}
+      actions={actions}
+      containerClassName="max-w-md"
+      {...props}
+    >
+      {children}
+    </ModalWithActions>
+  );
+};
+
+export default React.memo(ModalConfirm);

src/components/modals/ModalWithActions.jsx

+import React from "react";
+
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardBodyText,
+  CardHeadline,
+} from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+
+import Modal from "./Modal";
+
+const ModalConfirm = ({
+  title,
+  children,
+  actions,
+  error,
+  onClose,
+  ...props
+}) => {
+  return (
+    <Modal onRequestClose={onClose} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>{title}</CardHeadline>
+            <button
+              onClick={onClose}
+              type="button"
+              data-tip="Zavřít"
+              aria-label="Zavřít"
+            >
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <CardBodyText>{children}</CardBodyText>
+          {error && (
+            <ErrorMessage className="mt-2">
+              Při provádění akce došlo k problému: {error}
+            </ErrorMessage>
+          )}
+        </CardBody>
+        <CardActions right className="space-x-1">
+          {actions}
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default React.memo(ModalConfirm);

src/components/onboarding/Beacon.jsx

+import React from "react";
+
+const Beacon = React.forwardRef(({ onClick }, ref) => (
+  <span
+    className="relative inline-flex h-8 w-8"
+    title="Jsi online"
+    ref={ref}
+    onClick={onClick}
+  >
+    <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-red-600"></span>
+    <span className="inline-flex rounded-full w-8 h-8 bg-red-600"></span>
+  </span>
+));
+
+export default Beacon;

src/components/onboarding/index.jsx

+import React from "react";
+
+// import Chip from "components/Chip";
+
+export { default as Beacon } from "./Beacon";
+
+export const steps = [
+  {
+    target: "body",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2024</h1>
+        <p className="leading-snug text-base">
+            Víme, že volebního zasedání se nemohou zúčastnit všichni.
+            Abychom nepřítomným umožnili zasedání lépe sledovat, připravili
+            jsme tuhle aplikaci, která umožňuje zasáhnout do rozpravy.
+            Nejprve si vysvětlíme, jak funguje.
+        </p>
+      </>
+    ),
+    placement: "center",
+    disableBeacon: true,
+  },
+  {
+    target: ".joyride-login",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Jsi člen či příznivec? Přihlaš se</h1>
+        <p className="leading-snug text-base">
+          Pokud jsi člen strany nebo registrovaný příznivec, je rozhodně dobrý
+          nápad se přihlásit. Budeš tak moci přidávat příspěvky v rozpravě a
+          palcovat je.
+        </p>
+      </>
+    ),
+  },
+  {
+    target: ".joyride-player",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Video stream</h1>
+        <p className="leading-snug text-base">
+          Zde můžeš sledovat přímý přenos z jednání. Přenos má drobné zpoždění,
+          tak s tím počítej.
+        </p>
+      </>
+    ),
+    placement: "bottom",
+  },
+  {
+    target: ".joyride-posts",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Příspěvky v rozpravě</h1>
+        <div className="leading-snug text-base space-y-2">
+          <p>
+            Předsedající pro každý bod programu může otevřít či uzavřít
+            rozpravu. V rámci rozpravy je možné přidávat běžné diskusní
+            příspěvky, nebo návrhy postupu.
+          </p>
+          <p>
+            <strong>Běžné příspěvky</strong> se zobrazí ihned po přidání.
+          </p>
+          <p>
+            U příspěvků se též zobrazuje celková míra podpory. Legenda barevného
+            odlišení je následující:
+          </p>
+
+          <ul className="unordered-list unordered-list--dense">
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-green-400 text-white">
+                Zelenou
+              </div>{" "}
+              je označen příspěvek, na kterém je konsensus, nebo takový, který
+              získal podporu skupiny členů.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-yellow-400 text-grey-300">
+                Žlutou
+              </div>{" "}
+              je označen příspěvek, který podporu teprve sbírá.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-red-600 text-white">
+                Červeně
+              </div>{" "}
+              je označen příspěvek, který má spíše negativní odezvu.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-grey-125 text-grey-200">
+                Šedivě
+              </div>{" "}
+              je označen příspěvek, který zatím není ohodnocen.
+            </li>
+          </ul>
+          <p>
+            <strong>Návrhy postupui</strong> po přidání nejprve zkontroluje předsedající a pokud sezná,
+            že je takový návrh přípusný, prohlásí ho za hlasovatelný a předloží k hlasování
+            v plénu. Na základě toho návrh předsedající označí za schválený, nebo za zamítnutý.
+          </p>
+        </div>
+      </>
+    ),
+    placement: "center",
+  },
+  {
+    target: ".joyride-filters",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Filtrování a řazení příspěvků</h1>
+        <div className="leading-snug text-base space-y-2">
+          <p>
+            Příspěvky v rozpravě můžeš filtrovat <strong>podle typu</strong>{" "}
+            (návrhy/příspěvky), <strong>podle stavu</strong>{" "}
+            (aktivní/archivované) a můžeš taky přepínat jejich{" "}
+            <strong>řazení</strong> (podle podpory, podle času přidání).
+          </p>
+        </div>
+      </>
+    ),
+    placement: "bottom",
+  },
+  {
+    target: ".joyride-announcements",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Oblast pro oznámení</h1>
+        <p className="leading-snug text-base">
+          V této oblasti se zobrazují oznámení podstatných událostí v rámci
+          jednání, jako například nové rozhodující hlasování, nebo třeba nový
+          hlasovatelný návrh postupu.
+        </p>
+      </>
+    ),
+    placement: "left",
+  },
+  {
+    target: "body",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">To je vše!</h1>
+        <p className="leading-snug text-base">
+          Ať se ti letošní „CFko“ líbí.
+        </p>
+      </>
+    ),
+    placement: "center",
+  },
+];

src/components/posts/Post.jsx

+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import classNames from "classnames";
+import { format, isToday } from "date-fns";
+
+import Chip from "components/Chip";
+import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
+import PostScore from "components/posts/PostScore";
+import Thumbs from "components/Thumbs";
+
+const Post = ({
+  className,
+  datetime,
+  author,
+  type,
+  ranking,
+  content,
+  modified,
+  seen,
+  archived,
+  state,
+  dimIfArchived = true,
+  currentUser,
+  supportThreshold,
+  canThumb,
+  reportSeen = true,
+  onLike,
+  onDislike,
+  onHide,
+  onBanUser,
+  onUnbanUser,
+  onInviteUser,
+  onAnnounceProcedureProposal,
+  onAcceptProcedureProposal,
+  onRejectProcedureProposal,
+  onRejectProcedureProposalByChairman,
+  onEdit,
+  onArchive,
+  onSeen,
+  ...props
+}) => {
+  const { ref, inView } = useInView({
+    threshold: 0.8,
+    trackVisibility: true,
+    delay: 1000,
+    skip: !reportSeen,
+    triggerOnce: true,
+  });
+
+  useEffect(() => {
+    if (inView && onSeen) {
+      onSeen();
+    }
+  }, [inView, onSeen]);
+
+  const wrapperClassName = classNames(
+    "flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
+    {
+      "bg-yellow-100 bg-opacity-50": !seen,
+      "opacity-25 hover:opacity-100": dimIfArchived && !!archived,
+    },
+    className
+  );
+
+  const labels = [];
+
+  if (type === "post") {
+    labels.push(
+      <Chip
+        key="type__post"
+        condensed
+        color="grey-125"
+        className="text-grey-300"
+      >
+        Příspěvek
+      </Chip>
+    );
+  }
+
+  if (type === "procedure-proposal") {
+    labels.push(
+      <Chip key="type__procedure-proposal" condensed color="cyan-200">
+        Návrh postupu
+      </Chip>
+    );
+
+    labels.push(
+      {
+        pending: (
+          <Chip
+            key="state__pending"
+            condensed
+            color="grey-500"
+            aria-label="Návrh čekající na zpracování"
+          >
+            Čeká na zpracování
+          </Chip>
+        ),
+        announced: (
+          <Chip
+            key="state__announced"
+            condensed
+            color="blue-300"
+            aria-label="Návrh k hlasování"
+          >
+            K hlasování
+          </Chip>
+        ),
+        accepted: (
+          <Chip
+            key="state__accepted"
+            condensed
+            color="green-400"
+            aria-label="Schválený návrh"
+          >
+            Schválený
+          </Chip>
+        ),
+        rejected: (
+          <Chip
+            key="state__rejected"
+            condensed
+            color="red-600"
+            aria-label="Zamítnutý návrh"
+          >
+            Zamítnutý
+          </Chip>
+        ),
+        "rejected-by-chairman": (
+          <Chip
+            key="state__rejected-by-chairmen"
+            condensed
+            color="red-600"
+            aria-label="Návrh zamítnutý předsedajícím"
+          >
+            Zamítnutý předs.
+          </Chip>
+        ),
+      }[state]
+    );
+  }
+
+  if (archived) {
+    labels.push(
+      <Chip
+        key="isArchived"
+        condensed
+        color="grey-125"
+        className="text-grey-300"
+      >
+        Archivovaný
+      </Chip>
+    );
+  }
+
+  const isChairman = currentUser && currentUser.role === "chairman";
+
+  const showAnnounceAction =
+    isChairman && type === "procedure-proposal" && state === "pending";
+  const showAcceptAction =
+    isChairman && type === "procedure-proposal" && state === "announced";
+  const showRejectAction =
+    isChairman && type === "procedure-proposal" && state === "announced";
+  const showRejectByChairmanAction =
+    isChairman &&
+    type === "procedure-proposal" &&
+    ["announced", "pending"].includes(state);
+  const showEditAction =
+    isChairman ||
+    (currentUser && currentUser.id === author.id && !currentUser.isBanned);
+  const showBanAction = isChairman && !author.isBanned;
+  const showUnbanAction = isChairman && author.isBanned;
+  const showInviteAction = isChairman;
+  const showHideAction = isChairman && !archived;
+  const showArchiveAction = isChairman && !archived;
+
+  // Show actions dropdown if any of actions is available.
+  const showActions = [
+    showAnnounceAction,
+    showAcceptAction,
+    showRejectAction,
+    showRejectByChairmanAction,
+    showEditAction,
+    showBanAction,
+    showUnbanAction,
+    showInviteAction,
+    showHideAction,
+    showArchiveAction,
+  ].some((item) => !!item);
+
+  const htmlContent = {
+    __html: content,
+  };
+
+  const thumbsVisible = !archived && (type === "post" || state === "announced");
+
+  return (
+    <div className={wrapperClassName} ref={ref} {...props}>
+      <img
+        src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
+        className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
+        alt={author.name}
+      />
+      <div className="flex-1 overflow-hidden">
+        <div className="mb-1">
+          <div className="flex justify-between items-start xl:items-center">
+            <div className="flex flex-col xl:flex-row xl:items-center">
+              <div className="flex flex-col xl:flex-row xl:items-center">
+                <span className="font-bold">{author.name}</span>
+                <div className="mt-1 xl:mt-0 xl:ml-2 leading-tight">
+                  <span className="text-grey-200 text-xs sm:text-sm">
+                    {author.group}
+                  </span>
+                  <span className="text-grey-200 ml-1 text-xs sm:text-sm">
+                    @{" "}
+                    {format(
+                      datetime,
+                      isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
+                    )}
+                    {modified && (
+                      <span className="text-grey-200 text-xs block md:inline md:ml-2">
+                        (upraveno)
+                      </span>
+                    )}
+                  </span>
+                </div>
+              </div>
+              <div className="hidden lg:flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2 space-x-2">
+                {labels}
+              </div>
+            </div>
+            <div className="flex items-center">
+              {thumbsVisible && (
+                <Thumbs
+                  likes={ranking.likes}
+                  dislikes={ranking.dislikes}
+                  readOnly={!canThumb}
+                  onLike={onLike}
+                  onDislike={onDislike}
+                  myVote={ranking.myVote}
+                />
+              )}
+              <PostScore
+                className="ml-2"
+                postType={type}
+                ranking={ranking}
+                rankingReadonly={!thumbsVisible}
+                supportThreshold={supportThreshold}
+              />
+              {showActions && (
+                <DropdownMenu right className="pl-4 static">
+                  {showAnnounceAction && (
+                    <DropdownMenuItem
+                      onClick={onAnnounceProcedureProposal}
+                      icon="ico--bullhorn"
+                      title="Vyhlásit procedurální návrh"
+                    />
+                  )}
+                  {showAcceptAction && (
+                    <DropdownMenuItem
+                      onClick={onAcceptProcedureProposal}
+                      icon="ico--thumbs-up"
+                      title="Schválit procedurální návrh"
+                    />
+                  )}
+                  {showRejectAction && (
+                    <DropdownMenuItem
+                      onClick={onRejectProcedureProposal}
+                      icon="ico--thumbs-down"
+                      title="Zamítnout procedurální návrh"
+                    />
+                  )}
+                  {showRejectByChairmanAction && (
+                    <DropdownMenuItem
+                      onClick={onRejectProcedureProposalByChairman}
+                      icon="ico--thumbs-down"
+                      title="Zamítnout procedurální návrh předsedajícím"
+                    />
+                  )}
+                  {showEditAction && (
+                    <DropdownMenuItem
+                      onClick={onEdit}
+                      icon="ico--pencil"
+                      title="Upravit příspěvek"
+                    />
+                  )}
+                  {showBanAction && (
+                    <DropdownMenuItem
+                      onClick={onBanUser}
+                      icon="ico--lock"
+                      title="Zablokovat uživatele"
+                    />
+                  )}
+                  {showUnbanAction && (
+                    <DropdownMenuItem
+                      onClick={onUnbanUser}
+                      icon="ico--lock-open"
+                      title="Odblokovat uživatele"
+                    />
+                  )}
+                  {showInviteAction && (
+                    <DropdownMenuItem
+                      onClick={onInviteUser}
+                      icon="ico--phone"
+                      title="Pozvat uživatele do Jitsi"
+                    />
+                  )}
+                  {showHideAction && (
+                    <DropdownMenuItem
+                      onClick={onHide}
+                      icon="ico--eye-off"
+                      title="Skrýt příspěvek"
+                    />
+                  )}
+                  {showArchiveAction && (
+                    <DropdownMenuItem
+                      onClick={onArchive}
+                      icon="ico--drawer"
+                      title="Archivovat příspěvek"
+                    />
+                  )}
+                </DropdownMenu>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2">
+          {labels}
+        </div>
+        <div
+          className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
+          dangerouslySetInnerHTML={htmlContent}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Post);

src/components/posts/PostEditModal.jsx

+import React, { useState } from "react";
+
+import Button from "components/Button";
+import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import MarkdownEditor from "components/mde/MarkdownEditor";
+import Modal from "components/modals/Modal";
+
+const PostEditModal = ({
+  post,
+  onCancel,
+  onConfirm,
+  confirming,
+  error,
+  ...props
+}) => {
+  const [text, setText] = useState(post.content);
+  const [textError, setTextError] = useState(null);
+
+  const onTextInput = (newText) => {
+    setText(newText);
+
+    if (newText !== "") {
+      if (newText.length >= 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
+    }
+  };
+
+  const confirm = (evt) => {
+    evt.preventDefault();
+
+    if (!!text) {
+      onConfirm(text);
+    } else {
+      setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
+    }
+  };
+
+  return (
+    <Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
+      <form onSubmit={confirm}>
+        <Card className="elevation-21">
+          <CardBody>
+            <div className="flex items-center justify-between mb-4">
+              <CardHeadline>Upravit text příspěvku</CardHeadline>
+              <button onClick={onCancel} type="button">
+                <i className="ico--cross"></i>
+              </button>
+            </div>
+            <MarkdownEditor
+              value={text}
+              onChange={onTextInput}
+              error={textError}
+              placeholder="Vyplňte text příspěvku"
+              toolbarCommands={[
+                ["header", "bold", "italic", "strikethrough"],
+                ["link", "quote"],
+                ["unordered-list", "ordered-list"],
+              ]}
+            />
+            {error && (
+              <ErrorMessage className="mt-2">
+                Při editaci došlo k problému: {error}
+              </ErrorMessage>
+            )}
+          </CardBody>
+          <CardActions right className="space-x-1">
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              disabled={textError || confirming}
+              loading={confirming}
+              onClick={confirm}
+            >
+              Uložit
+            </Button>
+            <Button
+              hoverActive
+              color="red-600"
+              className="text-sm"
+              onClick={onCancel}
+            >
+              Zrušit
+            </Button>
+          </CardActions>
+        </Card>
+      </form>
+    </Modal>
+  );
+};
+
+export default PostEditModal;

src/components/posts/PostList.jsx

+import React, { useCallback, useMemo, useState } from "react";
+import classNames from "classnames";
+
+import Post from "./Post";
+
+const PostList = ({
+  className,
+  items,
+  showAddPostCta,
+  currentUser,
+  supportThreshold,
+  canThumb,
+  dimArchived,
+  onLike,
+  onDislike,
+  onHide,
+  onBanUser,
+  onUnbanUser,
+  onInviteUser,
+  onAnnounceProcedureProposal,
+  onAcceptProcedureProposal,
+  onRejectProcedureProposal,
+  onRejectProcedureProposalByChairman,
+  onEdit,
+  onArchive,
+  onSeen,
+}) => {
+  const buildHandler = (responderFn) => (post) => (evt) => {
+    evt.preventDefault();
+    responderFn(post);
+  };
+
+  const windowSize = 20;
+  const [window, setWindow] = useState(windowSize);
+
+  const onPostLike = buildHandler(onLike);
+  const onPostDislike = buildHandler(onDislike);
+  const onPostEdit = buildHandler(onEdit);
+  const onPostHide = buildHandler(onHide);
+  const onPostBanUser = buildHandler(onBanUser);
+  const onPostUnbanUser = buildHandler(onUnbanUser);
+  const onPostInviteUser = buildHandler(onInviteUser);
+  const onPostArchive = buildHandler(onArchive);
+  const onPostAnnounceProcedureProposal = buildHandler(
+    onAnnounceProcedureProposal
+  );
+  const onPostAcceptProcedureProposal = buildHandler(onAcceptProcedureProposal);
+  const onPostRejectProcedureProposal = buildHandler(onRejectProcedureProposal);
+  const onPostRejectProcedureProposalByChairman = buildHandler(
+    onRejectProcedureProposalByChairman
+  );
+
+  const onPostSeen = useCallback(
+    (post) => () => {
+      if (!post.seen) {
+        onSeen(post);
+      }
+
+      // Once last post in window is reached, attempt show more.
+      if (items.indexOf(post) === window - 1) {
+        setWindow(window + windowSize);
+      }
+    },
+    [items, onSeen, window]
+  );
+
+  const windowItems = useMemo(() => {
+    return items.slice(0, window).filter((item) => !item.hidden);
+  }, [items, window]);
+
+  return (
+    <div className={classNames("space-y-px", className)}>
+      {windowItems.map((item, idx) => (
+        <Post
+          key={item.id}
+          datetime={item.datetime}
+          author={item.author}
+          type={item.type}
+          state={item.state}
+          content={item.contentHtml}
+          ranking={item.ranking}
+          modified={item.modified}
+          seen={item.seen}
+          reportSeen={!item.seen || idx === window - 1}
+          archived={item.archived}
+          dimIfArchived={dimArchived}
+          currentUser={currentUser}
+          supportThreshold={supportThreshold}
+          canThumb={canThumb}
+          onLike={onPostLike(item)}
+          onDislike={onPostDislike(item)}
+          onHide={onPostHide(item)}
+          onBanUser={onPostBanUser(item)}
+          onUnbanUser={onPostUnbanUser(item)}
+          onInviteUser={onPostInviteUser(item)}
+          onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)}
+          onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)}
+          onRejectProcedureProposal={onPostRejectProcedureProposal(item)}
+          onRejectProcedureProposalByChairman={onPostRejectProcedureProposalByChairman(
+            item
+          )}
+          onEdit={onPostEdit(item)}
+          onArchive={onPostArchive(item)}
+          onSeen={onPostSeen(item)}
+        />
+      ))}
+      {showAddPostCta && !items.length && (
+        <p className="p-4 lg:p-0 lg:py-3 leading-snug text-sm md:text-base">
+          Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
+          první?
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default PostList;

src/components/posts/PostScore.jsx

+import React from "react";
+import classNames from "classnames";
+
+const PostScore = ({
+  postType,
+  ranking,
+  supportThreshold,
+  rankingReadonly,
+  className,
+}) => {
+  const { score, dislikes } = ranking;
+  const highlight = postType === "procedure-proposal" && !rankingReadonly;
+  const coloring = highlight
+    ? {
+        "bg-red-600 text-white": score < 0,
+        "bg-grey-125 text-grey-200": score === 0 && score < supportThreshold,
+        "bg-yellow-400 text-grey-300":
+          score > 0 && dislikes > 0 && score < supportThreshold,
+        "bg-green-400 text-white":
+          score >= supportThreshold || (score > 0 && dislikes <= 0),
+      }
+    : "bg-grey-125 text-grey-200";
+
+  let title;
+
+  if (postType === "procedure-proposal") {
+    if (rankingReadonly) {
+      title = `Návrh postupu získal podporu ${score} hlasů.`;
+    } else if (dislikes > 0) {
+      if (score < supportThreshold) {
+        title = `Aktuální podpora je ${score} hlasů, pro získání podpory skupiny členů chybí ještě ${
+          supportThreshold - score
+        }.`;
+      } else {
+        title = `Aktuální podpora je ${score} hlasů, což je dostatek pro získání podpory skupiny členů (vyžaduje alespoň ${supportThreshold} hlasů).`;
+      }
+    } else {
+      title = `Příspěvek získal ${score} hlasů bez jakýchkoliv hlasů proti a má tedy konkludentní podporu.`;
+    }
+  } else {
+    title = `Příspěvek získal podporu ${score} hlasů.`;
+  }
+
+  return (
+    <span
+      className={classNames(
+        "p-1 text-sm flex items-center space-x-1",
+        coloring,
+        className
+      )}
+      style={{ cursor: "help" }}
+      aria-label={title}
+      data-tip={title}
+      data-type="dark"
+      data-place="top"
+    >
+      <i className="ico--power" />
+      <span className="font-bold">{score}</span>
+    </span>
+  );
+};
+
+export default React.memo(PostScore);

src/components/posts/RejectPostModalConfirm.jsx

+import React from "react";
+
+import Button from "components/Button";
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardBodyText,
+  CardHeadline,
+} from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+
+import Modal from "./Modal";
+
+const RejectPostModalConfirm = ({
+  title,
+  children,
+  yesActionLabel = "OK",
+  yesAndArchiveActionLabel = "OK",
+  cancelActionLabel = "Zrušit",
+  onCancel,
+  onConfirm,
+  onConfirmAndArchive,
+  confirming,
+  error,
+  ...props
+}) => {
+  return (
+    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>{title}</CardHeadline>
+            <button onClick={onCancel} type="button">
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <CardBodyText>{children}</CardBodyText>
+          {error && (
+            <ErrorMessage className="mt-2">
+              Při provádění akce došlo k problému: {error}
+            </ErrorMessage>
+          )}
+        </CardBody>
+        <CardActions right className="space-x-1">
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={onConfirm}
+            loading={confirming}
+          >
+            {yesActionLabel}
+          </Button>
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={onConfirm}
+            loading={confirming}
+          >
+            {yesAndArchiveActionLabel}
+          </Button>
+          <Button
+            hoverActive
+            color="red-600"
+            className="text-sm"
+            onClick={onCancel}
+          >
+            {cancelActionLabel}
+          </Button>
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default React.memo(RejectPostModalConfirm);

src/components/program/ProgramEntryEditModal.jsx

+import React, { useState } from "react";
+
+import Button from "components/Button";
+import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
+import Modal from "components/modals/Modal";
+
+const ProgramEntryEditModal = ({
+  programEntry,
+  onCancel,
+  onConfirm,
+  ...props
+}) => {
+  const [text, setText] = useState(programEntry.title);
+
+  const onTextInput = (evt) => {
+    setText(evt.target.value);
+  };
+
+  const confirm = (evt) => {
+    if (!!text) {
+      onConfirm(text);
+    }
+  };
+
+  return (
+    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>Upravit název programového bodu</CardHeadline>
+            <button onClick={onCancel}>
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <div className="form-field">
+            <label className="form-field__label" htmlFor="field">
+              Nový název
+            </label>
+            <div className="form-field__wrapper form-field__wrapper--shadowed">
+              <input
+                type="text"
+                className="text-input form-field__control"
+                value={text}
+                onChange={onTextInput}
+                placeholder="Vyplňte nový název"
+              />
+            </div>
+          </div>
+        </CardBody>
+        <CardActions right className="space-x-1">
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={confirm}
+          >
+            Uložit
+          </Button>
+          <Button
+            hoverActive
+            color="red-600"
+            className="text-sm"
+            onClick={onCancel}
+          >
+            Zrušit
+          </Button>
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default ProgramEntryEditModal;

src/containers/AddAnnouncementForm.jsx

+import React, { useState } from "react";
+import classNames from "classnames";
+
+import { addAnnouncement } from "actions/announcements";
+import Button from "components/Button";
+import ErrorMessage from "components/ErrorMessage";
+import MarkdownEditor from "components/mde/MarkdownEditor";
+import { useActionState } from "hooks";
+import { urlRegex } from "utils";
+
+const AddAnnouncementForm = ({ className }) => {
+  const [text, setText] = useState("");
+  const [link, setLink] = useState("");
+  const [textError, setTextError] = useState(null);
+  const [linkError, setLinkError] = useState(null);
+  const [type, setType] = useState("announcement");
+
+  const [adding, addingError] = useActionState(addAnnouncement, {
+    content: text,
+    link,
+    type,
+  });
+
+  const onTextInput = (newText) => {
+    setText(newText);
+
+    if (newText !== "") {
+      if (newText.length > 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
+    }
+  };
+
+  const onLinkInput = (newLink) => {
+    setLink(newLink);
+
+    if (!!newLink) {
+      if (newLink.length > 1024) {
+        setLinkError("Maximální délka URL je 256 znaků.");
+      } else {
+        setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
+      }
+    }
+  };
+
+  const onAdd = async (evt) => {
+    evt.preventDefault();
+
+    let preventAction = false;
+    const payload = {
+      content: text,
+      type,
+    };
+
+    if (!text) {
+      setTextError("Před přidáním oznámení nezapomeňte vyplnit jeho obsah.");
+      preventAction = true;
+    } else if (!!text && text.length > 1024) {
+      setTextError("Maximální délka oznámení je 1024 znaků.");
+      preventAction = true;
+    }
+
+    if (type === "voting" && !link) {
+      setLinkError("Zadejte platnou URL.");
+      preventAction = true;
+    } else {
+      payload.link = link;
+    }
+
+    if (preventAction) {
+      return;
+    }
+
+    const result = await addAnnouncement.run({ content: text, link, type });
+
+    if (!result.error) {
+      setText("");
+      setLink("");
+      setTextError(null);
+      setLinkError(null);
+    }
+  };
+
+  return (
+    <form className={className} onSubmit={onAdd}>
+      {addingError && (
+        <ErrorMessage>
+          Při přidávání oznámení došlo k problému: {addingError}.
+        </ErrorMessage>
+      )}
+      <div className="grid grid-cols-1 gap-4">
+        <div
+          className="form-field"
+          onChange={(evt) => setType(evt.target.value)}
+        >
+          <div className="form-field__wrapper text-sm">
+            <div className="radio form-field__control">
+              <label>
+                <input
+                  type="radio"
+                  name="announcementType"
+                  value="announcement"
+                  defaultChecked
+                />
+                <span>Oznámení</span>
+              </label>
+            </div>
+
+            <div className="radio form-field__control">
+              <label>
+                <input type="radio" name="announcementType" value="voting" />
+                <span>Rozhodující hlasování</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <MarkdownEditor
+          value={text}
+          onChange={onTextInput}
+          error={textError}
+          placeholder="Vyplňte text oznámení"
+          toolbarCommands={[
+            ["bold", "italic", "strikethrough"],
+            ["link", "unordered-list", "ordered-list"],
+          ]}
+          minEditorHeight={100}
+        />
+
+        <div
+          className={classNames("form-field", {
+            hidden: type !== "voting",
+            "form-field--error": !!linkError,
+          })}
+        >
+          <div className="form-field__wrapper form-field__wrapper--shadowed">
+            <input
+              type="text"
+              className="text-input text-sm text-input--has-addon-l form-field__control"
+              value={link}
+              placeholder="URL hlasování"
+              onChange={(evt) => onLinkInput(evt.target.value)}
+            />
+            <div className="text-input-addon text-input-addon--l order-first">
+              <i className="ico--link"></i>
+            </div>
+          </div>
+          {!!linkError && <div className="form-field__error">{linkError}</div>}
+        </div>
+      </div>
+
+      <Button
+        type="submit"
+        className="text-sm mt-4"
+        hoverActive
+        loading={adding}
+        disabled={textError || linkError || adding}
+        fullwidth
+      >
+        Přidat oznámení
+      </Button>
+    </form>
+  );
+};
+
+export default AddAnnouncementForm;

src/containers/AddPostForm.jsx

+import React, { useCallback, useRef, useState } from "react";
+import useOutsideClick from "@rooks/use-outside-click";
+import useTimeout from "@rooks/use-timeout";
+import classNames from "classnames";
+
+import { addPost, addProposal } from "actions/posts";
+import Button from "components/Button";
+import { Card, CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import MarkdownEditor from "components/mde/MarkdownEditor";
+import { useActionState } from "hooks";
+
+const AddPostForm = ({ className, canAddProposal }) => {
+  const cardRef = useRef();
+  const editorRef = useRef();
+  const [expanded, setExpanded] = useState(false);
+  const [text, setText] = useState("");
+  const [showAddConfirm, setShowAddConfirm] = useState(false);
+  const [type, setType] = useState("post");
+  const [error, setError] = useState(null);
+  const [addingPost, addingPostError] = useActionState(addPost, {
+    content: text,
+  });
+  const [addingProposal, addingProposalError] = useActionState(addProposal, {
+    content: text,
+  });
+
+  const apiError = addingPostError || addingProposalError;
+  const is429ApiError =
+    apiError &&
+    apiError.toString().indexOf("Unexpected status code 429") !== -1;
+
+  const onOutsideClick = useCallback(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+
+  const onWrite = useCallback(
+    (evt) => {
+      setShowAddConfirm(false);
+
+      if (!expanded) {
+        setExpanded(true);
+        setTimeout(() => {
+          if (
+            editorRef.current &&
+            editorRef.current.finalRefs.textarea.current
+          ) {
+            editorRef.current.finalRefs.textarea.current.focus();
+          }
+        }, 0);
+      }
+    },
+    [setExpanded, expanded, setShowAddConfirm]
+  );
+
+  const hideAddConfirm = useCallback(() => {
+    setShowAddConfirm(false);
+  }, [setShowAddConfirm]);
+
+  useOutsideClick(cardRef, onOutsideClick);
+
+  const { start: enqueueHideAddConfirm } = useTimeout(hideAddConfirm, 2000);
+
+  const onTextInput = (newText) => {
+    setText(newText);
+
+    if (newText !== "") {
+      if (newText.length >= 1024) {
+        setError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setError(null);
+      }
+    }
+  };
+
+  const onAdd = async (evt) => {
+    evt.preventDefault();
+
+    if (!!text) {
+      if (!error) {
+        const result = await (type === "post" ? addPost : addProposal).run({
+          content: text,
+        });
+
+        if (!result.error) {
+          setText("");
+          setExpanded(false);
+          setShowAddConfirm(true);
+          enqueueHideAddConfirm();
+        }
+      }
+    } else {
+      setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
+    }
+  };
+
+  const wrapperClass = classNames(
+    className,
+    "hover:elevation-16 transition duration-500",
+    {
+      "elevation-4 cursor-text": !expanded && !showAddConfirm,
+      "lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
+    }
+  );
+
+  return (
+    <Card className={wrapperClass} ref={cardRef}>
+      <span
+        className={classNames("alert items-center transition duration-500", {
+          "alert--success": showAddConfirm,
+          "alert--light": !showAddConfirm,
+          hidden: expanded,
+        })}
+        onClick={onWrite}
+      >
+        <i
+          className={classNames("alert__icon text-lg mr-4", {
+            "ico--checkmark": showAddConfirm,
+            "ico--pencil": !showAddConfirm,
+          })}
+        />
+        {showAddConfirm && <span>Příspěvek byl přidán.</span>}
+        {!showAddConfirm && <span>Napiš nový příspěvek ...</span>}
+      </span>
+      <CardBody
+        className={
+          "p-4 lg:p-8 " + (showAddConfirm || !expanded ? "hidden" : "")
+        }
+      >
+        <form className="space-y-4" onSubmit={onAdd}>
+          {apiError && is429ApiError && (
+            <div className="alert alert--warning">
+              <i className="alert__icon ico--clock text-lg" />
+              <span>
+                <strong>Zpomal!</strong> Další příspěvek můžeš přidat nejdříve
+                po 1 minutě od přidání posledního.
+              </span>
+            </div>
+          )}
+          {apiError && !is429ApiError && (
+            <ErrorMessage>
+              Při přidávání příspěvku došlo k problému: {apiError}.
+            </ErrorMessage>
+          )}
+
+          <MarkdownEditor
+            ref={editorRef}
+            value={text}
+            onChange={onTextInput}
+            error={error}
+            placeholder="Vyplňte text vašeho příspěvku"
+            toolbarCommands={[
+              ["header", "bold", "italic", "strikethrough"],
+              ["link", "quote"],
+              ["unordered-list", "ordered-list"],
+            ]}
+          />
+
+          {canAddProposal && (
+            <div
+              className="form-field"
+              onChange={(evt) => setType(evt.target.value)}
+            >
+              <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
+                <div className="radio form-field__control">
+                  <label>
+                    <input
+                      type="radio"
+                      name="postType"
+                      value="post"
+                      defaultChecked
+                    />
+                    <span className="text-sm sm:text-base">
+                      Přidávám <strong>běžný příspěvek</strong>
+                    </span>
+                  </label>
+                </div>
+
+                <div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
+                  <label>
+                    <input
+                      type="radio"
+                      name="postType"
+                      value="procedure-proposal"
+                    />
+                    <span className="text-sm sm:text-base">
+                      Přidávám <strong>návrh postupu</strong>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {type === "procedure-proposal" && (
+            <p className="alert alert--light text-sm">
+              <i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
+              <span>
+                Návrh postupu se v rozpravě zobrazí až poté, co předsedající{" "}
+                <strong>posoudí jeho přijatelnost</strong>. Po odeslání proto
+                nepanikař, že jej hned nevidíš.
+              </span>
+            </p>
+          )}
+
+          <div className="space-x-4">
+            <Button
+              type="submit"
+              disabled={error || addingPost || addingProposal}
+              loading={addingPost || addingProposal}
+              fullwidth
+              hoverActive
+              className="text-sm xl:text-base"
+            >
+              {type === "post" && "Přidat příspěvek"}
+              {type === "procedure-proposal" && "Navrhnout postup"}
+            </Button>
+
+            <span className="text-sm text-grey-200 hidden lg:inline">
+              Pro pokročilejší formátování můžete používat{" "}
+              <a
+                href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
+                className="underline"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                Markdown
+              </a>
+              .
+            </span>
+          </div>
+        </form>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default AddPostForm;

src/containers/AnnoucementsContainer.jsx

+import React from "react";
+
+import {
+  deleteAnnouncement,
+  loadAnnouncements,
+  markSeen,
+  updateAnnouncement,
+} from "actions/announcements";
+import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
+import AnnouncementList from "components/annoucements/AnnouncementList";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import ModalConfirm from "components/modals/ModalConfirm";
+import { useItemActionConfirm } from "hooks";
+import { AnnouncementStore, AuthStore } from "stores";
+
+const AnnoucementsContainer = ({ className }) => {
+  const { 2: loadResult } = loadAnnouncements.useWatch();
+
+  const [
+    itemToDelete,
+    setItemToDelete,
+    onDeleteConfirm,
+    onDeleteCancel,
+    deleteState,
+  ] = useItemActionConfirm(deleteAnnouncement);
+
+  const [
+    itemToEdit,
+    setItemToEdit,
+    onEditConfirm,
+    onEditCancel,
+    editState,
+  ] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
+    item,
+    payload,
+  }));
+
+  const { isAuthenticated, user } = AuthStore.useState();
+  const items = AnnouncementStore.useState((state) =>
+    state.itemIds.map((id) => state.items[id])
+  );
+
+  return (
+    <div className={className}>
+      {loadResult && loadResult.error && (
+        <CardBody>
+          <ErrorMessage>
+            Oznámení se nepodařilo načíst: {loadResult.message}
+          </ErrorMessage>
+        </CardBody>
+      )}
+      <AnnouncementList
+        items={items}
+        canRunActions={isAuthenticated && user.role === "chairman"}
+        onDelete={setItemToDelete}
+        onEdit={setItemToEdit}
+        onSeen={markSeen}
+      />
+      <ModalConfirm
+        isOpen={!!itemToDelete}
+        onConfirm={onDeleteConfirm}
+        onCancel={onDeleteCancel}
+        confirming={deleteState.loading}
+        error={deleteState.error}
+        title="Opravdu smazat?"
+        yesActionLabel="Smazat"
+      >
+        Tato akce je nevratná. Opravdu chcete toto oznámení smazat?
+      </ModalConfirm>
+      {itemToEdit && (
+        <AnnouncementEditModal
+          isOpen={true}
+          announcement={itemToEdit}
+          onConfirm={onEditConfirm}
+          onCancel={onEditCancel}
+          confirming={editState.loading}
+          error={editState.error}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AnnoucementsContainer;

src/containers/GlobalStats.jsx

+import React from "react";
+import { Link } from "react-router-dom";
+import { format, isToday } from "date-fns";
+import pick from "lodash/pick";
+
+import { GlobalInfoStore, ProgramStore } from "stores";
+
+const GlobalStats = () => {
+  const {
+    onlineUsers,
+    onlineMembers,
+    groupSizeHalf,
+  } = GlobalInfoStore.useState((state) =>
+    pick(state, ["onlineUsers", "onlineMembers", "groupSizeHalf"])
+  );
+  const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
+    pick(state, ["currentId", "scheduleIds", "items"])
+  );
+
+  const nextProgramEntryId = scheduleIds
+    ? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
+    : null;
+
+  const nextProgramEntry = nextProgramEntryId
+    ? items[nextProgramEntryId]
+    : null;
+
+  const nextProgramEntryCaption = nextProgramEntry
+    ? `${nextProgramEntry.title} @ ${format(
+        nextProgramEntry.expectedStartAt,
+        isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
+      )}`
+    : null;
+
+  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
+        data-tip="Počet přihlášených členů Pirátské strany."
+        data-tip-at="bottom"
+      >
+        <strong>{onlineMembers}</strong>{" "}
+        <span>
+          {onlineMembers === 1 && "člen online"}
+          {onlineMembers > 1 && onlineMembers <= 4 && "členové online"}
+          {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
+        </span>
+      </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
+          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>
+      )}
+      {nextProgramEntry && (
+        <div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
+          Následuje:{" "}
+          <Link
+            to="/program"
+            className="font-bold"
+            aria-label={nextProgramEntryCaption}
+            data-tip={"Následuje bod " + nextProgramEntryCaption}
+            data-tip-at="bottom"
+          >
+            {nextProgramEntryCaption}
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GlobalStats;

src/containers/JitsiInviteCard.jsx

+import React from "react";
+
+import { loadMe } from "actions/users";
+import Button from "components/Button";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
+import { AuthStore } from "stores";
+
+const JitsiInviteCard = () => {
+
+  // docasne zablokovano
+  return null;
+
+  const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
+  const [loading, errorMessage] = useActionState(loadMe);
+
+  const openJitsiWindow = async () => {
+    const result = await loadMe.run();
+
+    if (!result.error) {
+      window.open(result.payload.jitsi_url);
+    }
+
+    AuthStore.update((state) => {
+      state.jitsiPopupDismissed = true;
+    });
+  };
+
+  const dismissPopup = () => {
+    AuthStore.update((state) => {
+      state.jitsiPopupDismissed = true;
+    });
+  };
+
+  if (!showJitsiInvitePopup) {
+    return null;
+  }
+
+  if (jitsiPopupDismissed) {
+    return (
+      <Button
+        color="violet-500"
+        className="btn--fullwidth"
+        onClick={openJitsiWindow}
+        loading={loading}
+        icon="ico--jitsi"
+      >
+        Připojit se k Jitsi
+      </Button>
+    );
+  }
+
+  return (
+    <div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
+      <i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
+      <CardBody className="p-4 lg:p-8 text-white relative z-10">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="head-heavy-xs">
+            <span>Pozvánka do Jitsi</span>
+          </h2>
+          <button
+            type="button"
+            onClick={dismissPopup}
+            aria-label="Zavřít"
+            data-tip="Zavřít"
+          >
+            <i className="ico--cross"></i>
+          </button>
+        </div>
+        {errorMessage && (
+          <ErrorMessage>
+            Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
+          </ErrorMessage>
+        )}
+        <p className="leading-snug text-sm mb-4">
+          Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
+          celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
+        </p>
+        <Button
+          color="violet-500"
+          className="btn--fullwidth"
+          onClick={openJitsiWindow}
+          loading={loading}
+        >
+          Připojit se k Jitsi
+        </Button>
+      </CardBody>
+    </div>
+  );
+};
+
+export default JitsiInviteCard;

src/containers/PostFilters.jsx

+import React from "react";
+
+import Dropdown from "components/Dropdown";
+import { PostStore } from "stores";
+import { updateWindowPosts } from "utils";
+
+const PostFilters = () => {
+  const filters = PostStore.useState((state) => state.filters);
+
+  const flagsOptions = [
+    { title: "Vše", value: "all" },
+    { title: "Jen aktivní", value: "active" },
+    { title: "Jen archivované", value: "archived" },
+  ];
+  const sortOptions = [
+    { title: "Podle času", value: "byDate" },
+    { title: "Podle podpory", value: "byScore" },
+  ];
+  const typeOptions = [
+    { title: "Návrhy i příspěvky", value: "all" },
+    { title: "Jen návrhy", value: "proposalsOnly" },
+    { title: "Jen příspěvky", value: "discussionOnly" },
+  ];
+
+  const setFilter = (prop, newValue) => {
+    PostStore.update((state) => {
+      state.filters[prop] = newValue;
+      state.window.itemCount = state.window.items.length;
+
+      updateWindowPosts(state);
+    });
+  };
+
+  const onFlagsChange = (newValue) => setFilter("flags", newValue);
+  const onSortChange = (newValue) => setFilter("sort", newValue, false);
+  const onTypeChange = (newValue) => setFilter("type", newValue);
+
+  return (
+    <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
+      <div className="-mx-1 joyride-filters">
+        <Dropdown
+          value={filters.flags}
+          onChange={onFlagsChange}
+          options={flagsOptions}
+          className="text-xs ml-1 mt-2 xl:mt-0"
+        />
+        <Dropdown
+          value={filters.sort}
+          onChange={onSortChange}
+          options={sortOptions}
+          className="text-xs ml-1 mt-2 xl:mt-0"
+        />
+        <Dropdown
+          value={filters.type}
+          onChange={onTypeChange}
+          options={typeOptions}
+          className="text-xs ml-1 mt-2 xl:mt-0"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PostFilters;