Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Migration von gisStationsStaticDistrictState von Recoil zu Redux

Browse Source 
- Recoil-Atom 'gisStationsStaticDistrictState' in ein Redux-Slice umgewandelt.
- fetchGisStationsStaticDistrict angepasst, um Redux-Dispatch zu verwenden.
- MapComponent.js und DataSheet.js refaktoriert, um Redux zu integrieren.
- fetchOptions für API-Anfragen hinzugefügt.
- Zentrale Zustandsverwaltung mit Redux sichergestellt.
This commit is contained in:
ISA
2024-12-20 06:51:55 +01:00
parent fb8883e57f
commit 2adca70ba5
5 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/DataSheet.js
View File

@@ -8,6 +8,8 @@ import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
import { useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
function DataSheet() {
const [editMode, setEditMode] = useState(false); // Zustand für editMode
@@ -16,7 +18,8 @@ function DataSheet() {
const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
const [stationListing, setStationListing] = useState([]);
const [systemListing, setSystemListing] = useState([]);
const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
//const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines

43
components/MapComponent.js
View File

@@ -9,21 +9,15 @@ import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import DataSheet from "./DataSheet.js";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "./pois/PoiUpdateModal.js";
import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js";
import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js";
import plusRoundIcon from "./PlusRoundIcon.js";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
@@ -39,8 +33,7 @@ import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGi
import { setupPolylines } from "../utils/setupPolylines.js";
import { setupPOIs } from "../utils/setupPOIs.js";
import VersionInfoModal from "./VersionInfoModal.js";
//--------------------------------------------
import useDrawLines from "../hooks/layers/useDrawLines";
import useFetchPoiData from "../hooks/useFetchPoiData";
import usePoiTypData from "../hooks/usePoiTypData";
import useLayerVisibility from "../hooks/useLayerVisibility";
@@ -48,14 +41,25 @@ import useLineData from "../hooks/useLineData.js";
//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
import { useMapComponentState } from "../hooks/useMapComponentState";
import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice";
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
//--------------------------------------------
import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js";
import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
//--------------------------------------------
import { useSelector, useDispatch } from "react-redux";
import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
import useDrawLines from "../hooks/layers/useDrawLines";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
const currentPoi = useSelector(selectCurrentPoi);
@@ -89,7 +93,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [oms, setOms] = useState(null); // State für OMS-Instanz
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
//const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten
const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
@@ -239,7 +244,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
// Fetch GIS Stations Static District
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, dispatch, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
@@ -267,7 +272,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
fetchWebServiceMap();
}, []);
}, [dispatch, mapGisStationsStaticDistrictUrl]);
//--------------------------------------------------------
useDrawLines(setLinePositions); // Linien auf die Karte zeichnen