diff --git a/app/routes/et-members.tsx b/app/routes/et-members.tsx index 3f4e7f2..367862a 100644 --- a/app/routes/et-members.tsx +++ b/app/routes/et-members.tsx @@ -21,6 +21,7 @@ import { TableContainer, Tbody, Td, + Text, Th, Thead, Tr, @@ -60,7 +61,7 @@ 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", @@ -68,13 +69,35 @@ export default function () { 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()); 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} + + + + Remove Member + + + + 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? + + + + + + + + Events Team Members @@ -193,7 +252,12 @@ export default function () { )}
- removeMember(member.id)}> + { + setDelMember({ id: member.id, name: member.name }); + openDelConfirm(); + }} + > Remove