feat(fe): show modal when leaving create and edit page

apps/frontend/app/admin/_components/ConfirmNavigation.tsx

@@ -0,0 +1,37 @@
+import { useRouter } from 'next/navigation'
+import type { MutableRefObject } from 'react'
+import { useEffect } from 'react'
+
+export const useConfirmNavigation = (
+  shouldSkipWarningRef: MutableRefObject<boolean>
+) => {
+  const router = useRouter()
+  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+    event.preventDefault()
+    event.returnValue = ''
+  }
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    const originalPush = router.push
+
+    router.push = (href, ...args) => {
+      if (shouldSkipWarningRef.current) {
+        originalPush(href, ...args)
+        return
+      }
+      const shouldWarn = window.confirm(
+        'Are you sure you want to leave this page? Changes you made may not be saved.'
+      )
+      if (shouldWarn) {
+        originalPush(href, ...args)
+      }
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+      router.push = originalPush
+    }
+  }, [router, shouldSkipWarningRef.current])
+}

apps/frontend/app/admin/contest/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useConfirmNavigation } from '@/app/admin/_components/ConfirmNavigation'
 import DescriptionForm from '@/app/admin/_components/DescriptionForm'
 import FormSection from '@/app/admin/_components/FormSection'
 import SwitchField from '@/app/admin/_components/SwitchField'
@@ -38,7 +39,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { FaAngleLeft } from 'react-icons/fa6'
 import { IoIosCheckmarkCircle } from 'react-icons/io'
