refactor(area): Bereichsaktualisierung von util auf Redux umgestellt

- updateAreaUtil.js entfernt
- updateAreaService, updateAreaThunk, updateAreaSlice eingeführt
- useAreaMarkersLayer nutzt jetzt updateAreaThunk
- MapComponent umgestellt auf Redux-Dispatch
- Version erhöht auf 1.1.182

hooks/layers/useAreaMarkersLayer.js

@@ -1,10 +1,10 @@
-// /hooks/layers/useBereicheMarkersLayer.js
+// /hooks/layers/useAreaMarkersLayer.js
 import { useEffect, useState, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
-import { updateLocation } from "../../utils/updateBereichUtil";
+import { useDispatch } from "react-redux";
+import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
 
-// Definiere ein Standard-Icon
 const customIcon = new L.Icon({
   iconUrl: "/img/bereich.png",
   iconSize: [25, 41],
@@ -14,22 +14,21 @@ const customIcon = new L.Icon({
   shadowSize: [41, 41],
 });
 
-const useBereicheMarkersLayer = (map, oms, apiUrl) => {
-  const [bereicheMarkers, setBereicheMarkers] = useState([]);
-  const prevVisibility = useRef(null); // Referenz, um vorherige Sichtbarkeitsdaten zu speichern
+const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
+  const dispatch = useDispatch();
+  const [areaMarkers, setAreaMarkers] = useState([]);
+  const prevVisibility = useRef(null);
 
   const updateMarkersVisibility = () => {
-    if (!map || bereicheMarkers.length === 0) return;
+    if (!map || areaMarkers.length === 0) return;
 
     const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
-
-    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
+    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((v) => !v);
 
     if (areAllLayersInvisible === prevVisibility.current) return;
-
     prevVisibility.current = areAllLayersInvisible;
 
-    bereicheMarkers.forEach((marker) => {
+    areaMarkers.forEach((marker) => {
       if (areAllLayersInvisible) {
         marker.addTo(map);
         if (oms) oms.addMarker(marker);
@@ -49,25 +48,19 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     };
 
     window.addEventListener("storage", handleStorageChange);
-
-    const intervalId = setInterval(() => {
-      updateMarkersVisibility();
-    }, 500);
+    const intervalId = setInterval(updateMarkersVisibility, 500);
 
     return () => {
       window.removeEventListener("storage", handleStorageChange);
       clearInterval(intervalId);
     };
-  }, [map, bereicheMarkers, oms]);
+  }, [map, areaMarkers, oms]);
 
   useEffect(() => {
-    const fetchBereiche = async () => {
+    const fetchArea = async () => {
       try {
         const response = await fetch(apiUrl);
-
-        if (!response.ok) {
-          throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
-        }
+        if (!response.ok) throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
 
         const data = await response.json();
 
@@ -78,10 +71,8 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
           });
 
           marker.bindTooltip(
-            `
-            <strong>Bereich:</strong> ${item.location_name} <br />
-            <strong>Standort:</strong> ${item.area_name} <br />
-            `,
+            `<strong>Bereich:</strong> ${item.location_name} <br />
+             <strong>Standort:</strong> ${item.area_name}`,
             {
               permanent: false,
               direction: "top",
@@ -92,39 +83,46 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
           marker.on("dragend", async (e) => {
             const { lat, lng } = e.target.getLatLng();
             try {
-              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
-              console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
+              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);
+              console.error("❌ Fehler beim Aktualisieren der Koordinaten:", error);
             }
           });
 
           return marker;
         });
 
-        setBereicheMarkers(markers);
+        setAreaMarkers(markers);
       } catch (error) {
         console.error("Fehler beim Laden der Bereiche:", error.message);
-        setBereicheMarkers([]); // Wichtig: Leere Liste setzen, kein reload oder Ausnahme erzeugen
+        setAreaMarkers([]);
       }
     };
 
-    fetchBereiche();
-  }, [apiUrl]);
+    fetchArea();
+  }, [apiUrl, dispatch]);
 
   useEffect(() => {
     if (map) {
-      bereicheMarkers.forEach((marker) => marker.addTo(map));
+      areaMarkers.forEach((marker) => marker.addTo(map));
     }
 
     return () => {
       if (map) {
-        bereicheMarkers.forEach((marker) => map.removeLayer(marker));
+        areaMarkers.forEach((marker) => map.removeLayer(marker));
       }
     };
-  }, [map, bereicheMarkers]);
+  }, [map, areaMarkers]);
 
-  return bereicheMarkers;
+  return areaMarkers;
 };
 
-export default useBereicheMarkersLayer;
+export default useAreaMarkersLayer;