fix(poi): Fehler beim Hinzufügen von POIs behoben (Modal blieb offen)
- Falsche URL im addPoiService korrigiert (/addLocation → /addPoi) - Redux-Status wird nach erfolgreichem Hinzufügen zurückgesetzt (resetAddPoiStatus) - Modal schließt jetzt zuverlässig nach dem Dispatch - Ladeanzeige "Wird hinzugefügt..." verschwindet korrekt - Version auf 1.1.176 erhöht
This commit is contained in:
@@ -1,84 +1,66 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { setPoiMarkers } from "../redux/slices/database/pois/readPoiMarkersStoreSlice.js";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { fetchPoiMarkersThunk } from "../redux/thunks/database/pois/fetchPoiMarkersThunk";
|
||||
import { addPoiThunk } from "../redux/thunks/database/pois/addPoiThunk";
|
||||
|
||||
import { selectPoiMarkers } from "../redux/slices/database/pois/poiMarkersSlice";
|
||||
import { selectAddPoiStatus, selectAddPoiError } from "../redux/slices/database/pois/addPoiSlice";
|
||||
|
||||
const MapComponentWithNoSSR = dynamic(() => import("../components/mainComponent/MapComponent"), { ssr: false });
|
||||
const TestScriptWithNoSSR = dynamic(() => import("../components/TestScript"), { ssr: false });
|
||||
|
||||
export default function Home() {
|
||||
const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
|
||||
const dispatch = useDispatch();
|
||||
const locations = useSelector((state) => state.readPoiMarkersStore.poiMarkers);
|
||||
|
||||
// Redux State
|
||||
const locations = useSelector(selectPoiMarkers);
|
||||
const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
|
||||
const addPoiStatus = useSelector(selectAddPoiStatus);
|
||||
const addPoiError = useSelector(selectAddPoiError);
|
||||
|
||||
// Lokale State (für URL-Parameter)
|
||||
const [mParam, setMParam] = useState("");
|
||||
const [uParam, setUParam] = useState("");
|
||||
|
||||
// Daten abrufen
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/talas_v5_DB/pois/readLocations");
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Laden der Standortdaten");
|
||||
}
|
||||
const data = await response.json();
|
||||
dispatch(setPoiMarkers(data));
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Verhindert mehrfaches Laden durch doppelte Registrierung
|
||||
// URL-Parameter auslesen und POIs laden
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
function getURLParameter(name) {
|
||||
const getURLParameter = (name) => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get(name);
|
||||
}
|
||||
};
|
||||
|
||||
setMParam(getURLParameter("m"));
|
||||
setUParam(getURLParameter("u"));
|
||||
|
||||
const fetchData = async () => {
|
||||
await loadData();
|
||||
};
|
||||
dispatch(fetchPoiMarkersThunk());
|
||||
}, [dispatch, poiReadTrigger]);
|
||||
|
||||
if (isMounted) {
|
||||
fetchData();
|
||||
}
|
||||
// POI hinzufügen über Redux-Thunk
|
||||
const handleAddLocation = async (name, poiTypeId, lat, lng) => {
|
||||
const idLD = 0; // ⬅️ Falls IDLD dynamisch bestimmt werden soll, anpassen
|
||||
const formData = { name, poiTypeId, latitude: lat, longitude: lng, idLD };
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [poiReadTrigger]); // Nur einmal bei Änderung von poiReadTrigger ausführen
|
||||
|
||||
// POI hinzufügen
|
||||
const handleAddLocation = async (name, type, lat, lng) => {
|
||||
try {
|
||||
const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, type, latitude: lat, longitude: lng }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Hinzufügen des Standorts");
|
||||
const resultAction = await dispatch(addPoiThunk(formData));
|
||||
if (addPoiThunk.fulfilled.match(resultAction)) {
|
||||
dispatch(fetchPoiMarkersThunk()); // neu laden
|
||||
} else {
|
||||
console.error("❌ Fehler beim Hinzufügen:", resultAction.payload);
|
||||
}
|
||||
loadData();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
console.error("❌ Fehler im addPoiThunk:", error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Standort aktualisieren
|
||||
const handleLocationUpdate = (id, newLatitude, newLongitude) => {
|
||||
setLocations((prevLocations) => prevLocations.map((location) => (location.idPoi === id ? { ...location, position: `POINT(${newLongitude} ${newLatitude})` } : location)));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} onLocationUpdate={handleLocationUpdate} />
|
||||
<MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} />
|
||||
<TestScriptWithNoSSR />
|
||||
|
||||
{addPoiStatus === "failed" && <p className="text-red-600">❌ Fehler: {addPoiError}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user