From 7963d383888b251d5730ee386563ac032d9fbff2 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 11 Apr 2025 17:44:45 +0800
Subject: [PATCH] feat(submissions): add submissions table component and
 display on problem page

- Added `SubmissionsTable` component to display submissions (including status, language, time, memory, and submission date).
- Updated `Submissions` page to render `SubmissionsTable` with submissions data from `ProblemStore`.
- Improved table sorting and date display logic.
---
 .../problems/[id]/features/submissions.tsx    | 17 ++++-
 src/components/submissions-table.tsx          | 69 +++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/submissions-table.tsx

diff --git a/src/app/(app)/problems/[id]/features/submissions.tsx b/src/app/(app)/problems/[id]/features/submissions.tsx
index d0a4e57..8bf0d4d 100644
--- a/src/app/(app)/problems/[id]/features/submissions.tsx
+++ b/src/app/(app)/problems/[id]/features/submissions.tsx
@@ -1,3 +1,18 @@
+"use client";
+
+import SubmissionsTable from "@/components/submissions-table";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useProblemStore } from "@/providers/problem-store-provider";
+
 export default function Submissions() {
-  return <div className="h-full px-4">Submissions</div>;
+  const submissions = useProblemStore((state) => state.submissions);
+
+  return (
+    <div className="px-3 flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <ScrollArea className="h-full">
+        <SubmissionsTable submissions={submissions} />
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  )
 }
diff --git a/src/components/submissions-table.tsx b/src/components/submissions-table.tsx
new file mode 100644
index 0000000..e48e292
--- /dev/null
+++ b/src/components/submissions-table.tsx
@@ -0,0 +1,69 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Submission } from "@/generated/client";
+import { getStatusColorClass } from "@/lib/status";
+import { EditorLanguageIcons } from "@/config/editor-language-icons";
+import { formatDistanceToNow, isBefore, subDays, format } from "date-fns";
+
+interface SubmissionsTableProps {
+  submissions: Submission[]
+}
+
+export default function SubmissionsTable({ submissions }: SubmissionsTableProps) {
+  const sortedSubmissions = [...submissions].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+
+  return (
+    <Table>
+      <TableHeader className="bg-transparent">
+        <TableRow className="hover:bg-transparent">
+          <TableHead className="w-[100px]">Index</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Language</TableHead>
+          <TableHead>Time</TableHead>
+          <TableHead>Memory</TableHead>
+          <TableHead>Submitted</TableHead>
+        </TableRow>
+      </TableHeader>
+      <tbody aria-hidden="true" className="table-row h-2"></tbody>
+      <TableBody className="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg">
+        {sortedSubmissions.map((submission, index) => {
+          const Icon = EditorLanguageIcons[submission.language];
+          const createdAt = new Date(submission.createdAt);
+          const submittedDisplay = isBefore(createdAt, subDays(new Date(), 1))
+            ? format(createdAt, "yyyy-MM-dd")
+            : formatDistanceToNow(createdAt, { addSuffix: true });
+
+          return (
+            <TableRow
+              key={submission.id}
+              className="border-b-0 odd:bg-muted/50 hover:text-blue-500 hover:bg-muted"
+            >
+              <TableCell className="font-medium">
+                {sortedSubmissions.length - index}
+              </TableCell>
+              <TableCell className={getStatusColorClass(submission.status)}>
+                <span>{submission.status}</span>
+              </TableCell>
+              <TableCell>
+                <Icon size={16} aria-hidden="true" />
+              </TableCell>
+              <TableCell>{submission.executionTime}</TableCell>
+              <TableCell>{submission.memoryUsage}</TableCell>
+              <TableCell>
+                {submittedDisplay}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  )
+}