fix: fix recent event list being wiped when a new event arrived

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) => (
-              <TwitchEvent
-                key={`${ev.subscription.id}-${ev.subscription.created_at}`}
-                data={ev}
-              />
+              <TwitchEvent key={eventSubKeyFunction(ev)} data={ev} />
             ))}
         </EventListContainer>
       </Scrollbar>
@@ -441,27 +440,29 @@ function TwitchSection() {
   const kv = useAppSelector((state) => state.api.client);
   const [twitchEvents, setTwitchEvents] = useState<EventSubNotification[]>([]);
 
-  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);