Skip to content
Permalink
05a0d192c3
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
133 lines (124 sloc) 3.42 KB
import {
Box,
Button,
Card,
CardBody,
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.created_at).toUTCString(),
);
const [action, setAction] = useState("");
const [feedback, setFeedback] = useState("");
useEffect(() => {
setDateString(new Date(props.created_at).toLocaleString());
}, [props.created_at]);
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 id={`appeal_${props.user.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.user.username}</Heading>
<Text fontSize="xs">ID: {props.user.id}</Text>
</CardHeader>
<CardBody>
<Stack divider={<StackDivider />}>
<Box>
<Heading size="xs">Response: Why were you banned?</Heading>
<Text>{props.ban_reason}</Text>
</Box>
<Box>
<Heading size="xs">Response: Why should we unban you?</Heading>
<Text>{props.reason_for_unban}</Text>
</Box>
<Box>
<Heading size="xs">
Response: What have you learned from your mistake?
</Heading>
<Text>{props.learned}</Text>
</Box>
</Stack>
</CardBody>
<CardFooter pb="4px">
<Box>
<Button colorScheme="red" onClick={() => showModal("Deny")}>
Deny
</Button>
<Button
colorScheme="blue"
ml="8px"
onClick={() => showModal("Accept")}
>
Accept
</Button>
</Box>
</CardFooter>
<CardFooter py="4px">
<Text fontSize="xs">Submitted at: {dateString}</Text>
</CardFooter>
</Card>
);
}