NewAppealBan.tsx

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(`/api/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>
  );
}