67 lines
2.4 KiB
JavaScript
67 lines
2.4 KiB
JavaScript
"use client"; // /pages/index.js
|
|
import React, { useEffect, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
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 dispatch = useDispatch();
|
|
|
|
// 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("");
|
|
|
|
// URL-Parameter auslesen und POIs laden
|
|
useEffect(() => {
|
|
const getURLParameter = (name) => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params.get(name);
|
|
};
|
|
|
|
setMParam(getURLParameter("m"));
|
|
setUParam(getURLParameter("u"));
|
|
|
|
dispatch(fetchPoiMarkersThunk());
|
|
}, [dispatch, poiReadTrigger]);
|
|
|
|
// 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 };
|
|
|
|
try {
|
|
const resultAction = await dispatch(addPoiThunk(formData));
|
|
if (addPoiThunk.fulfilled.match(resultAction)) {
|
|
dispatch(fetchPoiMarkersThunk()); // neu laden
|
|
} else {
|
|
console.error("❌ Fehler beim Hinzufügen:", resultAction.payload);
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Fehler im addPoiThunk:", error.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} />
|
|
<TestScriptWithNoSSR />
|
|
|
|
{addPoiStatus === "failed" && <p className="text-red-600">❌ Fehler: {addPoiError}</p>}
|
|
</div>
|
|
);
|
|
}
|