Compare revisions

9f9e00fc · 9f9e00fc · 9f9e00fc · 9f9e00fc · 9f9e00fc · 9f9e00fc
--- a/src/actions/program.js
+++ b/src/actions/program.js
@@ -4,7 +4,7 @@ import pick from "lodash/pick";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
@@ -13,7 +13,7 @@ import { loadPosts } from "./posts";
 export const loadProgram = createAsyncAction(
  async () => {
    try {
-      const resp = await fetch("/program");
+      const resp = await fetchApi("/program");
      const mappings = await resp.json();
      return successResult(mappings);
    } catch (err) {
@@ -49,17 +49,17 @@ export const loadProgram = createAsyncAction(
                expectedStartAt: parse(
                  entry.expected_start_at,
                  "yyyy-MM-dd HH:mm:ss",
-                  new Date()
+                  new Date(),
                ),
                expectedFinishAt: entry.expected_finish_at
                  ? parse(
                      entry.expected_finish_at,
                      "yyyy-MM-dd HH:mm:ss",
-                      new Date()
+                      new Date(),
                    )
                  : undefined,
              };
-            }
+            },
          )
          .sort((a, b) => a.expectedStartAt - b.expectedStartAt);
@@ -75,7 +75,7 @@ export const loadProgram = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
 /**
@@ -87,7 +87,7 @@ export const renameProgramPoint = createAsyncAction(
      const body = JSON.stringify({
        title: newTitle,
      });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
        method: "PUT",
        body,
        expectedStatus: 204,
@@ -108,7 +108,7 @@ export const renameProgramPoint = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
 /**
@@ -124,7 +124,7 @@ export const endProgramPoint = createAsyncAction(
      const body = JSON.stringify({
        is_live: false,
      });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
        method: "PUT",
        body,
        expectedStatus: 204,
@@ -142,7 +142,7 @@ export const endProgramPoint = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
 /**
@@ -158,7 +158,7 @@ export const activateProgramPoint = createAsyncAction(
      const body = JSON.stringify({
        is_live: true,
      });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
        method: "PUT",
        body,
        expectedStatus: 204,
@@ -179,7 +179,7 @@ export const activateProgramPoint = createAsyncAction(
        loadPosts.run({}, { respectCache: false });
      }
    },
-  }
+  },
 );
 /**
@@ -195,7 +195,7 @@ export const openDiscussion = createAsyncAction(
      const body = JSON.stringify({
        discussion_opened: true,
      });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
        method: "PUT",
        body,
        expectedStatus: 204,
@@ -215,7 +215,7 @@ export const openDiscussion = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
 /**
@@ -227,7 +227,7 @@ export const closeDiscussion = createAsyncAction(
      const body = JSON.stringify({
        discussion_opened: false,
      });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
        method: "PUT",
        body,
        expectedStatus: 204,
@@ -247,5 +247,5 @@ export const closeDiscussion = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
--- a/src/actions/users.js
+++ b/src/actions/users.js
+import * as Sentry from "@sentry/react";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
-import { fetch } from "api";
+import { fetchApi } from "api";
-import { AuthStore } from "stores";
+import keycloak from "keycloak";
+import { AuthStore, PostStore } from "stores";
+import { updateWindowPosts } from "utils";
 export const loadMe = createAsyncAction(
  /**
@@ -9,7 +12,7 @@ export const loadMe = createAsyncAction(
   */
  async () => {
    try {
-      const response = await fetch(`/users/me`, {
+      const response = await fetchApi(`/users/me`, {
        method: "GET",
        expectedStatus: 200,
      });
@@ -32,7 +35,7 @@ export const loadMe = createAsyncAction(
        });
      }
    },
-  }
+  },
 );
 export const ban = createAsyncAction(
@@ -41,7 +44,7 @@ export const ban = createAsyncAction(
   */
  async (user) => {
    try {
-      await fetch(`/users/${user.id}/ban`, {
+      await fetchApi(`/users/${user.id}/ban`, {
        method: "PATCH",
        expectedStatus: 204,
      });
@@ -49,7 +52,7 @@ export const ban = createAsyncAction(
    } catch (err) {
      return errorResult([], err.toString());
    }
-  }
+  },
 );
 export const unban = createAsyncAction(
@@ -58,7 +61,7 @@ export const unban = createAsyncAction(
   */
  async (user) => {
    try {
-      await fetch(`/users/${user.id}/unban`, {
+      await fetchApi(`/users/${user.id}/unban`, {
        method: "PATCH",
        expectedStatus: 204,
      });
@@ -66,7 +69,7 @@ export const unban = createAsyncAction(
    } catch (err) {
      return errorResult([], err.toString());
    }
-  }
+  },
 );
 export const inviteToJitsi = createAsyncAction(
@@ -78,7 +81,7 @@ export const inviteToJitsi = createAsyncAction(
      const body = JSON.stringify({
        allowed: true,
      });
-      await fetch(`/users/${user.id}/jitsi`, {
+      await fetchApi(`/users/${user.id}/jitsi`, {
        method: "PATCH",
        body,
        expectedStatus: 204,
@@ -87,5 +90,36 @@ export const inviteToJitsi = createAsyncAction(
    } catch (err) {
      return errorResult([], err.toString());
    }
+  },
+);
+export const refreshAccessToken = async () => {
+  const { isAuthenticated } = AuthStore.getRawState();
+  if (!isAuthenticated) {
+    return;
  }
+  try {
+    await keycloak.updateToken(60);
+    console.info("[auth] access token refreshed");
+  } catch (exc) {
+    console.warn(
+      "[auth] could not refresh the access token, refresh token possibly expired, logging out",
    );
+    Sentry.setUser(null);
+    AuthStore.update((state) => {
+      state.isAuthenticated = false;
+      state.user = null;
+      state.showJitsiInvitePopup = false;
+      state.jitsiPopupDimissed = false;
+    });
+    PostStore.update((state) => {
+      state.filters.showPendingProposals = false;
+      updateWindowPosts(state);
+    });
+  }
+};
--- a/src/api.js
+++ b/src/api.js
-import baseFetch from "unfetch";
 import { AuthStore } from "./stores";
-export const fetch = async (
+export const fetchApi = async (
  url,
-  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {}
+  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
 ) => {
  const { isAuthenticated, user } = AuthStore.getRawState();
@@ -16,10 +14,11 @@ export const fetch = async (
    headers["Content-Type"] = "application/json";
  }
-  const response = await baseFetch(process.env.REACT_APP_API_BASE_URL + url, {
+  const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
    body,
    method,
    headers,
+    redirect: "follow",
  });
  if (!!expectedStatus && response.status !== expectedStatus) {

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

--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -7,7 +7,7 @@ import classNames from "classnames";
 import Button from "components/Button";
 import { AuthStore, GlobalInfoStore } from "stores";
-const Navbar = () => {
+const Navbar = ({ onGetHelp }) => {
  const { innerWidth } = useWindowSize();
  const [showMenu, setShowMenu] = useState();
  const { keycloak } = useKeycloak();
@@ -36,10 +36,12 @@ const Navbar = () => {
  };
  const connectionIndicator = (
-    <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+    <div className="inline-flex items-center">
      <span
        className="relative inline-flex h-4 w-4 mr-4"
-        title={connectionStateCaption}
+        data-tip={connectionStateCaption}
+        data-tip-at="left"
+        aria-label={connectionStateCaption}
      >
        <span
          className={classNames(
@@ -75,7 +77,7 @@ const Navbar = () => {
            to="/"
            className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
          >
-            Celostátní fórum 2021
+            Celostátní fórum 2024
          </NavLink>
        </div>
        <div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
@@ -107,8 +109,10 @@ const Navbar = () => {
                </li>
              </ul>
            </div>
-            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
+            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
+              <div className="order-last lg:order-first lg:mr-8">
                {connectionIndicator}
+              </div>
              {!isAuthenticated && (
                <Button className="btn--white joyride-login" onClick={login}>
                  Přihlásit se
@@ -126,7 +130,9 @@ const Navbar = () => {
                  <button
                    onClick={logout}
                    className="text-grey-200 hover:text-white"
-                    title="Odhlásit se"
+                    aria-label="Odhlásit se"
+                    data-tip="Odhlásit se"
+                    data-tip-at="bottom"
                  >
                    <i className="ico--log-out"></i>
                  </button>

--- a/src/components/annoucements/AnnouncementEditModal.jsx
+++ b/src/components/annoucements/AnnouncementEditModal.jsx
@@ -78,7 +78,7 @@ const AnnouncementEditModal = ({
  return (
    <Modal containerClassName="max-w-lg" onRequestClose={onCancel} {...props}>
      <form onSubmit={confirm}>
-        <Card>
+        <Card className="elevation-21">
          <CardBody>
            <div className="flex items-center justify-between mb-4">
              <CardHeadline>Upravit oznámení</CardHeadline>

--- a/src/components/cards/Card.jsx
+++ b/src/components/cards/Card.jsx
 import React from "react";
 import classNames from "classnames";
-const Card = ({ children, elevation = 21, className }) => {
+const Card = ({ children, className }, ref) => {
-  const cls = classNames("card", `elevation-${elevation}`, className);
+  const cls = classNames("card", className);
-  return <div className={cls}>{children}</div>;
+  return (
+    <div className={cls} ref={ref}>
+      {children}
+    </div>
+  );
 };
-export default Card;
+export default React.forwardRef(Card);
--- a/src/components/cards/CardBody.jsx
+++ b/src/components/cards/CardBody.jsx
 import React from "react";
 import classNames from "classnames";
-const CardBody = ({ children, className }) => {
+const CardBody = ({ children, className, ...props }) => {
  const cls = classNames("card__body", className);
-  return <div className={cls}>{children}</div>;
+  return (
+    <div className={cls} {...props}>
+      {children}
+    </div>
+  );
 };
 export default CardBody;
--- a/src/components/home/NotYetStarted.jsx
+++ b/src/components/home/NotYetStarted.jsx
@@ -9,7 +9,7 @@ const NotYetStarted = ({ startAt }) => (
      Jejda ...
    </div>
    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
-      Jednání ještě nebylo zahájeno :(
+      Jednání ještě nebylo zahájeno
    </h1>
    <p className="text-xl leading-snug mb-8">
      <span>Jednání celostátního fóra ještě nezačalo. </span>

--- a/src/components/mde/MarkdownEditor.jsx
+++ b/src/components/mde/MarkdownEditor.jsx
@@ -7,13 +7,10 @@ import { markdownConverter } from "markdown";
 import "react-mde/lib/styles/css/react-mde-toolbar.css";
 import "./MarkdownEditor.css";
-const MarkdownEditor = ({
+const MarkdownEditor = (
-  value,
+  { value, onChange, error, placeholder = "", ...props },
-  onChange,
+  ref
-  error,
+) => {
-  placeholder = "",
-  ...props
-}) => {
  const [selectedTab, setSelectedTab] = useState("write");
  const classes = {
@@ -36,6 +33,7 @@ const MarkdownEditor = ({
  return (
    <div className={classNames("form-field", { "form-field--error": !!error })}>
      <ReactMde
+        ref={ref}
        value={value}
        onChange={onChange}
        selectedTab={selectedTab}
@@ -53,4 +51,4 @@ const MarkdownEditor = ({
  );
 };
-export default MarkdownEditor;
+export default React.forwardRef(MarkdownEditor);
--- a/src/components/modals/ModalWithActions.jsx
+++ b/src/components/modals/ModalWithActions.jsx
@@ -21,11 +21,16 @@ const ModalConfirm = ({
 }) => {
  return (
    <Modal onRequestClose={onClose} {...props}>
-      <Card>
+      <Card className="elevation-21">
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>{title}</CardHeadline>
-            <button onClick={onClose} type="button">
+            <button
+              onClick={onClose}
+              type="button"
+              data-tip="Zavřít"
+              aria-label="Zavřít"
+            >
              <i className="ico--cross"></i>
            </button>
          </div>

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

--- a/src/components/posts/Post.jsx
+++ b/src/components/posts/Post.jsx
@@ -23,6 +23,7 @@ const Post = ({
  currentUser,
  supportThreshold,
  canThumb,
+  reportSeen = true,
  onLike,
  onDislike,
  onHide,
@@ -36,20 +37,21 @@ const Post = ({
  onEdit,
  onArchive,
  onSeen,
+  ...props
 }) => {
  const { ref, inView } = useInView({
    threshold: 0.8,
    trackVisibility: true,
-    delay: 1500,
+    delay: 1000,
-    skip: seen,
+    skip: !reportSeen,
    triggerOnce: true,
  });
  useEffect(() => {
-    if (!seen && inView && onSeen) {
+    if (inView && onSeen) {
      onSeen();
    }
-  });
+  }, [inView, onSeen]);
  const wrapperClassName = classNames(
    "flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
@@ -89,7 +91,7 @@ const Post = ({
            key="state__pending"
            condensed
            color="grey-500"
-            title="Návrh čekající na zpracování"
+            aria-label="Návrh čekající na zpracování"
          >
            Čeká na zpracování
          </Chip>
@@ -99,7 +101,7 @@ const Post = ({
            key="state__announced"
            condensed
            color="blue-300"
-            title="Návrh k hlasování"
+            aria-label="Návrh k hlasování"
          >
            K hlasování
          </Chip>
@@ -109,7 +111,7 @@ const Post = ({
            key="state__accepted"
            condensed
            color="green-400"
-            title="Schválený návrh"
+            aria-label="Schválený návrh"
          >
            Schválený
          </Chip>
@@ -119,7 +121,7 @@ const Post = ({
            key="state__rejected"
            condensed
            color="red-600"
-            title="Zamítnutý návrh"
+            aria-label="Zamítnutý návrh"
          >
            Zamítnutý
          </Chip>
@@ -129,7 +131,7 @@ const Post = ({
            key="state__rejected-by-chairmen"
            condensed
            color="red-600"
-            title="Návrh zamítnutý předsedajícím"
+            aria-label="Návrh zamítnutý předsedajícím"
          >
            Zamítnutý předs.
          </Chip>
@@ -193,13 +195,13 @@ const Post = ({
  const thumbsVisible = !archived && (type === "post" || state === "announced");
  return (
-    <div className={wrapperClassName} ref={ref}>
+    <div className={wrapperClassName} ref={ref} {...props}>
      <img
        src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
        className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
        alt={author.name}
      />
-      <div className="flex-1 w-full">
+      <div className="flex-1 overflow-hidden">
        <div className="mb-1">
          <div className="flex justify-between items-start xl:items-center">
            <div className="flex flex-col xl:flex-row xl:items-center">
@@ -240,13 +242,13 @@ const Post = ({
              )}
              <PostScore
                className="ml-2"
-                score={ranking.score}
+                postType={type}
-                hasDislikes={ranking.dislikes > 0}
+                ranking={ranking}
                rankingReadonly={!thumbsVisible}
                supportThreshold={supportThreshold}
              />
              {showActions && (
-                <DropdownMenu right className="pl-4">
+                <DropdownMenu right className="pl-4 static">
                  {showAnnounceAction && (
                    <DropdownMenuItem
                      onClick={onAnnounceProcedureProposal}
@@ -325,15 +327,13 @@ const Post = ({
        <div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2">
          {labels}
        </div>
-        <div className="overflow-hidden">
        <div
-            className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll"
+          className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
          dangerouslySetInnerHTML={htmlContent}
        ></div>
      </div>
    </div>
-    </div>
  );
 };
-export default Post;
+export default React.memo(Post);
--- a/src/components/posts/PostEditModal.jsx
+++ b/src/components/posts/PostEditModal.jsx
@@ -42,7 +42,7 @@ const PostEditModal = ({
  return (
    <Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
      <form onSubmit={confirm}>
-        <Card>
+        <Card className="elevation-21">
          <CardBody>
            <div className="flex items-center justify-between mb-4">
              <CardHeadline>Upravit text příspěvku</CardHeadline>
@@ -57,7 +57,7 @@ const PostEditModal = ({
              placeholder="Vyplňte text příspěvku"
              toolbarCommands={[
                ["header", "bold", "italic", "strikethrough"],
-                ["link", "quote", "image"],
+                ["link", "quote"],
                ["unordered-list", "ordered-list"],
              ]}
            />

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

--- a/src/components/posts/PostScore.jsx
+++ b/src/components/posts/PostScore.jsx
@@ -2,27 +2,31 @@ import React from "react";
 import classNames from "classnames";
 const PostScore = ({
-  score,
+  postType,
-  hasDislikes,
+  ranking,
  supportThreshold,
  rankingReadonly,
  className,
 }) => {
-  const coloring = rankingReadonly
+  const { score, dislikes } = ranking;
-    ? "bg-grey-125 text-grey-200"
+  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 && hasDislikes && score < supportThreshold,
+          score > 0 && dislikes > 0 && score < supportThreshold,
        "bg-green-400 text-white":
-          score >= supportThreshold || (score > 0 && !hasDislikes),
+          score >= supportThreshold || (score > 0 && dislikes <= 0),
-      };
+      }
+    : "bg-grey-125 text-grey-200";
  let title;
-  if (!rankingReadonly) {
+  if (postType === "procedure-proposal") {
-    if (hasDislikes) {
+    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
@@ -45,17 +49,13 @@ const PostScore = ({
        className
      )}
      style={{ cursor: "help" }}
-      title={title}
+      aria-label={title}
+      data-tip={title}
+      data-type="dark"
+      data-place="top"
    >
      <i className="ico--power" />
-      <span className="font-bold">
+      <span className="font-bold">{score}</span>
-        {!rankingReadonly && hasDislikes && (
-          <span>
-            {score} z {supportThreshold}
-          </span>
-        )}
-        {!(!rankingReadonly && hasDislikes) && score.toString()}
-      </span>
    </span>
  );
 };

--- a/src/components/posts/RejectPostModalConfirm.jsx
+++ b/src/components/posts/RejectPostModalConfirm.jsx
@@ -27,7 +27,7 @@ const RejectPostModalConfirm = ({
 }) => {
  return (
    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
-      <Card>
+      <Card className="elevation-21">
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>{title}</CardHeadline>

--- a/src/components/program/ProgramEntryEditModal.jsx
+++ b/src/components/program/ProgramEntryEditModal.jsx
@@ -24,7 +24,7 @@ const ProgramEntryEditModal = ({
  return (
    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
-      <Card>
+      <Card className="elevation-21">
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>Upravit název programového bodu</CardHeadline>

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

--- a/src/containers/AddPostForm.jsx
+++ b/src/containers/AddPostForm.jsx
-import React, { useState } from "react";
+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 }) => {
+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(addPost, {
+  const [addingProposal, addingProposalError] = useActionState(addProposal, {
    content: text,
  });
+  const apiError = addingPostError || addingProposalError;
+  const is429ApiError =
+    apiError &&
+    apiError.toString().indexOf("Unexpected status code 429") !== -1;
+  const onOutsideClick = useCallback(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+  const onWrite = useCallback(
+    (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);
@@ -30,6 +74,8 @@ const AddPostForm = ({ className }) => {
  };
  const onAdd = async (evt) => {
+    evt.preventDefault();
    if (!!text) {
      if (!error) {
        const result = await (type === "post" ? addPost : addProposal).run({
@@ -38,6 +84,9 @@ const AddPostForm = ({ className }) => {
        if (!result.error) {
          setText("");
+          setExpanded(false);
+          setShowAddConfirm(true);
+          enqueueHideAddConfirm();
        }
      }
    } else {
@@ -45,20 +94,57 @@ const AddPostForm = ({ className }) => {
    }
  };
+  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 (
-    <div className={className}>
+    <Card className={wrapperClass} ref={cardRef}>
-      {addingPostError && (
+      <span
-        <ErrorMessage>
+        className={classNames("alert items-center transition duration-500", {
-          Při přidávání příspěvku došlo k problému: {addingPostError}.
+          "alert--success": showAddConfirm,
-        </ErrorMessage>
+          "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>
          )}
-      {addingProposalError && (
+          {apiError && !is429ApiError && (
            <ErrorMessage>
-          Při přidávání příspěvku došlo k problému: {addingProposalError}.
+              Při přidávání příspěvku došlo k problému: {apiError}.
            </ErrorMessage>
          )}
          <MarkdownEditor
+            ref={editorRef}
            value={text}
            onChange={onTextInput}
            error={error}
@@ -70,11 +156,20 @@ const AddPostForm = ({ className }) => {
            ]}
          />
-      <div className="form-field" onChange={(evt) => setType(evt.target.value)}>
+          {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 />
+                    <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>
@@ -83,7 +178,11 @@ const AddPostForm = ({ className }) => {
                <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" />
+                    <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>
@@ -91,14 +190,27 @@ const AddPostForm = ({ className }) => {
                </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
-          onClick={onAdd}
+              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"}
@@ -117,7 +229,9 @@ const AddPostForm = ({ className }) => {
              .
            </span>
          </div>
-    </div>
+        </form>
+      </CardBody>
+    </Card>
  );
 };
No results found