Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Create takeAction function
  • Loading branch information
regalijan committed Oct 19, 2023
1 parent 89073ae commit 4e4cae7
Showing 1 changed file with 75 additions and 3 deletions.
78 changes: 75 additions & 3 deletions components/AppealCard.tsx
Expand Up @@ -6,23 +6,89 @@ import {
CardFooter,
CardHeader,
Heading,
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Stack,
StackDivider,
Text,
Textarea,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";

export default function (props: AppealCardProps) {
const [dateString, setDateString] = useState(
new Date(props.createdAt).toUTCString()
);
const [action, setAction] = useState("");
const [feedback, setFeedback] = useState("");

useEffect(() => {
setDateString(new Date(props.createdAt).toLocaleString());
}, [props.createdAt]);

const { isOpen, onClose, onOpen } = useDisclosure();

function showModal(action: "Accept" | "Deny") {
setAction(action);
onOpen();
}

async function takeAction(action: string) {
const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
body: feedback ? JSON.stringify({ feedback }) : "{}",
headers: {
"content-type": "application/json",
},
method: "POST",
});

if (actionReq.ok) {
useToast()({
description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
duration: 5000,
status: "success",
title: "Success",
});

document.getElementById(`appeal_${props.id}`)?.remove();
}

useToast()({
description: ((await actionReq.json()) as { error: string }).error,
duration: 10000,
status: "error",
title: "Oops!",
});
}

return (
<Card w="100%">
<Card id={`appeal_${props.id}`} w="100%">
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{action} this appeal?</ModalHeader>
<ModalBody>
<Text size="xs">Optionally provide feedback</Text>
<Textarea
onChange={(e) => setFeedback(e.target.value)}
placeholder="Your feedback"
/>
</ModalBody>
<ModalFooter>
<Button
onClick={async () => await takeAction(action.toLowerCase())}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
<CardHeader>
<Heading size="md">
Appeal for {props.username}#{props.discriminator}
Expand All @@ -49,8 +115,14 @@ export default function (props: AppealCardProps) {
</CardBody>
<CardFooter pb="4px">
<Box>
<Button colorScheme="red">Deny</Button>
<Button colorScheme="blue" ml="8px">
<Button colorScheme="red" onClick={() => showModal("Deny")}>
Deny
</Button>
<Button
colorScheme="blue"
ml="8px"
onClick={() => showModal("Accept")}
>
Accept
</Button>
</Box>
Expand Down

0 comments on commit 4e4cae7

Please sign in to comment.