fix(fe): fix GotoFirstProblemButton error (#2327)

fix(fe): fix GotoFirstProblemButton error

apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/_components/GoToFirstProblemButton.tsx

@@ -1,36 +1,23 @@
-'use client'
-
-import { contestProblemQueries } from '@/app/(client)/_libs/queries/contestProblem'
+import { getContestProblemList } from '@/app/(client)/_libs/apis/contestProblem'
 import { Button } from '@/components/shadcn/button'
-import { Skeleton } from '@/components/shadcn/skeleton'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 
 interface GoToFirstProblemButtonProps {
   contestId: number
 }
 
-export function GoToFirstProblemButton({
+export async function GoToFirstProblemButton({
   contestId
 }: GoToFirstProblemButtonProps) {
-  const router = useRouter()
-  const { data: firstProblemId } = useSuspenseQuery({
-    ...contestProblemQueries.list({ contestId, take: 1 }),
-    select: (data) => data.data.at(0)?.id
-  })
+  const { data } = await getContestProblemList({ contestId, take: 1 })
 
-  return (
-    <Button
-      className="px-12 py-6 text-lg font-light"
-      onClick={() =>
-        router.push(`/contest/${contestId}/problem/${firstProblemId}`)
-      }
-    >
-      Go To First Problem!
-    </Button>
-  )
-}
+  const firstProblemId = data.at(0)?.id
 
-export function GoToFirstProblemButtonFallback() {
-  return <Skeleton className="h-12 w-60" />
+  return firstProblemId ? (
+    <Button className="px-12 py-6 text-lg font-light">
+      <Link href={`/contest/${contestId}/problem/${firstProblemId}`}>
+        Go To First Problem!
+      </Link>
+    </Button>
+  ) : null
 }

apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/page.tsx

@@ -2,11 +2,7 @@ import { KatexContent } from '@/components/KatexContent'
 import { auth } from '@/libs/auth'
 import { fetcherWithAuth } from '@/libs/utils'
 import { ErrorBoundary } from '@suspensive/react'
-import { Suspense } from 'react'
-import {
-  GoToFirstProblemButton,
-  GoToFirstProblemButtonFallback
-} from './_components/GoToFirstProblemButton'
+import { GoToFirstProblemButton } from './_components/GoToFirstProblemButton'
 import { RegisterButton } from './_components/RegisterButton'
 
 interface ContestTop {
@@ -56,9 +52,7 @@ export default async function ContestTop({ params }: ContestTopProps) {
         <div className="mt-10 flex justify-center">
           {data.isRegistered ? (
             <ErrorBoundary fallback={null}>
-              <Suspense fallback={<GoToFirstProblemButtonFallback />}>
-                <GoToFirstProblemButton contestId={Number(contestId)} />
-              </Suspense>
+              <GoToFirstProblemButton contestId={Number(contestId)} />
             </ErrorBoundary>
           ) : (
             <RegisterButton