Create new appeal ban modal

components/NewAppealBan.tsx

@@ -0,0 +1,87 @@
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+export default function (props: { isOpen: boolean; onClose: () => void }) {
+  const [userID, setUserID] = useState("");
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+
+  async function submitBan() {
+    const submitResp = await fetch(`/appeals/${userID}/ban`, {
+      body: "{}",
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (!submitResp.ok) {
+      let error;
+
+      try {
+        error = ((await submitResp.json()) as { error: string }).error;
+      } catch {
+        error = "Unknown error";
+      }
+
+      toast({
+        description: error,
+        isClosable: true,
+        status: "error",
+        title: "Oops",
+      });
+
+      return;
+    }
+
+    toast({
+      description: "User has been banned from appeals",
+      isClosable: true,
+      status: "success",
+      title: "Success",
+    });
+
+    props.onClose();
+  }
+
+  return (
+    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>New Appeal Ban</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text>User ID</Text>
+          <Input
+            onChange={(e) => setUserID(e.target.value)}
+            placeholder="1234567890987654321"
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={props.onClose}>Cancel</Button>
+          <Button
+            colorScheme="blue"
+            isLoading={loading}
+            loadingText="Submitting..."
+            ml="8px"
+            onClick={async () => await submitBan()}
+          >
+            Submit
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}