Use MessageChannels to self-delete queue items

Previous method would cause site to die

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>,
               );
             }