feat: nový způsob zobrazování novinek

client/src/components/Header.tsx

@@ -11,16 +11,12 @@ import GenerateMockDataModal from "./modals/GenerateMockDataModal";
 import ClearMockDataModal from "./modals/ClearMockDataModal";
 import { useNavigate } from "react-router";
 import { STATS_URL } from "../AppRoutes";
-import { FeatureRequest, getVotes, updateVote, LunchChoices } from "../../../types";
+import { FeatureRequest, getVotes, updateVote, LunchChoices, getChangelogs } from "../../../types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { formatDateString } from "../Utils";
 
-const CHANGELOG = [
-    "Nový moderní design aplikace",
-    "Oprava parsování Sladovnické a TechTower",
-    "Možnost označit se jako objednávající u volby \"budu objednávat\"",
-    "Možnost generovat QR kódy pro platby (i mimo Pizza day)",
-];
+const LAST_SEEN_CHANGELOG_KEY = "lastChangelogDate";
 
 const IS_DEV = process.env.NODE_ENV === 'development';
 
@@ -38,6 +34,7 @@ export default function Header({ choices, dayIndex }: Props) {
     const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
     const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
     const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
+    const [changelogEntries, setChangelogEntries] = useState<Record<string, string[]>>({});
     const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
     const [generateMockModalOpen, setGenerateMockModalOpen] = useState<boolean>(false);
     const [clearMockModalOpen, setClearMockModalOpen] = useState<boolean>(false);
@@ -71,6 +68,19 @@ export default function Header({ choices, dayIndex }: Props) {
         }
     }, [auth?.login]);
 
+    useEffect(() => {
+        if (!auth?.login) return;
+        const lastSeen = localStorage.getItem(LAST_SEEN_CHANGELOG_KEY) ?? undefined;
+        getChangelogs({ query: lastSeen ? { since: lastSeen } : {} }).then(response => {
+            const entries = response.data;
+            if (!entries || Object.keys(entries).length === 0) return;
+            setChangelogEntries(entries);
+            setChangelogModalOpen(true);
+            const newestDate = Object.keys(entries).sort((a, b) => b.localeCompare(a))[0];
+            localStorage.setItem(LAST_SEEN_CHANGELOG_KEY, newestDate);
+        });
+    }, [auth?.login]);
+
     const closeSettingsModal = () => {
         setSettingsModalOpen(false);
     }
@@ -197,7 +207,17 @@ export default function Header({ choices, dayIndex }: Props) {
                     <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
                     <NavDropdown.Item onClick={handleQrMenuClick}>Generování QR kódů</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
-                    <NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => {
+                        getChangelogs().then(response => {
+                            const entries = response.data ?? {};
+                            setChangelogEntries(entries);
+                            setChangelogModalOpen(true);
+                            const dates = Object.keys(entries).sort((a, b) => b.localeCompare(a));
+                            if (dates.length > 0) {
+                                localStorage.setItem(LAST_SEEN_CHANGELOG_KEY, dates[0]);
+                            }
+                        });
+                    }}>Novinky</NavDropdown.Item>
                     {IS_DEV && (
                         <>
                             <NavDropdown.Divider />
@@ -237,16 +257,24 @@ export default function Header({ choices, dayIndex }: Props) {
                 />
             </>
         )}
-        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
+        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)} size="lg">
             <Modal.Header closeButton>
                 <Modal.Title><h2>Novinky</h2></Modal.Title>
             </Modal.Header>
             <Modal.Body>
-                <ul>
-                    {CHANGELOG.map((item, index) => (
-                        <li key={index}>{item}</li>
-                    ))}
-                </ul>
+                {Object.keys(changelogEntries).sort((a, b) => b.localeCompare(a)).map(date => (
+                    <div key={date}>
+                        <strong>{formatDateString(date)}</strong>
+                        <ul>
+                            {changelogEntries[date].map((item, index) => (
+                                <li key={index}>{item}</li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+                {Object.keys(changelogEntries).length === 0 && (
+                    <p>Žádné novinky.</p>
+                )}
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>