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
143 lines (134 sloc)
3.7 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
});
78
return (
80
<Modal isOpen={isOpen} onClose={onClose}>
81
<ModalOverlay />
82
<ModalContent>
83
<ModalHeader>{action} this appeal?</ModalHeader>
84
<ModalBody>
85
<Text size="xs">Optionally provide feedback</Text>
86
<Textarea
87
onChange={(e) => setFeedback(e.target.value)}
88
placeholder="Your feedback"
89
/>
90
</ModalBody>
91
<ModalFooter>
92
<Button
93
onClick={async () => await takeAction(action.toLowerCase())}
96
>
97
Submit
98
</Button>
99
</ModalFooter>
100
</ModalContent>
101
</Modal>
109
<Heading size="xs">Response: Why were you banned?</Heading>
110
<Text>{props.ban_reason}</Text>
112
<Box>
113
<Heading size="xs">Response: Why should we unban you?</Heading>
114
<Text>{props.reason_for_unban}</Text>
115
</Box>
116
<Box>
117
<Heading size="xs">
118
Response: What have you learned from your mistake?
119
</Heading>
120
<Text>{props.learned}</Text>
121
</Box>
122
</Stack>
123
</CardBody>
124
<CardFooter pb="4px">
125
<Box>
126
<Button colorScheme="red" onClick={() => showModal("Deny")}>
127
Deny
128
</Button>
129
<Button
130
colorScheme="blue"
131
ml="8px"
132
onClick={() => showModal("Accept")}
133
>
134
Accept
135
</Button>
136
</Box>
137
</CardFooter>
138
<CardFooter py="4px">
139
<Text fontSize="xs">Submitted at: {dateString}</Text>
140
</CardFooter>
141
</Card>
142
);
143
}