NewInactivityNotice.tsx

import {
  Button,
  Checkbox,
  CheckboxGroup,
  HStack,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Radio,
  RadioGroup,
  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[]);
  const [loading, setLoading] = useState(false);
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [reason, setReason] = useState("");
  const [isHiatus, setIsHiatus] = useState(false);
  const toast = useToast();

  function reset() {
    setEnd("");
    setReason("");
    setStart("");

    props.onClose();
  }

  async function submit() {
    setLoading(true);

    if (!departments.length) {
      toast({
        title: "Validation Error",
        description: "You need to select at least one department",
        status: "error",
      });

      setLoading(false);
      return;
    }

    if (!start || !end || !reason) {
      toast({
        description: "One or more fields are missing",
        status: "error",
        title: "Validation Error",
      });

      setLoading(false);
      return;
    }

    const inactivityPost = await fetch("/api/inactivity/new", {
      body: JSON.stringify({
        departments,
        end,
        hiatus: ["DM", "WM"].find((d) => departments.includes(d))
          ? isHiatus
          : undefined,
        reason,
        start,
      }),
      headers: {
        "content-type": "application/json",
      },
      method: "POST",
    });

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

      return;
    }

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

    setLoading(false);
    props.onClose();
  }

  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"
              onChange={(e) => setStart(e.target.value)}
              type="date"
            />
            <br />
            <br />
            <Text>End Date</Text>
            <input
              id="end"
              onChange={(e) => setEnd(e.target.value)}
              type="date"
            />
            <br />
            <br />
            <Text>Reason</Text>
            <Textarea
              id="reason"
              maxLength={500}
              onChange={(e) => setReason(e.target.value)}
              placeholder="Your reason for making this inactivity notice"
            />
            <br />
            <br />
            <CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
              <Text>Departments:&nbsp;</Text>
              <VStack alignItems="start">
                {props.departments.map((d) => (
                  <Checkbox key={d} value={d}>
                    {d}
                  </Checkbox>
                ))}
              </VStack>
            </CheckboxGroup>
            {["DM", "WM"].find((d) => departments.includes(d)) ? (
              <>
                <br />
                <br />
                <RadioGroup
                  onChange={(v) => setIsHiatus(JSON.parse(v))}
                  value={JSON.stringify(isHiatus)}
                >
                  <HStack>
                    <Radio value="false">Activity Decrease</Radio>
                    <Radio value="true">Inactivity/Hiatus</Radio>
                  </HStack>
                </RadioGroup>
              </>
            ) : null}
          </ModalBody>
          <ModalFooter>
            <Button onClick={reset}>Cancel</Button>
            <Button
              colorScheme="blue"
              ml="8px"
              onClick={async () => await submit()}
              isLoading={loading}
              loadingText="Submitting..."
            >
              Submit
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}