car-crushers-portal/pages/mod-queue.page.tsx

87 lines
2.1 KiB
TypeScript

import {
Box,
Container,
Flex,
Select,
useBreakpointValue,
useToast,
VStack,
} from "@chakra-ui/react";
import { lazy, useState } from "react";
const AppealCard = lazy(() => import("../components/AppealCard"));
import Login from "../components/Login";
export function Page(pageProps: { [p: string]: any }) {
if (!pageProps.logged_in)
return <Login />;
const isDesktop = useBreakpointValue({ base: false, lg: true });
const entryTypes = [];
const [entries, setEntries] = useState([] as JSX.Element[]);
for (const type of pageProps.entry_types)
entryTypes.push(<option value={type.value}>{type.name}</option>);
async function updateQueue(
queue_type: string,
show_closed: boolean = false
): Promise<void> {
const queueReq = await fetch(
`/api/mod-queue/list?type=${queue_type}&showClosed=${show_closed}`
);
if (!queueReq.ok) {
const errorData: { error: string } = await queueReq.json();
useToast()({
description: errorData.error,
duration: 10000,
isClosable: true,
status: "error",
title: "Failed to load queue",
});
return;
}
const entryData: { [k: string]: any }[] = await queueReq.json();
const newEntries = [];
for (const entry of entryData) {
switch (queue_type) {
case "appeal":
newEntries.push(
<AppealCard
{...(entry as {
ban_reason: string;
createdAt: number;
discriminator: string;
id: string;
learned: string;
reason_for_unban: string;
username: string;
})}
/>
);
}
}
setEntries(newEntries);
}
return (
<Container maxW="container.lg">
<Flex>
<VStack w="container.md">{entries}</VStack>
<Box display={isDesktop ? undefined : "none"} w="256px">
<Select placeholder="Entry Type">
<option value="">All</option>
{entryTypes}
</Select>
</Box>
</Flex>
</Container>
);
}
export const title = "Mod Queue - Car Crushers";