forked from github/plane
a1d6c40627
* 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 <73993394+Palanikannan1437@users.noreply.github.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { useRouter } from "next/router";
|
|
|
|
//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 = "";
|
|
},
|
|
[isActive, showAlert]
|
|
);
|
|
|
|
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);
|
|
router.events.on("routeChangeStart", handleRouteChangeStart);
|
|
|
|
return () => {
|
|
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|
router.events.off("routeChangeStart", handleRouteChangeStart);
|
|
};
|
|
}, [handleBeforeUnload, handleRouteChangeStart, router.events]);
|
|
|
|
return { setShowAlert };
|
|
};
|
|
|
|
export default useReloadConfirmations;
|