From 819639164af63422e4012e687d79d8926de832f7 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sun, 18 May 2025 11:56:39 +0200 Subject: [PATCH] feat: Recoil-State polylineEventsDisabledState durch Redux ersetzt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Migration von Recoil zu Redux abgeschlossen für Polyline-Interaktionsstatus - `MapComponent.js` verwendet jetzt Redux `useSelector` und `dispatch(setDisabled(...))` - `initializeMap.js` bekommt Callback-Funktion zur Steuerung des Redux-Status - Redux-Slice `polylineEventsDisabledSlice.js` mit Actions `setDisabled`, `toggleDisabled` integriert - Hinweis: `useCreateAndSetDevices.js` verwendet noch `useRecoilState`, muss refaktoriert werden --- CHANGELOG.md | 22 ++++++++++++++++++ components/mainComponent/MapComponent.js | 9 ++++---- config/appVersion.js | 2 +- redux/slices/polylineEventsDisabledSlice.js | 25 ++++++++++++++++----- redux/store.js | 2 ++ utils/initializeMap.js | 9 ++------ 6 files changed, 52 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 978b6dca8..758df02f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,28 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.84] – 2025-05-20 + +### Changed + +- Recoil-Atom `polylineEventsDisabledState` entfernt +- Migration zu Redux-Slice `polylineEventsDisabledSlice` abgeschlossen +- Betroffene Komponenten und Funktionen: + - `MapComponent.js` – `useSelector(state => state.polylineEventsDisabled.disabled)` verwendet + - `initializeMap.js` – Callback-Funktion `(value) => dispatch(setDisabled(value))` übergeben + - `useCreateAndSetDevices.js` – Verwendung von `useRecoilState` entfernt (ToDo: an Redux anpassen) + +### Added + +- Neue Redux Actions: + - `setDisabled`, `toggleDisabled` in `polylineEventsDisabledSlice.js` + +### ToDo + +- `useCreateAndSetDevices.js` nutzt noch `useRecoilState`, muss ggf. refaktoriert werden + +--- + ## [1.1.83] – 2025-05-19 ### Changed diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 55cdec242..fb5e47b30 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -44,7 +44,6 @@ import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemSta import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js"; import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js"; -import { polylineEventsDisabledState } from "../../redux/slices/polylineEventsDisabledSlice.js"; import { polylineLayerVisibleState } from "../../redux/slices/polylineLayerVisibleSlice.js"; //-------------------------------------------- import { useSelector, useDispatch } from "react-redux"; @@ -84,6 +83,7 @@ import useFetchPoiData from "./hooks/useFetchPoiData.js"; import useRestoreMapSettings from "./hooks/useRestoreMapSettings"; import { setSelectedPoi, clearSelectedPoi } from "../../redux/slices/selectedPoiSlice"; import { setupDevices } from "../../utils/setupDevices"; +import { setDisabled } from "../../redux/slices/polylineEventsDisabledSlice"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); @@ -215,7 +215,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return [53.111111, 8.4625]; } }); - const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State + const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled); const allMarkers = [ ...talasMarkers, ...eciMarkers, @@ -252,6 +252,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const ulafMarkersLayerRef = useRef(null); const sonstigeMarkersLayerRef = useRef(null); const tkComponentsMarkersRef = useRef(null); + useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value))); //--------------------------------------------------------------- useEffect(() => { const params = new URL(window.location.href).searchParams; @@ -693,8 +694,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms); //-------------------------------------------- - useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled); - useEffect(() => { if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind @@ -819,6 +818,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Prüfe, ob der editMode deaktiviert ist if (!editMode) { // Entferne alle Marker aus der Karte + if (!map) return; // Sicherstellen, dass map existiert + bereicheMarkers.forEach((marker) => { if (map.hasLayer(marker)) { map.removeLayer(marker); diff --git a/config/appVersion.js b/config/appVersion.js index 7e33c42a0..280d503ab 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.84"; +export const APP_VERSION = "1.1.85"; diff --git a/redux/slices/polylineEventsDisabledSlice.js b/redux/slices/polylineEventsDisabledSlice.js index f62c05a37..0d12372c8 100644 --- a/redux/slices/polylineEventsDisabledSlice.js +++ b/redux/slices/polylineEventsDisabledSlice.js @@ -1,7 +1,22 @@ -// /redux/slices/polylineEventsDisabledSlice.js -import { atom } from "recoil"; +// redux/slices/polylineEventsDisabledSlice.js +import { createSlice } from "@reduxjs/toolkit"; -export const polylineEventsDisabledState = atom({ - key: "polylineEventsDisabledState", - default: false, +const initialState = { + disabled: false, +}; + +const polylineEventsDisabledSlice = createSlice({ + name: "polylineEventsDisabled", + initialState, + reducers: { + setDisabled: (state, action) => { + state.disabled = action.payload; + }, + toggleDisabled: (state) => { + state.disabled = !state.disabled; + }, + }, }); + +export const { setDisabled, toggleDisabled } = polylineEventsDisabledSlice.actions; +export default polylineEventsDisabledSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 95adac1d3..a03a348f4 100644 --- a/redux/store.js +++ b/redux/store.js @@ -17,6 +17,7 @@ import selectedDeviceReducer from "./slices/selectedDeviceSlice"; import mapLayersReducer from "./slices/mapLayersSlice"; import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice"; import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice"; +import polylineEventsDisabledReducer from "./slices/polylineEventsDisabledSlice"; export const store = configureStore({ reducer: { @@ -37,5 +38,6 @@ export const store = configureStore({ mapLayers: mapLayersReducer, poiLayerVisible: poiLayerVisibleReducer, poiReadFromDbTrigger: poiReadFromDbTriggerReducer, + polylineEventsDisabled: polylineEventsDisabledReducer, }, }); diff --git a/utils/initializeMap.js b/utils/initializeMap.js index b28ca1485..2537eebac 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -14,13 +14,8 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems } if (mapRef.current._leaflet_id) { - console.log("⚠️ Karte ist bereits initialisiert – `dragging.enable()` wird sichergestellt."); - setTimeout(() => { - if (mapRef.current) { - mapRef.current.dragging.enable(); - } - }, 100); - return; + console.log("⚠️ Karte bereits initialisiert"); + return; // keine Neuanlage } // Leaflet-Karte erstellen