currentPoiSlice als Redux Slice implementiert statt Recoil atom

components/DataSheet.js

@@ -5,7 +5,7 @@ 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 { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleStateSlice";
+import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
 import EditModeToggle from "./EditModeToggle";
 import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
 

components/MapComponent.js

@@ -23,7 +23,7 @@ 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/poiLayerVisibleStateSlice.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";
@@ -51,8 +51,17 @@ import { useMapComponentState } from "../hooks/useMapComponentState";
 import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  selectCurrentPoi,
+  setCurrentPoi,
+  clearCurrentPoi,
+} from "../redux/slices/currentPoiSlice";
+
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  const dispatch = useDispatch();
+const currentPoi = useSelector(selectCurrentPoi);
   const polylineVisible = useRecoilValue(polylineLayerVisibleState);
   const [editMode, setEditMode] = useState(false); // editMode Zustand
   const { deviceName, setDeviceName } = useMapComponentState();
@@ -71,7 +80,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const setSelectedPoi = useSetRecoilState(selectedPoiState);
   const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
   const [currentPoiData, setCurrentPoiData] = useState(null);
-  const setCurrentPoi = useSetRecoilState(currentPoiState);
+
+
+  //const setCurrentPoi = useSetRecoilState(currentPoiState);
+
+
+
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const zoomTrigger = useRecoilValue(zoomTriggerState);
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);

components/MapComponent.test.js

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import { RecoilRoot } from "recoil";
 import MapComponent from "./MapComponent";
 import { mapLayersState } from "../store/atoms/mapLayersSlice";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleStateSlice";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleSlice";
 import "@testing-library/jest-dom";
 
 describe("MapComponent - TK-Komponenten Tests", () => {

redux/reducer.js

@@ -1,18 +1,9 @@
-// /redux/reducer.js
-const initialState = {
-  messages: [],
-};
+// redux/reducer.js
+import { combineReducers } from "redux";
+import currentPoiReducer from "./slices/currentPoiSlice";
 
-const websocketReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case "WS_MESSAGE_RECEIVED":
-      return {
-        ...state,
-        messages: [...state.messages, action.payload],
-      };
-    default:
-      return state;
-  }
-};
+const rootReducer = combineReducers({
+  currentPoi: currentPoiReducer,
+});
 
-export default websocketReducer;
+export default rootReducer;

redux/slices/currentPoiSlice.js

@@ -1,7 +1,28 @@
 // /redux/slices/currentPoiSlice.js
-import { atom } from 'recoil';
+import { createSlice } from "@reduxjs/toolkit";
 
-export const currentPoiState = atom({
-  key: 'currentPoiState', // Eindeutiger Key, der dieses Atom identifiziert
-  default: null, // Standardwert ist null oder ein leeres Objekt, je nach Bedarf
+const initialState = {
+  currentPoi: null, // Standardwert wie im Recoil-Atom
+};
+
+const currentPoiSlice = createSlice({
+  name: "currentPoi",
+  initialState,
+  reducers: {
+    setCurrentPoi(state, action) {
+      state.currentPoi = action.payload; // Zustand mit dem neuen POI aktualisieren
+    },
+    clearCurrentPoi(state) {
+      state.currentPoi = null; // Zustand auf null zurücksetzen
+    },
+  },
 });
+
+// Actions exportieren
+export const { setCurrentPoi, clearCurrentPoi } = currentPoiSlice.actions;
+
+// Selector exportieren (optional)
+export const selectCurrentPoi = (state) => state.currentPoi.currentPoi;
+
+// Reducer exportieren
+export default currentPoiSlice.reducer;

redux/slices/poiLayerVisibleStateSlice.js

@@ -1,8 +0,0 @@
-// /redux/slices/poiLayerVisibleStateSlice.js
-// Recoil atom for the visibility of the POI layer
-import { atom } from "recoil";
-
-export const poiLayerVisibleState = atom({
-  key: "poiLayerVisibleState",
-  default: true,
-});

redux/store.js

@@ -1,11 +1,9 @@
-// /redux/store.js
 import { configureStore } from "@reduxjs/toolkit";
 import websocketMiddleware from "./middleware/websocketMiddleware";
-import websocketReducer from "./reducer";
+import rootReducer from "./reducer";
 
-// Erstelle den Store mit configureStore
 const store = configureStore({
-  reducer: websocketReducer,
+  reducer: rootReducer, // Kombinierter Root-Reducer
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(websocketMiddleware),
 });