Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add modal prompt for removing et members
  • Loading branch information
regalijan committed Feb 27, 2024
1 parent 0c74d10 commit d8b6bc4
Showing 1 changed file with 66 additions and 2 deletions.
68 changes: 66 additions & 2 deletions app/routes/et-members.tsx
Expand Up @@ -21,6 +21,7 @@ import {
TableContainer,
Tbody,
Td,
Text,
Th,
Thead,
Tr,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit d8b6bc4

Please sign in to comment.