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%"

components/AppealCard.tsx

@@ -21,7 +21,7 @@ import {
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-export default function(props: AppealCardProps) {
+export default function(props: AppealCardProps & { port?: MessagePort }) {
   const [dateString, setDateString] = useState(
     new Date(props.created_at).toUTCString()
   );
@@ -80,7 +80,7 @@ export default function(props: AppealCardProps) {
 
     onClose();
     setLoading(false);
-    document.getElementById(`appeal_${props.id}`)?.remove();
+    props.port?.postMessage(`appeal_${props.id}`);
   }
 
   return (

components/GameAppealCard.tsx

@@ -20,7 +20,7 @@ import {
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function (props: GameAppealProps) {
+export default function (props: GameAppealProps & { port?: MessagePort }) {
   const [loading, setLoading] = useState(false);
   const [percentage, setPercentage] = useState(0);
   const toast = useToast();
@@ -59,9 +59,7 @@ export default function (props: GameAppealProps) {
     );
 
     setLoading(false);
-    document
-      .getElementById(`gma_${props.roblox_id}${props.created_at}`)
-      ?.remove();
+    props.port?.postMessage(`gma_${props.id}`);
   }
 
   const { isOpen, onClose, onOpen } = useDisclosure();

components/InactivityNoticeCard.tsx

@@ -11,11 +11,11 @@ import {
   StackDivider,
   Text,
   UnorderedList,
-  useToast
+  useToast,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function(props: InactivityNoticeProps) {
+export default function (props: InactivityNoticeProps & { port?: MessagePort }) {
   const toast = useToast();
   const [loading, setLoading] = useState(false);
 
@@ -24,9 +24,9 @@ export default function(props: InactivityNoticeProps) {
     const decisionReq = await fetch(`/api/inactivity/${props.id}`, {
       body: JSON.stringify({ accepted }),
       headers: {
-        "content-type": "application/json"
+        "content-type": "application/json",
       },
-      method: "POST"
+      method: "POST",
     });
 
     if (!decisionReq.ok) {
@@ -35,7 +35,7 @@ export default function(props: InactivityNoticeProps) {
         description: ((await decisionReq.json()) as { error: string }).error,
         isClosable: true,
         status: "error",
-        title: "Oops"
+        title: "Oops",
       });
 
       return;
@@ -45,24 +45,22 @@ export default function(props: InactivityNoticeProps) {
       description: `Inactivity notice ${accepted ? "accepted" : "denied"}.`,
       isClosable: true,
       status: "success",
-      title: "Success"
+      title: "Success",
     });
 
     setLoading(false);
-    location.reload();
+    props.port?.postMessage(`inactivity_${props.id}`);
   }
 
   const Approved = () => (
     <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
     </svg>
   );
 
   const Denied = () => (
     <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
     </svg>
   );
 

components/ReportCard.tsx

@@ -13,11 +13,11 @@ import {
   Stack,
   Text,
   useToast,
-  VStack
+  VStack,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function(props: ReportCardProps) {
+export default function (props: ReportCardProps & { port?: MessagePort }) {
   const [attachmentIdx, setAttachmentIdx] = useState(0);
   const [loading, setLoading] = useState(false);
   const toast = useToast();
@@ -26,7 +26,7 @@ export default function(props: ReportCardProps) {
 
   for (let i = 0; i < props.target_ids.length; i++)
     Object.defineProperty(targetMap, props.target_ids[i], {
-      value: props.target_usernames[i]
+      value: props.target_usernames[i],
     });
 
   async function submitActions() {
@@ -34,9 +34,9 @@ export default function(props: ReportCardProps) {
     const submitReq = await fetch(`/api/reports/${props.id}/action`, {
       body: JSON.stringify(actionMap),
       headers: {
-        "content-type": "application/json"
+        "content-type": "application/json",
       },
-      method: "POST"
+      method: "POST",
     });
 
     if (!submitReq.ok) {
@@ -44,7 +44,7 @@ export default function(props: ReportCardProps) {
       toast({
         description: ((await submitReq.json()) as { error: string }).error,
         status: "error",
-        title: "S̸̯̜̈́o̴̳̅̾̏̽m̴͔͕̈́̋ē̴̙͓̯̍̃ț̸͖̘̀h̶̛̳̝̐i̵̋͘͜ņ̷̙̤͌g̴̭̻̓̈́ ̴̘͍̦̪̆w̸̡̏̑̊é̸̠̖̹̂͜n̴̖̳̤̕t̴͚̊̊̕ ̸̛͙̺̬̎́w̴͈͑̋͊r̷̢̛o̵̱̩̍͋ͅṇ̸̝̰̮́g̵̡̢̦͕͂"
+        title: "S̸̯̜̈́o̴̳̅̾̏̽m̴͔͕̈́̋ē̴̙͓̯̍̃ț̸͖̘̀h̶̛̳̝̐i̵̋͘͜ņ̷̙̤͌g̴̭̻̓̈́ ̴̘͍̦̪̆w̸̡̏̑̊é̸̠̖̹̂͜n̴̖̳̤̕t̴͚̊̊̕ ̸̛͙̺̬̎́w̴͈͑̋͊r̷̢̛o̵̱̩̍͋ͅṇ̸̝̰̮́g̵̡̢̦͕͂",
       });
 
       return;
@@ -53,10 +53,10 @@ export default function(props: ReportCardProps) {
     toast({
       description: "Actions were successfully applied",
       status: "success",
-      title: "Success"
+      title: "Success",
     });
     setLoading(false);
-    location.reload();
+    props.port?.postMessage(`report_${props.id}`);
   }
 
   return (
@@ -132,7 +132,7 @@ export default function(props: ReportCardProps) {
       </CardBody>
       <CardFooter display={props.open ? undefined : "none"}>
         <Stack direction="column" gap="16px">
-          {(function() {
+          {(function () {
             const radioGroups = [];
             for (let i = 0; i < props.target_ids.length; i++) {
               radioGroups.push(
@@ -154,7 +154,7 @@ export default function(props: ReportCardProps) {
                       Ban
                     </Radio>
                   </VStack>
-                </RadioGroup>
+                </RadioGroup>,
               );
             }