Permalink
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:50
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
Newer
100644
144 lines (135 sloc)
3.76 KB
1
import {
2
Box,
4
Card,
5
CardBody,
6
CardFooter,
7
CardHeader,
8
Heading,
9
Modal,
10
ModalBody,
11
ModalContent,
12
ModalFooter,
13
ModalHeader,
14
ModalOverlay,
15
Stack,
16
StackDivider,
17
Text,
21
} from "@chakra-ui/react";
23
28
const [action, setAction] = useState("");
29
const [feedback, setFeedback] = useState("");
34
setDateString(new Date(props.created_at).toLocaleString());
35
}, [props.created_at]);
37
const { isOpen, onClose, onOpen } = useDisclosure();
38
39
function showModal(action: "Accept" | "Deny") {
40
setAction(action);
41
onOpen();
42
}
43
44
async function takeAction(action: string) {
46
const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
47
body: feedback ? JSON.stringify({ feedback }) : "{}",
48
headers: {
49
"content-type": "application/json",
50
},
51
method: "POST",
52
});
53
54
if (actionReq.ok) {
57
description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
58
duration: 5000,
59
status: "success",
60
title: "Success",
61
});
62
63
document.getElementById(`appeal_${props.id}`)?.remove();
66
toast({
67
description: ((await actionReq.json()) as { error: string }).error,
68
duration: 10000,
69
status: "error",
70
title: "Oops!",
71
});
79
return (
81
<Modal isOpen={isOpen} onClose={onClose}>
82
<ModalOverlay />
83
<ModalContent>
84
<ModalHeader>{action} this appeal?</ModalHeader>
85
<ModalBody>
86
<Text size="xs">Optionally provide feedback</Text>
87
<Textarea
88
onChange={(e) => setFeedback(e.target.value)}
89
placeholder="Your feedback"
90
/>
91
</ModalBody>
92
<ModalFooter>
93
<Button
94
onClick={async () => await takeAction(action.toLowerCase())}
97
>
98
Submit
99
</Button>
100
</ModalFooter>
101
</ModalContent>
102
</Modal>
110
<Heading size="xs">Response: Why were you banned?</Heading>
111
<Text>{props.ban_reason}</Text>
113
<Box>
114
<Heading size="xs">Response: Why should we unban you?</Heading>
115
<Text>{props.reason_for_unban}</Text>
116
</Box>
117
<Box>
118
<Heading size="xs">
119
Response: What have you learned from your mistake?
120
</Heading>
121
<Text>{props.learned}</Text>
122
</Box>
123
</Stack>
124
</CardBody>
125
<CardFooter pb="4px">
126
<Box>
127
<Button colorScheme="red" onClick={() => showModal("Deny")}>
128
Deny
129
</Button>
130
<Button
131
colorScheme="blue"
132
ml="8px"
133
onClick={() => showModal("Accept")}
134
>
135
Accept
136
</Button>
137
</Box>
138
</CardFooter>
139
<CardFooter py="4px">
140
<Text fontSize="xs">Submitted at: {dateString}</Text>
141
</CardFooter>
142
</Card>
143
);
144
}