From 20aba9bbacc1e297668ed18c3debbc72a745346f Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sun, 18 May 2025 17:21:16 +0200 Subject: [PATCH] feat: Recoil-State 'selectedAreaState' durch Redux ersetzt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Redux-Slice 'selectedAreaSlice' erstellt mit set/clear Funktionen - DataSheet.js verwendet dispatch(setSelectedArea(...)) für Dropdown-Auswahl - MapComponent.js liest Bereichsauswahl über useSelector aus Redux Store - Recoil-Importe entfernt, Zustand zentralisiert --- CHANGELOG.md | 12 ++++++++++++ components/DataSheet.js | 7 +++---- components/mainComponent/MapComponent.js | 4 ++-- config/appVersion.js | 2 +- redux/slices/selectedAreaSlice.js | 25 +++++++++++++++++++----- redux/store.js | 2 ++ 6 files changed, 40 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e84f456ac..d12b5ad6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,18 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.86] – 2025-05-21 + +### Changed + +- Recoil-State `selectedAreaState` vollständig entfernt +- Umstellung auf Redux: + - `selectedAreaSlice.js` → zentrale Steuerung des Bereichs (Area) + - `DataSheet.js` – setzt `setSelectedArea(...)` über Redux + - `MapComponent.js` – liest `selectedArea` aus Redux und zentriert Karte + +--- + ## [1.1.85] – 2025-05-21 ### Changed diff --git a/components/DataSheet.js b/components/DataSheet.js index f763c53b2..0643e55a9 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice"; import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js"; import { mapLayersState } from "../redux/slices/mapLayersSlice"; -import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; +import { setSelectedArea } from "../redux/slices/selectedAreaSlice"; import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; import EditModeToggle from "./EditModeToggle"; import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility @@ -21,10 +21,9 @@ import { setVisible } from "../redux/slices/poiLayerVisibleSlice"; function DataSheet() { const [editMode, setEditMode] = useState(false); // Zustand für editMode - const dispatch = useDispatch(); const poiVisible = useSelector((state) => state.poiLayerVisible.visible); const setPoiVisible = (value) => dispatch(setVisible(value)); - const setSelectedArea = useSetRecoilState(selectedAreaState); + const dispatch = useDispatch(); const mapLayersVisibility = useSelector(selectMapLayersState); const [stationListing, setStationListing] = useState([]); const [systemListing, setSystemListing] = useState([]); @@ -77,7 +76,7 @@ function DataSheet() { const handleAreaChange = (event) => { const selectedIndex = event.target.options.selectedIndex; const areaName = event.target.options[selectedIndex].text; - setSelectedArea(areaName); + dispatch(setSelectedArea(areaName)); }; useEffect(() => { diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index fb5e47b30..e85461cd8 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -42,7 +42,7 @@ import { mapIdState, userIdState } from "../../redux/slices/urlParameterSlice.js import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js"; import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js"; import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; -import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js"; + import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js"; import { polylineLayerVisibleState } from "../../redux/slices/polylineLayerVisibleSlice.js"; //-------------------------------------------- @@ -179,7 +179,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [lineStatusData, setLineStatusData] = useState([]); const [linesData, setLinesData] = useState([]); const mapLayersVisibility = useSelector(selectMapLayersState) || {}; - const selectedArea = useRecoilValue(selectedAreaState); + const selectedArea = useSelector((state) => state.selectedArea.area); const [linePositions, setLinePositions] = useState([]); const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData); diff --git a/config/appVersion.js b/config/appVersion.js index 2b162b8cc..da4df546c 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.86"; +export const APP_VERSION = "1.1.87"; diff --git a/redux/slices/selectedAreaSlice.js b/redux/slices/selectedAreaSlice.js index b35d1f0f9..98f1e94de 100644 --- a/redux/slices/selectedAreaSlice.js +++ b/redux/slices/selectedAreaSlice.js @@ -1,7 +1,22 @@ -// /redux/slides/selectedAreaSlice.js -import { atom } from "recoil"; +// redux/slices/selectedAreaSlice.js +import { createSlice } from "@reduxjs/toolkit"; -export const selectedAreaState = atom({ - key: "selectedAreaState", // unique ID (with respect to other atoms/selectors) - default: null, // default value (aka initial value) +const initialState = { + area: null, +}; + +const selectedAreaSlice = createSlice({ + name: "selectedArea", + initialState, + reducers: { + setSelectedArea: (state, action) => { + state.area = action.payload; + }, + clearSelectedArea: (state) => { + state.area = null; + }, + }, }); + +export const { setSelectedArea, clearSelectedArea } = selectedAreaSlice.actions; +export default selectedAreaSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 4e42bd65c..b4842d332 100644 --- a/redux/store.js +++ b/redux/store.js @@ -19,6 +19,7 @@ import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice"; import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice"; import polylineEventsDisabledReducer from "./slices/polylineEventsDisabledSlice"; import readPoiMarkersStoreReducer from "./slices/readPoiMarkersStoreSlice"; +import selectedAreaReducer from "./slices/selectedAreaSlice"; export const store = configureStore({ reducer: { @@ -41,5 +42,6 @@ export const store = configureStore({ poiReadFromDbTrigger: poiReadFromDbTriggerReducer, polylineEventsDisabled: polylineEventsDisabledReducer, readPoiMarkersStore: readPoiMarkersStoreReducer, + selectedArea: selectedAreaReducer, }, });