From f59fb62d29af16df875f23ea0bbd06e74753c8c8 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 11 Mar 2025 07:45:08 +0100 Subject: [PATCH] hooks auslagern von MapComponent, useInitializeMap.js und useLoadUserRights.js --- components/mainComponent/MapComponent.js | 26 +++++---------- .../hooks/useFetchWebServiceData.js | 32 +++++++++++++++++++ .../mainComponent/hooks/useInitializeMap.js | 13 ++++++++ .../mainComponent/hooks/useLoadUserRights.js | 20 ++++++++++++ .../mainComponent/hooks/useSetupMarkers.js | 26 +++++++++++++++ .../mainComponent/hooks/useSetupPolylines.js | 13 ++++++++ config/appVersion.js | 2 +- 7 files changed, 113 insertions(+), 19 deletions(-) create mode 100644 components/mainComponent/hooks/useFetchWebServiceData.js create mode 100644 components/mainComponent/hooks/useInitializeMap.js create mode 100644 components/mainComponent/hooks/useLoadUserRights.js create mode 100644 components/mainComponent/hooks/useSetupMarkers.js create mode 100644 components/mainComponent/hooks/useSetupPolylines.js diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index faf6f7bda..bdeb0e2bb 100644 --- a/components/mainComponent/MapComponent.js +++ b/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(() => { - 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"); diff --git a/components/mainComponent/hooks/useFetchWebServiceData.js b/components/mainComponent/hooks/useFetchWebServiceData.js new file mode 100644 index 000000000..70e293943 --- /dev/null +++ b/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; diff --git a/components/mainComponent/hooks/useInitializeMap.js b/components/mainComponent/hooks/useInitializeMap.js new file mode 100644 index 000000000..21114e3d2 --- /dev/null +++ b/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; diff --git a/components/mainComponent/hooks/useLoadUserRights.js b/components/mainComponent/hooks/useLoadUserRights.js new file mode 100644 index 000000000..fa3688085 --- /dev/null +++ b/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; diff --git a/components/mainComponent/hooks/useSetupMarkers.js b/components/mainComponent/hooks/useSetupMarkers.js new file mode 100644 index 000000000..b59fdd0b1 --- /dev/null +++ b/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; diff --git a/components/mainComponent/hooks/useSetupPolylines.js b/components/mainComponent/hooks/useSetupPolylines.js new file mode 100644 index 000000000..d07103790 --- /dev/null +++ b/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; diff --git a/config/appVersion.js b/config/appVersion.js index c0d3f977c..45ca38b43 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.46"; +export const APP_VERSION = "1.1.47";