refactor(hooks): useMapComponentState vollständig auf Redux umgestellt
- fetch-Aufrufe entfernt und durch Redux-Selektoren ersetzt - poiTypData über poiTypSlice + fetchPoiTypThunk geladen - locationDeviceData über gisStationsStaticDistrictThunk - priorityConfig über Redux mit fetchPriorityConfigThunk integriert - poiLayerVisible direkt aus Redux-State gelesen - Version auf 1.1.173 erhöht
This commit is contained in:
@@ -1,84 +1,65 @@
|
||||
// /hooks/useMapComponentState.js
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
// Redux: POI-Typen
|
||||
import { fetchPoiTypThunk } from "../redux/thunks/database/pois/fetchPoiTypThunk";
|
||||
import { selectPoiTypData, selectPoiTypStatus } from "../redux/slices/database/pois/poiTypSlice";
|
||||
import { selectPoiLayerVisible } from "../redux/slices/database/pois/poiLayerVisibleSlice";
|
||||
|
||||
// Redux: GIS Geräte
|
||||
import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
|
||||
import { selectGisStationsStaticDistrict } from "../redux/slices/webservice/gisStationsStaticDistrictSlice";
|
||||
|
||||
// Redux: priorityConfig
|
||||
import { fetchPriorityConfigThunk } from "../redux/thunks/database/fetchPriorityConfigThunk";
|
||||
import { selectPriorityConfig } from "../redux/slices/database/priorityConfigSlice";
|
||||
|
||||
export const useMapComponentState = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Redux: Sichtbarkeit des POI-Layers
|
||||
const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
|
||||
|
||||
// Redux: POI-Typen
|
||||
const poiTypData = useSelector(selectPoiTypData);
|
||||
const poiTypStatus = useSelector(selectPoiTypStatus);
|
||||
|
||||
// Redux: Sichtbarkeit des POI-Layers
|
||||
const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
|
||||
// Redux: Geräte
|
||||
const locationDeviceData = useSelector(selectGisStationsStaticDistrict);
|
||||
const deviceName = locationDeviceData?.Points?.[0]?.LD_Name || "";
|
||||
|
||||
// Lokaler State: Geräte und Kontextmenü
|
||||
const [deviceName, setDeviceName] = useState("");
|
||||
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
||||
const [priorityConfig, setPriorityConfig] = useState([]); // TODO: Redux
|
||||
// Redux: Prioritätskonfiguration
|
||||
const priorityConfig = useSelector(selectPriorityConfig);
|
||||
|
||||
// UI-interner Zustand
|
||||
const [menuItemAdded, setMenuItemAdded] = useState(false);
|
||||
|
||||
// Optional: Nur im Mock-Modus POI-Typen lokal setzen
|
||||
// POI-Typen laden
|
||||
useEffect(() => {
|
||||
if (process.env.NEXT_PUBLIC_USE_MOCK_API === "true") {
|
||||
const mockData = [
|
||||
{ idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
|
||||
{ idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
|
||||
{ idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
|
||||
{ idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
|
||||
{ idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
|
||||
{ idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
|
||||
{ idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
|
||||
{ idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
|
||||
];
|
||||
// Du kannst das Redux-Mock-Datenhandling später noch global regeln
|
||||
console.warn("⚠️ POI-Typen im Mock-Modus geladen.");
|
||||
console.warn("⚠️ POI-Typen im Mock-Modus – Redux-Thunk wird nicht ausgeführt.");
|
||||
} else if (poiTypStatus === "idle") {
|
||||
dispatch(fetchPoiTypThunk());
|
||||
}
|
||||
}, [dispatch, poiTypStatus]);
|
||||
|
||||
// Geräte-Daten lokal laden (kann später durch fetchLocationDevicesThunk ersetzt werden)
|
||||
// GIS Geräte laden
|
||||
useEffect(() => {
|
||||
const fetchDeviceData = async () => {
|
||||
try {
|
||||
const protocol = window.location.protocol;
|
||||
const host = window.location.hostname;
|
||||
const apiBaseUrl = `${protocol}//${host}/talas5/ClientData/WebServiceMap.asmx`;
|
||||
dispatch(fetchGisStationsStaticDistrictThunk());
|
||||
}, [dispatch]);
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const idMap = params.get("m");
|
||||
|
||||
const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;
|
||||
console.log("🌐 Geräte-API:", url);
|
||||
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
setLocationDeviceData(data.Points || []);
|
||||
if (data.Points && data.Points.length > 0) {
|
||||
setDeviceName(data.Points[0].LD_Name);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der Gerätedaten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDeviceData();
|
||||
}, []);
|
||||
// PriorityConfig laden
|
||||
useEffect(() => {
|
||||
dispatch(fetchPriorityConfigThunk());
|
||||
}, [dispatch]);
|
||||
|
||||
return {
|
||||
poiTypData,
|
||||
isPoiTypLoaded: poiTypStatus === "succeeded",
|
||||
deviceName,
|
||||
setDeviceName,
|
||||
locationDeviceData,
|
||||
setLocationDeviceData,
|
||||
priorityConfig,
|
||||
setPriorityConfig,
|
||||
menuItemAdded,
|
||||
setMenuItemAdded,
|
||||
poiLayerVisible,
|
||||
|
||||
Reference in New Issue
Block a user