fix: show window closing alert only when page is not saved (#3577)

* fix: show window closing alert only when page is not saved

* chore: Refactor useReloadConfirmations hook

- Removed the `message` parameter, as it was not being used and not
  supported in modern browsers
- Changed the `isActive` flag to a temporary flag and added a TODO comment to remove it later.
- 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.

---------

Co-authored-by: Palanikannan1437 <[email protected]>

web/hooks/use-reload-confirmation.tsx

@@ -1,26 +1,41 @@
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
-const useReloadConfirmations = (message?: string) => {
+//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 || !showAlert) return;
       event.preventDefault();
       event.returnValue = "";
-      return message ?? "Are you sure you want to leave?";
     },
-    [message]
+    [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 };
 };

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -56,9 +56,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   // toast alert
   const { setToastAlert } = useToast();
 
-  //TODO:fix reload confirmations, with mobx
-  const { setShowAlert } = useReloadConfirmations();
-
   const { handleSubmit, setValue, watch, getValues, control, reset } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
   });
@@ -89,6 +86,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const pageStore = usePage(pageId as string);
 
+  const { setShowAlert } = useReloadConfirmations(pageStore?.isSubmitting === "submitting");
+
   useEffect(
     () => () => {
       if (pageStore) {