feat: Recoil-Zustand 'poiLayerVisibleState' durch Redux ersetzt

- Recoil-Zugriffe in MapComponent.js, DataSheet.js, useMapComponentState.js entfernt
- Redux Slice poiLayerVisibleSlice eingeführt
- Redux Store konfiguriert
- Zustand 'visible' wird über Redux verwaltet
- CHANGELOG.md auf Version 1.1.82 aktualisiert

CHANGELOG.md

@@ -4,6 +4,27 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.82] – 2025-05-18
+
+### Changed
+
+- Recoil-Zustand `poiLayerVisibleState` vollständig durch Redux `poiLayerVisibleSlice` ersetzt
+- Betroffene Komponenten:
+  - `useMapComponentState.js` – Zugriff via `useSelector` statt `useRecoilValue`
+  - `MapComponent.js` – Zugriff auf `poiLayerVisible` über Redux
+  - `DataSheet.js` – `useRecoilState` entfernt, `dispatch(setVisible(...))` integriert
+- Redux-Store (`store.js`) erweitert um `poiLayerVisibleReducer`
+
+### Removed
+
+- Recoil-Atom `poiLayerVisibleState` entfernt
+
+### Added
+
+- Neue Redux Actions: `setVisible`, `toggleVisible` in `poiLayerVisibleSlice.js`
+
+---
+
 ## [1.1.78] – 2025-05-17
 
 ### Changed

components/DataSheet.js

@@ -6,7 +6,6 @@ import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStatic
 import { mapLayersState } from "../redux/slices/mapLayersSlice";
 import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
 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, useDispatch } from "react-redux";
@@ -18,10 +17,13 @@ import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices
 import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 
 import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
+import { setVisible } from "../redux/slices/poiLayerVisibleSlice";
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
-  const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
+  const dispatch = useDispatch();
+  const poiVisible = useSelector((state) => state.poiLayerVisible.visible);
+  const setPoiVisible = (value) => dispatch(setVisible(value));
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const mapLayersVisibility = useSelector(selectMapLayersState);
   const [stationListing, setStationListing] = useState([]);
@@ -31,7 +33,7 @@ function DataSheet() {
   const GisStationsStatic = useSelector(selectGisStationsStatic) || []; //Area-Name/Bereiche dropdownmenu
 
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
-  const dispatch = useDispatch();
+
   const polylineVisible = useSelector(selectPolylineVisible);
 
   const handlePolylineCheckboxChange = (event) => {

components/mainComponent/MapComponent.js

@@ -39,7 +39,6 @@ import { updateLocation } from "../../utils/updateBereichUtil.js";
 //import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 
 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.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
@@ -129,7 +128,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   const closePopup = () => setIsPopupOpen(false);
   const [currentCoordinates, setCurrentCoordinates] = useState("");
-  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
+  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
   const [isRightsLoaded, setIsRightsLoaded] = useState(false);
   const [hasRights, setHasRights] = useState(false);
   const [mapId, setMapId] = useRecoilState(mapIdState);

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.81";
+export const APP_VERSION = "1.1.82";

hooks/useMapComponentState.js

@@ -1,8 +1,7 @@
 // hooks/useMapComponentState.js
 // POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl
 import { useState, useEffect } from "react";
-import { useRecoilValue } from "recoil";
-import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
+import { useSelector } from "react-redux"; // ✅ Redux statt Recoil
 import { isMockMode } from "../config/config";
 
 export const useMapComponentState = () => {
@@ -12,7 +11,9 @@ export const useMapComponentState = () => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [priorityConfig, setPriorityConfig] = useState([]);
   const [menuItemAdded, setMenuItemAdded] = useState(false);
-  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
+
+  // ✅ Redux: Zustand der Sichtbarkeit des POI-Layers
+  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
 
   useEffect(() => {
     const fetchPoiTypData = async () => {
@@ -51,8 +52,6 @@ export const useMapComponentState = () => {
       try {
         const protocol = window.location.protocol;
         const host = window.location.hostname;
-
-        // WebService läuft immer auf Port 80 (kein :port anhängen)
         const apiBaseUrl = `${protocol}//${host}/talas5/ClientData/WebServiceMap.asmx`;
 
         const params = new URLSearchParams(window.location.search);
@@ -62,7 +61,6 @@ export const useMapComponentState = () => {
         console.log("🌐 Geräte-API:", url);
 
         const response = await fetch(url);
-
         const data = await response.json();
 
         setLocationDeviceData(data.Points || []);

redux/slices/poiLayerVisibleSlice.js

@@ -1,9 +1,22 @@
 // /redux/slices/poiLayerVisibleSlice.js
-// Recoil atom for the visibility of the POI layer
-//
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-export const poiLayerVisibleState = atom({
-  key: "poiLayerVisibleState",
-  default: true,
+const initialState = {
+  visible: true,
+};
+
+export const poiLayerVisibleSlice = createSlice({
+  name: "poiLayerVisible",
+  initialState,
+  reducers: {
+    setVisible: (state, action) => {
+      state.visible = action.payload;
+    },
+    toggleVisible: (state) => {
+      state.visible = !state.visible;
+    },
+  },
 });
+
+export const { setVisible, toggleVisible } = poiLayerVisibleSlice.actions;
+export default poiLayerVisibleSlice.reducer;

redux/store.js

@@ -15,6 +15,7 @@ import polylineContextMenuReducer from "./slices/polylineContextMenuSlice";
 import selectedPoiReducer from "./slices/selectedPoiSlice";
 import selectedDeviceReducer from "./slices/selectedDeviceSlice";
 import mapLayersReducer from "./slices/mapLayersSlice";
+import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice";
 
 export const store = configureStore({
   reducer: {
@@ -33,5 +34,6 @@ export const store = configureStore({
     selectedPoi: selectedPoiReducer,
     selectedDevice: selectedDeviceReducer,
     mapLayers: mapLayersReducer,
+    poiLayerVisible: poiLayerVisibleReducer,
   },
 });