From 93e1259110d07a310cf5964a53243022254bc1eb Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:15:26 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Refactor=20useReloadConfirm?=
 =?UTF-8?q?ations=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed the `message` parameter, as it was not being used.
- Changed the `isActive` flag to a temporary flag and added a TODO comment to remove it later.
- Added a new import statement for `useRouter` from "next/router".
- Implemented the `handleRouteChangeStart` function to handle route change events and prompt the user with a confirmation dialog before leaving the page.
- Updated the dependencies of the `handleBeforeUnload` and `handleRouteChangeStart` callbacks.
- Added event listeners for `beforeunload` and `routeChangeStart` events in the `useEffect` hook.
- Cleaned up the event listeners in the cleanup function of the `useEffect` hook.

fix: Fix reload confirmations in PageDetailsPage

- Removed the TODO comment regarding fixing reload confirmations with MobX, as it has been resolved.
- Passed the `pageStore?.isSubmitting === "submitting"` flag to the `useReloadConfirmations` hook instead of an undefined message.

This commit refactors the `useReloadConfirmations` hook to improve its functionality and fixes the usage in the `PageDetailsPage` component.
---
 web/hooks/use-reload-confirmation.tsx         | 36 +++++++++++++------
 .../projects/[projectId]/pages/[pageId].tsx   |  5 +--
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx
index d85a706f402..8343ea78df8 100644
--- a/web/hooks/use-reload-confirmation.tsx
+++ b/web/hooks/use-reload-confirmation.tsx
@@ -1,27 +1,41 @@
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
-const useReloadConfirmations = (message?: string, isActive = true) => {
+//TODO: remove temp flag isActive later and use showAlert as the source of truth
+const useReloadConfirmations = (isActive = true) => {
   const [showAlert, setShowAlert] = useState(false);
+  const router = useRouter();
 
   const handleBeforeUnload = useCallback(
     (event: BeforeUnloadEvent) => {
-      if(!isActive) return;
+      if (!isActive || !showAlert) return;
       event.preventDefault();
       event.returnValue = "";
-      return message ?? "Are you sure you want to leave?";
     },
-    [message, isActive]
+    [isActive, showAlert]
   );
 
-  useEffect(() => {
-    if (!showAlert) {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      return;
-    }
+  const handleRouteChangeStart = useCallback(
+    (url: string) => {
+      if (!isActive || !showAlert) return;
+      const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
+      if (!leave) {
+        router.events.emit("routeChangeError");
+        throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
+      }
+    },
+    [isActive, showAlert, router.events]
+  );
 
+  useEffect(() => {
     window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [handleBeforeUnload, showAlert]);
+    router.events.on("routeChangeStart", handleRouteChangeStart);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      router.events.off("routeChangeStart", handleRouteChangeStart);
+    };
+  }, [handleBeforeUnload, handleRouteChangeStart, router.events]);
 
   return { setShowAlert };
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 3b7ae036c62..93a814d57ed 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -56,7 +56,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   // toast alert
   const { setToastAlert } = useToast();
 
-
   const { handleSubmit, setValue, watch, getValues, control, reset } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
   });
@@ -87,9 +86,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const pageStore = usePage(pageId as string);
 
-  //TODO:fix reload confirmations, with mobx
-  const { setShowAlert } = useReloadConfirmations(undefined, pageStore?.isSubmitting === "submitting");
-
+  const { setShowAlert } = useReloadConfirmations(pageStore?.isSubmitting === "submitting");
 
   useEffect(
     () => () => {