diff --git a/components/MapComponent.js b/components/MapComponent.js index 0dbaebf66..0721c88f6 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -44,6 +44,7 @@ import { useMapComponentState } from "../hooks/useMapComponentState"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; import { updateLocation } from "../utils/updateBereichUtil"; import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer"; +import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData"; //-------------------------------------------- import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; @@ -451,34 +452,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ]); //-------------------------------------------- - useEffect(() => { - const fetchData = async () => { - try { - const response1 = await fetch(webserviceGisLinesStatusUrl); - const data1 = await response1.json(); - //console.log("data1.Statis", data1.Statis); - const reversedData = data1.Statis.reverse(); - setLineStatusData(reversedData); - - const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines"); - const data2 = await response2.json(); - - const colorsByModule = {}; - reversedData.forEach((stat) => { - const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul); - if (matchingLine) { - colorsByModule[matchingLine.idModul] = stat.PrioColor; - //console.log("Übereinstimmung gefunden für: ", stat); - setLinesData(matchingLine); - } - }); - //setLineColors(colorsByModule); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - fetchData(); - }, []); + useFetchLineStatusData( + webserviceGisLinesStatusUrl, + setLineStatusData, + setLinesData + ); //-------------------------------------------- usePolylineTooltipLayer( diff --git a/hooks/useFetchLineStatusData.js b/hooks/useFetchLineStatusData.js new file mode 100644 index 000000000..f6f709514 --- /dev/null +++ b/hooks/useFetchLineStatusData.js @@ -0,0 +1,35 @@ +import { useEffect } from "react"; + +export const useFetchLineStatusData = ( + webserviceGisLinesStatusUrl, + setLineStatusData, + setLinesData +) => { + useEffect(() => { + const fetchData = async () => { + try { + const response1 = await fetch(webserviceGisLinesStatusUrl); + const data1 = await response1.json(); + const reversedData = data1.Statis.reverse(); + setLineStatusData(reversedData); + + const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines"); + const data2 = await response2.json(); + + const colorsByModule = {}; + reversedData.forEach((stat) => { + const matchingLine = data2.find( + (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul + ); + if (matchingLine) { + colorsByModule[matchingLine.idModul] = stat.PrioColor; + setLinesData(matchingLine); + } + }); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + fetchData(); + }, [webserviceGisLinesStatusUrl, setLineStatusData, setLinesData]); +};