Fix: Sicherstellen, dass MapComponent innerhalb des RecoilRoot-Kontexts liegt
- Entfernt redundanten `RecoilRoot` aus `MapComponent`, um Probleme mit verschachtelten Wurzeln zu vermeiden. - Sichergestellt, dass `MapComponent` immer innerhalb des zentralen `RecoilRoot` gerendert wird, der in `_app.js` definiert ist. - Das Problem "Diese Komponente muss innerhalb einer `<RecoilRoot>`-Komponente verwendet werden" durch Platzieren aller Recoil-States im korrekten Kontext behoben. - `ShowAddStationPopup` direkt als JSX-Element innerhalb von `MapComponent` zur besseren Übersicht verwendet.
This commit is contained in:
ISA
@@ -2,8 +2,8 @@
|
||||
import { createProxyMiddleware } from "http-proxy-middleware";
|
||||
|
||||
export default createProxyMiddleware({
|
||||
target: "http://10.10.0.13", // Ziel-URL des Proxys
|
||||
//target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
|
||||
//target: "http://10.10.0.13", // Ziel-URL des Proxys
|
||||
target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
// pages/index.js
|
||||
import { useEffect, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useSetRecoilState } from "recoil";
|
||||
import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
|
||||
const MapComponentWithNoSSR = dynamic(
|
||||
() => import("../components/MapComponent"),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function Home() {
|
||||
const setLoadData = useSetRecoilState(readPoiMarkersStore);
|
||||
const [mParam, setMParam] = useState([""]);
|
||||
const [uParam, setUParam] = useState([""]);
|
||||
|
||||
const [locations, setLocations] = useState([]);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
type: "",
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
const response = await fetch("/api/readLocations");
|
||||
const data = await response.json();
|
||||
setLocations(data);
|
||||
};
|
||||
useEffect(() => {
|
||||
setLoadData(async () => {
|
||||
const response = await fetch("/api/readLocations");
|
||||
const data = await response.json();
|
||||
setLocations(data); // Überlegungen für setLocations beachten
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Funktion, um URL-Parameter zu holen
|
||||
function getURLParameter(name) {
|
||||
// Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get(name); // Holt den Wert des Parameternamens
|
||||
}
|
||||
|
||||
// Hole die Parameter 'm' und 'u'
|
||||
setMParam(getURLParameter("m"));
|
||||
setUParam(getURLParameter("u"));
|
||||
|
||||
// Logge die Werte in der Konsole
|
||||
console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
|
||||
loadData();
|
||||
}, []);
|
||||
const handleAddLocation = async (name, type, lat, lng) => {
|
||||
const response = await fetch("/api/addLocation", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
type,
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Standort erfolgreich hinzugefügt");
|
||||
setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen
|
||||
loadData(); // Daten erneut laden
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen des Standorts");
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocationUpdate = (id, newLatitude, newLongitude) => {
|
||||
setLocations((prevLocations) => {
|
||||
return prevLocations.map((location) => {
|
||||
if (location.idPoi === id) {
|
||||
return {
|
||||
...location,
|
||||
// Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst
|
||||
position: `POINT(${newLongitude} ${newLatitude})`,
|
||||
};
|
||||
}
|
||||
return location;
|
||||
});
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{/* Ihr Formular */}
|
||||
<MapComponentWithNoSSR
|
||||
locations={locations}
|
||||
onAddLocation={handleAddLocation}
|
||||
onLocationUpdate={handleLocationUpdate}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
110
pages/index.js
110
pages/index.js
@@ -1,93 +1,85 @@
|
||||
// pages/index.js
|
||||
import { useEffect, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useSetRecoilState } from "recoil";
|
||||
import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
|
||||
import { useRecoilState , useRecoilValue} from "recoil";
|
||||
import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore"; // Aktualisiert mit atom
|
||||
import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
|
||||
|
||||
const MapComponentWithNoSSR = dynamic(
|
||||
() => import("../components/MapComponent"),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function Home() {
|
||||
const setLoadData = useSetRecoilState(readPoiMarkersStore);
|
||||
const [mParam, setMParam] = useState([""]);
|
||||
const [uParam, setUParam] = useState([""]);
|
||||
|
||||
const [locations, setLocations] = useState([]);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
type: "",
|
||||
});
|
||||
const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
|
||||
const [locations, setLocations] = useRecoilState(readPoiMarkersStore);
|
||||
const [mParam, setMParam] = useState("");
|
||||
const [uParam, setUParam] = useState("");
|
||||
|
||||
const loadData = async () => {
|
||||
const response = await fetch("/api/readLocations");
|
||||
const data = await response.json();
|
||||
setLocations(data);
|
||||
};
|
||||
useEffect(() => {
|
||||
setLoadData(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/readLocations");
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Laden der Standortdaten");
|
||||
}
|
||||
const data = await response.json();
|
||||
setLocations(data); // Überlegungen für setLocations beachten
|
||||
});
|
||||
}, []);
|
||||
setLocations(data);
|
||||
console.log("Geladene Daten in Home.js:", data);
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Funktion, um URL-Parameter zu holen
|
||||
// URL-Parameter abfragen
|
||||
function getURLParameter(name) {
|
||||
// Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get(name); // Holt den Wert des Parameternamens
|
||||
return params.get(name);
|
||||
}
|
||||
|
||||
// Hole die Parameter 'm' und 'u'
|
||||
setMParam(getURLParameter("m"));
|
||||
setUParam(getURLParameter("u"));
|
||||
|
||||
// Logge die Werte in der Konsole
|
||||
console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
|
||||
// Daten beim Laden der Seite holen
|
||||
loadData();
|
||||
}, []);
|
||||
const handleAddLocation = async (name, type, lat, lng) => {
|
||||
const response = await fetch("/api/addLocation", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
type,
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
}),
|
||||
});
|
||||
console.log("poiReadTrigger in Home.js:", poiReadTrigger);
|
||||
}, [poiReadTrigger]);
|
||||
|
||||
if (response.ok) {
|
||||
const handleAddLocation = async (name, type, lat, lng) => {
|
||||
try {
|
||||
const response = await fetch("/api/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");
|
||||
}
|
||||
console.log("Standort erfolgreich hinzugefügt");
|
||||
setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen
|
||||
loadData(); // Daten erneut laden
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen des Standorts");
|
||||
loadData(); // Aktualisiere die Daten nach dem Hinzufügen
|
||||
console.log("poiReadTrigger in Home.js:", poiReadTrigger);
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocationUpdate = (id, newLatitude, newLongitude) => {
|
||||
setLocations((prevLocations) => {
|
||||
return prevLocations.map((location) => {
|
||||
if (location.idPoi === id) {
|
||||
return {
|
||||
...location,
|
||||
// Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst
|
||||
position: `POINT(${newLongitude} ${newLatitude})`,
|
||||
};
|
||||
}
|
||||
return location;
|
||||
});
|
||||
});
|
||||
setLocations((prevLocations) =>
|
||||
prevLocations.map((location) =>
|
||||
location.idPoi === id
|
||||
? { ...location, position: `POINT(${newLongitude} ${newLatitude})` }
|
||||
: location
|
||||
)
|
||||
);
|
||||
};
|
||||
//------------------------------------
|
||||
// Daten beim Laden der Seite holen
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
console.log("poiReadTrigger in Home.js:", poiReadTrigger);
|
||||
}, [poiReadTrigger]);
|
||||
//------------------------------------
|
||||
return (
|
||||
<div>
|
||||
{/* Ihr Formular */}
|
||||
<MapComponentWithNoSSR
|
||||
locations={locations}
|
||||
onAddLocation={handleAddLocation}
|
||||
|
||||
Reference in New Issue
Block a user