feat: Migration von gisStationsStaticDistrictState von Recoil zu Redux

- 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

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

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

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;

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;

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) => {