useEffect Block von MapComponent.js in useFetchPoiData.js ausgelagert

This commit is contained in:
ISA
2025-03-11 11:02:40 +01:00
parent c7e948a27a
commit c98694a515
3 changed files with 62 additions and 33 deletions

View File

@@ -28,7 +28,6 @@ import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
import { setupPOIs } from "../../utils/setupPOIs.js";
import VersionInfoModal from "../VersionInfoModal.js";
import useDrawLines from "../../hooks/layers/useDrawLines.js";
import useFetchPoiData from "../../hooks/useFetchPoiData.js";
import usePoiTypData from "../../hooks/usePoiTypData.js";
import useLayerVisibility from "../../hooks/useLayerVisibility.js";
import useLineData from "../../hooks/useLineData.js";
@@ -84,6 +83,7 @@ import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from
import useInitializeMap from "./hooks/useInitializeMap";
import useLoadUserRights from "./hooks/useLoadUserRights";
import useFetchWebServiceMap from "./hooks/useFetchWebServiceMap";
import useFetchPoiData from "./hooks/useFetchPoiData.js";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
@@ -177,7 +177,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [linesData, setLinesData] = useState([]);
const mapLayersVisibility = useRecoilValue(mapLayersState);
const selectedArea = useRecoilValue(selectedAreaState);
const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
const [linePositions, setLinePositions] = useState([]);
const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
const [polylines, setPolylines] = useState([]);
@@ -292,38 +292,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, []);
//--------------------------------------------
//const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
const [poiData, setPoiData] = useState([]);
// POIs Popup Informationen anzeigen
useEffect(() => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/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);
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
}
};
const fetchPoiData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
} catch (error) {
console.error("Fehler beim Abrufen der poiData-2:", error);
}
};
useFetchPoiData(setPoiTypMap, setPoiData);
useEffect(() => {
console.log("📌 POI-Typ Map in MapComponent:", poiTypMap);
console.log("📌 POI-Daten in MapComponent:", poiData);
}, [poiTypMap, poiData]);
fetchPoiTypData();
fetchPoiData();
}, []);
//--------------------------------------------
// POIs auf die Karte zeichnen
useEffect(() => {