Le fixes part 1

components/NewInfractionModal.tsx

@@ -12,8 +12,14 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 export default function (props: { isOpen: boolean; onClose: () => void }) {
+  const [loading, setLoading] = useState(false);
+  const [punishment, setPunishment] = useState("");
+  const [user, setUser] = useState("");
+  const toast = useToast();
+
   function pasteHandler(e: ClipboardEvent) {
     if (!props.isOpen) return;
 
@@ -52,13 +58,11 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
 
     props.onClose();
   }
+
   async function submit() {
+    setLoading(true);
     const form = new FormData();
     const { files } = document.getElementById("evidence") as HTMLInputElement;
-    const punishment = (
-      document.getElementById("punishment") as unknown as HTMLSelectElement
-    ).item(0)?.value as string;
-    const { value: user } = document.getElementById("user") as HTMLInputElement;
 
     form.append("user", user);
     form.append("punishment", punishment);
@@ -74,7 +78,8 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
     });
 
     if (postReq.ok) {
-      useToast()({
+      setLoading(false);
+      toast({
         description: "Infraction created",
         duration: 5000,
         isClosable: true,
@@ -83,11 +88,10 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
       });
 
       props.onClose();
-
       return;
     }
 
-    useToast()({
+    toast({
       description: `Failed to create infraction (${
         ((await postReq.json()) as { error: string }).error
       })`,
@@ -96,6 +100,8 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
       status: "error",
       title: "Error",
     });
+
+    setLoading(false);
   }
 
   return (
@@ -112,11 +118,19 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
         <ModalCloseButton />
         <ModalBody>
           <Text>User ID</Text>
-          <Input id="user" placeholder="1234567890987654321" />
+          <Input
+            id="user"
+            placeholder="1234567890987654321"
+            onChange={(e) => setUser(e.target.value)}
+          />
           <br />
           <br />
           <Text>Punishment</Text>
-          <Select id="punishment" placeholder="Select punishment">
+          <Select
+            id="punishment"
+            onChange={(t) => setPunishment(t.target.value)}
+            placeholder="Select punishment"
+          >
             <option value="verbal">Verbal Warning</option>
             <option value="warn">Warning</option>
             <option value="mute">Mute</option>

components/Success.tsx

@@ -1,4 +1,10 @@
-import { Center, Container, Flex, Heading, Spacer, Text } from "@chakra-ui/react";
+import {
+  Container,
+  Flex,
+  Heading,
+  Spacer,
+  Text,
+} from "@chakra-ui/react";
 
 export default function ({
   heading,