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

components/mainComponent/MapComponent.js

@@ -78,9 +78,11 @@ import ShowAddStationPopup from "../AddPOIModal.js";
 import { useInitGisStationsStatic } from "../mainComponent/hooks/webServices/useInitGisStationsStatic";
 import { closeAddPoiModal } from "../../redux/slices/addPoiOnPolylineSlice.js";
 import AddPOIOnPolyline from "../AddPOIOnPolyline";
-
 import { enablePolylineEvents, disablePolylineEvents } from "../../utils/polylines/eventHandlers";
 import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from "../../redux/slices/polylineContextMenuSlice";
+//-------------------MapComponent.js hooks--------------------
+import useInitializeMap from "./hooks/useInitializeMap";
+import useLoadUserRights from "./hooks/useLoadUserRights";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -251,18 +253,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     isRightsLoaded, // Überprüfung, ob die Rechte geladen sind
   ]); */
 
-  useEffect(() => {
+  useLoadUserRights(setUserRights, setIsRightsLoaded, setHasRights);
-    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();
-  }, []);
 
   useGmaMarkersLayer(
     map,
@@ -722,11 +713,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     fetchPriorityConfig();
   }, []);
   //--------------------------------------------
-  useEffect(() => {
+  useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
-    if (mapRef.current && !map) {
+
-      initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
+  //--------------------------------------------
-    }
-  }, [mapRef, map, hasRights, setPolylineEventsDisabled]);
 
   useEffect(() => {
     if (map) {
@@ -737,6 +726,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     }
   }, [map, polylineEventsDisabled]);
+  //--------------------------------------------
   useEffect(() => {
     if (map) {
       console.log("6- Karteninstanz (map) wurde jetzt erfolgreich initialisiert");

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;

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.46";
+export const APP_VERSION = "1.1.47";