NOW they should work

components/ReportCard.tsx

@@ -12,31 +12,31 @@ import {
   Spacer,
   Stack,
   Text,
-  useToast
+  useToast,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function(props: ReportCardProps) {
+export default function (props: ReportCardProps) {
   const [attachmentIdx, setAttachmentIdx] = useState(0);
   const toast = useToast();
   const targetMap: { [k: number]: string } = {};
   const [attachmentsReady, setAttachmentReady] = useState(
-    !props.attachments_loading
+    !props.attachments_loading,
   );
   const actionMap: { [k: number]: number } = {};
 
   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 recheckAttachment() {
     const attachmentCheck = await fetch("/api/uploads/status", {
       body: JSON.stringify(props.attachments),
       headers: {
-        "content-type": "application/json"
+        "content-type": "application/json",
       },
-      method: "POST"
+      method: "POST",
     });
 
     setAttachmentReady(attachmentCheck.ok);
@@ -46,16 +46,16 @@ 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) {
       toast({
-        description: (await submitReq.json() as { error: string }).error,
+        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;
@@ -64,7 +64,7 @@ export default function(props: ReportCardProps) {
     toast({
       description: "Actions were successfully applied",
       status: "success",
-      title: "Success"
+      title: "Success",
     });
   }
 
@@ -155,15 +155,15 @@ export default function(props: ReportCardProps) {
           </Button>
         ) : (
           <Stack direction="column">
-            {(function() {
+            {(function () {
               const radioGroups = [];
               for (let i = 0; i < props.target_ids.length; i++) {
                 radioGroups.push(
                   <RadioGroup
                     name={props.target_ids[i].toString()}
                     onChange={(val) => {
                       Object.defineProperty(actionMap, props.target_ids[i], {
-                        value: parseInt(val)
+                        value: parseInt(val),
                       });
                     }}
                   >
@@ -179,14 +179,19 @@ export default function(props: ReportCardProps) {
                         Ban
                       </Radio>
                     </Stack>
-                  </RadioGroup>
+                  </RadioGroup>,
                 );
               }
 
               return radioGroups;
             })()}
             <Box pt="16px">
-              <Button colorScheme="blue">Submit</Button>
+              <Button
+                colorScheme="blue"
+                onClick={async () => await submitActions()}
+              >
+                Submit
+              </Button>
             </Box>
           </Stack>
         )}