diff --git a/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx b/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
index 4854c30ee..edfea5f38 100644
--- a/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
+++ b/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
@@ -1,9 +1,55 @@
+import { Button } from '@/components/shadcn/button'
import { fetcher } from '@/libs/utils'
import type { Contest } from '@/types/type'
import type { Route } from 'next'
import Link from 'next/link'
import ContestCard from './ContestCard'
+export default async function ContestCards() {
+ const contests = await getContests()
+
+ return (
+ contests.length > 0 && (
+
+
+
Contest 🏆
+
+
+
+
+
+ {contests.slice(0, 2).map((contest) => {
+ return (
+
+
+
+ )
+ })}
+
+
+ {contests.map((contest) => {
+ return (
+
+
+
+ )
+ })}
+
+
- {contests.slice(0, 2).map((contest) => {
- return (
-
-
-
- )
- })}
-
-
- {contests.map((contest) => {
- return (
-
-
-
- )
- })}
-
-
- )
-}
diff --git a/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx b/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
index 57f39b179..27e2d3b87 100644
--- a/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
+++ b/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@/components/shadcn/button'
import Link from 'next/link'
import { getProblemList } from '../../_libs/apis/problem'
import ProblemCard from './ProblemCard'
@@ -9,29 +10,39 @@ export default async function ProblemCards() {
})
return (
- <>
-
- {problems.slice(0, 2).map((problem) => (
-
-
+ problems.length > 0 && (
+
+
+
Problem ✨
+
+
- ))}
+
+
+ {problems.slice(0, 2).map((problem) => (
+
+
+
+ ))}
+
+
+ {problems.map((problem) => (
+
+
+
+ ))}
+
-
- {problems.map((problem) => (
-
-
-
- ))}
-
-
+ )
)
}
diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx
index 38b031638..73c9c3bc2 100644
--- a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/Columns.tsx
@@ -2,8 +2,10 @@
import { convertToLetter, dateFormatter } from '@/libs/utils'
import type { ContestProblem } from '@/types/type'
+import { ErrorBoundary } from '@suspensive/react'
import type { ColumnDef } from '@tanstack/react-table'
-import MySubmission from './MySubmission'
+import { Suspense } from 'react'
+import { MySubmissionFallback, MySubmission } from './MySubmission'
export const columns: ColumnDef
[] = [
{
@@ -30,7 +32,11 @@ export const columns: ColumnDef[] = [
cell: ({ row }) =>
row.original.submissionTime && (
-
+
+ }>
+
+
+
)
},
diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
index 2eebdb56f..dff7e99f1 100644
--- a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
@@ -1,3 +1,5 @@
+import { submissionQueries } from '@/app/(client)/_libs/queries/submission'
+import FetchErrorFallback from '@/components/FetchErrorFallback'
import {
Dialog,
DialogTrigger,
@@ -10,94 +12,86 @@ import {
TooltipProvider,
TooltipTrigger
} from '@/components/shadcn/tooltip'
-import { fetcherWithAuth } from '@/libs/utils'
import seeSubmissionIcon from '@/public/icons/see-submission.svg'
-import type { SubmissionDetail, Submission, ContestProblem } from '@/types/type'
+import type { ContestProblem } from '@/types/type'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { ErrorBoundary } from '@suspensive/react'
+import { useSuspenseQuery } from '@tanstack/react-query'
import Image from 'next/image'
import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import SubmissionDetailContent from './SubmissionDetailContent'
-
-interface SubmissionsResponse {
- data: Submission[]
- total: number
-}
+import { useState, Suspense } from 'react'
+import {
+ SubmissionDetailContent,
+ SubmissionDetailContentFallback
+} from './SubmissionDetailContent'
-export default function MySubmission({ problem }: { problem: ContestProblem }) {
+export function MySubmission({ problem }: { problem: ContestProblem }) {
const [isTooltipOpen, setIsTooltipOpen] = useState(false)
- const [submission, setSubmission] = useState(null)
- const [submissionId, setSubmissionId] = useState(null)
- const { contestId } = useParams()
+ const { contestId: contestIdString } = useParams()
+ const contestId = Number(contestIdString)
- useEffect(() => {
- const getSubmission = async () => {
- const submissions: SubmissionsResponse = await fetcherWithAuth
- .get(`contest/${contestId}/submission`, {
- searchParams: {
- take: 1,
- problemId: problem.id
- }
- })
- .json()
- const firstSubmission = submissions.data[0]
- setSubmissionId(firstSubmission.id)
+ const { data: latestSubmissionData } = useSuspenseQuery(
+ submissionQueries.list({
+ contestId,
+ problemId: problem.id,
+ take: 1
+ })
+ )
- const submission: SubmissionDetail = await fetcherWithAuth
- .get(
- `submission/${firstSubmission.id}?problemId=${problem.id}&contestId=${contestId}`
- )
- .json()
- setSubmission(submission)
- }
- getSubmission()
- }, [contestId, problem.id])
+ const latestSubmission = latestSubmissionData?.data?.[0]
+ const latestSubmissionId = latestSubmission?.id ?? 0
- if (!submission || !submissionId) {
- return
+ if (!latestSubmissionId) {
+ return null
}
return (
- <>
-
-
+
)
}
+
+export function MySubmissionFallback() {
+ return
+}
diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/SubmissionDetailContent.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/SubmissionDetailContent.tsx
index 322a0da35..8e853cde6 100644
--- a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/SubmissionDetailContent.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/SubmissionDetailContent.tsx
@@ -1,7 +1,9 @@
'use client'
+import { submissionQueries } from '@/app/(client)/_libs/queries/submission'
import CodeEditor from '@/components/CodeEditor'
import { ScrollArea, ScrollBar } from '@/components/shadcn/scroll-area'
+import { Skeleton } from '@/components/shadcn/skeleton'
import {
Table,
TableBody,
@@ -11,17 +13,28 @@ import {
TableRow
} from '@/components/shadcn/table'
import { dateFormatter, getResultColor } from '@/libs/utils'
-import type { ContestProblem, Language, SubmissionDetail } from '@/types/type'
+import type { ContestProblem, Language } from '@/types/type'
+import { useSuspenseQuery } from '@tanstack/react-query'
-export default function SubmissionDetailContent({
- submissionId,
- submission,
- problem
-}: {
+interface SubmissionDetailProps {
+ contestId: number
submissionId: number
- submission: SubmissionDetail
problem: ContestProblem
-}) {
+}
+
+export function SubmissionDetailContent({
+ contestId,
+ submissionId,
+ problem
+}: SubmissionDetailProps) {
+ const { data: submission } = useSuspenseQuery(
+ submissionQueries.detail({
+ contestId,
+ submissionId,
+ problemId: problem.id
+ })
+ )
+
return (
@@ -75,7 +88,7 @@ export default function SubmissionDetailContent({
-
+
Result
@@ -121,3 +134,25 @@ export default function SubmissionDetailContent({
)
}
+
+export function SubmissionDetailContentFallback() {
+ return (
+
+
+
+
+
Summary
+
+
+
+
Testcase
+
+
+
+
Source Code
+
+
+
-
-
Contest 🏆
-
-
-
-
-
-
-
-
-
-
Problem ✨
-
-
-
-
-
-
-
-