Do same for other cards

components/AppealCard.tsx

@@ -17,13 +17,13 @@ import {
   Text,
   Textarea,
   useDisclosure,
-  useToast,
+  useToast
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
 export default function(props: AppealCardProps) {
   const [dateString, setDateString] = useState(
-    new Date(props.created_at).toUTCString(),
+    new Date(props.created_at).toUTCString()
   );
   const [action, setAction] = useState("");
   const [feedback, setFeedback] = useState("");
@@ -46,9 +46,9 @@ export default function (props: AppealCardProps) {
     const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
       body: feedback ? JSON.stringify({ feedback }) : "{}",
       headers: {
-        "content-type": "application/json",
+        "content-type": "application/json"
       },
-      method: "POST",
+      method: "POST"
     });
 
     if (actionReq.ok) {
@@ -57,7 +57,7 @@ export default function (props: AppealCardProps) {
         description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
         duration: 5000,
         status: "success",
-        title: "Success",
+        title: "Success"
       });
 
       document.getElementById(`appeal_${props.id}`)?.remove();
@@ -74,7 +74,7 @@ export default function (props: AppealCardProps) {
         description: error,
         duration: 10000,
         status: "error",
-        title: "Oops!",
+        title: "Oops!"
       });
     }
 
@@ -130,7 +130,7 @@ export default function (props: AppealCardProps) {
         </Stack>
       </CardBody>
       <CardFooter pb="4px">
-        <Box visibility={props.open ? "visible" : "hidden"}>
+        <Box display={props.open ? undefined : "none"}>
           <Button colorScheme="red" onClick={() => showModal("Deny")}>
             Deny
           </Button>

components/InactivityNoticeCard.tsx

@@ -11,7 +11,7 @@ import {
   StackDivider,
   Text,
   UnorderedList,
-  useToast,
+  useToast
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -24,9 +24,9 @@ export default function (props: InactivityNoticeProps) {
     const decisionReq = await fetch(`/api/inactivity/${props.id}`, {
       body: JSON.stringify({ accepted }),
       headers: {
-        "content-type": "application/json",
+        "content-type": "application/json"
       },
-      method: "POST",
+      method: "POST"
     });
 
     if (!decisionReq.ok) {
@@ -35,7 +35,7 @@ export default function (props: InactivityNoticeProps) {
         description: ((await decisionReq.json()) as { error: string }).error,
         isClosable: true,
         status: "error",
-        title: "Oops",
+        title: "Oops"
       });
 
       return;
@@ -45,7 +45,7 @@ export default function (props: InactivityNoticeProps) {
       description: `Inactivity notice ${accepted ? "accepted" : "denied"}.`,
       isClosable: true,
       status: "success",
-      title: "Success",
+      title: "Success"
     });
 
     setLoading(false);
@@ -54,13 +54,15 @@ export default function (props: InactivityNoticeProps) {
 
   const Approved = () => (
     <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+      <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
     </svg>
   );
 
   const Denied = () => (
     <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+      <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
     </svg>
   );
 
@@ -101,7 +103,7 @@ export default function (props: InactivityNoticeProps) {
           ) : null}
         </Stack>
       </CardBody>
-      <CardFooter pb="4px">
+      <CardFooter display={props.open ? undefined : "none"} pb="4px">
         <Box>
           <Button
             colorScheme="red"

index.d.ts

@@ -44,6 +44,7 @@ declare global {
     departments: string[];
     end: string;
     id: string;
+    open: boolean;
     reason: string;
     start: string;
     user: {