@@ -60,8 +61,11 @@ export default function Page({ params }: { params: { id: string } }) {
   const [showImportDialog, setShowImportDialog] = useState<boolean>(false)
   const { id } = params
 
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  useConfirmNavigation(shouldSkipWarning)
+
   const methods = useForm<UpdateContestInput>({
     resolver: zodResolver(editSchema),
     defaultValues: {
@@ -178,6 +182,8 @@ export default function Page({ params }: { params: { id: string } }) {
         orders: orderArray
       }
     })
+
+    shouldSkipWarning.current = true
     toast.success('Contest updated successfully')
     router.push('/admin/contest')
     router.refresh()

apps/frontend/app/admin/contest/create/page.tsx

@@ -31,11 +31,12 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PlusCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { FaAngleLeft } from 'react-icons/fa6'
 import { IoMdCheckmarkCircleOutline } from 'react-icons/io'
 import { toast } from 'sonner'
+import { useConfirmNavigation } from '../../_components/ConfirmNavigation'
 import DescriptionForm from '../../_components/DescriptionForm'
 import FormSection from '../../_components/FormSection'
 import SwitchField from '../../_components/SwitchField'
@@ -50,9 +51,13 @@ export default function Page() {
   const [problems, setProblems] = useState<ContestProblem[]>([])
   const [isCreating, setIsCreating] = useState<boolean>(false)
   const [showImportDialog, setShowImportDialog] = useState<boolean>(false)
+  const [showCreateModal, setShowCreateModal] = useState(false)
 
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  useConfirmNavigation(shouldSkipWarning)
+
   const methods = useForm<CreateContestInput>({
     resolver: zodResolver(createSchema),
     defaultValues: {
@@ -71,7 +76,7 @@ export default function Page() {
     UPDATE_CONTEST_PROBLEMS_ORDER
   )
 
-  const onSubmit = async (input: CreateContestInput) => {
+  const isSubmittable = (input: CreateContestInput) => {
     if (input.startTime >= input.endTime) {
       toast.error('Start time must be less than end time')
       return
@@ -83,8 +88,13 @@ export default function Page() {
       toast.error('Duplicate problem order found')
       return
     }
+    setShowCreateModal(true)
+  }
 
+  const onSubmit = async () => {
+    const input = methods.getValues()
     setIsCreating(true)
+
     const { data } = await createContest({
       variables: {
         groupId: 1,
@@ -110,7 +120,6 @@ export default function Page() {
         })
       }
     })
-
     const orderArray = problems
       .sort((a, b) => a.order - b.order)
       .map((problem) => problem.id)
@@ -121,6 +130,8 @@ export default function Page() {
         orders: orderArray
       }
     })
+
+    shouldSkipWarning.current = true
     toast.success('Contest created successfully')
     router.push('/admin/contest')
     router.refresh()
@@ -136,7 +147,7 @@ export default function Page() {
           <span className="text-4xl font-bold">Create Contest</span>
         </div>
         <form
-          onSubmit={handleSubmit(onSubmit)}
+          onSubmit={handleSubmit(isSubmittable)}
           className="flex w-[760px] flex-col gap-6"
         >
           <FormProvider {...methods}>
@@ -238,11 +249,39 @@ export default function Page() {
             <Button
               type="submit"
               className="flex h-[36px] w-[100px] items-center gap-2 px-0"
-              disabled={isCreating}
             >
               <IoMdCheckmarkCircleOutline fontSize={20} />
               <div className="mb-[2px] text-base">Create</div>
             </Button>
+            <AlertDialog open={showCreateModal}>
+              <AlertDialogContent className="p-8">
+                <AlertDialogHeader className="gap-2">
+                  <AlertDialogTitle>Create Contest?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Once user submit any coding, the contest problem list and
+                    score <span className="underline">cannot</span> be modified.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel
+                    type="button"
+                    className="rounded-md px-4 py-2"
+                    onClick={() => setShowCreateModal(false)}
+                  >
+                    Cancel
+                  </AlertDialogCancel>
+                  <AlertDialogAction asChild>
+                    <Button
+                      type="button"
+                      disabled={isCreating}
+                      onClick={() => onSubmit()}
+                    >
+                      Create
+                    </Button>
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
           </FormProvider>
         </form>
       </main>

apps/frontend/app/admin/problem/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useConfirmNavigation } from '@/app/admin/_components/ConfirmNavigation'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
@@ -9,7 +10,7 @@ import type { Template, Testcase, UpdateProblemInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { FaAngleLeft } from 'react-icons/fa6'
 import { IoIosCheckmarkCircle } from 'react-icons/io'
@@ -30,8 +31,11 @@ import { editSchema } from '../../utils'
 
 export default function Page({ params }: { params: { id: string } }) {
   const { id } = params
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  useConfirmNavigation(shouldSkipWarning)
+
   const methods = useForm<UpdateProblemInput>({
     resolver: zodResolver(editSchema),
     defaultValues: {
@@ -124,6 +128,7 @@ export default function Page({ params }: { params: { id: string } }) {
       toast.error('Failed to update problem')
       return
     }
+    shouldSkipWarning.current = true
     toast.success('Succesfully updated problem')
     router.push('/admin/problem')
     router.refresh()

apps/frontend/app/admin/problem/create/page.tsx

@@ -1,5 +1,15 @@
 'use client'
 
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { CREATE_PROBLEM } from '@/graphql/problem/mutations'
@@ -8,11 +18,12 @@ import { Level, type CreateProblemInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { FaAngleLeft } from 'react-icons/fa6'
 import { IoMdCheckmarkCircleOutline } from 'react-icons/io'
 import { toast } from 'sonner'
+import { useConfirmNavigation } from '../../_components/ConfirmNavigation'
 import DescriptionForm from '../../_components/DescriptionForm'
 import FormSection from '../../_components/FormSection'
 import SwitchField from '../../_components/SwitchField'
@@ -31,9 +42,13 @@ export default function Page() {
   const [isCreating, setIsCreating] = useState(false)
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false)
   const [dialogDescription, setDialogDescription] = useState<string>('')
+  const [showCreateModal, setShowCreateModal] = useState(false)
 
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  useConfirmNavigation(shouldSkipWarning)
+
   const methods = useForm<CreateProblemInput>({
     resolver: zodResolver(createSchema),
     defaultValues: {
@@ -53,8 +68,8 @@ export default function Page() {
   const { handleSubmit, getValues } = methods
 
   const [createProblem, { error }] = useMutation(CREATE_PROBLEM)
-
-  const onSubmit = async (input: CreateProblemInput) => {
+  const onSubmit = async () => {
+    const input = methods.getValues()
     setIsCreating(true)
     const testcases = getValues('testcases')
     if (validateScoreWeight(testcases) === false) {
@@ -76,6 +91,8 @@ export default function Page() {
       setIsCreating(false)
       return
     }
+
+    shouldSkipWarning.current = true
     toast.success('Problem created successfully')
     router.push('/admin/problem')
     router.refresh()
@@ -92,7 +109,9 @@ export default function Page() {
         </div>
 
         <form
-          onSubmit={handleSubmit(onSubmit)}
+          onSubmit={handleSubmit(() => {
+            setShowCreateModal(true)
+          })}
           className="flex w-[760px] flex-col gap-6"
         >
           <FormProvider {...methods}>
@@ -153,6 +172,35 @@ export default function Page() {
               <IoMdCheckmarkCircleOutline fontSize={20} />
               <div className="mb-[2px] text-base">Create</div>
             </Button>
+            <AlertDialog open={showCreateModal}>
+              <AlertDialogContent className="p-8">
+                <AlertDialogHeader className="gap-2">
+                  <AlertDialogTitle>Create Contest?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Once user submit any coding, the testcases{' '}
+                    <span className="underline">cannot</span> be modified.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel
+                    type="button"
+                    className="rounded-md px-4 py-2"
+                    onClick={() => setShowCreateModal(false)}
+                  >
+                    Cancel
+                  </AlertDialogCancel>
+                  <AlertDialogAction asChild>
+                    <Button
+                      type="button"
+                      disabled={isCreating}
+                      onClick={() => onSubmit()}
+                    >
+                      Create
+                    </Button>
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
           </FormProvider>
         </form>
       </main>