feat: useEffect für WebService-Abfragen in eigenen Hook ausgelagert

- useEffect-Block für API-Abfragen (GIS Stations Status, Measurements, System Static) in `useFetchWebServiceMap.js` ausgelagert
- Verbesserung der Code-Struktur und Übersichtlichkeit in `MapComponent.js`
- Logging hinzugefügt, um API-Abrufe und Fehler besser nachzuverfolgen
- Sicherstellung, dass `localStorage`-Werte korrekt aktualisiert werden
This commit is contained in:
ISA
2025-03-11 10:11:00 +01:00
parent 0998fcf7c2
commit c7e948a27a
3 changed files with 59 additions and 45 deletions

View File

@@ -83,6 +83,7 @@ import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from
//-------------------MapComponent.js hooks--------------------
import useInitializeMap from "./hooks/useInitializeMap";
import useLoadUserRights from "./hooks/useLoadUserRights";
import useFetchWebServiceMap from "./hooks/useFetchWebServiceMap";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
@@ -255,50 +256,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setUserId(params.get("u"));
}, [setMapId, setUserId]);
//---------------------------------------------------------------
useEffect(() => {
const fetchWebServiceMap = async () => {
try {
// Zähler für externe API-Aufrufe in localStorage speichern
let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
requestCount = parseInt(requestCount, 10);
const fetchOptions = {
method: "GET",
headers: {
Connection: "close", // Keep-Alive-Header hinzufügen
},
};
// Fetch GIS Stations Static District
/* await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, dispatch, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount); */
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS Stations Status District
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS Stations Measurements
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS System Static
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchWebServiceMap();
}, [dispatch, mapGisStationsStaticDistrictUrl]);
useFetchWebServiceMap(mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded);
//Test in useEffect
/* useEffect(() => {
console.log("📌 Alle Marker in MapComponent in useFetchWebServiceMap:", allMarkers);
}, [allMarkers]); */
//--------------------------------------------------------
useEffect(() => {
const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";

View File

@@ -0,0 +1,52 @@
// /components/mainComponent/hooks/useFetchWebServiceMap.js
import { useEffect } from "react";
import { fetchGisStationsStatusDistrict } from "../../../services/api/fetchGisStationsStatusDistrict";
import { fetchGisStationsMeasurements } from "../../../services/api/fetchGisStationsMeasurements";
import { fetchGisSystemStatic } from "../../../services/api/fetchGisSystemStatic";
const useFetchWebServiceMap = (mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded) => {
useEffect(() => {
//console.log("✅ useFetchWebServiceMap wurde ausgeführt!");
const fetchWebServiceMap = async () => {
try {
let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
requestCount = parseInt(requestCount, 10);
console.log("📡 Starte API-Anfragen...");
const fetchOptions = {
method: "GET",
headers: { Connection: "close" },
};
// GIS Stations Status District abrufen
console.log("⏳ Abrufen von GIS Stations Status District...");
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
// console.log("✅ fetchGisStationsStatusDistrict erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
// GIS Stations Measurements abrufen
console.log("⏳ Abrufen von GIS Stations Measurements...");
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
// console.log("✅ fetchGisStationsMeasurements erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
// GIS System Static abrufen
console.log("⏳ Abrufen von GIS System Static...");
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
//console.log("✅ fetchGisSystemStatic erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
} catch (error) {
console.error("❌ Fehler beim Abrufen der WebService-Daten:", error);
}
};
fetchWebServiceMap();
}, [mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl]);
};
export default useFetchWebServiceMap;

View File

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