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

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

@@ -38,7 +38,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 { useEffect, 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 +60,43 @@ export default function Page({ params }: { params: { id: string } }) {
   const [showImportDialog, setShowImportDialog] = useState<boolean>(false)
   const { id } = params
 
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  const useConfirmNavigation = () => {
+    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 (shouldSkipWarning.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])
+  }
+
+  useConfirmNavigation()
+
   const methods = useForm<UpdateContestInput>({
     resolver: zodResolver(editSchema),
     defaultValues: {
@@ -178,6 +213,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,7 +31,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 { useEffect, useState, useRef } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { FaAngleLeft } from 'react-icons/fa6'
 import { IoMdCheckmarkCircleOutline } from 'react-icons/io'
@@ -50,9 +50,45 @@ 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()
 
+  const useConfirmNavigation = () => {
+    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 (shouldSkipWarning.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])
+  }
+
+  useConfirmNavigation()
+
   const methods = useForm<CreateContestInput>({
     resolver: zodResolver(createSchema),
     defaultValues: {
@@ -71,7 +107,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 +119,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 +151,6 @@ export default function Page() {
         })
       }
     })
-
     const orderArray = problems
       .sort((a, b) => a.order - b.order)
       .map((problem) => problem.id)
@@ -121,6 +161,8 @@ export default function Page() {
         orders: orderArray
       }
     })
+
+    shouldSkipWarning.current = true
     toast.success('Contest created successfully')
     router.push('/admin/contest')
     router.refresh()
@@ -136,7 +178,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 +280,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

@@ -9,7 +9,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 { useEffect, 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 +30,43 @@ import { editSchema } from '../../utils'
 
 export default function Page({ params }: { params: { id: string } }) {
   const { id } = params
+  const shouldSkipWarning = useRef(false)
   const router = useRouter()
 
+  const useConfirmNavigation = () => {
+    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 (shouldSkipWarning.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])
+  }
+
+  useConfirmNavigation()
+
   const methods = useForm<UpdateProblemInput>({
     resolver: zodResolver(editSchema),
     defaultValues: {
@@ -124,6 +159,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()