Add actual delete button to inactivity info modal

app/routes/inactivities.tsx

@@ -7,6 +7,7 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Table,
@@ -69,7 +70,9 @@ export async function loader({ context }: { context: RequestContext }) {
     results[i].user = JSON.parse(results[i].user as string);
   }
 
-  return results.filter((row) => {
+  return {
+    can_delete: currentUser.permissions & (1 << 0),
+    results: results.filter((row) => {
       const decisionValues = Object.values(
         row.decisions as { [k: string]: boolean },
       );
@@ -81,7 +84,8 @@ export async function loader({ context }: { context: RequestContext }) {
       id: string;
       start: string;
       user: { email?: string; id: string; username: string };
-  }[];
+    }[],
+  };
 }
 
 export default function () {
@@ -115,6 +119,35 @@ export default function () {
     onOpen();
   }
 
+  async function deleteInactivity(id: string) {
+    const response = await fetch(`/api/inactivity/${id}`, {
+      method: "DELETE",
+    });
+
+    if (response.ok) {
+      onClose();
+      setInactivity({});
+      toast({
+        status: "success",
+        title: "Notice Deleted",
+      });
+
+      return;
+    }
+
+    let msg = "Unknown error";
+
+    try {
+      msg = ((await response.json()) as { error: string }).error;
+    } catch {}
+
+    toast({
+      description: msg,
+      status: "error",
+      title: "Failed to Delete",
+    });
+  }
+
   return (
     <Container maxW="container.lg">
       <Modal isOpen={isOpen} onClose={onClose}>
@@ -153,6 +186,11 @@ export default function () {
               </ListItem>
             </UnorderedList>
           </ModalBody>
+          {data.can_delete ? (
+            <ModalFooter>
+              <Button colorScheme="red">Delete</Button>
+            </ModalFooter>
+          ) : null}
         </ModalContent>
       </Modal>
       <Heading pb="32px">Current Inactivity Notices</Heading>
@@ -171,7 +209,7 @@ export default function () {
             </Tr>
           </Thead>
           <Tbody>
-            {data.map((row) => (
+            {data.results.map((row) => (
               <Tr key={row.id}>
                 <Td>{row.user.username}</Td>
                 <Td>{row.user.id}</Td>