NewInactivityNotice.tsx

import {
  Button,
  Checkbox,
  CheckboxGroup,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
  useToast,
  VStack,
} from "@chakra-ui/react";
import { useState } from "react";

export default function (props: {
  departments: string[];
  isOpen: boolean;
  onClose: () => void;
}) {
  const [departments, setDepartments] = useState([] as string[]);
  function reset() {
    (document.getElementById("start") as HTMLInputElement).value = "";
    (document.getElementById("end") as HTMLInputElement).value = "";
    (document.getElementById("reason") as HTMLTextAreaElement).value = "";

    props.onClose();
  }

  async function submit() {
    const start = (document.getElementById("start") as HTMLInputElement).value;
    const end = (document.getElementById("start") as HTMLInputElement).value;
    const reason = (document.getElementById("reason") as HTMLTextAreaElement)
      .value;

    if (!departments.length)
      return alert("You need to select at least one department!");

    const inactivityPost = await fetch("/api/inactivity/new", {
      body: JSON.stringify({
        end,
        reason,
        start,
      }),
      headers: {
        "content-type": "application/json",
      },
      method: "POST",
    });

    if (!inactivityPost.ok)
      return useToast()({
        description: ((await inactivityPost.json()) as { error: string }).error,
        duration: 10000,
        isClosable: true,
        status: "error",
        title: "Error",
      });

    useToast()({
      description: "Your inactivity notice has been created",
      duration: 10000,
      isClosable: true,
      status: "success",
      title: "Success",
    });
  }

  return (
    <>
      <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>New Inactivity Notice</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>Start Date</Text>
            <input id="start" type="date" />
            <br />
            <br />
            <Text>End Date</Text>
            <input id="end" type="date" />
            <br />
            <br />
            <Text>Reason</Text>
            <Textarea
              id="reason"
              placeholder="Your reason for making this inactivity notice"
            />
            <br />
            <br />
            <CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
              <VStack>
                {props.departments.map((d) => (
                  <Checkbox key={d} value={d}>
                    {d}
                  </Checkbox>
                ))}
              </VStack>
            </CheckboxGroup>
          </ModalBody>
          <ModalFooter>
            <Button onClick={reset}>Cancel</Button>
            <Button
              colorScheme="blue"
              ml="8px"
              onClick={async () => await submit()}
            >
              Submit
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}