Le fixes part 1

app/routes/admin-application.tsx

@@ -7,6 +7,9 @@ import {
   Textarea,
   useToast,
 } from "@chakra-ui/react";
+import { useState } from "react";
+import Success from "../../components/Success.js";
+import { useLoaderData } from "@remix-run/react";
 
 export function meta() {
   return [
@@ -16,80 +19,131 @@ export function meta() {
   ];
 }
 
-export default function () {
+export async function loader({ context }: { context: RequestContext }) {
-  async function submit() {
+  const user: { [k: string]: any } = context.data.current_user;
-    const submitReq = await fetch("/api/admin-apps/submit");
 
-    useToast()({
+  if (!user)
-      description: submitReq.ok
+    throw new Response(null, {
-        ? "Your application was submitted"
+      status: 401,
-        : "Try again later",
-      duration: 10000,
-      isClosable: true,
-      status: submitReq.ok ? "success" : "error",
-      title: submitReq.ok ? "Success" : "Unknown Error",
     });
+
+  return null;
+}
+
+export default function () {
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const toast = useToast();
+  useLoaderData<typeof loader>();
+
+  async function submit() {
+    setLoading(true);
+
+    const submitReq = await fetch("/api/admin-apps/submit");
+    if (!submitReq.ok) {
+      toast({
+        title: "Error",
+        description:
+          "Something went wrong while submitting your application. Try again.",
+        status: "error",
+      });
+
+      return;
+    }
+
+    setLoading(false);
+    setSuccess(true);
   }
 
   return (
-    <Container maxW="container.md" pt="4vh" textAlign="start">
+    <>
-      <Heading size="xl">Admin Application</Heading>
+      <Container
-      <br />
+        maxW="container.md"
-      <br />
+        pt="4vh"
-      <Text fontSize="md">Why do you want to be an admin?</Text>
+        textAlign="start"
-      <br />
+        display={success ? "block" : "none"}
-      <Textarea
+      >
-        maxLength={2000}
+        <Success
-        placeholder="Explain why you want to be an admin. This should be at least a few sentences."
+          heading={"Application Submitted"}
-      />
+          message={
-      <br />
+            "Your application for admin has been submitted! We'll email you once we've reached a decision."
-      <br />
+          }
-      <br />
+        ></Success>
-      <Text fontSize="md">
+      </Container>
-        How long have you been in the Car Crushers community?
+      <Container
-      </Text>
+        maxW="container.md"
-      <br />
+        pt="4vh"
-      <Input maxLength={40} placeholder="Your response" />
+        textAlign="start"
-      <br />
+        display={success ? "none" : "block"}
-      <br />
+      >
-      <br />
+        <Heading size="xl">Admin Application</Heading>
-      <Text fontSize="md">
+        <br />
-        Explain why you are a better candidate than someone else.
+        <br />
-      </Text>
+        <Text fontSize="md">Why do you want to be an admin?</Text>
-      <br />
+        <br />
-      <Textarea
+        <Textarea
-        maxLength={2000}
+          maxLength={2000}
-        placeholder="Explain why you are a better candidate. This should be at least a few sentences."
+          placeholder="Explain why you want to be an admin. This should be at least a few sentences."
-      />
+        />
-      <br />
+        <br />
-      <br />
+        <br />
-      <br />
+        <br />
-      <Text fontSize="md">
+        <Text fontSize="md">
-        Describe yourself from a third-person point-of-view.
+          How long have you been in the Car Crushers community?
-      </Text>
+        </Text>
-      <br />
+        <br />
-      <Textarea
+        <Input maxLength={40} placeholder="Your response" />
-        maxLength={1000}
+        <br />
-        placeholder="Describe yourself from a third-person view in a few sentences."
+        <br />
-      />
+        <br />
-      <br />
+        <Text fontSize="md">
-      <br />
+          Explain why you are a better candidate than someone else.
-      <br />
+        </Text>
-      <Text fontSize="md">
+        <br />
-        If you have any comments or questions, type them here.
+        <Textarea
-      </Text>
+          maxLength={2000}
-      <br />
+          placeholder="Explain why you are a better candidate. This should be at least a few sentences."
-      <Textarea maxLength={1000} placeholder="Comments and questions go here" />
+        />
-      <br />
+        <br />
-      <br />
+        <br />
-      <br />
+        <br />
-      <span>
+        <Text fontSize="md">
-        By submitting this form, you agree to the{" "}
+          Describe yourself from a third-person point-of-view.
-        <a href="/terms">Terms of Service</a> and{" "}
+        </Text>
-        <a href="/privacy">Privacy Policy</a>.
+        <br />
-      </span>
+        <Textarea
-      <br />
+          maxLength={1000}
-      <Button onClick={async () => await submit()}>Submit</Button>
+          placeholder="Describe yourself from a third-person view in a few sentences."
-    </Container>
+        />
+        <br />
+        <br />
+        <br />
+        <Text fontSize="md">
+          If you have any comments or questions, type them here.
+        </Text>
+        <br />
+        <Textarea
+          maxLength={1000}
+          placeholder="Comments and questions go here"
+        />
+        <br />
+        <br />
+        <br />
+        <span>
+          By submitting this form, you agree to the{" "}
+          <a href="/terms">Terms of Service</a> and{" "}
+          <a href="/privacy">Privacy Policy</a>.
+        </span>
+        <br />
+        <Button
+          onClick={async () => await submit()}
+          isLoading={loading}
+          loadingText="Submitting"
+          mt={3}
+        >
+          Submit
+        </Button>
+      </Container>
+    </>
   );
 }

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,

functions/api/infractions/new.ts

@@ -21,9 +21,10 @@ export async function onRequestPost(context: RequestContext) {
     return jsonError("Forbidden", 403);
 
   if (
-    context.request.headers
+    !context.request.headers
       .get("content-type")
-      ?.startsWith("multipart/form-data; boundary=")
+      ?.toLowerCase()
+      .startsWith("multipart/form-data;")
   )
     return jsonError("Invalid content type", 400);