feat(page:user): display user submissions by verdict with bar chart

## what - display user submissions by verdict with bar chart ## how - fetch the data using react-query hook `useFetchUserSubmissionVerdict` - display the data using Rechart bar chart ## why - to display submissions by verdict ## where - ./src/app/users/[username]/page.tsx ## usage
Clumsy-Coder · Jan 16, 2024 · a367e70 · a367e70
1 parent a46b599
commit a367e70
Showing 1 changed file with 26 additions and 6 deletions.
diff --git a/src/app/users/[username]/page.tsx b/src/app/users/[username]/page.tsx
@@ -4,10 +4,11 @@ import { AxiosError } from "axios";
 import { z } from "zod";
 
 import Error from "@/components/error";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { userSchema } from "@/schema";
-import { useFetchUserSubmissions } from "@/hooks";
-import { processUserSubmissionsVerdictBarChart } from "@/utils/dataProcessing";
-import { UserSubmission } from "@/types";
+import SubmissionVerdictChart from "@/components/charts/ProblemVerdictChart";
+import { useFetchUserSubmissions, useFetchUserSubmissionVerdict } from "@/hooks";
+import { UserSubmission, UserSubmissionBarChartType } from "@/types";
 import { DataTable } from "@/components/ui/data-table";
 import { columns } from "@/app/users/[username]/components/data-table/submissionColumns";
 
@@ -23,8 +24,16 @@ const UserPage = ({ params }: Props) => {
     data: userSubmissionData,
     error: userSubmissionError,
   } = useFetchUserSubmissions(params.username);
+  const {
+    isLoading: userSubmissionVerdictIsLoading,
+    isSuccess: userSubmissionVerdictIsSuccess,
+    isError:   userSubmissionVerdictIsError,
+    data:      userSubmissionVerdictData,
+    error:     userSubmissionVerdictError,
+  } = useFetchUserSubmissionVerdict(params.username);
+
 
-  if (userSubmissionIsLoading) {
+  if (userSubmissionIsLoading || userSubmissionVerdictIsLoading) {
     return <div>Loading {params.username}</div>;
   }
 
@@ -53,8 +62,19 @@ const UserPage = ({ params }: Props) => {
       <div>
         <h1 className="text-3xl">{userSubmissionData?.name} ({params.username})</h1>
       </div>
-      <div>
-        <div></div>
+      <div className="grid lg:grid-cols-2 gap-4 mb-4 mt-4">
+        <div className="w-full">
+          <Card>
+            <CardHeader>
+              <CardTitle>Submission Verdicts</CardTitle>
+            </CardHeader>
+            <CardContent className="h-[400px]">
+              <SubmissionVerdictChart data={userSubmissionVerdictData as UserSubmissionBarChartType[]} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
         <div>
           <div>
             <h1 className="text-3xl mb-4 mt-6">Submissions</h1>