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:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
Newer
100644
135 lines (126 sloc)
3.43 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("");
32
setDateString(new Date(props.created_at).toLocaleString());
33
}, [props.created_at]);
35
const { isOpen, onClose, onOpen } = useDisclosure();
36
37
function showModal(action: "Accept" | "Deny") {
38
setAction(action);
39
onOpen();
40
}
41
42
async function takeAction(action: string) {
43
const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
44
body: feedback ? JSON.stringify({ feedback }) : "{}",
45
headers: {
46
"content-type": "application/json",
47
},
48
method: "POST",
49
});
50
51
if (actionReq.ok) {
52
useToast()({
53
description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
54
duration: 5000,
55
status: "success",
56
title: "Success",
57
});
58
59
document.getElementById(`appeal_${props.id}`)?.remove();
60
}
61
62
useToast()({
63
description: ((await actionReq.json()) as { error: string }).error,
64
duration: 10000,
65
status: "error",
66
title: "Oops!",
67
});
68
}
69
70
return (
72
<Modal isOpen={isOpen} onClose={onClose}>
73
<ModalOverlay />
74
<ModalContent>
75
<ModalHeader>{action} this appeal?</ModalHeader>
76
<ModalBody>
77
<Text size="xs">Optionally provide feedback</Text>
78
<Textarea
79
onChange={(e) => setFeedback(e.target.value)}
80
placeholder="Your feedback"
81
/>
82
</ModalBody>
83
<ModalFooter>
84
<Button
85
onClick={async () => await takeAction(action.toLowerCase())}
86
>
87
Submit
88
</Button>
89
</ModalFooter>
90
</ModalContent>
91
</Modal>
101
<Heading size="xs">Response: Why were you banned?</Heading>
102
<Text>{props.ban_reason}</Text>
104
<Box>
105
<Heading size="xs">Response: Why should we unban you?</Heading>
106
<Text>{props.reason_for_unban}</Text>
107
</Box>
108
<Box>
109
<Heading size="xs">
110
Response: What have you learned from your mistake?
111
</Heading>
112
<Text>{props.learned}</Text>
113
</Box>
114
</Stack>
115
</CardBody>
116
<CardFooter pb="4px">
117
<Box>
118
<Button colorScheme="red" onClick={() => showModal("Deny")}>
119
Deny
120
</Button>
121
<Button
122
colorScheme="blue"
123
ml="8px"
124
onClick={() => showModal("Accept")}
125
>
126
Accept
127
</Button>
128
</Box>
129
</CardFooter>
130
<CardFooter py="4px">
131
<Text fontSize="xs">Submitted at: {dateString}</Text>
132
</CardFooter>
133
</Card>
134
);
135
}