Use MessageChannels to self-delete queue items

Previous method would cause site to die

app/routes/mod-queue.tsx

@@ -18,7 +18,7 @@ import {
   useToast,
   VStack,
 } from "@chakra-ui/react";
-import { type ReactElement, useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import AppealCard from "../../components/AppealCard.js";
 import GameAppealCard from "../../components/GameAppealCard.js";
 import NewGameBan from "../../components/NewGameBan.js";
@@ -115,8 +115,11 @@ export default function () {
   const pageProps = useLoaderData<typeof loader>();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const entryTypes = [];
-  const [entries, setEntries] = useState([] as ReactElement[]);
+  const [entries, setEntries] = useState(
+    [] as { element: ReactNode; id: string }[],
+  );
   const [before, setBefore] = useState(Date.now());
+  const [messageChannel] = useState(null as MessageChannel | null);
   const toast = useToast();
 
   for (const type of pageProps.entry_types)
@@ -126,6 +129,16 @@ export default function () {
       </option>,
     );
 
+  useEffect(() => {
+    if (!messageChannel) return;
+
+    messageChannel.port1.onmessage = function (ev) {
+      const { data }: { data: string } = ev;
+
+      setEntries([...entries].filter((entry) => entry.id !== data));
+    };
+  }, [messageChannel]);
+
   async function updateQueue(
     queue_type: string,
     before: number,
@@ -212,24 +225,54 @@ export default function () {
 
       switch (cardType) {
         case "appeal":
-          newEntries.push(<AppealCard {...(entry as AppealCardProps)} />);
+          newEntries.push({
+            element: (
+              <AppealCard
+                {...(entry as AppealCardProps & { port?: MessagePort })}
+                port={messageChannel?.port2}
+              />
+            ),
+            id: `appeal_${entry.id}`,
+          });
 
           break;
 
         case "gma":
-          newEntries.push(<GameAppealCard {...(entry as GameAppealProps)} />);
+          newEntries.push({
+            element: (
+              <GameAppealCard
+                {...(entry as GameAppealProps & { port?: MessagePort })}
+                port={messageChannel?.port2}
+              />
+            ),
+            id: `gma_${entry.id}`,
+          });
 
           break;
 
         case "inactivity":
-          newEntries.push(
-            <InactivityNoticeCard {...(entry as InactivityNoticeProps)} />,
-          );
+          newEntries.push({
+            element: (
+              <InactivityNoticeCard
+                {...(entry as InactivityNoticeProps & { port?: MessagePort })}
+                port={messageChannel?.port2}
+              />
+            ),
+            id: `inactivity_${entry.id}`,
+          });
 
           break;
 
         case "report":
-          newEntries.push(<ReportCard {...(entry as ReportCardProps)} />);
+          newEntries.push({
+            element: (
+              <ReportCard
+                {...(entry as ReportCardProps & { port?: MessagePort })}
+                port={messageChannel?.port2}
+              />
+            ),
+            id: `report_${entry.id}`,
+          });
 
           break;
       }
@@ -311,7 +354,7 @@ export default function () {
             {ItemDisplay}
           </Box>
           {entries.length ? (
-            entries
+            entries.map((entry) => entry.element)
           ) : (
             <Container
               left="50%"