Refactor navigation handling in Map component

Author: sebastiankrll

apps/web/components/Map/Map.tsx

@@ -3,26 +3,21 @@
 import { useEffect } from "react";
 import "./Map.css";
 import { useRouter } from "next/navigation";
-import { onClick, onMoveEnd, onPointerMove } from "./utils/events";
+import { onClick, onMoveEnd, onPointerMove, setNavigator } from "./utils/events";
 import { initMap } from "./utils/init";
 
 export default function OMap() {
 	const router = useRouter();
 
 	useEffect(() => {
-		const onNavigate = (e: Event) => {
-			const href = (e as CustomEvent<string>).detail;
-			if (href) router.push(href);
-		};
-		window.addEventListener("sr24:navigate", onNavigate);
+		setNavigator((href) => router.push(href));
 
 		const map = initMap();
 		map.on(["moveend"], onMoveEnd);
 		map.on("pointermove", onPointerMove);
 		map.on("click", onClick);
 
 		return () => {
-			window.removeEventListener("sr24:navigate", onNavigate);
 			map.un(["moveend"], onMoveEnd);
 			map.un("pointermove", onPointerMove);
 			map.un("click", onClick);

apps/web/components/Map/utils/events.tsx

@@ -14,8 +14,9 @@ import { addHighlightedPilot, clearHighlightedPilot } from "./pilotFeatures";
 import { initTrackFeatures } from "./trackFeatures";
 
 export type NavigateFn = (href: string) => void;
-export function navigateTo(href: string) {
-	window.dispatchEvent(new CustomEvent("sr24:navigate", { detail: href }));
+let navigate: NavigateFn | null = null;
+export function setNavigator(fn: NavigateFn) {
+	navigate = fn;
 }
 
 export function onMoveEnd(evt: BaseEvent | Event): void {
@@ -110,7 +111,7 @@ export async function onClick(evt: MapBrowserEvent): Promise<void> {
 	}
 
 	if (!feature) {
-		navigateTo(`/`);
+		navigate?.(`/`);
 		return;
 	}
 
@@ -126,7 +127,7 @@ export async function onClick(evt: MapBrowserEvent): Promise<void> {
 
 		if (id) {
 			const strippedId = id.toString().replace(/^pilot_/, "");
-			navigateTo(`/pilot/${strippedId}`);
+			navigate?.(`/pilot/${strippedId}`);
 			addHighlightedPilot(strippedId);
 		}
 	}
@@ -383,5 +384,5 @@ export function resetMap(): void {
 	clickedFeature?.set("clicked", false);
 	clickedFeature = null;
 
-	navigateTo(`/`);
+	navigate?.(`/`);
 }