refactor(fe): create getResultColor and replace related codes (#2178)

skkuding · Nov 1, 2024 · e5d8163 · e5d8163
1 parent bd3b5fa
commit e5d8163
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 96 deletions.
diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/_components/Columns.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/_components/Columns.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { OverallSubmission } from '@/app/admin/contest/utils'
-import { cn } from '@/lib/utils'
+import { cn, getResultColor } from '@/lib/utils'
 import type { ColumnDef } from '@tanstack/react-table'
 import dayjs from 'dayjs'
 
@@ -51,11 +51,7 @@ export const columns: ColumnDef<OverallSubmission>[] = [
       <div
         className={cn(
           'whitespace-nowrap text-center text-xs',
-          row.getValue('result') === 'Accepted'
-            ? 'text-green-500'
-            : row.getValue('result') === 'Judging'
-              ? 'text-gray-500'
-              : 'text-red-500'
+          getResultColor(row.getValue('result'))
         )}
       >
         {row.getValue('result')}

diff --git a/apps/frontend/app/admin/contest/[id]/_components/SubmissionDetailAdmin.tsx b/apps/frontend/app/admin/contest/[id]/_components/SubmissionDetailAdmin.tsx
@@ -11,7 +11,7 @@ import {
   TableRow
 } from '@/components/ui/table'
 import { GET_SUBMISSION } from '@/graphql/submission/queries'
-import { dateFormatter } from '@/lib/utils'
+import { dateFormatter, getResultColor } from '@/lib/utils'
 import type { Language } from '@/types/type'
 import { useQuery } from '@apollo/client'
 
@@ -51,13 +51,7 @@ export default function SubmissionDetailAdmin({
               </div>
               <div>
                 <h2>Result</h2>
-                <p
-                  className={
-                    submission?.result === 'Accepted'
-                      ? '!text-green-500'
-                      : '!text-red-500'
-                  }
-                >
+                <p className={getResultColor(submission?.result)}>
                   {submission?.result}
                 </p>
               </div>
@@ -100,13 +94,7 @@ export default function SubmissionDetailAdmin({
                   {submission?.testcaseResult.map((item) => (
                     <TableRow key={item.id}>
                       <TableCell className="!py-4">{item.id}</TableCell>
-                      <TableCell
-                        className={
-                          item.result === 'Accepted'
-                            ? 'text-green-500'
-                            : 'text-red-500'
-                        }
-                      >
+                      <TableCell className={getResultColor(item.result)}>
                         {item.result}
                       </TableCell>
                       <TableCell>{item.cpuTime} ms</TableCell>

diff --git a/apps/frontend/app/admin/contest/[id]/participant/[userId]/_components/SubmissionColumns.tsx b/apps/frontend/app/admin/contest/[id]/participant/[userId]/_components/SubmissionColumns.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { UserSubmission } from '@/app/admin/contest/utils'
-import { cn } from '@/lib/utils'
+import { cn, getResultColor } from '@/lib/utils'
 import type { ColumnDef } from '@tanstack/react-table'
 import dayjs from 'dayjs'
 
@@ -23,11 +23,7 @@ export const submissionColumns: ColumnDef<UserSubmission>[] = [
       <div
         className={cn(
           'whitespace-nowrap text-center text-xs',
-          row.getValue('submissionResult') === 'Accepted'
-            ? 'text-green-500'
-            : row.getValue('submissionResult') === 'Judging'
-              ? 'text-gray-500'
-              : 'text-red-500'
+          getResultColor(row.getValue('submissionResult'))
         )}
       >
         {row.getValue('submissionResult')}

diff --git a/apps/frontend/app/admin/problem/[id]/_components/Columns.tsx b/apps/frontend/app/admin/problem/[id]/_components/Columns.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { dateFormatter } from '@/lib/utils'
+import { dateFormatter, getResultColor } from '@/lib/utils'
 import type { SubmissionItem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 
@@ -25,12 +25,10 @@ export const columns: ColumnDef<SubmissionItem>[] = [
     header: () => 'Result',
     accessorKey: 'result',
     cell: ({ row }) => {
-      return row.original.result === 'Accepted' ? (
-        <p className="text-green-500">{row.original.result}</p>
-      ) : row.original.result === 'Judging' ? (
-        <p className="text-gray-500">{row.original.result}</p>
-      ) : (
-        <p className="text-red-500">{row.original.result}</p>
+      return (
+        <p className={getResultColor(row.original.result)}>
+          {row.original.result}
+        </p>
       )
     }
   },

diff --git a/apps/frontend/app/contest/[contestId]/problem/[problemId]/submission/_components/Columns.tsx b/apps/frontend/app/contest/[contestId]/problem/[problemId]/submission/_components/Columns.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { dateFormatter } from '@/lib/utils'
+import { dateFormatter, getResultColor } from '@/lib/utils'
 import type { SubmissionItem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 
@@ -19,13 +19,10 @@ export const columns: ColumnDef<SubmissionItem>[] = [
     header: () => 'Result',
     accessorKey: 'result',
     cell: ({ row }) => {
-      return row.original.result === 'Accepted' ? (
-        <p className="text-green-500">{row.original.result}</p>
-      ) : row.original.result === 'Judging' ||
-        row.original.result === 'Blind' ? (
-        <p className="text-[#9B9B9B]">{row.original.result}</p>
-      ) : (
-        <p className="text-red-500">{row.original.result}</p>
+      return (
+        <p className={getResultColor(row.original.result)}>
+          {row.original.result}
+        </p>
       )
     }
   },

diff --git a/...d/app/contest/[contestId]/problem/[problemId]/submission/_components/SubmissionDetail.tsx b/...d/app/contest/[contestId]/problem/[problemId]/submission/_components/SubmissionDetail.tsx
@@ -8,7 +8,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import { dateFormatter, fetcherWithAuth } from '@/lib/utils'
+import { dateFormatter, fetcherWithAuth, getResultColor } from '@/lib/utils'
 import type { SubmissionDetail } from '@/types/type'
 import { revalidateTag } from 'next/cache'
 import { IoIosLock } from 'react-icons/io'
@@ -48,15 +48,7 @@ export default async function SubmissionDetail({
           </div>
           <div>
             <h2>Result</h2>
-            <p
-              className={
-                submission.result === 'Accepted'
-                  ? '!text-green-500'
-                  : submission.result === 'Blind'
-                    ? '!text-[#9B9B9B]'
-                    : '!text-red-500'
-              }
-            >
+            <p className={getResultColor(submission.result)}>
               {submission.result}
             </p>
           </div>
@@ -98,11 +90,9 @@ export default async function SubmissionDetail({
                   <TableCell>{item.id}</TableCell>
                   <TableCell
                     className={
-                      item.result === 'Accepted'
-                        ? '!text-green-500'
-                        : submission.result === 'Blind'
-                          ? '!text-[#9B9B9B]'
-                          : '!text-red-500'
+                      submission.result === 'Blind'
+                        ? 'text-neutral-400'
+                        : getResultColor(item.result)
                     }
                   >
                     {item.result}

diff --git a/apps/frontend/app/problem/[problemId]/submission/_components/Columns.tsx b/apps/frontend/app/problem/[problemId]/submission/_components/Columns.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { dateFormatter } from '@/lib/utils'
+import { dateFormatter, getResultColor } from '@/lib/utils'
 import type { SubmissionItem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 
@@ -19,12 +19,10 @@ export const columns: ColumnDef<SubmissionItem>[] = [
     header: () => 'Result',
     accessorKey: 'result',
     cell: ({ row }) => {
-      return row.original.result === 'Accepted' ? (
-        <p className="text-green-500">{row.original.result}</p>
-      ) : row.original.result === 'Judging' ? (
-        <p className="text-gray-300">{row.original.result}</p>
-      ) : (
-        <p className="text-red-500">{row.original.result}</p>
+      return (
+        <p className={getResultColor(row.original.result)}>
+          {row.original.result}
+        </p>
       )
     }
   },

diff --git a/apps/frontend/app/problem/[problemId]/submission/_components/SubmissionDetail.tsx b/apps/frontend/app/problem/[problemId]/submission/_components/SubmissionDetail.tsx
@@ -8,7 +8,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import { dateFormatter, fetcherWithAuth } from '@/lib/utils'
+import { dateFormatter, fetcherWithAuth, getResultColor } from '@/lib/utils'
 import type { SubmissionDetail } from '@/types/type'
 import { revalidateTag } from 'next/cache'
 import dataIfError from './dataIfError'
@@ -45,13 +45,7 @@ export default async function SubmissionDetail({
           </div>
           <div>
             <h2>Result</h2>
-            <p
-              className={
-                submission.result === 'Accepted'
-                  ? '!text-green-500'
-                  : '!text-red-500'
-              }
-            >
+            <p className={getResultColor(submission.result)}>
               {submission.result}
             </p>
           </div>
@@ -91,13 +85,7 @@ export default async function SubmissionDetail({
               {submission.testcaseResult.map((item) => (
                 <TableRow key={item.id}>
                   <TableCell>{item.problemTestcaseId.toString()}</TableCell>
-                  <TableCell
-                    className={
-                      item.result === 'Accepted'
-                        ? 'text-green-500'
-                        : 'text-red-500'
-                    }
-                  >
+                  <TableCell className={getResultColor(item.result)}>
                     {item.result}
                   </TableCell>
                   <TableCell>{item.cpuTime} ms</TableCell>

diff --git a/apps/frontend/components/TestcasePanel.tsx b/apps/frontend/components/TestcasePanel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/lib/utils'
+import { cn, getResultColor } from '@/lib/utils'
 import type { TestResultDetail } from '@/types/type'
 import { useState } from 'react'
 import { IoMdClose } from 'react-icons/io'
@@ -202,15 +202,7 @@ function TestResultDetail({
     <div className="px-8 pt-5">
       <div className="flex w-full gap-4 rounded-md bg-[#121728] px-6 py-3 font-light text-neutral-400">
         Result
-        <span
-          className={cn(
-            dataWithIndex[currentTab - 1].result === 'Accepted'
-              ? 'text-green-500'
-              : dataWithIndex[currentTab - 1].result === 'Judging'
-                ? 'text-neutral-400'
-                : 'text-red-500'
-          )}
-        >
+        <span className={getResultColor(dataWithIndex[currentTab - 1].result)}>
           {dataWithIndex[currentTab - 1].result}
         </span>
       </div>

diff --git a/apps/frontend/components/TestcaseTable.tsx b/apps/frontend/components/TestcaseTable.tsx
@@ -6,7 +6,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import { cn } from '@/lib/utils'
+import { cn, getResultColor } from '@/lib/utils'
 import type { TestResultDetail } from '@/types/type'
 import { WhitespaceVisualizer } from './WhitespaceVisualizer'
 
@@ -77,11 +77,7 @@ export default function TestcaseTable({
             <TableCell
               className={cn(
                 'p-3 text-left md:p-3',
-                testResult.result === 'Accepted'
-                  ? 'text-green-500'
-                  : testResult.result === 'Judging'
-                    ? 'text-gray-300'
-                    : 'text-red-500'
+                getResultColor(testResult.result)
               )}
             >
               {testResult.result}

diff --git a/apps/frontend/lib/utils.ts b/apps/frontend/lib/utils.ts
@@ -86,3 +86,28 @@ export const getStatusWithStartEnd = (startTime: string, endTime: string) => {
     return 'ongoing'
   }
 }
+
+/**
+ * Returns the appropriate color class based on the result status.
+ *
+ * @param {string} result - The result status to be evaluated.
+ * @returns {string} The corresponding color class name based on the result status:
+ *   - '!text-green-500' for 'Accepted'.
+ *   - '!text-neutral-400' for 'Judging' or 'Blind' or null or undefined.
+ *   - '!text-red-500' for any other result status.
+ * @see tailwind.config.ts - Refer to the safelist section in the TailwindCSS configuration file.
+ */
+export const getResultColor = (result: string | null | undefined): string => {
+  if (result === 'Accepted') {
+    return '!text-green-500'
+  } else if (
+    result === 'Judging' ||
+    result === 'Blind' ||
+    result === null ||
+    result === undefined
+  ) {
+    return '!text-neutral-400'
+  } else {
+    return '!text-red-500'
+  }
+}
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
@@ -87,5 +87,6 @@ export default {
         }
       })
     }
-  ]
+  ],
+  safelist: ['!text-green-500', '!text-neutral-400', '!text-red-500']
 } satisfies Config
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,5 +87,6 @@ export default { @@
             }
           })
         }
-      ]
+      ],
+      safelist: ['!text-green-500', '!text-neutral-400', '!text-red-500']
     } satisfies Config