From c2f5fa3054431da67526012291644053a54ad394 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 23 Dec 2024 11:47:28 +0100 Subject: [PATCH] feat: Migration von selectedPoiSlice von Recoil zu Redux-Toolkit Slice MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 4 ++- components/PoiUpdateModal.js | 5 +++- components/pois/PoiUpdateModalWrapper.js | 6 ++++- redux/reducer.js | 4 ++- redux/slices/selectedPoiSlice.js | 31 +++++++++++++++++++++--- 5 files changed, 42 insertions(+), 8 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 7948a51dd..3c0611a50 100644 --- a/components/MapComponent.js +++ b/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); diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js index 9e4919dbc..e00e4ec72 100644 --- a/components/PoiUpdateModal.js +++ b/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([]); diff --git a/components/pois/PoiUpdateModalWrapper.js b/components/pois/PoiUpdateModalWrapper.js index 4916c9cd6..9c0a16e6d 100644 --- a/components/pois/PoiUpdateModalWrapper.js +++ b/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); diff --git a/redux/reducer.js b/redux/reducer.js index 9f9f3cc98..65929113b 100644 --- a/redux/reducer.js +++ b/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; diff --git a/redux/slices/selectedPoiSlice.js b/redux/slices/selectedPoiSlice.js index e6c6761cf..d724050e1 100644 --- a/redux/slices/selectedPoiSlice.js +++ b/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({ - key: "poiState", // Einzigartiger Key (mit der gesamten Anwendung) - default: null, // Standardwert +// Initialer Zustand +const initialState = { + 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;