feat: Recoil-State polylineEventsDisabledState durch Redux ersetzt

- 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
This commit is contained in:
Ismail Ali
2025-05-18 11:56:39 +02:00
parent 7cbabdbebd
commit 819639164a
6 changed files with 52 additions and 17 deletions

View File

@@ -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

View File

@@ -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);

View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.84";
export const APP_VERSION = "1.1.85";

View File

@@ -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;

View File

@@ -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,
},
});

View File

@@ -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