refactor(fe): change problem cards component to server component (#2240)

* refactor(fe): change problem cards component to server component * chore(fe): add todo comment * chore(fe): remove info column * chore(fe): change order search parameter to required
skkuding · Nov 25, 2024 · c11a3e9 · c11a3e9
1 parent eef6b0e
commit c11a3e9
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 80 deletions.
diff --git a/apps/frontend/app/(client)/(main)/_components/ProblemCard.tsx b/apps/frontend/app/(client)/(main)/_components/ProblemCard.tsx
@@ -1,8 +1,8 @@
 import '@/components/shadcn/card'
-import type { WorkbookProblem } from '@/types/type'
+import type { Problem } from '@/types/type'
 
 interface Props {
-  problem: WorkbookProblem
+  problem: Problem
 }
 
 export default function ProblemCard({ problem }: Props) {
@@ -14,7 +14,7 @@ export default function ProblemCard({ problem }: Props) {
           {problem.title}
         </div>
       </div>
-      <div className="border-t-2"></div>
+      <div className="border-t-2" />
       <div className="grid grid-cols-1 text-xs text-gray-500 min-[400px]:grid-cols-2">
         <div className="flex flex-col items-center gap-2 py-4">
           <p className="text-sm font-medium">Level</p>

diff --git a/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx b/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
@@ -1,78 +1,36 @@
-'use client'
-
-import { Skeleton } from '@/components/shadcn/skeleton'
-import { fetcher } from '@/libs/utils'
-import type { WorkbookProblem } from '@/types/type'
-import type { Route } from 'next'
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { getProblemList } from '../../_libs/apis/problem'
 import ProblemCard from './ProblemCard'
 
-interface ProblemCardsProps {
-  data: WorkbookProblem[]
-  total: number
-}
-
-const getProblems = async () => {
-  const problemRes: ProblemCardsProps = await fetcher
-    .get('problem', {
-      searchParams: {
-        take: 3,
-        order: 'submit-desc'
-        // workbookId: 1
-      }
-    })
-    .json()
-
-  problemRes.data ?? console.error('4.getProblem', problemRes)
-  return problemRes.data ?? problemRes
-}
-
-export default function ProblemCards() {
-  const [problems, setProblems] = useState<WorkbookProblem[]>([])
-  const [loading, setLoading] = useState(true)
-  useEffect(() => {
-    getProblems().then((res) => {
-      setProblems(res)
-      setLoading(false)
-    })
-  }, [])
+export default async function ProblemCards() {
+  const { data: problems } = await getProblemList({
+    take: 3,
+    order: 'submit-desc'
+  })
 
   return (
     <>
       <div className="flex justify-start gap-5 md:hidden">
-        {loading
-          ? [...Array(2)].map((_, i) => (
-              <Skeleton key={i} className="flex h-[120px] w-full rounded-xl" />
-            ))
-          : problems.slice(0, 2).map((problem) => {
-              return (
-                <Link
-                  key={problem.id}
-                  href={`/problem/${problem.id}` as Route}
-                  className="inline-block w-1/2"
-                >
-                  <ProblemCard problem={problem} />
-                </Link>
-              )
-            })}
+        {problems.slice(0, 2).map((problem) => (
+          <Link
+            key={problem.id}
+            href={`/problem/${problem.id}`}
+            className="inline-block w-1/2"
+          >
+            <ProblemCard problem={problem} />
+          </Link>
+        ))}
       </div>
       <div className="hidden justify-start gap-5 md:flex">
-        {loading
-          ? [...Array(3)].map((_, i) => (
-              <Skeleton key={i} className="flex h-[120px] w-full rounded-xl" />
-            ))
-          : problems.map((problem) => {
-              return (
-                <Link
-                  key={problem.id}
-                  href={`/problem/${problem.id}` as Route}
-                  className="inline-block w-1/3"
-                >
-                  <ProblemCard problem={problem} />
-                </Link>
-              )
-            })}
+        {problems.map((problem) => (
+          <Link
+            key={problem.id}
+            href={`/problem/${problem.id}`}
+            className="inline-block w-1/3"
+          >
+            <ProblemCard problem={problem} />
+          </Link>
+        ))}
       </div>
     </>
   )

diff --git a/apps/frontend/app/(client)/(main)/page.tsx b/apps/frontend/app/(client)/(main)/page.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@/components/shadcn/button'
-import type { Route } from 'next'
 import Link from 'next/link'
 import Carousel from './_components/Carousel'
 import ContestCards from './_components/ContestCards'
@@ -62,7 +61,7 @@ export default function Home() {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between text-gray-700">
           <p className="text-2xl font-bold">Contest 🏆</p>
-          <Link href={'/contest' as Route}>
+          <Link href={'/contest'}>
             <Button variant="ghost" className="h-8 px-3">
               See More
             </Button>
@@ -74,12 +73,13 @@ export default function Home() {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between text-gray-700">
           <p className="text-2xl font-bold">Problem ✨</p>
-          <Link href={'/problem' as Route}>
+          <Link href={'/problem'}>
             <Button variant="ghost" className="h-8 px-3">
               See More
             </Button>
           </Link>
         </div>
+        {/**TODO: add error boundary */}
         <ProblemCards />
       </div>
     </div>

diff --git a/apps/frontend/app/(client)/(main)/problem/_components/Columns.tsx b/apps/frontend/app/(client)/(main)/problem/_components/Columns.tsx
@@ -33,10 +33,5 @@ export const columns: ColumnDef<Problem>[] = [
     header: () => <SortButton order="acrate">Success Rate</SortButton>,
     accessorKey: 'acceptedRate',
     cell: ({ row }) => `${(row.original.acceptedRate * 100).toFixed(2)}%`
-  },
-  {
-    header: 'Info',
-    accessorKey: 'info',
-    cell: ({ row }) => row.original.info
   }
 ]
diff --git a/apps/frontend/app/(client)/_libs/apis/problem.ts b/apps/frontend/app/(client)/_libs/apis/problem.ts
@@ -0,0 +1,24 @@
+import { safeFetcher } from '@/libs/utils'
+import type { Problem } from '@/types/type'
+import type { PaginationQueryParams } from './types'
+
+export interface GetProblemListRequest extends PaginationQueryParams {
+  search?: string
+  order: string
+}
+
+export interface GetProblemListResponse {
+  data: Problem[]
+  total: number
+}
+
+export const getProblemList = async ({
+  ...searchParams
+}: GetProblemListRequest) => {
+  const response = await safeFetcher.get('problem', {
+    searchParams
+  })
+  const data = await response.json<GetProblemListResponse>()
+
+  return data
+}
diff --git a/apps/frontend/types/type.ts b/apps/frontend/types/type.ts
@@ -32,8 +32,9 @@ export interface Problem {
   difficulty: Level
   submissionCount: number
   acceptedRate: number
-  tags?: Tag[]
-  info?: string
+  tags: Tag[]
+  languages: Language[]
+  hasPassed: boolean | null
 }
 
 /**
@@ -45,11 +46,16 @@ export interface WorkbookProblem extends Omit<Problem, 'tags' | 'info'> {
   order: number
 }
 
-export interface ContestProblem extends Omit<Problem, 'tags' | 'info'> {
+export interface ContestProblem {
+  id: number
+  title: number
+  difficulty: Level
   order: number
+  submissionCount: number
   maxScore: number
   score: string | null
   submissionTime: string | null
+  acceptedRate: number
 }
 
 export interface TestcaseItem {