feat: improve formatting of program entry descriptions

src/actions/program.js

@@ -5,6 +5,7 @@ import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
 import { fetch } from "api";
+import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
 import { loadPosts } from "./posts";
@@ -39,6 +40,11 @@ export const loadProgram = createAsyncAction(
                   "proposer",
                   "speakers",
                 ]),
+                fullTitle:
+                  entry.number !== ""
+                    ? `${entry.number}. ${entry.title}`
+                    : entry.title,
+                htmlContent: markdownConverter.makeHtml(entry.description),
                 discussionOpened: entry.discussion_opened,
                 expectedStartAt: parse(
                   entry.expected_start_at,

src/pages/Program.jsx

@@ -8,7 +8,6 @@ import Button from "components/Button";
 import Chip from "components/Chip";
 import ModalConfirm from "components/modals/ModalConfirm";
 import { useActionState, useItemActionConfirm } from "hooks";
-import { markdownConverter } from "markdown";
 import { AuthStore, ProgramStore } from "stores";
 
 const Schedule = () => {
@@ -49,10 +48,9 @@ const Schedule = () => {
           {scheduleIds.map((id) => {
             const isCurrent = id === currentId;
             const entry = items[id];
-            const fullTitle = `${entry.number}. ${entry.title}`;
-            const htmlContent = !!entry.description
+            const htmlContent = entry.htmlContent
               ? {
-                  __html: markdownConverter.makeHtml(entry.description),
+                  __html: entry.htmlContent,
                 }
               : null;
             return (
@@ -76,11 +74,11 @@ const Schedule = () => {
                   </p>
                 </div>
                 <div className="flex-grow w-full">
-                  <h2 className="head-heavy-xs md:head-heavy-base mb-1">
-                    {isCurrent && <Link to="/">{fullTitle}</Link>}
-                    {!isCurrent && fullTitle}
+                  <h2 className="head-heavy-xs md:head-heavy-base mb-2">
+                    {isCurrent && <Link to="/">{entry.fullTitle}</Link>}
+                    {!isCurrent && entry.fullTitle}
                   </h2>
-                  <div className="leading-normal sm:flex sm:space-x-4">
+                  <div className="leading-snug">
                     <div className="space-x-2">
                       <strong>Navrhovatel:</strong>
                       <span>{entry.proposer}</span>
@@ -94,7 +92,7 @@ const Schedule = () => {
                   </div>
                   {htmlContent && (
                     <div
-                      className="mt-2 leading-tight max-w-3xl content-block"
+                      className="mt-2 leading-snug max-w-3xl content-block"
                       dangerouslySetInnerHTML={htmlContent}
                     />
                   )}

src/ws/handlers/program.js

 import has from "lodash/has";
 
+import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
 export const handleProgramEntryChanged = (payload) => {
   ProgramStore.update((state) => {
-    if (state.items[payload.id]) {
+    const entry = state.items[payload.id];
+
+    if (entry) {
       if (has(payload, "discussion_opened")) {
         state.items[payload.id].discussionOpened = payload.discussion_opened;
       }
       if (has(payload, "title")) {
         state.items[payload.id].title = payload.title;
+        state.items[payload.id].fullTitle =
+          entry.number !== "" ? `${entry.number}. ${entry.title}` : entry.title;
       }
       if (has(payload, "description")) {
         state.items[payload.id].description = payload.description;
+        state.items[payload.id].htmlContent = markdownConverter.makeHtml(
+          payload.description
+        );
       }
     }
   });

typings/cf2021.d.ts

@@ -14,10 +14,12 @@ declare namespace CF2021 {
     id: number;
     number: string;
     title: string;
+    fullTitle: string;
     proposer: string;
     speakers: string;
     discussionOpened: boolean;
     description?: string;
+    htmlContent?: string;
     expectedStartAt: Date;
     expectedFinishAt?: Date;
   }