diff --git a/frontend/src/components/AnnouncementsDisplay.tsx b/frontend/src/components/AnnouncementsDisplay.tsx index 8ce5bc4e..66154192 100644 --- a/frontend/src/components/AnnouncementsDisplay.tsx +++ b/frontend/src/components/AnnouncementsDisplay.tsx @@ -2,7 +2,7 @@ import { DialogButton, Focusable, PanelSection } from '@decky/ui'; import { useEffect, useMemo, useState } from 'react'; import { FaTimes } from 'react-icons/fa'; -import { Announcement, getLatestAnnouncement } from '../store'; +import { Announcement, getAnnouncements } from '../store'; import { useSetting } from '../utils/hooks/useSetting'; const SEVERITIES = { @@ -29,13 +29,13 @@ const welcomeAnnouncement: Announcement = { }; export function AnnouncementsDisplay() { - const [announcement, setAnnouncement] = useState(null); + const [announcements, setAnnouncements] = useState([]); // showWelcome will display a welcome motd, the welcome motd has an id of "welcome" and once that is saved to hiddenMotdId, it will not show again const [hiddenAnnouncementIds, setHiddenAnnouncementIds] = useSetting('hiddenAnnouncementIds', []); async function fetchAnnouncement() { - const announcement = await getLatestAnnouncement(); - announcement && setAnnouncement(announcement); + const announcements = await getAnnouncements(); + announcements && setAnnouncements((oldAnnouncements) => [...announcements, ...oldAnnouncements]); } useEffect(() => { @@ -43,22 +43,20 @@ export function AnnouncementsDisplay() { }, []); useEffect(() => { if (hiddenAnnouncementIds.length > 0) { - setAnnouncement(welcomeAnnouncement); + setAnnouncements((oldAnnouncement) => [welcomeAnnouncement, ...oldAnnouncement]); } }, [hiddenAnnouncementIds]); - function hideAnnouncement() { - if (announcement) { - setHiddenAnnouncementIds([...hiddenAnnouncementIds, announcement.id]); - void fetchAnnouncement(); - } + const currentlyDisplayingAnnouncement: Announcement | null = useMemo(() => { + return announcements.find((announcement) => !hiddenAnnouncementIds.includes(announcement.id)) || null; + }, [announcements, hiddenAnnouncementIds]); + + function hideAnnouncement(id: string) { + setHiddenAnnouncementIds([...hiddenAnnouncementIds, id]); + void fetchAnnouncement(); } - const hidden = useMemo(() => { - return !announcement?.id || hiddenAnnouncementIds.includes(announcement.id); - }, [hiddenAnnouncementIds, announcement]); - - if (!announcement || !announcement.title || hidden) { + if (!currentlyDisplayingAnnouncement) { return null; } @@ -82,7 +80,7 @@ export function AnnouncementsDisplay() { }} >
- {announcement.title} + {currentlyDisplayingAnnouncement.title} hideAnnouncement(currentlyDisplayingAnnouncement.id)} >
- {announcement.text} + {currentlyDisplayingAnnouncement.text} ); diff --git a/frontend/src/store.ts b/frontend/src/store.ts index 1cfe36cd..cb2a58bd 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -57,7 +57,7 @@ export async function getStore(): Promise { return await getSetting('store', Store.Default); } -export async function getLatestAnnouncement(): Promise { +export async function getAnnouncements(): Promise { let version = await window.DeckyPluginLoader.updateVersion(); let store = await getSetting('store', null); let customURL = await getSetting( @@ -93,9 +93,9 @@ export async function getLatestAnnouncement(): Promise { 'X-Decky-Version': version.current, }, }); - if (res.status !== 200) return null; + if (res.status !== 200) return []; const json = await res.json(); - return json?.[0] ?? null; + return json ?? []; } export async function getPluginList(