Merge pull request #104 from hack4impact-calpoly/103-entry-deletion

Add feature to delete volunteer entries (Resolves #103)

Author: hnadrian

src/app/components/AdminEventDetails/AdminEventDetails.tsx

@@ -30,8 +30,6 @@ type Props = {
   onClose: () => void;
 };
 
-
-
 // get event by id
 async function getEvent(_id: string) {
   try {
@@ -44,7 +42,7 @@ async function getEvent(_id: string) {
     }
     return res.json();
   } catch (err: unknown) {
-    console.log(`error: ${err}`);
+    console.log(`error: ${err}` );
     return null;
   }
 }

src/app/components/AdminEventDetails/DisplayVolunteerInformation.tsx

@@ -1,12 +1,7 @@
 import React, { useState, useEffect } from "react";
-import type {
-  IVolunteerEntry,
-  IFormAnswer,
-} from "../../../database/volunteerEntrySchema";
-import type { IVolunteer } from "../../../database/volunteerSchema";
+import type { IFormAnswer } from "../../../database/volunteerEntrySchema";
 import type {
   IVolunteerRole,
-  IVolunteerRoleTimeslot,
 } from "../../../database/volunteerRoleSchema";
 import style from "./AdminEventDetails.module.css";
 import {
@@ -15,35 +10,111 @@ import {
   Heading,
   Flex,
   Avatar,
+  IconButton,
+  Spacer,
+  useToast,
 } from "@chakra-ui/react";
-import { useUser } from "@clerk/nextjs";
+import { DeleteIcon } from "@chakra-ui/icons";
 
 type Props = {
   name: string;
   roles: IVolunteerRole[];
   responses: IFormAnswer[];
+  volunteerId: string;
+  entryId: string;
+  onDelete: () => void;
 };
 
-export default function DisplayVolunteerInformation({ name, roles, responses }: Props) {
-  const { user } = useUser();
+export default function DisplayVolunteerInformation({
+  name,
+  roles,
+  responses,
+  volunteerId,
+  entryId,
+  onDelete,
+}: Props) {
+  const toast = useToast();
+
   function parseDate(date: Date) {
     return new Date(date).toLocaleTimeString("en-US", {
       hour: "2-digit",
       minute: "2-digit",
       hour12: true,
     });
   }
+
+  async function handleEntryDelete() {
+    if (
+      window.confirm(
+        "Are you sure you want to delete this volunteer submission?"
+      )
+    ) {
+      try {
+        // Remove volunteer from timeslots in roles
+        console.log("roles before deletion", roles);
+        const rolesWithUpdatedTimeslots = roles.map((role) => ({
+          ...role,
+          timeslots: role.timeslots.map((timeslot) => ({
+            ...timeslot,
+            volunteers: timeslot.volunteers.filter(
+              (volunteer) => volunteer !== volunteerId
+            ),
+          })),
+        }));
+
+        console.log("rolesWithUpdatedTimeslots", rolesWithUpdatedTimeslots);
+
+        for (const updatedRole of rolesWithUpdatedTimeslots) {
+          await fetch(`/api/role/${updatedRole._id}`, {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ timeslots: updatedRole.timeslots }),
+          });
+        }
+
+        // Delete the volunteer entry (api endpoint already
+        // removes entry from volunteer.entries array)
+        const deleteResponse = await fetch(`/api/entry/${entryId}`, {
+          method: "DELETE",
+        });
+        if (!deleteResponse.ok) {
+          throw new Error("Failed to delete volunteer entry");
+        } else {
+          toast({
+            title: "Submission removed",
+            description: "The volunteer submission has been successfully removed.",
+            status: "success",
+            duration: 3000,
+            isClosable: true,
+        });
+        }
+
+        console.log("Volunteer entry deleted successfully");
+        onDelete();
+      } catch (error) {
+        console.error("Deletion error:", error);
+      }
+    }
+  }
+
   return (
     <Box p={4} overflow="auto">
       <Flex direction="row" alignItems="center">
-        <Avatar
-          name={name}
-          marginRight={3}
+        <Avatar name={name} marginRight={3} size="sm" />
+        <Heading size="md">{name}</Heading>
+        <Spacer />
+        <IconButton
+          aria-label="Delete volunteer"
+          icon={<DeleteIcon />}
+          onClick={() => handleEntryDelete()}
+          variant="ghost"
           size="sm"
+          colorScheme="green"
         />
-        <Heading size="md">{name}</Heading>
       </Flex>
-      
+
       {roles.map((role, index) => (
         <Box key={index} ml={4}>
           <Flex align="center">
@@ -58,37 +129,35 @@ export default function DisplayVolunteerInformation({ name, roles, responses }:
             <Heading size="sm" mb={2}>
               {role.roleName}
             </Heading>
-            <Flex 
-              className={style.openTime}
-              ml={4}>
+            <Flex className={style.openTime} ml={4}>
               {role.timeslots.map((timeslot, subIndex) => (
                 <Text key={subIndex} mb={1} fontSize="sm">
-                  {parseDate(timeslot.startTime)} - {parseDate(timeslot.endTime)}{"\xa0"} 
+                  {parseDate(timeslot.startTime)} -{" "}
+                  {parseDate(timeslot.endTime)}
+                  {"\xa0"}
                 </Text>
-                
               ))}
             </Flex>
           </Flex>
         </Box>
       ))}
       {responses.map((response, index2) => (
-            <Flex key={index2} align="center" ml={4}>
-              <Box
-                w={4}
-                h={4}
-                borderRadius="full"
-                border="1px solid"
-                borderColor="gray.400"
-                mr={2}
-                mb={5}
-              />
-              <Box>
-                <Text fontWeight="bold">{response.question}</Text>
-                <Text>{response.answer}</Text>
-              </Box>
-            </Flex>
-          ))}
+        <Flex key={index2} align="center" ml={4}>
+          <Box
+            w={4}
+            h={4}
+            borderRadius="full"
+            border="1px solid"
+            borderColor="gray.400"
+            mr={2}
+            mb={5}
+          />
+          <Box>
+            <Text fontWeight="bold">{response.question}</Text>
+            <Text>{response.answer}</Text>
+          </Box>
+        </Flex>
+      ))}
     </Box>
   );
