hooks auslagern von MapComponent, useInitializeMap.js und useLoadUserRights.js

components/mainComponent/hooks/useFetchWebServiceData.js

@@ -0,0 +1,32 @@
+// /components/mainComponent/hooks/useFetchWebServiceData.js
+import { useEffect } from "react";
+import fetchGisStationsStatusDistrict from "../../../services/api/fetchGisStationsStatusDistrict";
+import fetchGisStationsMeasurements from "../../../services/api/fetchGisStationsMeasurements";
+import fetchGisSystemStatic from "../../../services/api/fetchGisSystemStatic";
+
+const useFetchWebServiceData = (
+  mapGisStationsStatusDistrictUrl,
+  setGisStationsStatusDistrict,
+  mapGisStationsMeasurementsUrl,
+  setGisStationsMeasurements,
+  mapGisSystemStaticUrl,
+  setGisSystemStatic,
+  setGisSystemStaticLoaded,
+  setIsDataLoaded // <-- Status aus MapComponent.js übergeben
+) => {
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict);
+        await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements);
+        await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded);
+        setIsDataLoaded(true); // <-- Setzt den Status in MapComponent.js
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    fetchData();
+  }, [mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl]);
+};
+
+export default useFetchWebServiceData;

components/mainComponent/hooks/useInitializeMap.js

@@ -0,0 +1,13 @@
+// /components/mainComponent/hooks/useInitializeMap.js
+import { useEffect } from "react";
+import { initializeMap } from "../../../utils/initializeMap";
+
+const useInitializeMap = (map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
+  useEffect(() => {
+    if (mapRef.current && !map) {
+      initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
+    }
+  }, [mapRef, map, hasRights, setPolylineEventsDisabled]);
+};
+
+export default useInitializeMap;

components/mainComponent/hooks/useLoadUserRights.js

@@ -0,0 +1,20 @@
+// /components/mainComponent/hooks/useLoadUserRights.js
+import { useEffect } from "react";
+import { fetchUserRights } from "../../../services/api/fetchUserRights";
+
+const useLoadUserRights = (setUserRights, setIsRightsLoaded, setHasRights) => {
+  useEffect(() => {
+    const fetchAndSetUserRights = async () => {
+      const rights = await fetchUserRights();
+      setUserRights(rights);
+      setIsRightsLoaded(true);
+
+      // Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
+      setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
+    };
+
+    fetchAndSetUserRights();
+  }, []);
+};
+
+export default useLoadUserRights;

components/mainComponent/hooks/useSetupMarkers.js

@@ -0,0 +1,26 @@
+// /components/mainComponent/hooks/useSetupMarkers.js
+import { useEffect } from "react";
+import { checkOverlappingMarkers } from "../../../utils/mapUtils";
+
+const useSetupMarkers = (map, allMarkers, mapLayersVisibility, plusRoundIcon) => {
+  useEffect(() => {
+    if (map) {
+      allMarkers.forEach((marker) => {
+        const layerKey = marker.options?.layerKey;
+        const isVisible = mapLayersVisibility[layerKey];
+
+        if (!layerKey || isVisible === undefined) return;
+
+        if (localStorage.getItem("editMode") === "true" || !isVisible) {
+          if (map.hasLayer(marker)) map.removeLayer(marker);
+        } else {
+          if (!map.hasLayer(marker)) marker.addTo(map);
+        }
+      });
+
+      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+    }
+  }, [map, allMarkers, mapLayersVisibility]);
+};
+
+export default useSetupMarkers;

components/mainComponent/hooks/useSetupPolylines.js

@@ -0,0 +1,13 @@
+// useSetupPolylines.js
+import { useEffect } from "react";
+import { setupPolylines } from "../../utils/polylines/setupPolylines";
+
+const useSetupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
+  useEffect(() => {
+    if (!map) return;
+
+    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible);
+  }, [map, linePositions, lineColors, tooltipContents, newCoords, tempMarker, polylineVisible]);
+};
+
+export default useSetupPolylines;