feat: Migration von selectedPoiSlice von Recoil zu Redux-Toolkit Slice

- Recoil Atom 'selectedPoiState' entfernt und durch Redux-Toolkit Slice ersetzt.
- Redux Actions hinzugefügt: setSelectedPoi, clearSelectedPoi.
- Selektor 'selectSelectedPoi' erstellt, um POI-Daten zu lesen.
- Komponenten angepasst (PoiUpdateModal, PoiUpdateModalWrapper, MapComponent), um Redux-Hooks zu verwenden.
- Reducer in rootReducer und store.js registriert.
- Funktionalität getestet und Fehlerbehebung implementiert.

components/MapComponent.js

@@ -69,6 +69,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
 import { selectMapId, selectUserId, setMapId, setUserId } from "../redux/slices/urlParameterSlice";
+import { setSelectedPoi } from "../redux/slices/selectedPoiSlice";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -91,7 +92,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const userId = useSelector(selectUserId);
   const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
   const [userRights, setUserRights] = useState(null);
-  const setSelectedPoi = useSetRecoilState(selectedPoiState);
+  //const setSelectedPoi = useSetRecoilState(selectedPoiState);
+  dispatch(setSelectedPoi(poiData));
   const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
   const [currentPoiData, setCurrentPoiData] = useState(null);
 

components/PoiUpdateModal.js

@@ -4,10 +4,13 @@ import React, { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { selectedPoiState } from "../redux/slices/selectedPoiSlice";
 import { currentPoiState } from "../redux/slices/currentPoiSlice";
+import { useSelector } from "react-redux";
+import { selectSelectedPoi } from "../../redux/slices/selectedPoiSlice";
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
   const currentPoi = useRecoilValue(currentPoiState);
-  const selectedPoi = useRecoilValue(selectedPoiState);
+  //const selectedPoi = useRecoilValue(selectedPoiState);
+  const selectedPoi = useSelector(selectSelectedPoi);
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");
   const [poiTypData, setPoiTypData] = useState([]);

components/pois/PoiUpdateModalWrapper.js

@@ -4,9 +4,13 @@ import PoiUpdateModal from "./PoiUpdateModal";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { currentPoiState, selectedPoiState } from "../../redux/slices/currentPoiSlice";
 import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
+import { useDispatch } from "react-redux";
+import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice";
 
 const PoiUpdateModalWrapper = ({ show, onClose, latlng }) => {
-  const setSelectedPoi = useSetRecoilState(selectedPoiState);
+  const dispatch = useDispatch();
+  //const setSelectedPoi = useSetRecoilState(selectedPoiState);
+  dispatch(setSelectedPoi(poiData));
   const setCurrentPoi = useSetRecoilState(currentPoiState);
   const currentPoi = useRecoilValue(currentPoiState);
   const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);

redux/reducer.js

@@ -4,12 +4,14 @@ import currentPoiReducer from "./slices/currentPoiSlice";
 import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice";
 import zoomTriggerReducer from "./slices/zoomTriggerSlice";
 import urlParameterReducer from "./slices/urlParameterSlice"; // Import hinzufügen
+import selectedPoiReducer from "./slices/selectedPoiSlice";
 
 const rootReducer = combineReducers({
   currentPoi: currentPoiReducer,
   gisStationsStaticDistrict: gisStationsStaticDistrictReducer,
   zoomTrigger: zoomTriggerReducer,
-  urlParameter: urlParameterReducer, // Reducer hinzufügen
+  urlParameter: urlParameterReducer,
+  selectedPoi: selectedPoiReducer,
 });
 
 export default rootReducer;

redux/slices/selectedPoiSlice.js

@@ -1,8 +1,31 @@
 // redux/slices/selectedPoiSlice.js
 //Ist gedacht um ausgewählte Poi Informationen zu speichern und zu PoiUpdateModal.js zu übergeben
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-export const selectedPoiState = atom({
+// Initialer Zustand
-  key: "poiState", // Einzigartiger Key (mit der gesamten Anwendung)
+const initialState = {
-  default: null, // Standardwert
+  selectedPoi: null,
+};
+
+// Slice erstellen
+const selectedPoiSlice = createSlice({
+  name: "selectedPoi",
+  initialState,
+  reducers: {
+    setSelectedPoi(state, action) {
+      state.selectedPoi = action.payload; // Setzt den ausgewählten POI
+    },
+    clearSelectedPoi(state) {
+      state.selectedPoi = null; // Löscht den ausgewählten POI
+    },
+  },
 });
+
+// Aktionen exportieren
+export const { setSelectedPoi, clearSelectedPoi } = selectedPoiSlice.actions;
+
+// Selektor exportieren
+export const selectSelectedPoi = (state) => state.selectedPoi.selectedPoi;
+
+// Reducer exportieren
+export default selectedPoiSlice.reducer;