-  
 }

src/app/components/AdminEventDetails/VolunteerDetails.tsx

@@ -1,13 +1,10 @@
 import React, { useState, useEffect } from "react";
-import type { IEvent } from "../../../database/eventSchema";
 import type {
-  IVolunteerEntry,
   IFormAnswer,
 } from "../../../database/volunteerEntrySchema";
 import type { IVolunteer } from "../../../database/volunteerSchema";
 import type {
   IVolunteerRole,
-  IVolunteerRoleTimeslot,
 } from "../../../database/volunteerRoleSchema";
 import style from "./AdminEventDetails.module.css";
 import {
@@ -28,7 +25,6 @@ import {
   Avatar
 } from "@chakra-ui/react";
 import DisplayVolunteerInformation from "./DisplayVolunteerInformation";
-import { useUser } from "@clerk/nextjs";
 
 type Props = {
   _id: string;
@@ -55,7 +51,6 @@ export default function VolunteerDetails({ _id, isOpen, onOpen, onClose}: Props)
   const [filteredEntries, setFilteredEntries] = useState<VolunteerEntry[]>([]);
   const [loading, setLoading] = useState<Boolean>(true);
   const [error, setError] = useState(null);
-  const { user } = useUser();
 
   function parseDate(date: Date) {
     return new Date(date).toLocaleTimeString("en-US", {
@@ -71,16 +66,7 @@ export default function VolunteerDetails({ _id, isOpen, onOpen, onClose}: Props)
 
     const filteredItems = volunteerEntries.filter(
       (entry) =>
-        entry.volunteer.name.toLowerCase().includes(searchTerm.toLowerCase()) //||
-        // entry.roles.map((role: IVolunteerRole) =>
-        //   role.roleName?.toLowerCase().includes(searchTerm.toLowerCase())
-        // )
-      // ||
-      // entry.responses?.map(
-      //   (resp: IFormAnswer) =>
-      //     resp.question?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      //     resp.answer?.toLowerCase().includes(searchTerm.toLowerCase())
-      // )
+        entry.volunteer.name.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
     setFilteredEntries(filteredItems);
@@ -122,6 +108,17 @@ export default function VolunteerDetails({ _id, isOpen, onOpen, onClose}: Props)
       });
   }, []);
 
+  const handleVolunteerDelete = async () => {
+    const newData = await fetchEntries();
+    if (newData) {
+      setVolunteerEntries(newData);
+      setFilteredEntries(newData);
+    } else {
+      setVolunteerEntries([]);
+      setFilteredEntries([]);
+    }
+  };
+
   return (
     <Box p={4}> 
       <Box>
@@ -190,6 +187,9 @@ export default function VolunteerDetails({ _id, isOpen, onOpen, onClose}: Props)
                         name={entry.volunteer.name}
                         roles={entry.roles}
                         responses={entry.responses}
+                        volunteerId={entry.volunteer._id}
+                        entryId={entry._id}
+                        onDelete={() => handleVolunteerDelete()}
                       />
                     </Box>
                   </ListItem>