diff --git a/src/actions/program.js b/src/actions/program.js index 82c0c4cdf7565aaa55e4f51ca941bd1c33314809..2fb1a214e5e760c4fc5ea389e0ef1fa2c7ef6c00 100644 --- a/src/actions/program.js +++ b/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, diff --git a/src/pages/Program.jsx b/src/pages/Program.jsx index e02ba5c6fc546ccad05e3d4c3323566f634f7739..f8a5ba9e872819cae058b38d8bc5372aa19f5c18 100644 --- a/src/pages/Program.jsx +++ b/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} /> )} diff --git a/src/ws/handlers/program.js b/src/ws/handlers/program.js index 4aef8aa1a03cec705259f5c5e75162108e945e6a..14ee135ba280e4fb76a11d623834d80ce8df0a9c 100644 --- a/src/ws/handlers/program.js +++ b/src/ws/handlers/program.js @@ -1,18 +1,26 @@ 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 + ); } } }); diff --git a/typings/cf2021.d.ts b/typings/cf2021.d.ts index 09b5b89986ed885f5992b5e0e377a7332bee1307..e73fbbffad89a06449654033edd379c84a2c8022 100644 --- a/typings/cf2021.d.ts +++ b/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; }