refactor: Recoil durch Redux ersetzt und Fehler behoben

- Entfernt `useRecoilState(mapLayersState)` und durch `useSelector(selectMapLayersState)` ersetzt.
- Alle `setMapLayersVisibility` durch `dispatch(setLayerVisibility(...))` ersetzt.
- LocalStorage-Handling für `mapLayersVisibility` mit Redux umgesetzt.
- Fehler "setMapLayersVisibility is not defined" behoben, indem `dispatch` verwendet wurde.
- Sicherstellung, dass `mapLayersSlice` im Redux-Store registriert ist.

components/DataSheet.js

@@ -17,11 +17,13 @@ import { useInitGisStationsStatic } from "../components/mainComponent/hooks/webS
 import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
 import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 
+import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
+
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
-  const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
@@ -38,13 +40,8 @@ function DataSheet() {
     localStorage.setItem("polylineVisible", checked);
 
     if (checked) {
-      // Wenn Kabelstrecken aktiviert wird, TALAS automatisch auch aktivieren
-      const newMapLayersVisibility = {
-        ...mapLayersVisibility,
-        TALAS: true,
-      };
-      setMapLayersVisibility(newMapLayersVisibility);
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newMapLayersVisibility));
+      dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
+      localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, TALAS: true }));
     }
   };
 
@@ -61,15 +58,19 @@ function DataSheet() {
       dispatch(setPolylineVisible(storedPolylineVisible === "true"));
     }
 
+    // Layer-Sichtbarkeiten aus localStorage laden
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
     if (storedMapLayersVisibility) {
-      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+      const parsedVisibility = JSON.parse(storedMapLayersVisibility);
+      Object.keys(parsedVisibility).forEach((key) => {
+        dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
+      });
     }
 
     // EditMode lesen
     const storedEditMode = localStorage.getItem("editMode");
     setEditMode(storedEditMode === "true");
-  }, [setPoiVisible, setMapLayersVisibility]);
+  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
 
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -122,11 +123,8 @@ function DataSheet() {
     if (editMode) return;
     const { checked } = event.target;
 
-    setMapLayersVisibility((prev) => {
-      const newState = { ...prev, [key]: checked };
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
-      return newState;
-    });
+    dispatch(setLayerVisibility({ layer: key, visibility: checked }));
+    localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
 
     setTimeout(() => {
       const event = new Event("visibilityChanged");

components/mainComponent/MapComponent.js

@@ -44,7 +44,7 @@ import { poiLayerVisibleState } from "../../redux/slices/poiLayerVisibleSlice.js
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js";
 import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
-import { mapLayersState } from "../../redux/slices/mapLayersSlice.js";
+import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js";
 import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js";
 import { polylineEventsDisabledState } from "../../redux/slices/polylineEventsDisabledSlice.js";
@@ -181,7 +181,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
-  const mapLayersVisibility = useRecoilValue(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState) || {};
   const selectedArea = useRecoilValue(selectedAreaState);
 
   const [linePositions, setLinePositions] = useState([]);

components/pois/PoiUpdateModal.js

@@ -5,16 +5,19 @@ import { useRecoilState } from "recoil";
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice";
 import { currentPoiState } from "../../redux/slices/currentPoiSlice";
 import { mapLayersState } from "../../redux/slices/mapLayersSlice";
-import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
+
 import { fetchLocationDevicesFromDB } from "../../redux/slices/db/locationDevicesFromDBSlice";
 import { useSelector, useDispatch } from "react-redux";
 
+import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
+import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
+
 const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const dispatch = useDispatch();
 
   const currentPoi = useSelector(selectCurrentPoi);
-  const selectedPoi = useRecoilState(selectedPoiState);
-  const [mapLayersVisibility] = useRecoilState(mapLayersState);
+  const selectedPoi = useSelector(selectCurrentPoi);
+  const mapLayersVisibility = useSelector(selectMapLayersState);
 
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");