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

This commit is contained in:
ISA
2025-03-11 07:45:08 +01:00
parent 0dce495435
commit f59fb62d29
7 changed files with 113 additions and 19 deletions

View File

@@ -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(() => {
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();
}, []);
useLoadUserRights(setUserRights, setIsRightsLoaded, setHasRights);
useGmaMarkersLayer(
map,
@@ -722,11 +713,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
fetchPriorityConfig();
}, []);
//--------------------------------------------
useEffect(() => {
if (mapRef.current && !map) {
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
}
}, [mapRef, map, hasRights, setPolylineEventsDisabled]);
useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, 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");

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;