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

useEffect Block von MapComponent.js in useFetchPoiData.js ausgelagert

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

42
components/mainComponent/MapComponent.js
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(() => {

51
components/mainComponent/hooks/useFetchPoiData.js Normal file
View File

@@ -0,0 +1,51 @@
// /components/mainComponent/hooks/useFetchWebServiceMap.js
import { useEffect, useState } from "react";
const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; // API-URL aus .env.local
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;

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.50";
export const APP_VERSION = "1.1.51";