refactor: PoiUpdateModal auf Redux poiTypSlice umgestellt

- fetch(...) durch fetchPoiTypThunk ersetzt
- Zugriff auf POI-Typen über selectPoiTypData
- Code vereinheitlicht mit AddPOIModal.js
- Version erhöht auf 1.1.160
This commit is contained in:
ISA
2025-05-23 14:08:37 +02:00
parent 28dd0006bc
commit 96b36eb706
3 changed files with 28 additions and 30 deletions

View File

@@ -4,18 +4,21 @@ import Select from "react-select"; // Importiere react-select
import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
import { useSelector, useDispatch } from "react-redux";
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk";
import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/poiTypSlice";
const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const dispatch = useDispatch();
const mapLayersVisibility = useSelector(selectMapLayersState);
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
const [name, setName] = useState(poiData ? poiData.name : "");
const [poiTypData, setPoiTypData] = useState([]);
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
const [filteredDevices, setFilteredDevices] = useState([]);
const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [description, setDescription] = useState(poiData ? poiData.description : "");
const poiTypData = useSelector(selectPoiTypData);
const poiTypStatus = useSelector(selectPoiTypStatus);
// Map von Systemnamen zu IDs (wie zuvor)
const systemNameToIdMap = {
@@ -55,34 +58,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
// Fetch POI types and set the current POI type in the react-select dropdown
useEffect(() => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
const data = await response.json();
setPoiTypData(data);
// Prüfe den gespeicherten Typ im localStorage
const storedPoiType = localStorage.getItem("selectedPoiType");
// Finde den passenden Typ in den abgerufenen Daten und setze ihn als ausgewählt
if (storedPoiType) {
const matchingType = data.find((type) => type.name === storedPoiType);
if (matchingType) {
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
}
} else if (poiData && poiData.idPoiTyp) {
// Falls kein Typ im localStorage ist, setze den Typ von poiData
const matchingType = data.find((type) => type.idPoiTyp === poiData.idPoiTyp);
if (matchingType) {
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
}
}
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
}
};
fetchPoiTypData();
}, [poiData]);
if (poiTypStatus === "idle") {
dispatch(fetchPoiTypThunk());
}
}, [dispatch, poiTypStatus]);
// Fetch location devices and pre-select the current device
useEffect(() => {