Skip to content
Permalink
car-crushers-portal/components/AppealCard.tsx
Newer
Older
Raw Normal view History
100644 151 lines (141 sloc) 3.91 KB
@regalijan
Create AppealCard component
October 19, 2023 16:49
1
import {
2
Box,
@regalijan
Add buttons to appeal card
October 19, 2023 16:49
3
Button,
@regalijan
Create AppealCard component
October 19, 2023 16:49
4
Card,
5
CardBody,
6
CardFooter,
7
CardHeader,
8
Heading,
@regalijan
Create takeAction function
October 19, 2023 16:49
9
Modal,
10
ModalBody,
11
ModalContent,
12
ModalFooter,
13
ModalHeader,
14
ModalOverlay,
@regalijan
Create AppealCard component
October 19, 2023 16:49
15
Stack,
16
StackDivider,
17
Text,
@regalijan
Create takeAction function
October 19, 2023 16:49
18
Textarea,
19
useDisclosure,
@regalijan
Do same for other cards
October 21, 2023 00:05
20
useToast
@regalijan
Create AppealCard component
October 19, 2023 16:49
21
} from "@chakra-ui/react";
@regalijan
Fix hydration issues with date string
October 19, 2023 16:49
22
import { useEffect, useState } from "react";
@regalijan
Create AppealCard component
October 19, 2023 16:49
23
@regalijan
Use MessageChannels to self-delete queue items
October 24, 2023 00:32
24
export default function(props: AppealCardProps & { port?: MessagePort }) {
@regalijan
Fix hydration issues with date string
October 19, 2023 16:49
25
const [dateString, setDateString] = useState(
@regalijan
Do same for other cards
October 21, 2023 00:05
26
new Date(props.created_at).toUTCString()
@regalijan
Fix hydration issues with date string
October 19, 2023 16:49
27
);
@regalijan
Create takeAction function
October 19, 2023 16:49
28
const [action, setAction] = useState("");
29
const [feedback, setFeedback] = useState("");
@regalijan
Le formatting fixes
October 19, 2023 16:50
30
const [loading, setLoading] = useState(false);
@regalijan
Fix potential hook issue
October 19, 2023 16:50
31
const toast = useToast();
@regalijan
Fix hydration issues with date string
October 19, 2023 16:49
32
33
useEffect(() => {
@regalijan
Make appeal card use newer entity format
October 19, 2023 16:49
34
setDateString(new Date(props.created_at).toLocaleString());
35
}, [props.created_at]);
@regalijan
Fix hydration issues with date string
October 19, 2023 16:49
36
@regalijan
Create takeAction function
October 19, 2023 16:49
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) {
@regalijan
Le formatting fixes
October 19, 2023 16:50
45
setLoading(true);
@regalijan
Create takeAction function
October 19, 2023 16:49
46
const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
47
body: feedback ? JSON.stringify({ feedback }) : "{}",
48
headers: {
@regalijan
Do same for other cards
October 21, 2023 00:05
49
"content-type": "application/json"
@regalijan
Create takeAction function
October 19, 2023 16:49
50
},
@regalijan
Do same for other cards
October 21, 2023 00:05
51
method: "POST"
@regalijan
Create takeAction function
October 19, 2023 16:49
52
});
53
54
if (actionReq.ok) {
@regalijan
Le formatting fixes
October 19, 2023 16:50
55
setLoading(false);
@regalijan
Fix potential hook issue
October 19, 2023 16:50
56
toast({
@regalijan
Create takeAction function
October 19, 2023 16:49
57
description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
58
duration: 5000,
59
status: "success",
@regalijan
Do same for other cards
October 21, 2023 00:05
60
title: "Success"
@regalijan
Create takeAction function
October 19, 2023 16:49
61
});
62
63
document.getElementById(`appeal_${props.id}`)?.remove();
@regalijan
Fix potential hook issue
October 19, 2023 16:50
64
} else {
@regalijan
Handle unexpected exceptions better
October 19, 2023 16:51
65
let error;
66
67
try {
68
error = ((await actionReq.json()) as { error: string }).error;
69
} catch {
70
error = "Unknown error";
71
}
@regalijan
Le formatting fixes
October 19, 2023 16:50
72
setLoading(false);
@regalijan
Fix potential hook issue
October 19, 2023 16:50
73
toast({
@regalijan
Handle unexpected exceptions better
October 19, 2023 16:51
74
description: error,
@regalijan
Fix potential hook issue
October 19, 2023 16:50
75
duration: 10000,
76
status: "error",
@regalijan
Do same for other cards
October 21, 2023 00:05
77
title: "Oops!"
@regalijan
Fix potential hook issue
October 19, 2023 16:50
78
});
@regalijan
Create takeAction function
October 19, 2023 16:49
79
}
80
@regalijan
Fix potential hook issue
October 19, 2023 16:50
81
onClose();
@regalijan
Le formatting fixes
October 19, 2023 16:50
82
setLoading(false);
@regalijan
Use MessageChannels to self-delete queue items
October 24, 2023 00:32
83
props.port?.postMessage(`appeal_${props.id}`);
@regalijan
Create takeAction function
October 19, 2023 16:49
84
}
85
@regalijan
Create AppealCard component
October 19, 2023 16:49
86
return (
@regalijan
Trial self deletion for item cards
October 19, 2023 16:51
87
<Card id={`appeal_${props.id}`} key={props.id} w="100%">
@regalijan
Create takeAction function
October 19, 2023 16:49
88
<Modal isOpen={isOpen} onClose={onClose}>
89
<ModalOverlay />
90
<ModalContent>
91
<ModalHeader>{action} this appeal?</ModalHeader>
92
<ModalBody>
93
<Text size="xs">Optionally provide feedback</Text>
94
<Textarea
95
onChange={(e) => setFeedback(e.target.value)}
96
placeholder="Your feedback"
97
/>
98
</ModalBody>
99
<ModalFooter>
100
<Button
101
onClick={async () => await takeAction(action.toLowerCase())}
@regalijan
Oh yeah I forgot the other half
October 19, 2023 16:50
102
isLoading={loading}
@regalijan
Le formatting fixes
October 19, 2023 16:50
103
loadingText="Submitting..."
@regalijan
Create takeAction function
October 19, 2023 16:49
104
>
105
Submit
106
</Button>
107
</ModalFooter>
108
</ModalContent>
109
</Modal>
@regalijan
Make appeal card not a fragment
October 19, 2023 16:49
110
<CardHeader>
@regalijan
Formatting stuff
October 19, 2023 16:50
111
<Heading size="md">Appeal for {props.user.username}</Heading>
@regalijan
Make appeal card use newer entity format
October 19, 2023 16:49
112
<Text fontSize="xs">ID: {props.user.id}</Text>
@regalijan
Make appeal card not a fragment
October 19, 2023 16:49
113
</CardHeader>
114
<CardBody>
115
<Stack divider={<StackDivider />}>
@regalijan
Place ID below name
October 19, 2023 16:49
116
<Box>
@regalijan
Make appeal card not a fragment
October 19, 2023 16:49
117
<Heading size="xs">Response: Why were you banned?</Heading>
118
<Text>{props.ban_reason}</Text>
@regalijan
Place ID below name
October 19, 2023 16:49
119
</Box>
@regalijan
Make appeal card not a fragment
October 19, 2023 16:49
120
<Box>
121
<Heading size="xs">Response: Why should we unban you?</Heading>
122
<Text>{props.reason_for_unban}</Text>
123
</Box>
124
<Box>
125
<Heading size="xs">
126
Response: What have you learned from your mistake?
127
</Heading>
128
<Text>{props.learned}</Text>
129
</Box>
130
</Stack>
131
</CardBody>
132
<CardFooter pb="4px">
@regalijan
Do same for other cards
October 21, 2023 00:05
133
<Box display={props.open ? undefined : "none"}>
@regalijan
Create takeAction function
October 19, 2023 16:49
134
<Button colorScheme="red" onClick={() => showModal("Deny")}>
135
Deny
136
</Button>
137
<Button
138
colorScheme="blue"
139
ml="8px"
140
onClick={() => showModal("Accept")}
141
>
@regalijan
Make appeal card not a fragment
October 19, 2023 16:49
142
Accept
143
</Button>
144
</Box>
145
</CardFooter>
146
<CardFooter py="4px">
147
<Text fontSize="xs">Submitted at: {dateString}</Text>
148
</CardFooter>
149
</Card>
@regalijan
Create AppealCard component
October 19, 2023 16:49
150
);
151
}