binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1610] chore: re-implement reload confirmation hook. (#4880)

Browse source 
* [WEB-1610] chore: re-implement reload confirmation hook.

* chore: attach anchor event listner to window instead of body.
This commit is contained in:
Prateek Shourya 2024-06-20 12:19:29 +05:30 • committed by GitHub
parent e04eb1a63d
commit 718453b332
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

74
web/core/hooks/use-reload-confirmation.tsx
View file

@ -1,41 +1,55 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { useState } from "react";
import { useCallback, useEffect, useState } from "react";
//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 = useAppRouter();
// const handleBeforeUnload = useCallback(
// (event: BeforeUnloadEvent) => {
// if (!isActive || !showAlert) return;
// event.preventDefault();
// event.returnValue = "";
// },
// [isActive, showAlert]
// );
const handleBeforeUnload = useCallback(
(event: BeforeUnloadEvent) => {
if (!isActive || !showAlert) return;
event.preventDefault();
event.returnValue = "";
},
[isActive, showAlert]
);
// const handleRouteChangeStart = useCallback(
// (url: string, { shallow }: { shallow: boolean }) => {
// 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", new Error("Route change cancelled by user"), url, shallow);
// throw "routeChange aborted.";
// }
// },
// [isActive, router.events, showAlert]
// );
const handleAnchorClick = useCallback(
(event: MouseEvent) => {
if (!isActive || !showAlert) return;
// Skip if event target is not available or defaultPrevented
if (!event.target || event.defaultPrevented) return;
// Skip control/command/option/alt+click
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
// check if the event target is an anchor or a child of an anchor tag
const eventTarget = event.target as HTMLElement;
if (!eventTarget.closest("a")) return; // This is intentionally not type safe
// check if anchor target is _blank
const anchorElement = eventTarget.closest("a") as HTMLAnchorElement;
const isAnchorTargetBlank = anchorElement.getAttribute("target") === "_blank";
if (isAnchorTargetBlank) return;
// show confirm dialog
const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
if (!leave) {
event.preventDefault();
event.stopPropagation();
}
},
[isActive, showAlert]
);
// useEffect(() => {
// window.addEventListener("beforeunload", handleBeforeUnload);
// router.events.on("routeChangeStart", handleRouteChangeStart);
useEffect(() => {
// handle browser refresh
window.addEventListener("beforeunload", handleBeforeUnload, true);
// handle anchor tag click
window.addEventListener("click", handleAnchorClick, true);
// TODO: handle back / forward button click
// return () => {
// window.removeEventListener("beforeunload", handleBeforeUnload);
// router.events.off("routeChangeStart", handleRouteChangeStart);
// };
// }, [handleBeforeUnload, handleRouteChangeStart, router.events]);
return () => {
// cleanup
window.removeEventListener("beforeunload", handleBeforeUnload, true);
window.removeEventListener("click", handleAnchorClick, true);
};
}, [handleAnchorClick, handleBeforeUnload]);
return { setShowAlert };
};