From 47d8ed51fc9d933daa936d56b0dce01117860883 Mon Sep 17 00:00:00 2001
From: Paul Pan <i@0x7f.app>
Date: Fri, 22 Dec 2023 23:36:04 +0800
Subject: [PATCH] feat: add problem status page

---
 package.json                    |   1 +
 pnpm-lock.yaml                  |   3 +
 src/components/status-table.tsx | 130 ++++++++++++++++++++++++++++++++
 src/pages/problem-status.tsx    |  14 ++++
 src/pages/search.tsx            |  10 ++-
 src/routes.tsx                  |  35 +++++++--
 6 files changed, 183 insertions(+), 10 deletions(-)
 create mode 100644 src/components/status-table.tsx
 create mode 100644 src/pages/problem-status.tsx

diff --git a/package.json b/package.json
index 8cb8881..af07111 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "ace-builds": "^1.32.2",
         "antd": "^5.12.4",
         "axios": "^1.6.2",
+        "dayjs": "^1.11.10",
         "github-markdown-css": "^5.5.0",
         "react": "^18.2.0",
         "react-ace": "^10.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f514f2f..97afbae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   axios:
     specifier: ^1.6.2
     version: 1.6.2
+  dayjs:
+    specifier: ^1.11.10
+    version: 1.11.10
   github-markdown-css:
     specifier: ^5.5.0
     version: 5.5.0
diff --git a/src/components/status-table.tsx b/src/components/status-table.tsx
new file mode 100644
index 0000000..a5850ce
--- /dev/null
+++ b/src/components/status-table.tsx
@@ -0,0 +1,130 @@
+import { Link } from "react-router-dom";
+
+import { ProColumns, ProTable } from "@ant-design/pro-components";
+import { Button, Space } from "antd";
+
+import { StatusApi } from "../api/status.ts";
+
+interface SubmissionInfo {
+    id: number;
+    problem_title: string;
+    problem_id: number;
+    nick_name: string;
+    user_id: number;
+    point: string;
+    date: Date;
+}
+
+const columns: ProColumns<SubmissionInfo>[] = [
+    {
+        title: "ID",
+        dataIndex: "id",
+        align: "center",
+    },
+    {
+        title: "Problem",
+        dataIndex: "problem_title",
+        align: "left",
+    },
+    {
+        title: "User",
+        dataIndex: "nick_name",
+        align: "left",
+    },
+    {
+        title: "Point",
+        dataIndex: "point",
+        align: "center",
+    },
+    {
+        title: "Date",
+        dataIndex: "date",
+        valueType: "dateTime",
+        align: "left",
+    },
+    {
+        title: "Action",
+        dataIndex: "action",
+        render: (_node, entity) => {
+            return (
+                <Space>
+                    <Button>
+                        <Link to={`/problem/${entity.problem_id}`}>
+                            查看问题
+                        </Link>
+                    </Button>
+
+                    <Button>
+                        <Link to={`/profile/${entity.user_id}`}>查看作者</Link>
+                    </Button>
+
+                    <Button>
+                        <Link to={`/status/${entity.id}`}>查看详情</Link>
+                    </Button>
+                </Space>
+            );
+        },
+    },
+];
+
+interface StatusTableProps {
+    title?: string;
+    pid?: number;
+    uid?: number;
+    token: string;
+}
+
+export default function StatusTable(props: StatusTableProps) {
+    const request = async (
+        params: Record<string, string> & {
+            pageSize?: number;
+            current?: number;
+            keyword?: string | undefined;
+        },
+    ) => {
+        try {
+            const cur = params.current || 1;
+            const size = params.pageSize || 10;
+
+            const res = await StatusApi.Query(
+                {
+                    pid: props.pid,
+                    uid: props.uid,
+                    offset: (cur - 1) * (size || 10),
+                    limit: size,
+                },
+                props.token,
+            );
+            const data = res.data.map((i) => {
+                return {
+                    id: i.submission.meta.ID,
+                    problem_title: i.submission.problem.title,
+                    problem_id: i.submission.problem.meta.ID,
+                    nick_name: i.submission.user.nick_name,
+                    user_id: i.submission.user.meta.ID,
+                    point: i.point === -1 ? "Pending" : i.point.toString(),
+                    date: i.submission.meta.CreatedAt,
+                };
+            });
+            return { success: true, data: data, total: res.count };
+        } catch (e) {
+            console.log(e);
+            return { success: false, data: [], total: 0 };
+        }
+    };
+
+    return (
+        <ProTable<SubmissionInfo>
+            cardBordered
+            columns={columns}
+            request={request}
+            rowKey={(record) => record.id}
+            pagination={{
+                pageSize: 10,
+            }}
+            search={false}
+            dateFormatter="string"
+            headerTitle={props.title || "Judge Status"}
+        />
+    );
+}
diff --git a/src/pages/problem-status.tsx b/src/pages/problem-status.tsx
new file mode 100644
index 0000000..bb4b00f
--- /dev/null
+++ b/src/pages/problem-status.tsx
@@ -0,0 +1,14 @@
+import StatusTable from "../components/status-table.tsx";
+import { useParams } from "react-router-dom";
+import { useAuth } from "../components/hook.ts";
+
+export default function ProblemStatusPage() {
+    const auth = useAuth();
+    const { pid } = useParams();
+
+    return (
+        <>
+            <StatusTable pid={+(pid || "0")} token={auth.token} />
+        </>
+    );
+}
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
index 0b9cc56..f3acf94 100644
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@@ -1,7 +1,9 @@
+import { Link } from "react-router-dom";
+
 import { ProColumns, ProTable } from "@ant-design/pro-components";
