From a55ca24fb4cfb9c72ecc8df00b44d0c22191b0ff Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 5 Jan 2021 10:10:14 +0100
Subject: [PATCH] feat: improve formatting of program entry descriptions
---
src/actions/program.js | 6 ++++++
src/pages/Program.jsx | 16 +++++++---------
src/ws/handlers/program.js | 10 +++++++++-
typings/cf2021.d.ts | 2 ++
4 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/src/actions/program.js b/src/actions/program.js
index 82c0c4c..2fb1a21 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 e02ba5c..f8a5ba9 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 4aef8aa..14ee135 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 09b5b89..e73fbbf 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;
}
--
GitLab