From 1a231bf03e5db38ba99edb6903757ce2f8172b8f Mon Sep 17 00:00:00 2001 From: Beebles <102569435+beebls@users.noreply.github.com> Date: Sat, 31 Aug 2024 16:41:58 -0600 Subject: rename motd to announcements and implement new API --- frontend/src/components/AnnouncementsDisplay.tsx | 113 +++++++++++++++++++++++ frontend/src/components/MotdDisplay.tsx | 112 ---------------------- frontend/src/components/PluginView.tsx | 4 +- frontend/src/store.ts | 33 +++---- 4 files changed, 132 insertions(+), 130 deletions(-) create mode 100644 frontend/src/components/AnnouncementsDisplay.tsx delete mode 100644 frontend/src/components/MotdDisplay.tsx (limited to 'frontend/src') diff --git a/frontend/src/components/AnnouncementsDisplay.tsx b/frontend/src/components/AnnouncementsDisplay.tsx new file mode 100644 index 00000000..6e0eeb70 --- /dev/null +++ b/frontend/src/components/AnnouncementsDisplay.tsx @@ -0,0 +1,113 @@ +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 { useSetting } from '../utils/hooks/useSetting'; + +const SEVERITIES = { + High: { + color: '#bb1414', + text: '#fff', + }, + Medium: { + color: '#bbbb14', + text: '#fff', + }, + Low: { + color: '#1488bb', + text: '#fff', + }, +}; + +const welcomeAnnouncement: Announcement = { + id: 'welcomeAnnouncement', + title: 'Welcome to Decky!', + text: 'We hope you enjoy using Decky! If you have any questions or feedback, please let us know.', + created: Date.now().toString(), + updated: Date.now().toString(), +}; + +export function AnnouncementsDisplay() { + const [announcement, setAnnouncement] = useState(null); + // 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 [hiddenAnnouncementId, setHiddenAnnouncementId] = useSetting('hiddenAnnouncementId', 'showWelcome'); + + async function fetchAnnouncement() { + const announcement = await getLatestAnnouncement(); + announcement && setAnnouncement(announcement); + } + + useEffect(() => { + void fetchAnnouncement(); + }, []); + + useEffect(() => { + if (hiddenAnnouncementId === 'showWelcome') { + setAnnouncement(welcomeAnnouncement); + } + }, [hiddenAnnouncementId]); + + function hideAnnouncement() { + if (announcement) { + setHiddenAnnouncementId(announcement.id); + void fetchAnnouncement(); + } + } + + const hidden = useMemo(() => { + return hiddenAnnouncementId === announcement?.id; + }, [hiddenAnnouncementId, announcement]); + + if (!announcement || !announcement.title || hidden) { + return null; + } + + // Severity is not implemented in the API currently + const severity = SEVERITIES['Low']; + + return ( + + +
+ {announcement.title} + + + +
+ {announcement.text} + + + ); +} diff --git a/frontend/src/components/MotdDisplay.tsx b/frontend/src/components/MotdDisplay.tsx deleted file mode 100644 index d5236d88..00000000 --- a/frontend/src/components/MotdDisplay.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { DialogButton, Focusable, PanelSection } from '@decky/ui'; -import { useEffect, useMemo, useState } from 'react'; -import { FaTimes } from 'react-icons/fa'; - -import { Motd, getMotd } from '../store'; -import { useSetting } from '../utils/hooks/useSetting'; - -const SEVERITIES = { - High: { - color: '#bb1414', - text: '#fff', - }, - Medium: { - color: '#bbbb14', - text: '#fff', - }, - Low: { - color: '#1488bb', - text: '#fff', - }, -}; - -const welcomeMotd: Motd = { - id: 'welcomeMotd', - name: 'Welcome to Decky!', - date: Date.now().toString(), - description: 'We hope you enjoy using Decky! If you have any questions or feedback, please let us know.', - severity: 'Low', -}; - -export function MotdDisplay() { - const [motd, setMotd] = useState(null); - // 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 [hiddenMotdId, setHiddenMotdId] = useSetting('hiddenMotdId', 'showWelcome'); - - async function fetchMotd() { - const motd = await getMotd(); - motd && setMotd(motd); - } - - useEffect(() => { - void fetchMotd(); - }, []); - - useEffect(() => { - if (hiddenMotdId === 'showWelcome') { - setMotd(welcomeMotd); - } - }, [hiddenMotdId]); - - function hideMotd() { - if (motd) { - setHiddenMotdId(motd.id); - void fetchMotd(); - } - } - - const hidden = useMemo(() => { - return hiddenMotdId === motd?.id; - }, [hiddenMotdId, motd]); - - if (!motd || !motd?.name || hidden) { - return null; - } - - const severity = SEVERITIES[motd?.severity || 'Low']; - - return ( - - -
- {motd?.name} - - - -
- {motd?.description} - - - ); -} diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx index 88b43b51..13ee33e1 100644 --- a/frontend/src/components/PluginView.tsx +++ b/frontend/src/components/PluginView.tsx @@ -3,8 +3,8 @@ import { FC, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { FaEyeSlash } from 'react-icons/fa'; +import { AnnouncementsDisplay } from './AnnouncementsDisplay'; import { useDeckyState } from './DeckyState'; -import { MotdDisplay } from './MotdDisplay'; import NotificationBadge from './NotificationBadge'; import { useQuickAccessVisible } from './QuickAccessVisibleState'; import TitleView from './TitleView'; @@ -42,7 +42,7 @@ const PluginView: FC = () => { paddingTop: '16px', }} > - + {pluginList.map(({ name, icon }) => ( diff --git a/frontend/src/store.ts b/frontend/src/store.ts index e64de8d5..1cfe36cd 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -42,12 +42,12 @@ export interface PluginInstallRequest { installType: InstallType; } -export interface Motd { +export interface Announcement { id: string; - name: string; - description: string; - date: string; - severity: 'High' | 'Medium' | 'Low'; + title: string; + text: string; + created: string; + updated: string; } // name: version @@ -57,10 +57,13 @@ export async function getStore(): Promise { return await getSetting('store', Store.Default); } -export async function getMotd(): Promise { +export async function getLatestAnnouncement(): Promise { let version = await window.DeckyPluginLoader.updateVersion(); let store = await getSetting('store', null); - let customURL = await getSetting('motd-url', 'https://plugins.deckbrew.xyz/v1/motd'); + let customURL = await getSetting( + 'announcements-url', + 'https://plugins.deckbrew.xyz/v1/announcements/-/current', + ); if (store === null) { console.log('Could not get store, using Default.'); @@ -71,30 +74,28 @@ export async function getMotd(): Promise { let resolvedURL; switch (store) { case Store.Default: - resolvedURL = 'https://plugins.deckbrew.xyz/v1/motd'; + resolvedURL = 'https://plugins.deckbrew.xyz/v1/announcements/-/current'; break; case Store.Testing: - resolvedURL = 'https://testing.deckbrew.xyz/v1/motd'; + resolvedURL = 'https://testing.deckbrew.xyz/v1/announcements/-/current'; break; case Store.Custom: resolvedURL = customURL; break; default: console.error('Somehow you ended up without a standard URL, using the default URL.'); - resolvedURL = 'https://plugins.deckbrew.xyz/v1/motd'; + resolvedURL = 'https://plugins.deckbrew.xyz/v1/announcements/-/current'; break; } - return fetch(resolvedURL, { + const res = await fetch(resolvedURL, { method: 'GET', headers: { 'X-Decky-Version': version.current, }, - }).then((r) => { - if (r.status === 200) { - return r.json(); - } - return null; }); + if (res.status !== 200) return null; + const json = await res.json(); + return json?.[0] ?? null; } export async function getPluginList( -- cgit v1.2.3