Add modal prompt for removing et members

app/routes/et-members.tsx

@@ -21,6 +21,7 @@ import {
   TableContainer,
   Tbody,
   Td,
+  Text,
   Th,
   Thead,
   Tr,
@@ -60,21 +61,43 @@ export default function () {
   const toast = useToast();
 
   async function removeMember(id: string) {
-    await fetch("/api/events-team/team-members/user", {
+    const removeResp = await fetch("/api/events-team/team-members/user", {
       body: JSON.stringify({ id }),
       headers: {
         "content-type": "application/json",
       },
       method: "DELETE",
     });
 
+    if (!removeResp.ok) {
+      toast({
+        description: "Failed to remove member, try again later",
+        status: "error",
+        title: "Oops",
+      });
+
+      return;
+    }
+
+    toast({
+      description: "The member was removed from the roster",
+      status: "success",
+      title: "Member Removed",
+    });
+
     setMemberData(memberData.filter((member) => member.id !== id));
   }
 
   const [realtimePoints, setRealtimePoints] = useState(0);
   const [currentModalMember, setModalMember] = useState("");
+  const [currentDelMember, setDelMember] = useState({ id: "", name: "" });
   const [memberData, setMemberData] = useState(useLoaderData<typeof loader>());
   const { isOpen, onClose, onOpen } = useDisclosure();
+  const {
+    isOpen: isDelConfirmOpen,
+    onClose: closeDelConfirm,
+    onOpen: openDelConfirm,
+  } = useDisclosure();
   const isManagement = Math.round(Math.random()) === 1;
 
   async function updatePoints(id: string, points: number) {
@@ -157,6 +180,42 @@ export default function () {
           ) : null}
         </ModalContent>
       </Modal>
+      <Modal isOpen={isDelConfirmOpen} onClose={closeDelConfirm}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Remove Member</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>
+              You are about to remove {currentDelMember.name} from the Events
+              Team roster, this will clear all of their data. Are you sure you
+              want to do this?
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="blue"
+              onClick={() => {
+                setDelMember({ id: "", name: "" });
+                closeDelConfirm();
+              }}
+            >
+              No
+            </Button>
+            <Button
+              colorScheme="red"
+              onClick={async () => {
+                await removeMember(currentDelMember.id);
+                setDelMember({ id: "", name: "" });
+                closeDelConfirm();
+              }}
+              pl="8px"
+            >
+              Yes, Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <Heading>Events Team Members</Heading>
       <TableContainer pt="16px">
         <Table variant="simple">
@@ -193,7 +252,12 @@ export default function () {
                   )}
                 </Td>
                 <Td>
-                  <Link onClick={async () => removeMember(member.id)}>
+                  <Link
+                    onClick={() => {
+                      setDelMember({ id: member.id, name: member.name });
+                      openDelConfirm();
+                    }}
+                  >
                     Remove
                   </Link>
                 </Td>