feat: add SubmissionListPage

src/components/SubmissionTable.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { Badge, Button, Center, Link } from "@chakra-ui/react";
+import type { ColumnDef, PaginationState } from "@tanstack/react-table";
+import { Link as ReactRouterLink } from "react-router-dom";
+
+import type { SubmissionWithPoint } from "../app/services/status";
+import { useListQuery } from "../app/services/status";
+import type { UserProfile } from "../app/services/user";
+import Table from "./Table";
+import Title from "./Title";
+import type { SubmissionInfo } from "../app/services/submission";
+import type { ProblemInfo } from "../app/services/problem";
+
+const columns: ColumnDef<SubmissionWithPoint>[] = [
+    {
+        id: "id",
+        accessorFn: (i, _) => i.submission.meta.ID,
+        header: (_) => <Title word="ID" />,
+    },
+    {
+        id: "title",
+        accessorFn: (i, _) => i.submission.problem,
+        header: (_) => <Title word="Problem" />,
+        cell: ({ cell }) => {
+            const problem = cell.getValue() as ProblemInfo;
+            return (
+                <Link as={ReactRouterLink} to={`/problem/${problem.meta.ID}`} color="teal.500">
+                    {problem.title}
+                </Link>
+            );
+        },
+    },
+    {
+        id: "user",
+        accessorFn: (i, _) => i.submission.user,
+        header: (_) => <Title word="User" />,
+        cell: ({ cell }) => {
+            const user = cell.getValue() as UserProfile;
+            return (
+                <Link as={ReactRouterLink} to={`/profile/${user.meta.ID}`} color="teal.500">
+                    {user.nick_name}
+                </Link>
+            );
+        },
+    },
+    {
+        id: "point",
+        accessorKey: "point",
+        header: (_) => <Title word="Point" center={true} />,
+        cell: ({ cell }) => {
+            const point = cell.getValue() as number;
+            const color = point === -1 ? "purple" : point === 100 ? "green" : "red";
+            return (
+                <Center>
+                    <Badge colorScheme={color} fontSize="md">
+                        {point}
+                    </Badge>
+                </Center>
+            );
+        },
+    },
+    {
+        id: "date",
+        accessorFn: (i, _) => new Date(i.submission.meta.CreatedAt).toLocaleString(),
+        header: (_) => <Title word="Date" />,
+    },
+    {
+        id: "action",
+        accessorKey: "submission",
+        header: (_) => <Title word="Action" center={true} />,
+        cell: ({ cell }) => {
+            const submission = cell.getValue() as SubmissionInfo;
+            return (
+                <Center>
+                    <Button variant="outline" colorScheme="teal" size="sm">
+                        <Link as={ReactRouterLink} to={`/status/${submission.meta.ID}`}>
+                            Detail Status
+                        </Link>
+                    </Button>
+                </Center>
+            );
+        },
+    },
+];
+
+interface SubmissionTableProps {
+    pid?: number;
+    uid?: number;
+}
+
+export default function SubmissionTable(props: SubmissionTableProps) {
+    const [paging, setPaging] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    const { data: info, isFetching } = useListQuery({
+        pid: props.pid || 0,
+        uid: props.uid || 0,
+        offset: paging.pageIndex * paging.pageSize,
+        limit: paging.pageSize,
+    });
+
+    useEffect(() => {
+        console.log(info?.body.data);
+    }, [info]);
+
+    return (
+        <>
+            <Table<SubmissionWithPoint>
+                header={<Title word="Judge Status" />}
+                columns={columns}
+                data={info?.body.data || []}
+                total={info?.body.count || 0}
+                paging={paging}
+                setPaging={setPaging}
+                isLoading={isFetching}
+            />
+        </>
+    );
+}

src/pages/SubmissionListPage.tsx

@@ -0,0 +1,27 @@
+import { lazy } from "react";
+import { Box, Stack } from "@chakra-ui/react";
+import { useParams } from "react-router-dom";
+
+import { useDetailQuery } from "../app/services/problem";
+
+const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
+const ProblemInfoMenu = lazy(() => import("../components/ProblemInfoMenu"));
+
+export default function SubmissionListPage() {
+    const { id } = useParams();
+    const pid = Number(id) || 0;
+    const { data: details } = useDetailQuery({ pid: pid });
+
+    return (
+        <>
+            <Stack direction={{ base: "column", md: "row" }}>
+                <Box w="100%">
+                    <SubmissionTable pid={pid} />
+                </Box>
+                <Box w="480px">
+                    <ProblemInfoMenu data={details?.body} />
+                </Box>
+            </Stack>
+        </>
+    );
+}

src/routes.tsx

@@ -11,6 +11,7 @@ const LogoutPage = lazy(() => import("./pages/LogoutPage"));
 const ProblemListPage = lazy(() => import("./pages/ProblemListPage"));
 const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
 const SubmitPage = lazy(() => import("./pages/SubmitPage"));
+const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
 
 export const router: RouteObject[] = [
     {
@@ -50,6 +51,14 @@ export const router: RouteObject[] = [
                     </RequireAuth>
                 ),
             },
+            {
+                path: "problem/:id/submission",
+                element: (
+                    <RequireAuth>
+                        <SubmissionListPage />
+                    </RequireAuth>
+                ),
+            },
         ],
     },
 ];