Add delete button and replace dot with border

app/routes/events-team.tsx

@@ -28,14 +28,10 @@ import {
 import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
 import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
-import stylesheet from "../styles/events-team.css";
 import { type LinksFunction } from "@remix-run/cloudflare";
 
 export const links: LinksFunction = () => {
-  return [
-    { href: stylesheet, rel: "stylesheet" },
-    { href: calendarStyles, rel: "stylesheet" },
-  ];
+  return [{ href: calendarStyles, rel: "stylesheet" }];
 };
 
 export async function loader({ context }: { context: RequestContext }) {
@@ -112,6 +108,11 @@ export default function () {
     onClose: onForgottenClose,
     onOpen: onForgottenOpen,
   } = useDisclosure();
+  const {
+    isOpen: isDeleteOpen,
+    onClose: onDeleteClose,
+    onOpen: onDeleteOpen,
+  } = useDisclosure();
   const toast = useToast();
   const [selectedEvent, setSelectedEvent] = useState("");
   const [showOld, setShowOld] = useState(false);
@@ -314,6 +315,33 @@ export default function () {
     setSelectedEvent("");
   }
 
+  async function deleteEvent(eventId: string) {
+    const deleteResp = await fetch(`/api/events-team/events/${eventId}`, {
+      method: "DELETE",
+    });
+
+    onDeleteClose();
+
+    if (!deleteResp.ok) {
+      let msg = "Unknown error";
+
+      try {
+        msg = ((await deleteResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: msg,
+        status: "error",
+        title: "Failed to delete",
+      });
+
+      return;
+    }
+
+    setEventData(eventData.filter((e) => e.id !== eventId));
+    setSelectedEvent("");
+  }
+
   return (
     <Container maxW="container.lg">
       <Modal isOpen={isOpen} onClose={onClose}>
@@ -408,6 +436,25 @@ export default function () {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      <Modal isOpen={isDeleteOpen} onClose={onDeleteClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Delete Event?</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            You are about to permanently delete this event. Are you sure you
+            want to continue?
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onDeleteClose}>Cancel</Button>
+            <Button
+              colorScheme="red"
+              ml="8px"
+              onClick={async () => await deleteEvent(selectedEvent)}
+            />
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <VStack spacing="8">
         {eventData
           .map((event) => {
@@ -425,7 +472,11 @@ export default function () {
             };
 
             return (
-              <Card w="100%">
+              <Card
+                borderColor={eventColors[event.type]}
+                borderRadius="2px"
+                w="100%"
+              >
                 <CardBody>
                   <Stack divider={<StackDivider />} spacing="4">
                     <Box>
@@ -548,10 +599,25 @@ export default function () {
                           : "Approved"
                         : "Denied"}
                   </Text>
-                  <span
-                    className="dot"
-                    style={{ backgroundColor: eventColors[event.type] }}
-                  ></span>
+                  <Button
+                    alignSelf="center"
+                    onClick={() => {
+                      setSelectedEvent(event.id);
+                      onDeleteOpen();
+                    }}
+                    marginLeft="auto"
+                    marginRight={0}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      fill="currentColor"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
+                    </svg>
+                  </Button>
                 </CardFooter>
               </Card>
             );