Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Create revoke punishment modal
  • Loading branch information
regalijan committed Oct 22, 2023
1 parent 76cf568 commit ed72f6f
Showing 1 changed file with 147 additions and 16 deletions.
163 changes: 147 additions & 16 deletions app/routes/hammer.tsx
Expand Up @@ -6,17 +6,28 @@ import {
Card,
CardBody,
CardHeader,
Center,
Container,
Flex,
Heading,
HStack,
Image,
Input,
InputGroup,
InputRightElement,
Link,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Spacer,
Stack,
StackDivider,
Text,
useToast
useDisclosure,
useToast,
} from "@chakra-ui/react";
import { type FormEvent, type ReactElement, useState } from "react";

Expand All @@ -25,15 +36,15 @@ export async function loader({ context }: { context: RequestContext }) {

if (!currentUser)
throw new Response(null, {
status: 401
status: 401,
});

if (
!(currentUser.permissions & (1 << 5)) &&
!(currentUser.permissions & (1 << 8))
)
throw new Response(null, {
status: 403
status: 403,
});

return null;
Expand All @@ -43,15 +54,18 @@ export function meta() {
return [{ title: "Hammer - Car Crushers" }];
}

export default function() {
export default function () {
const [queriedUsername, setQueriedUsername] = useState("");
const [username, setUsername] = useState("");
const [uid, setUid] = useState("");
const [status, setStatus] = useState("");
const [visible, setVisible] = useState(false);
const [avatarUrl, setAvatarUrl] = useState("");
const [ticketLink, setTicketLink] = useState("");
const [history, setHistory] = useState([] as ReactElement[]);
const [hasResults, setHasResults] = useState(true);
const [loading, setLoading] = useState(false);
const { isOpen, onClose, onOpen } = useDisclosure();
const toast = useToast();

async function getHistory() {
Expand All @@ -64,11 +78,13 @@ export default function() {
return toast({
title: "Validation Error",
description: `Username is too short`,
status: "error"
status: "error",
});
}

const historyResp = await fetch(`/api/game-bans/${username}/history`);
const historyResp = await fetch(
`/api/game-bans/${queriedUsername}/history`,
);

if (!historyResp.ok) {
setLoading(false);
Expand All @@ -77,13 +93,13 @@ export default function() {
description: `${
((await historyResp.json()) as { error: string }).error
}`,
status: "error"
status: "error",
});
}

const {
history,
user
user,
}: {
history: { [k: string]: any }[];
user: { avatar: string | null; id: number; name: string };
Expand All @@ -92,10 +108,11 @@ export default function() {
if (!history.length) {
setLoading(false);
setHasResults(false);
setStatus("");
return toast({
title: "Nothing Found",
description: "This user doesn't have any moderation history.",
status: "info"
status: "info",
});
}

Expand All @@ -104,6 +121,7 @@ export default function() {

setAvatarUrl(user.avatar ?? "https://i.hep.gg/floppa");
setUid(user.id.toString());
setUsername(user.name);
setStatus(history[history.length - 1].entity.properties.action.stringValue);

for (const entry of history) {
Expand All @@ -123,7 +141,7 @@ export default function() {
<CardHeader>
<Heading size="md">
{new Date(
parseInt(entry.entity.properties.executed_at.integerValue)
parseInt(entry.entity.properties.executed_at.integerValue),
).toLocaleString()}
</Heading>
</CardHeader>
Expand All @@ -150,7 +168,7 @@ export default function() {
</Stack>
</CardBody>
</Card>
</Container>
</Container>,
);
}

Expand All @@ -159,8 +177,111 @@ export default function() {
setVisible(true);
}

const invalidIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
color="red"
>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
);

const validIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
color="green"
>
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
);

async function revokePunishment() {
const revokeResponse = await fetch(`/api/game-bans/${uid}/revoke`, {
body: JSON.stringify({ ticket_link: ticketLink }),
headers: {
"content-type": "application/json",
},
method: "POST",
});

if (!revokeResponse.ok) {
let error: string;

try {
error = ((await revokeResponse.json()) as { error: string }).error;
} catch {
error = "Unknown error";
}

toast({
description: error,
isClosable: true,
status: "error",
title: "Oops",
});
} else {
toast({
description: `Punishment revoked for ${username}`,
isClosable: true,
status: "success",
title: "Success",
});
}

onClose();
setTicketLink("");
}

return (
<Container maxW="container.md">
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Revoke punishment for {username}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<InputGroup>
<Input
onChange={(e) => setTicketLink(e.target.value)}
placeholder="https://carcrushers.modmail.dev/logs/abcdef123456"
maxLength={49}
/>
<InputRightElement>
{ticketLink.match(
/https:\/\/carcrushers\.modmail\.dev\/logs\/[a-f\d]{12}$/,
)
? validIcon
: invalidIcon}
</InputRightElement>
</InputGroup>
</ModalBody>
<ModalFooter>
<Button
onClick={() => {
onClose();
setTicketLink("");
}}
>
Cancel
</Button>
<Button
colorScheme="red"
mr="4px"
onClick={async () => await revokePunishment()}
>
Revoke
</Button>
</ModalFooter>
</ModalContent>
</Modal>
<Heading>User Lookup</Heading>
<Text>Look up a user's punishment history here.</Text>
{!hasResults ? (
Expand All @@ -178,7 +299,7 @@ export default function() {

if (data?.match(/\W/)) e.preventDefault();
}}
onChange={(e) => setUsername(e.target.value)}
onChange={(e) => setQueriedUsername(e.target.value)}
placeholder="Roblox username"
/>
<Button
Expand All @@ -189,10 +310,20 @@ export default function() {
Search
</Button>
</HStack>
<Center mb={3} mt={3}>
<Container mb={3} mt={3}>
<Card visibility={visible ? "visible" : "hidden"}>
<CardBody>
<Image mb="16" src={avatarUrl} />
<Flex>
<Image mb="16" src={avatarUrl} />
<Spacer />
<Button
colorScheme="red"
onClick={onOpen}
visibility={status ? "visible" : "hidden"}
>
Revoke Punishment
</Button>
</Flex>
<Stack divider={<StackDivider />} spacing="6">
<Box>
<Heading size="xs">USERNAME</Heading>
Expand All @@ -215,7 +346,7 @@ export default function() {
</Stack>
</CardBody>
</Card>
</Center>
</Container>
{history}
</Container>
);
Expand Down

0 comments on commit ed72f6f

Please sign in to comment.