routerToast.ts

/*
The router query parameters are not immediately made available on first render.
Here I use a reference to track when the router's query parameter were first made available.
A reference is used instead of state to ensure no unnecessary re-renders are made.
 */
const routerExecutionRef = useRef(false);
useEffect(() => {
	if (router.isReady && !routerExecutionRef.current) {
		routerExecutionRef.current = true;

		if (notify == "formClosed")
			toast.custom(
				({ id, visible }) => (
					<Toast
						title="Form Closed"
						description="The form you tried to access is closed."
						type="error"
						toastId={id}
						visible={visible}
					/>
				),
				{ id: "form-closed", duration: 8000 }
			);
	}
}, [router]);

/**
 * Since the redirect for a check-in page occurs immediately with no unmount, the router ref
 * won't c
 */
useEffect(() => {
	const handleRouteChange = () => {
		routerExecutionRef.current = false;
	};
	router.events.on("routeChangeStart", handleRouteChange);
	return () => {
		router.events.off("routeChangeStart", handleRouteChange);
	};
}, []);