Generally fix up inactivity notices

components/NewInactivityNotice.tsx

@@ -26,23 +26,22 @@ export default function (props: {
 }) {
   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() {
-    (document.getElementById("start") as HTMLInputElement).value = "";
-    (document.getElementById("end") as HTMLInputElement).value = "";
-    (document.getElementById("reason") as HTMLTextAreaElement).value = "";
+    setEnd("");
+    setReason("");
+    setStart("");
 
     props.onClose();
   }
 
   async function submit() {
     setLoading(true);
-    const start = (document.getElementById("start") as HTMLInputElement).value;
-    const end = (document.getElementById("end") as HTMLInputElement).value;
-    const reason = (document.getElementById("reason") as HTMLTextAreaElement)
-      .value;
 
     if (!departments.length) {
       toast({
@@ -55,6 +54,17 @@ export default function (props: {
       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,
@@ -90,7 +100,7 @@ export default function (props: {
       title: "Success",
     });
 
-    setLoading(true);
+    setLoading(false);
     props.onClose();
   }
 
@@ -103,16 +113,26 @@ export default function (props: {
           <ModalCloseButton />
           <ModalBody>
             <Text>Start Date</Text>
-            <input id="start" type="date" />
+            <input
+              id="start"
+              onChange={(e) => setStart(e.target.value)}
+              type="date"
+            />
             <br />
             <br />
             <Text>End Date</Text>
-            <input id="end" type="date" />
+            <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 />
@@ -127,20 +147,21 @@ export default function (props: {
                 ))}
               </VStack>
             </CheckboxGroup>
-            <RadioGroup
-              onChange={(v) => setIsHiatus(JSON.parse(v))}
-              style={{
-                display: departments.includes("DM") ? undefined : "none",
-              }}
-              value={JSON.stringify(isHiatus)}
-            >
-              <br />
-              <br />
-              <HStack>
-                <Radio value="false">Inactivity</Radio>
-                <Radio value="true">Hiatus</Radio>
-              </HStack>
-            </RadioGroup>
+            {departments.includes("DM") ? (
+              <>
+                <br />
+                <br />
+                <RadioGroup
+                  onChange={(v) => setIsHiatus(JSON.parse(v))}
+                  value={JSON.stringify(isHiatus)}
+                >
+                  <HStack>
+                    <Radio value="false">Inactivity</Radio>
+                    <Radio value="true">Hiatus</Radio>
+                  </HStack>
+                </RadioGroup>
+              </>
+            ) : null}
           </ModalBody>
           <ModalFooter>
             <Button onClick={reset}>Cancel</Button>