From 2adca70ba5d8fcaaf276571adecb7dc6ac02c146 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 20 Dec 2024 06:51:55 +0100 Subject: [PATCH] feat: Migration von gisStationsStaticDistrictState von Recoil zu Redux MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Recoil-Atom 'gisStationsStaticDistrictState' in ein Redux-Slice umgewandelt. - fetchGisStationsStaticDistrict angepasst, um Redux-Dispatch zu verwenden. - MapComponent.js und DataSheet.js refaktoriert, um Redux zu integrieren. - fetchOptions für API-Anfragen hinzugefügt. - Zentrale Zustandsverwaltung mit Redux sichergestellt. --- components/DataSheet.js | 5 ++- components/MapComponent.js | 43 +++++++++++-------- redux/reducer.js | 2 + .../slices/gisStationsStaticDistrictSlice.js | 24 +++++++++-- services/fetchData.js | 12 +++--- 5 files changed, 57 insertions(+), 29 deletions(-) diff --git a/components/DataSheet.js b/components/DataSheet.js index b307cd62f..76889dfb2 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -8,6 +8,8 @@ import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice"; import EditModeToggle from "./EditModeToggle"; import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility +import { useSelector } from "react-redux"; +import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; function DataSheet() { const [editMode, setEditMode] = useState(false); // Zustand für editMode @@ -16,7 +18,8 @@ function DataSheet() { const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); const [stationListing, setStationListing] = useState([]); const [systemListing, setSystemListing] = useState([]); - const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState); + //const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState); + const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); const GisSystemStatic = useRecoilValue(gisSystemStaticState); const setZoomTrigger = useSetRecoilState(zoomTriggerState); const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines diff --git a/components/MapComponent.js b/components/MapComponent.js index 8687e9262..42a935302 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -9,21 +9,15 @@ import "leaflet.smooth_marker_bouncing"; import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import DataSheet from "./DataSheet.js"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; -import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; -import { mapLayersState } from "../redux/slices/mapLayersSlice"; -import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; -import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; + import AddPoiModalWindow from "./pois/AddPoiModalWindow.js"; -import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice"; -import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline' + +import { InformationCircleIcon } from "@heroicons/react/20/solid"; import PoiUpdateModal from "./pois/PoiUpdateModal.js"; -import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js"; -import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; + import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; -import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js"; -import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js"; + import plusRoundIcon from "./PlusRoundIcon.js"; import { createAndSetDevices } from "../utils/createAndSetDevices.js"; import { restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js"; @@ -39,8 +33,7 @@ import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGi import { setupPolylines } from "../utils/setupPolylines.js"; import { setupPOIs } from "../utils/setupPOIs.js"; import VersionInfoModal from "./VersionInfoModal.js"; -//-------------------------------------------- - +import useDrawLines from "../hooks/layers/useDrawLines"; import useFetchPoiData from "../hooks/useFetchPoiData"; import usePoiTypData from "../hooks/usePoiTypData"; import useLayerVisibility from "../hooks/useLayerVisibility"; @@ -48,14 +41,25 @@ import useLineData from "../hooks/useLineData.js"; //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices"; import { useMapComponentState } from "../hooks/useMapComponentState"; -import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; +//-------------------------------------------- +import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; +import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; +import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js"; +import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js"; +import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js"; +import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice"; +import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; +import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; +import { mapLayersState } from "../redux/slices/mapLayersSlice"; +import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; +import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; +import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice"; import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; +//-------------------------------------------- import { useSelector, useDispatch } from "react-redux"; import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice"; -import useDrawLines from "../hooks/layers/useDrawLines"; - const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); const currentPoi = useSelector(selectCurrentPoi); @@ -89,7 +93,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz const [oms, setOms] = useState(null); // State für OMS-Instanz - const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState); + //const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState); + const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten @@ -239,7 +244,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }; // Fetch GIS Stations Static District - await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions); + await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, dispatch, fetchOptions); requestCount++; // Zähler erhöhen localStorage.setItem("fetchWebServiceMap", requestCount); //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); @@ -267,7 +272,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }; fetchWebServiceMap(); - }, []); + }, [dispatch, mapGisStationsStaticDistrictUrl]); //-------------------------------------------------------- useDrawLines(setLinePositions); // Linien auf die Karte zeichnen diff --git a/redux/reducer.js b/redux/reducer.js index 60c69d01c..2d75946d6 100644 --- a/redux/reducer.js +++ b/redux/reducer.js @@ -1,9 +1,11 @@ // redux/reducer.js import { combineReducers } from "redux"; import currentPoiReducer from "./slices/currentPoiSlice"; +import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice"; const rootReducer = combineReducers({ currentPoi: currentPoiReducer, + gisStationsStaticDistrict: gisStationsStaticDistrictReducer, }); export default rootReducer; diff --git a/redux/slices/gisStationsStaticDistrictSlice.js b/redux/slices/gisStationsStaticDistrictSlice.js index 3c3ab56e8..793160377 100644 --- a/redux/slices/gisStationsStaticDistrictSlice.js +++ b/redux/slices/gisStationsStaticDistrictSlice.js @@ -1,7 +1,23 @@ // /redux/slices/gisStationsStaticDistrictSlice.js -import { atom } from "recoil"; +import { createSlice } from "@reduxjs/toolkit"; -export const gisStationsStaticDistrictState = atom({ - key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts) - default: [], // Standardwert (Anfangszustand) +const initialState = []; + +const gisStationsStaticDistrictSlice = createSlice({ + name: "gisStationsStaticDistrict", + initialState, + reducers: { + setGisStationsStaticDistrict: (state, action) => { + return action.payload; + }, + clearGisStationsStaticDistrict: () => { + return []; + }, + }, }); + +export const { setGisStationsStaticDistrict, clearGisStationsStaticDistrict } = gisStationsStaticDistrictSlice.actions; + +export const selectGisStationsStaticDistrict = (state) => state.gisStationsStaticDistrict; + +export default gisStationsStaticDistrictSlice.reducer; diff --git a/services/fetchData.js b/services/fetchData.js index 2b036abb5..718e2ad1d 100644 --- a/services/fetchData.js +++ b/services/fetchData.js @@ -1,17 +1,19 @@ // services/fetchData.js -export const fetchGisStationsStaticDistrict = async (url, setGisStationsStaticDistrict) => { +import { setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; + +export const fetchGisStationsStaticDistrict = async (url, dispatch, fetchOptions) => { try { - const response = await fetch(url); + const response = await fetch(url, fetchOptions); const jsonResponse = await response.json(); if (jsonResponse && jsonResponse.Points) { - setGisStationsStaticDistrict(jsonResponse.Points); + dispatch(setGisStationsStaticDistrict(jsonResponse.Points)); } else { console.error('Erwartete Daten im "Points"-Array nicht gefunden', jsonResponse); - setGisStationsStaticDistrict([]); + dispatch(setGisStationsStaticDistrict([])); } } catch (error) { console.error("Fehler beim Laden der Daten: ", error); - setGisStationsStaticDistrict([]); + dispatch(setGisStationsStaticDistrict([])); } }; export const fetchGisStationsStatusDistrict = async (url, setGisStationsStatusDistrict) => {