feat: add schedule page, load schedule and use it

.env

 REACT_APP_STYLEGUIDE_URL=http://localhost:3001
+REACT_APP_API_BASE_URL=https://cf2021.pirati.cz/api

package-lock.json

@@ -13783,6 +13783,11 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
       "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
     },
+    "unfetch": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
+      "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -16,7 +16,8 @@
     "react-dom": "^16.13.1",
     "react-modal": "^3.12.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "unfetch": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.jsx

@@ -4,6 +4,7 @@ import { KeycloakProvider } from "@react-keycloak/web";
 import * as Sentry from "@sentry/react";
 
 import { loadGroupMappings } from "actions/misc";
+import { loadProgram } from "actions/program";
 import Footer from "components/Footer";
 import Navbar from "components/Navbar";
 import Home from "pages/Home";
@@ -42,7 +43,7 @@ const LoadingComponent = (
   <div className="h-screen w-screen flex justify-center items-center">
     <div className="text-center">
       <img
-        src={`${process.env.REACT_APP_STYLEGUIDE_URL}images/logo-round-black.svg`}
+        src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-round-black.svg`}
         className="w-20 mb-2 inline-block"
         alt="Pirátská strana"
       />
@@ -54,6 +55,7 @@ const LoadingComponent = (
 
 const BaseApp = () => {
   loadGroupMappings.read();
+  loadProgram.read();
 
   return (
     <Router>

src/actions/misc.js

 import { createAsyncAction, errorResult, successResult } from "pullstate";
+import fetch from "unfetch";
 
 import { AuthStore } from "stores";
 

src/actions/program.js

+import pick from "lodash/pick";
+import { createAsyncAction, errorResult, successResult } from "pullstate";
+import fetch from "unfetch";
+
+import { ProgramStore } from "stores";
+
+export const loadProgram = createAsyncAction(
+  async () => {
+    try {
+      const resp = await fetch(`${process.env.REACT_APP_API_BASE_URL}/program`);
+      const mappings = await resp.json();
+      return successResult(mappings);
+    } catch (err) {
+      return errorResult([], err.toString());
+    }
+  },
+  {
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        const entries = result.payload
+          .map(
+            /**
+             *
+             * @param {any} entry
+             * @returns {CF2021.ProgramScheduleEntry}
+             */
+            (entry) => {
+              return {
+                ...pick(entry, [
+                  "id",
+                  "number",
+                  "title",
+                  "description",
+                  "proposer",
+                ]),
+                expectedStartAt: new Date(entry.expectedStartAt),
+                expectedFinishAt: entry.expectedFinishAt
+                  ? new Date(entry.expectedFinishAt)
+                  : undefined,
+              };
+            }
+          )
+          .sort((a, b) => a.expectedStartAt - b.expectedStartAt);
+
+        const currentEntry = result.payload.find((entry) => entry.is_live);
+
+        ProgramStore.update((state) => {
+          state.schedule = entries;
+
+          if (currentEntry) {
+            state.current = state.schedule.find(
+              (scheduleEntry) => scheduleEntry.id === currentEntry.id
+            );
+          } else {
+            // TODO: for testing only
+            state.current = state.schedule[1];
+          }
+        });
+      }
+    },
+  }
+);

src/components/Button.jsx

 import React from "react";
+import { NavLink } from "react-router-dom";
 import classNames from "classnames";
 
 const Button = ({
@@ -10,6 +11,7 @@ const Button = ({
   hoverActive = true,
   fullwidth = false,
   children,
+  routerTo,
   ...props
 }) => {
   const btnClass = classNames(
@@ -25,8 +27,7 @@ const Button = ({
 
   const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);
 
-  return (
-    <button className={btnClass} {...props}>
+  const inner = (
     <div className="btn__body-wrap">
       <div className="btn__body">{children}</div>
       {!!icon && (
@@ -36,6 +37,19 @@ const Button = ({
         </div>
       )}
     </div>
+  );
+
+  if (routerTo) {
+    return (
+      <NavLink to={routerTo} className={btnClass} {...props}>
+        {inner}
+      </NavLink>
+    );
+  }
+
+  return (
+    <button className={btnClass} {...props}>
+      {inner}
     </button>
   );
 };

src/pages/Home.jsx

 import React, { useState } from "react";
 
+import Button from "components/Button";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
 import ModalConfirm from "components/modals/ModalConfirm";
 import AddAnnouncementForm from "containers/AddAnnouncementForm";
@@ -7,12 +8,33 @@ import AddPostForm from "containers/AddPostForm";
 import AnnouncementsContainer from "containers/AnnoucementsContainer";
 import PostFilters from "containers/PostFilters";
 import PostsContainer from "containers/PostsContainer";
+import { ProgramStore } from "stores";
+
+const noCurrentDiscussion = (
+  <article className="container container--wide pt-8 py-8 lg:py-32">
+    <div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
+      Jejda ...
+    </div>
+    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+      Jednání ještě nebylo zahájeno :(
+    </h1>
+    <p className="text-xl leading-snug mb-8">
+      Jednání celostátního fóra v tuto chvíli neprobíhá. Můžete si ale zobrazit
+      program.
+    </p>
+    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
+      Zobrazit program
+    </Button>
+  </article>
+);
 
 const Home = () => {
   const [showEndDiscussionConfirm, setShowEndDiscussionConfirm] = useState(
     false
   );
 
+  const { current } = ProgramStore.useState();
+
   const onRenameProgramPoint = () => {
     console.log("renameProgramPoint");
   };
@@ -24,14 +46,17 @@ const Home = () => {
     console.log("endProgramPoint");
   };
 
+  if (!current) {
+    return noCurrentDiscussion;
+  }
+
   return (
     <>
       <article className="container container--wide pt-8 lg:py-24 cf2021">
         <section className="cf2021__video space-y-8">
           <div className="flex items-center justify-between mb-4 lg:mb-8">
             <h1 className="head-alt-md lg:head-alt-lg mb-0">
-              Bod č. 1: Programové priority Pirátské strany pro sněmovní volby
-              2021
+              Bod č. {current.number}: {current.title}
             </h1>
             <DropdownMenu right triggerSize="lg">
               <DropdownMenuItem

src/pages/Program.jsx

 import React from "react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import { format } from "date-fns";
+
+import Chip from "components/Chip";
+import { ProgramStore } from "stores";
 
 const Schedule = () => {
-  return <>Schedule</>;
+  const { current, schedule } = ProgramStore.useState();
+  return (
+    <article className="container container--wide py-8 lg:py-24">
+      <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
+      <div className="flex flex-col">
+        {schedule.map((entry) => {
+          const isCurrent = entry === current;
+          return (
+            <div
+              className={classNames(
+                "flex flex-col md:flex-row my-4 hover:opacity-100 transition duration-300",
+                {
+                  "text-black": isCurrent,
+                  "text-black opacity-50": !isCurrent,
+                }
+              )}
+              key={entry.id}
+            >
+              <div className="w-28 md:text-right">
+                {isCurrent && (
+                  <Chip condensed className="mt-2 mr-2" color="red-600">
+                    Právě probíhá
+                  </Chip>
+                )}
+              </div>
+              <div className="w-32 flex items-start head-heavy-xs md:head-heavy-base text-center">
+                <span>{format(entry.expectedStartAt, "H:mm")}</span>
+              </div>
+              <div className="flex-grow w-full">
+                <h2 className="head-heavy-xs md:head-heavy-base mb-1">
+                  <Link to="/">{entry.title}</Link>
+                </h2>
+                <div className="flex space-x-2">
+                  <strong>Navrhovatel:</strong>
+                  <span>{entry.proposer}</span>
+                </div>
+                {entry.description && <p>{entry.description}</p>}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </article>
+  );
 };
 
 export default Schedule;

src/stores.js

@@ -13,6 +13,14 @@ const authStoreInitial = {
 
 export const AuthStore = new Store(authStoreInitial);
 
+/** @type {CF2021.ProgramStorePayload} */
+const programStoreInitial = {
+  current: undefined,
+  schedule: [],
+};
+
+export const ProgramStore = new Store(programStoreInitial);
+
 /** @type {CF2021.AnnouncementStorePayload} */
 const announcementStoreInitial = {
   items: [

typings/cf2021.d.ts

 declare namespace CF2021 {
     interface ProgramScheduleEntry {
-        id: string;
+        id: number;
+        number: string;
         title: string;
+        proposer: string;
+        description?: string;
         expectedStartAt: Date;
-        expectedFinishAt: Date;
+        expectedFinishAt?: Date;
     }
 
     export interface ProgramStorePayload {
-        current: ProgramScheduleEntry & {
+        current?: ProgramScheduleEntry & {
             discussionOpened: boolean;
         }
         schedule: ProgramScheduleEntry[];