improved Popup handleing

apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx

@@ -5,7 +5,7 @@ import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
 import L from "leaflet";
 
 export const SearchElements = () => {
-	const { searchElements, searchPopup, setSearchPopup, setPopup } =
+	const { searchElements, searchPopup, setSearchPopup, setContextMenu } =
 		useMapStore();
 	const poppupRef = useRef<LMarker>(null);
 	const intervalRef = useRef<NodeJS.Timeout>(null);
@@ -13,27 +13,6 @@ export const SearchElements = () => {
 		(element) => element.id === searchPopup?.elementId,
 	);
 
-	useEffect(() => {
-		intervalRef.current = setInterval(() => {
-			if (searchPopup?.isOpen) {
-				poppupRef.current?.openPopup();
-			} else {
-				poppupRef.current?.closePopup();
-			}
-		}, 100);
-		poppupRef.current?.on("popupclose", () => {
-			setSearchPopup(undefined);
-		});
-		return () => {
-			if (poppupRef.current) {
-				poppupRef.current.off("popupclose");
-			}
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current);
-			}
-		};
-	}, [searchPopup, searchPopupElement]);
-
 	const SearchElement = ({
 		element,
 	}: {
@@ -45,13 +24,16 @@ export const SearchElements = () => {
 			if (ref.current) {
 				ref.current.on("click", () => {
 					const center = ref.current.getBounds().getCenter();
-					setSearchPopup({
-						isOpen: true,
-						lat: center.lat,
-						lng: center.lng,
-						elementId: element.id,
-					});
-					setPopup(null);
+					if (searchPopup?.elementId !== element.id) {
+						setSearchPopup({
+							lat: center.lat,
+							lng: center.lng,
+							elementId: element.id,
+						});
+					} else {
+						setSearchPopup(null);
+					}
+					setContextMenu(null);
 				});
 			}
 		}, []);
@@ -71,13 +53,20 @@ export const SearchElements = () => {
 	}: {
 		element: (typeof searchElements)[1];
 	}) => {
+		if (!searchPopup) return null;
 		return (
-			<Popup>
+			<Popup
+				autoPan={false}
+				position={[searchPopup.lat, searchPopup.lng]}
+				autoClose={false}
+				closeOnClick={false}
+			>
 				<div className="bg-base-100/70 border border-rescuetrack w-[250px] text-white pointer-events-auto p-2">
 					<h3 className="text-lg font-bold">
 						{element.tags?.building === "yes"
 							? "Gebäude"
 							: element.tags?.building}
+						{!element.tags?.building && "unbekannt"}
 					</h3>
 					<p className="">
 						{element.tags?.["addr:street"]} {element.tags?.["addr:housenumber"]}
@@ -108,14 +97,14 @@ export const SearchElements = () => {
 					icon={new L.DivIcon()}
 					opacity={0}
 				>
-					{searchPopupElement && (
-						<SearchElementPopup element={searchPopupElement} />
-					)}
 					{!searchPopupElement && (
 						<div className="w-20 border border-rescuetrack"></div>
 					)}
 				</Marker>
 			)}
+			{searchPopupElement && (
+				<SearchElementPopup element={searchPopupElement} />
+			)}
 		</>
 	);
 };