feat(fe): wrap admin tables with ErrorBoundary

skkuding · Jan 11, 2025 · 28126cf · 28126cf
1 parent 94e62b6
commit 28126cf
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 46 deletions.
diff --git a/apps/frontend/app/admin/contest/[contestId]/(overall)/@tabs/page.tsx b/apps/frontend/app/admin/contest/[contestId]/(overall)/@tabs/page.tsx
@@ -1,3 +1,5 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
+import { ErrorBoundary } from '@suspensive/react'
 import { Suspense } from 'react'
 import {
   ParticipantTable,
@@ -10,8 +12,10 @@ export default function Submission({
   params: { contestId: string }
 }) {
   return (
-    <Suspense fallback={<ParticipantTableFallback />}>
-      <ParticipantTable contestId={Number(params.contestId)} />
-    </Suspense>
+    <ErrorBoundary fallback={FetchErrorFallback}>
+      <Suspense fallback={<ParticipantTableFallback />}>
+        <ParticipantTable contestId={Number(params.contestId)} />
+      </Suspense>
+    </ErrorBoundary>
   )
 }
diff --git a/apps/frontend/app/admin/contest/[contestId]/(overall)/@tabs/submission/page.tsx b/apps/frontend/app/admin/contest/[contestId]/(overall)/@tabs/submission/page.tsx
@@ -1,3 +1,5 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
+import { ErrorBoundary } from '@suspensive/react'
 import { Suspense } from 'react'
 import {
   SubmissionTable,
@@ -10,8 +12,10 @@ export default function Submission({
   params: { contestId: string }
 }) {
   return (
-    <Suspense fallback={<SubmissionTableFallback />}>
-      <SubmissionTable contestId={Number(params.contestId)} />
-    </Suspense>
+    <ErrorBoundary fallback={FetchErrorFallback}>
+      <Suspense fallback={<SubmissionTableFallback />}>
+        <SubmissionTable contestId={Number(params.contestId)} />
+      </Suspense>
+    </ErrorBoundary>
   )
 }
diff --git a/apps/frontend/app/admin/contest/[contestId]/edit/page.tsx b/apps/frontend/app/admin/contest/[contestId]/edit/page.tsx
@@ -5,6 +5,7 @@ import DescriptionForm from '@/app/admin/_components/DescriptionForm'
 import FormSection from '@/app/admin/_components/FormSection'
 import SwitchField from '@/app/admin/_components/SwitchField'
 import TitleForm from '@/app/admin/_components/TitleForm'
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -35,6 +36,7 @@ import { GET_CONTEST_PROBLEMS } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
 import type { UpdateContestInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { ErrorBoundary } from '@suspensive/react'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -287,15 +289,17 @@ export default function Page({ params }: { params: { contestId: string } }) {
                     <DialogHeader>
                       <DialogTitle>Import Problem</DialogTitle>
                     </DialogHeader>
-                    <Suspense fallback={<ImportProblemTableFallback />}>
-                      <ImportProblemTable
-                        checkedProblems={problems}
-                        onSelectedExport={(problems) => {
-                          setProblems(problems)
-                          setShowImportDialog(false)
-                        }}
-                      />
-                    </Suspense>
+                    <ErrorBoundary fallback={FetchErrorFallback}>
+                      <Suspense fallback={<ImportProblemTableFallback />}>
+                        <ImportProblemTable
+                          checkedProblems={problems}
+                          onSelectedExport={(problems) => {
+                            setProblems(problems)
+                            setShowImportDialog(false)
+                          }}
+                        />
+                      </Suspense>
+                    </ErrorBoundary>
                   </DialogContent>
                 </Dialog>
               </div>

diff --git a/apps/frontend/app/admin/contest/[contestId]/participant/[userId]/page.tsx b/apps/frontend/app/admin/contest/[contestId]/participant/[userId]/page.tsx
@@ -1,8 +1,10 @@
 'use client'
 
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import { ScrollArea, ScrollBar } from '@/components/shadcn/scroll-area'
 import { GET_GROUP_MEMBER } from '@/graphql/user/queries'
 import { useQuery } from '@apollo/client'
+import { ErrorBoundary } from '@suspensive/react'
 import Link from 'next/link'
 import { Suspense } from 'react'
 import { FaAngleLeft } from 'react-icons/fa6'
@@ -54,12 +56,16 @@ export default function Page({
           </div>
         </div>
         <div className="flex flex-col gap-4">
-          <Suspense fallback={<ScoreTableFallback />}>
-            <ScoreTable contestId={contestId} userId={userId} />
-          </Suspense>
-          <Suspense fallback={<SubmissionTableFallback />}>
-            <SubmissionTable contestId={contestId} userId={userId} />
-          </Suspense>
+          <ErrorBoundary fallback={FetchErrorFallback}>
+            <Suspense fallback={<ScoreTableFallback />}>
+              <ScoreTable contestId={contestId} userId={userId} />
+            </Suspense>
+          </ErrorBoundary>
+          <ErrorBoundary fallback={FetchErrorFallback}>
+            <Suspense fallback={<SubmissionTableFallback />}>
+              <SubmissionTable contestId={contestId} userId={userId} />
+            </Suspense>
+          </ErrorBoundary>
         </div>
       </main>
       <ScrollBar orientation="horizontal" />

diff --git a/apps/frontend/app/admin/contest/create/page.tsx b/apps/frontend/app/admin/contest/create/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -27,6 +28,7 @@ import { UPDATE_CONTEST_PROBLEMS_ORDER } from '@/graphql/problem/mutations'
 import { useMutation } from '@apollo/client'
 import type { CreateContestInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { ErrorBoundary } from '@suspensive/react'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -231,15 +233,17 @@ export default function Page() {
                     <DialogHeader>
                       <DialogTitle>Import Problem</DialogTitle>
                     </DialogHeader>
-                    <Suspense fallback={<ImportProblemTableFallback />}>
-                      <ImportProblemTable
-                        checkedProblems={problems}
-                        onSelectedExport={(problems) => {
-                          setProblems(problems)
-                          setShowImportDialog(false)
-                        }}
-                      />
-                    </Suspense>
+                    <ErrorBoundary fallback={FetchErrorFallback}>
+                      <Suspense fallback={<ImportProblemTableFallback />}>
+                        <ImportProblemTable
+                          checkedProblems={problems}
+                          onSelectedExport={(problems) => {
+                            setProblems(problems)
+                            setShowImportDialog(false)
+                          }}
+                        />
+                      </Suspense>
+                    </ErrorBoundary>
                   </DialogContent>
                 </Dialog>
               </div>

diff --git a/apps/frontend/app/admin/contest/page.tsx b/apps/frontend/app/admin/contest/page.tsx
@@ -1,4 +1,6 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import { Button } from '@/components/shadcn/button'
+import { ErrorBoundary } from '@suspensive/react'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { Suspense } from 'react'
@@ -21,9 +23,11 @@ export default function Page() {
           </Link>
         </Button>
       </div>
-      <Suspense fallback={<ContestTableFallback />}>
-        <ContestTable />
-      </Suspense>
+      <ErrorBoundary fallback={FetchErrorFallback}>
+        <Suspense fallback={<ContestTableFallback />}>
+          <ContestTable />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   )
 }
diff --git a/apps/frontend/app/admin/problem/[problemId]/edit/_components/ScoreCautionDialog.tsx b/apps/frontend/app/admin/problem/[problemId]/edit/_components/ScoreCautionDialog.tsx
@@ -1,3 +1,4 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import { Button } from '@/components/shadcn/button'
 import {
   Dialog,
@@ -9,6 +10,7 @@ import {
 } from '@/components/shadcn/dialog'
 import { UPDATE_CONTEST_PROBLEMS_SCORES } from '@/graphql/problem/mutations'
 import { useMutation } from '@apollo/client'
+import { ErrorBoundary } from '@suspensive/react'
 import { Suspense, useState } from 'react'
 import {
   BelongedContestTable,
@@ -73,13 +75,15 @@ export function ScoreCautionDialog({
                     on grading results.
                   </li>
                 </ul>
-                <Suspense fallback={<BelongedContestTableFallback />}>
-                  <BelongedContestTable
-                    problemId={problemId}
-                    onSetToZero={(contests) => setZeroSetContests(contests)}
-                    onRevertScore={() => setZeroSetContests([])}
-                  ></BelongedContestTable>
-                </Suspense>
+                <ErrorBoundary fallback={FetchErrorFallback}>
+                  <Suspense fallback={<BelongedContestTableFallback />}>
+                    <BelongedContestTable
+                      problemId={problemId}
+                      onSetToZero={(contests) => setZeroSetContests(contests)}
+                      onRevertScore={() => setZeroSetContests([])}
+                    ></BelongedContestTable>
+                  </Suspense>
+                </ErrorBoundary>
                 <div className="my-4 border-b" />
               </li>
             </ul>

diff --git a/apps/frontend/app/admin/problem/page.tsx b/apps/frontend/app/admin/problem/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import FetchErrorFallback from '@/components/FetchErrorFallback'
 import { Button } from '@/components/shadcn/button'
 import {
   Dialog,
@@ -10,6 +11,7 @@ import {
   DialogTitle,
   DialogClose
 } from '@/components/shadcn/dialog'
+import { ErrorBoundary } from '@suspensive/react'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useState, useEffect, Suspense } from 'react'
@@ -53,9 +55,11 @@ export default function Page({
             </div>
           )}
         </div>
-        <Suspense fallback={<ProblemTableFallback />}>
-          <ProblemTable />
-        </Suspense>
+        <ErrorBoundary fallback={FetchErrorFallback}>
+          <Suspense fallback={<ProblemTableFallback />}>
+            <ProblemTable />
+          </Suspense>
+        </ErrorBoundary>
       </div>
       <Dialog open={openDialog} onOpenChange={setOpenDialog}>
         <DialogContent className="p-8">

diff --git a/apps/frontend/app/admin/user/page.tsx b/apps/frontend/app/admin/user/page.tsx
@@ -1,3 +1,5 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
+import { ErrorBoundary } from '@suspensive/react'
 import { Suspense } from 'react'
 import { UserTable, UserTableFallback } from './_components/UserTable'
 
@@ -9,9 +11,11 @@ export default function User() {
       <div className="flex justify-between">
         <h1 className="text-4xl font-bold">User List</h1>
       </div>
-      <Suspense fallback={<UserTableFallback />}>
-        <UserTable />
-      </Suspense>
+      <ErrorBoundary fallback={FetchErrorFallback}>
+        <Suspense fallback={<UserTableFallback />}>
+          <UserTable />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   )
 }