From 49e3d27b967386e5dd56957a4c34e51c6077a6d0 Mon Sep 17 00:00:00 2001
From: Sarath M S <sarath.ms@gmail.com>
Date: Thu, 28 Apr 2022 21:48:18 -0400
Subject: [PATCH] Show warning before navigating away without submitting

---
 components/lib/hooks.js      | 50 +++++++++++++++++++++---------------
 components/submit/UrlList.js |  5 ++++
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/components/lib/hooks.js b/components/lib/hooks.js
index a98087a..9dd5da4 100644
--- a/components/lib/hooks.js
+++ b/components/lib/hooks.js
@@ -28,23 +28,33 @@ export function useUser () {
   }
 }
 
-// export function useUser({ redirectTo, redirectIfFound } = {}) {
-//   const { data, error } = useSWR('/api/user', fetcher)
-//   const user = data?.user
-//   const finished = Boolean(data)
-//   const hasUser = Boolean(user)
-
-//   useEffect(() => {
-//     if (!redirectTo || !finished) return
-//     if (
-//       // If redirectTo is set, redirect if the user was not found.
-//       (redirectTo && !redirectIfFound && !hasUser) ||
-//       // If redirectIfFound is also set, redirect if the user was found
-//       (redirectIfFound && hasUser)
-//     ) {
-//       Router.push(redirectTo)
-//     }
-//   }, [redirectTo, redirectIfFound, finished, hasUser])
-
-//   return error ? null : user
-// }
+export function useWarnBeforeUnload (active, promptText) {
+  const router = useRouter()
+  useEffect(() => {
+    const handleWindowClose = (e) => {
+      if (!active) return
+      e.preventDefault()
+      return (e.returnValue = promptText)
+    }
+
+    // const handleRouterChange = (url, obj) => {
+    //   if (!active) return
+    //   if (window.confirm(promptText)) return
+    //   // Since back button changes the URL, we reset it
+    //   if (router.asPath !== window.location.pathname) {
+    //     window.history.pushState(null, null, router.asPath)
+    //   }
+    //   const errMessage = 'routeChange aborted.'
+    //   throw errMessage
+    // }
+
+    window.addEventListener('beforeunload', handleWindowClose)
+    // router.events.on('routeChangeStart', handleRouterChange)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleWindowClose)
+      // router.events.off('routeChangeStart', handleRouterChange)
+    }
+  }, [active, promptText, router, router.events])
+  return true
+}
diff --git a/components/submit/UrlList.js b/components/submit/UrlList.js
index 5590968..ed717a6 100644
--- a/components/submit/UrlList.js
+++ b/components/submit/UrlList.js
@@ -13,6 +13,9 @@ import SubmitButton from './SubmitButton'
 import { getPrettyErrorMessage } from '../lib/translateErrors'
 import { SubmissionContext } from './SubmissionContext'
 import { useNotifier } from '../lib/notifier'
+import { useWarnBeforeUnload } from '../lib/hooks'
+
+const promptText = 'You have made some changes that have not been submitted. Are you sure you want to ?'
 
 // Does these
 // * Decides what data to pass down to the table
@@ -44,6 +47,8 @@ const UrlList = ({ cc }) => {
 
   const { submissionState, mutate: mutateSubmissionState } = useContext(SubmissionContext)
 
+  useWarnBeforeUnload(submissionState === 'IN_PROGRESS', promptText)
+
   const entryToEdit = useMemo(() => {
     let entry = {}
     if (data) {