Add submission to inactivity notice modal

components/NewInactivityNotice.tsx

@@ -1,14 +1,17 @@
 import {
+  Button,
   Checkbox,
   CheckboxGroup,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Text,
   Textarea,
+  useToast,
   VStack,
 } from "@chakra-ui/react";
 import { useState } from "react";
@@ -32,6 +35,38 @@ export default function (props: {
     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 (
@@ -67,6 +102,16 @@ export default function (props: {
               </VStack>
             </CheckboxGroup>
           </ModalBody>
+          <ModalFooter>
+            <Button onClick={reset}>Cancel</Button>
+            <Button
+              colorScheme="blue"
+              ml="8px"
+              onClick={async () => await submit()}
+            >
+              Submit
+            </Button>
+          </ModalFooter>
         </ModalContent>
       </Modal>
     </>