+import { Button } from "antd";
 
 import { ProblemApi } from "../api/problem.ts";
-import { Link } from "react-router-dom";
 
 interface ProblemList {
     id: number;
@@ -32,7 +34,11 @@ const columns: ProColumns<ProblemList>[] = [
         hideInSearch: true,
         dataIndex: "action",
         render: (_node, entity) => {
-            return <Link to={`/problem/${entity.id}`}>View</Link>;
+            return (
+                <Button>
+                    <Link to={`/problem/${entity.id}`}>View</Link>
+                </Button>
+            );
         },
     },
 ];
diff --git a/src/routes.tsx b/src/routes.tsx
index 43b7ad6..eec28eb 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -14,6 +14,9 @@ const LogoutPage = React.lazy(() => import("./pages/logout.tsx"));
 const RegisterPage = React.lazy(() => import("./pages/register.tsx"));
 const SearchPage = React.lazy(() => import("./pages/search.tsx"));
 const ProblemPage = React.lazy(() => import("./pages/problem.tsx"));
+const ProblemStatusPage = React.lazy(
+    () => import("./pages/problem-status.tsx"),
+);
 const SubmitPage = React.lazy(() => import("./pages/submit.tsx"));
 
 const RouteConfigs = [
@@ -37,14 +40,6 @@ const RouteConfigs = [
         path: "register",
         element: <RegisterPage />,
     },
-    {
-        path: "profile",
-        element: (
-            <RequireAuth>
-                <p>Profile</p>
-            </RequireAuth>
-        ),
-    },
     {
         path: "search",
         element: <SearchPage />,
@@ -63,6 +58,30 @@ const RouteConfigs = [
         ),
         loader: ProblemLoader,
     },
+    {
+        path: "problem/:pid/status",
+        element: (
+            <RequireAuth>
+                <ProblemStatusPage />
+            </RequireAuth>
+        ),
+    },
+    {
+        path: "profile",
+        element: (
+            <RequireAuth>
+                <p>Profile</p>
+            </RequireAuth>
+        ),
+    },
+    {
+        path: "profile/:uid",
+        element: (
+            <RequireAuth>
+                <p>Profile - ID</p>
+            </RequireAuth>
+        ),
+    },
 ];
 
 const NavConfigs = [