plane/web/hooks/use-reload-confirmation.tsx

43 lines
1.3 KiB
TypeScript
Raw Normal View History

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");
}
},
[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;