From 54ed828f8284b6466e5ef54d35d8ffa32fd81ef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Lucas=20de=20Oliveira=20Lopes?= Date: Tue, 6 Feb 2024 19:07:50 -0300 Subject: [PATCH 1/2] fix: show window closing alert only when page is not saved --- web/hooks/use-reload-confirmation.tsx | 5 +++-- .../[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/web/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx index cdaff736522..d85a706f402 100644 --- a/web/hooks/use-reload-confirmation.tsx +++ b/web/hooks/use-reload-confirmation.tsx @@ -1,15 +1,16 @@ import { useCallback, useEffect, useState } from "react"; -const useReloadConfirmations = (message?: string) => { +const useReloadConfirmations = (message?: string, isActive = true) => { const [showAlert, setShowAlert] = useState(false); const handleBeforeUnload = useCallback( (event: BeforeUnloadEvent) => { + if(!isActive) return; event.preventDefault(); event.returnValue = ""; return message ?? "Are you sure you want to leave?"; }, - [message] + [message, isActive] ); useEffect(() => { diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index be512dda031..3b7ae036c62 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -56,8 +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({ defaultValues: { name: "", description_html: "" }, @@ -89,6 +87,10 @@ const PageDetailsPage: NextPageWithLayout = observer(() => { const pageStore = usePage(pageId as string); + //TODO:fix reload confirmations, with mobx + const { setShowAlert } = useReloadConfirmations(undefined, pageStore?.isSubmitting === "submitting"); + + useEffect( () => () => { if (pageStore) { From 555744e4c14b62a656d48f0bee697096bdd81aaa 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 2/2] 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. --- 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({ 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( () => () => {