Create appeal card generation

pages/mod-queue.page.tsx

@@ -7,17 +7,24 @@ import {
   useToast,
   VStack,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "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>)
+    entryTypes.push(<option value={type.value}>{type.name}</option>);
 
-  async function updateQueue(queue_type: string, include_closed: boolean = false): Promise<void> {
+  async function updateQueue(
-    const queueReq = await fetch(`/api/mod-queue/list?type=${queue_type}&includeClosed=${include_closed}`);
+    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();
@@ -32,15 +39,37 @@ export function Page(pageProps: { [p: string]: any }) {
 
       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>
+        <VStack>{entries}</VStack>
-
+        <Box display={isDesktop ? undefined : "none"} w="250px">
-        </VStack>
-        <Box display={ isDesktop ? undefined : "none" } w="250px">
           <Select placeholder="Entry Type">
             <option value="">All</option>
             {entryTypes}