refactor: POI-Daten vollständig in Redux integriert
- 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
@@ -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]);
|
||||
|
||||
//---------------------------------------------
|
||||
//--------------------------------------------
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
// /components/mainComponent/hooks/useFetchPoiData.js
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : "";
|
||||
|
||||
const useFetchPoiData = (setPoiTypMap, setPoiData) => {
|
||||
useEffect(() => {
|
||||
//console.log(`🌍 API_BASE_URL aus .env.local: ${API_BASE_URL}`);
|
||||
|
||||
//console.log("✅ useFetchPoiData wurde gestartet...");
|
||||
// console.log(`🌍 API_BASE_URL: ${API_BASE_URL}`); // Debugging: Prüfen, ob die Umgebungsvariable korrekt geladen wird
|
||||
|
||||
const fetchPoiTypData = async () => {
|
||||
try {
|
||||
console.log("📡 Lade POI-Typ-Daten...");
|
||||
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
|
||||
const data = await response.json();
|
||||
if (!Array.isArray(data)) {
|
||||
console.warn(`⚠️ Unerwartetes Format: ${JSON.stringify(data)}`);
|
||||
throw new Error("Daten sind kein Array");
|
||||
}
|
||||
const map = new Map();
|
||||
data.forEach((item) => map.set(item.idPoiTyp, item.name));
|
||||
setPoiTypMap(map);
|
||||
//console.log("✅ POI-Typ-Daten erfolgreich geladen!");
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der POI-Typ-Daten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPoiData = async () => {
|
||||
try {
|
||||
//console.log("📡 Lade POI-Icons...");
|
||||
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Netzwerkantwort war nicht ok, Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
setPoiData(data);
|
||||
//console.log("✅ POI-Icons erfolgreich geladen!", data);
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der POI-Daten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPoiTypData();
|
||||
fetchPoiData();
|
||||
}, [setPoiTypMap, setPoiData]);
|
||||
};
|
||||
|
||||
export default useFetchPoiData;
|
||||
Reference in New Issue
Block a user