cleanup: veraltete datei für Layers gelöscht

hooks/useAreaMarkersLayer.js

@@ -0,0 +1,128 @@
+// /hooks/layers/useAreaMarkersLayer.js
+import { useEffect, useState, useRef } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { useDispatch } from "react-redux";
+import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk";
+
+const customIcon = new L.Icon({
+  iconUrl: "/img/bereich.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowUrl: "/img/marker-shadow.png",
+  shadowSize: [41, 41],
+});
+
+const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
+  const dispatch = useDispatch();
+  const [areaMarkers, setAreaMarkers] = useState([]);
+  const prevVisibility = useRef(null);
+
+  const updateMarkersVisibility = () => {
+    if (!map || areaMarkers.length === 0) return;
+
+    const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
+    const areAllLayersInvisible = Object.values(mapLayersVisibility).every(v => !v);
+
+    if (areAllLayersInvisible === prevVisibility.current) return;
+    prevVisibility.current = areAllLayersInvisible;
+
+    areaMarkers.forEach(marker => {
+      if (areAllLayersInvisible) {
+        marker.addTo(map);
+        if (oms) oms.addMarker(marker);
+      } else {
+        map.removeLayer(marker);
+      }
+    });
+  };
+
+  useEffect(() => {
+    updateMarkersVisibility();
+
+    const handleStorageChange = event => {
+      if (event.key === "mapLayersVisibility") {
+        updateMarkersVisibility();
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    const intervalId = setInterval(updateMarkersVisibility, 500);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      clearInterval(intervalId);
+    };
+  }, [map, areaMarkers, oms]);
+
+  useEffect(() => {
+    const fetchArea = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
+
+        const data = await response.json();
+
+        const markers = data.map(item => {
+          const marker = L.marker([item.x, item.y], {
+            icon: customIcon,
+            draggable: true,
+          });
+
+          marker.bindTooltip(
+            `<strong>Bereich:</strong> ${item.location_name} <br />
+             <strong>Standort:</strong> ${item.area_name}`,
+            {
+              permanent: false,
+              direction: "top",
+              offset: [0, -20],
+            }
+          );
+
+          marker.on("dragend", async e => {
+            const { lat, lng } = e.target.getLatLng();
+            try {
+              await dispatch(
+                updateAreaThunk({
+                  idLocation: item.idLocation,
+                  idMap: item.idMaps,
+                  newCoords: { x: lat, y: lng },
+                })
+              ).unwrap();
+              console.log("✔️ Koordinaten erfolgreich aktualisiert:", { lat, lng });
+              onUpdateSuccess?.(); // optionaler Callback
+            } catch (error) {
+              console.error("❌ Fehler beim Aktualisieren der Koordinaten:", error);
+            }
+          });
+
+          return marker;
+        });
+
+        setAreaMarkers(markers);
+      } catch (error) {
+        console.error("Fehler beim Laden der Bereiche:", error.message);
+        setAreaMarkers([]);
+      }
+    };
+
+    fetchArea();
+  }, [apiUrl, dispatch]);
+
+  useEffect(() => {
+    if (map) {
+      areaMarkers.forEach(marker => marker.addTo(map));
+    }
+
+    return () => {
+      if (map) {
+        areaMarkers.forEach(marker => map.removeLayer(marker));
+      }
+    };
+  }, [map, areaMarkers]);
+
+  return areaMarkers;
+};
+
+export default useAreaMarkersLayer;