diff --git a/frontend/src/ui/pages/Dashboard.tsx b/frontend/src/ui/pages/Dashboard.tsx index cc2848d..572f611 100644 --- a/frontend/src/ui/pages/Dashboard.tsx +++ b/frontend/src/ui/pages/Dashboard.tsx @@ -142,18 +142,20 @@ const supportedMessages: EventSubNotificationType[] = [ EventSubNotificationType.SubscriptionGifted, ]; +const eventSubKeyFunction = (ev: EventSubNotification) => + `${ev.subscription.type}-${ev.subscription.created_at}-${JSON.stringify( + ev.event, + )}`; + function TwitchEvent({ data }: { data: EventSubNotification }) { const { t } = useTranslation(); const client = useAppSelector((state) => state.api.client); const replay = () => { - void client.putJSON(`twitch/ev/eventsub-event/${data.subscription.type}`, { - ...data, - subscription: { - ...data.subscription, - created_at: new Date().toISOString(), - }, - }); + void client.putJSON( + `twitch/ev/eventsub-event/${data.subscription.type}`, + data, + ); }; let content: JSX.Element | string; @@ -390,10 +392,7 @@ function TwitchEventLog({ events }: { events: EventSubNotification[] }) { Date.parse(a.subscription.created_at), ) .map((ev) => ( - + ))} @@ -441,27 +440,29 @@ function TwitchSection() { const kv = useAppSelector((state) => state.api.client); const [twitchEvents, setTwitchEvents] = useState([]); - const keyfn = (ev: EventSubNotification) => - ev.subscription.id + ev.subscription.created_at; + const keyfn = (ev: EventSubNotification) => JSON.stringify(ev); - const setCleanTwitchEvents = (events: EventSubNotification[]) => { - const eventKeys = events.map(keyfn); + const addTwitchEvents = (events: EventSubNotification[]) => { + setTwitchEvents((currentEvents) => { + const allEvents = currentEvents.concat(events); + const eventKeys = allEvents.map(keyfn); - // Clean up duplicates before setting to state - const uniqueEvents = events.filter( - (ev, pos) => eventKeys.indexOf(keyfn(ev)) === pos, - ); - setTwitchEvents(uniqueEvents); + // Clean up duplicates before setting to state + const updatedEvents = allEvents.filter( + (ev, pos) => eventKeys.indexOf(keyfn(ev)) === pos, + ); + + return updatedEvents; + }); }; const loadRecentEvents = async () => { const keymap = await kv.getKeysByPrefix('twitch/eventsub-history/'); const events = Object.values(keymap) .map((value) => JSON.parse(value) as EventSubNotification[]) - .flat() - .sort((a, b) => Date.parse(b.date) - Date.parse(a.date)); + .flat(); - setCleanTwitchEvents(events); + addTwitchEvents(events); }; useEffect(() => { @@ -469,7 +470,10 @@ function TwitchSection() { const onKeyChange = (value: string) => { const event = JSON.parse(value) as EventSubNotification; - void setCleanTwitchEvents([event, ...twitchEvents]); + if (!supportedMessages.includes(event.subscription.type)) { + return; + } + void addTwitchEvents([event]); }; void kv.subscribePrefix('twitch/ev/eventsub-event/', onKeyChange);