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

refactor: POI-Daten vollständig in Redux integriert

Browse Source 
- useFetchPoiData.js entfernt
- Neue Redux-Slices für POI-Typen und POI-Icons erstellt
- Neue Services und Thunks hinzugefügt
- fetch-Aufrufe durch zentralisierte Redux-Logik ersetzt
- store.js aktualisiert und neue States registriert
This commit is contained in:
ISA
2025-05-23 11:14:13 +02:00
parent 08679761fb
commit 0a1c0e5fbe
20 changed files with 304 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/mainComponent/MapComponent.js
View File

@@ -7,17 +7,17 @@ import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt
import "react-toastify/dist/ReactToastify.css";
import MapLayersControlPanel from "../uiWidgets/MapLayersControlPanel.js";
import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "../pois/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../PlusRoundIcon.js";
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
import { createAndSetDevices } from "../../utils/devices/createAndSetDevices.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";
import { APP_VERSION } from "../../config/appVersion.js";
import * as layers from "../../config/layers.js";
import addItemsToMapContextMenu from "../useMapContextMenu.js";
import addItemsToMapContextMenu from "../contextmenu/useMapContextMenu.js";
import useGmaMarkersLayer from "../../hooks/layers/useGmaMarkersLayer.js";
import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarkersLayer.js";
import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js";
@@ -32,9 +32,9 @@ import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { useSelector, useDispatch } from "react-redux";
import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js";
import CoordinateInput from "../uiWidgets/CoordinateInput.js";
import CoordinatePopup from "../CoordinatePopup.js";
import CoordinatePopup from "../contextmenu/CoordinatePopup.js";
//------------------------Daten aus API--------------------
import { fetchPoiDataService } from "../../services/database/fetchPoiDataService.js";
import { fetchPoiDataService } from "../../services/database/fetchPoiDataByIdService.js";
import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
@@ -44,7 +44,6 @@ import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/po
//-------------------MapComponent.js hooks--------------------
import useInitializeMap from "./hooks/useInitializeMap";
import useFetchPoiData from "./hooks/useFetchPoiData.js";
import useRestoreMapSettings from "./hooks/useRestoreMapSettings";
import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice";
import { setDisabled } from "../../redux/slices/polylineEventsDisabledSlice";
@@ -66,6 +65,11 @@ import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStat
import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/fetchPoiIconsDataThunk";
import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk";
import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/poiIconsDataSlice";
import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/poiTypSlice";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//-------------------------------
const dispatch = useDispatch();
@@ -73,7 +77,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
const polylineVisible = useSelector(selectPolylineVisible);
const poiTypStatus = useSelector((state) => state.poiTypes.status);
const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded");
const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status);
const statusSystem = useSelector((state) => state.gisSystemStatic.status);
@@ -94,6 +98,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice);
const poiIconsData = useSelector(selectPoiIconsData);
const poiIconsStatus = useSelector(selectPoiIconsStatus);
const poiTypData = useSelector(selectPoiTypData);
const poiTypStatus = useSelector((state) => state.poiTypes.status);
//const poiTypStatus = useSelector(selectPoiTypStatus);
/* useEffect(() => {
console.log("✅ Redux: gisLinesStatusData:", gisLinesStatusData);
}, [gisLinesStatusData]);
@@ -233,7 +244,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//--------------------------------------------
const [poiData, setPoiData] = useState([]);
// POIs Popup Informationen anzeigen
useFetchPoiData(setPoiTypMap, setPoiData);
useEffect(() => {
dispatch(fetchPoiIconsDataThunk());
dispatch(fetchPoiTypThunk());
}, [dispatch]);
//--------------------------------------------
// POIs auf die Karte zeichnen
@@ -857,6 +872,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
window.onerror = null; // **Fehlerbehandlung entfernen, wenn Komponente unmounted wird**
};
}, []);
//------------------------------------------------
useEffect(() => {
if (poiTypStatus === "succeeded" && Array.isArray(poiTypData)) {
const map = new Map();
poiTypData.forEach((item) => map.set(item.idPoiTyp, item.name));
setPoiTypMap(map);
}
}, [poiTypData, poiTypStatus]);
//------------------------------------------------
useEffect(() => {
if (poiIconsStatus === "succeeded") {
setPoiData(poiIconsData);
}
}, [poiIconsData, poiIconsStatus]);
//---------------------------------------------
//--------------------------------------------