import { Box, Container, Flex, Select, useBreakpointValue, useToast, VStack, } from "@chakra-ui/react"; import { lazy, useState } from "react"; const AppealCard = lazy(() => import("../components/AppealCard")); export function Page(pageProps: { [p: string]: any }) { 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.xl"> <Flex> <VStack>{entries}</VStack> <Box display={isDesktop ? undefined : "none"} w="250px"> <Select placeholder="Entry Type"> <option value="">All</option> {entryTypes} </Select> </Box> </Flex> </Container> ); } export const title = "Mod Queue - Car Crushers";