Make punishment buttons work

components/ReportCard.tsx

@@ -12,34 +12,62 @@ import {
   Spacer,
   Stack,
   Text,
+  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);
   }
 
+  async function submitActions() {
+    const submitReq = await fetch(`/api/reports/${props.id}/action`, {
+      body: JSON.stringify(actionMap),
+      headers: {
+        "content-type": "application/json"
+      },
+      method: "POST"
+    });
+
+    if (!submitReq.ok) {
+      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̵̡̢̦͕͂"
+      });
+
+      return;
+    }
+
+    toast({
+      description: "Actions were successfully applied",
+      status: "success",
+      title: "Success"
+    });
+  }
+
   return (
     <Card key={props.id} w="100%">
       <CardHeader>
@@ -127,7 +155,7 @@ 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(
@@ -135,7 +163,7 @@ export default function (props: ReportCardProps) {
                     name={props.target_ids[i].toString()}
                     onChange={(val) => {
                       Object.defineProperty(actionMap, props.target_ids[i], {
-                        value: parseInt(val),
+                        value: parseInt(val)
                       });
                     }}
                   >
@@ -151,7 +179,7 @@ export default function (props: ReportCardProps) {
                         Ban
                       </Radio>
                     </Stack>
-                  </RadioGroup>,
+                  </RadioGroup>
                 );
               }