From 39e5e1cb5aaec7ea87478b3178b2315c1841a948 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 3 May 2024 10:18:42 +0200 Subject: [PATCH] Refactor: Reorganize state management into atoms and selectors directories Moved all Recoil atoms to a new 'atoms' directory and selectors to a 'selectors' directory to clarify the project structure and improve maintainability. This change separates concerns by clearly distinguishing between simple state (atoms) and derived state (selectors), facilitating better understanding and scalability of the application's state management. --- components/DataSheet.js | 10 +-- components/MapComponent.js | 18 +++-- components/ShowAddStationPopup.js | 8 ++- pages/index copy.js | 98 ++++++++++++++++++++++++++ pages/index.js | 30 +++----- store/{ => atoms}/gisStationState.js | 2 +- store/{ => atoms}/gisSystemState.js | 2 +- store/{ => atoms}/mapLayersState.js | 0 store/{ => atoms}/poiTypState.js | 0 store/{ => atoms}/selectedAreaState.js | 0 store/{ => atoms}/zoomTriggerState.js | 0 store/{ => selectors}/loadDataStore.js | 0 12 files changed, 132 insertions(+), 36 deletions(-) create mode 100644 pages/index copy.js rename store/{ => atoms}/gisStationState.js (84%) rename store/{ => atoms}/gisSystemState.js (83%) rename store/{ => atoms}/mapLayersState.js (100%) rename store/{ => atoms}/poiTypState.js (100%) rename store/{ => atoms}/selectedAreaState.js (100%) rename store/{ => atoms}/zoomTriggerState.js (100%) rename store/{ => selectors}/loadDataStore.js (100%) diff --git a/components/DataSheet.js b/components/DataSheet.js index 81dafbcf3..8186faab4 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,11 +1,11 @@ //components/DataSheet.js import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../store/gisStationState"; -import { gisSystemStaticState } from "../store/gisSystemState"; -import { mapLayersState } from "../store/mapLayersState"; -import { selectedAreaState } from "../store/selectedAreaState"; -import { zoomTriggerState } from "../store/zoomTriggerState"; +import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState"; +import { gisSystemStaticState } from "../store/atoms/gisSystemState"; +import { mapLayersState } from "../store/atoms/mapLayersState"; +import { selectedAreaState } from "../store/atoms/selectedAreaState"; +import { zoomTriggerState } from "../store/atoms/zoomTriggerState"; function DataSheet() { const setSelectedArea = useSetRecoilState(selectedAreaState); diff --git a/components/MapComponent.js b/components/MapComponent.js index 8606cd6b8..336bb9866 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -11,12 +11,12 @@ import "leaflet.smooth_marker_bouncing"; import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import DataSheet from "./DataSheet.js"; import { useRecoilState, useRecoilValue, RecoilRoot } from "recoil"; -import { gisStationsStaticDistrictState } from "../store/gisStationState.js"; -import { gisSystemStaticState } from "../store/gisSystemState.js"; -import { mapLayersState } from "../store/mapLayersState.js"; -import { selectedAreaState } from "../store/selectedAreaState.js"; -import { zoomTriggerState } from "../store/zoomTriggerState.js"; -import { poiTypState } from "../store/poiTypState.js"; +import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js"; +import { gisSystemStaticState } from "../store/atoms/gisSystemState.js"; +import { mapLayersState } from "../store/atoms/mapLayersState.js"; +import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; +import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; +import { poiTypState } from "../store/atoms/poiTypState.js"; import ShowAddStationPopup from "./ShowAddStationPopup"; //import { createRoot } from "react-dom/client"; @@ -415,7 +415,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Create a root container for the React component inside the popup const root = ReactDOM.createRoot(container); - root.render(); + root.render( + + + + ); // Create and configure the popup L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap); diff --git a/components/ShowAddStationPopup.js b/components/ShowAddStationPopup.js index 3f269adf9..c4fb871a5 100644 --- a/components/ShowAddStationPopup.js +++ b/components/ShowAddStationPopup.js @@ -1,7 +1,10 @@ +// components/ShowAddStationPopup.js import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; - +import { useRecoilValue } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; const ShowAddStationPopup = ({ map, latlng }) => { + const loadData = useRecoilValue(loadDataStore); const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden const [name, setName] = useState(""); const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string @@ -29,7 +32,7 @@ const ShowAddStationPopup = ({ map, latlng }) => { fetchPoiTypData2(); }, []); - const handleSubmit = (event) => { + const handleSubmit = async (event) => { event.preventDefault(); const formData = { name, // Name der Station @@ -46,6 +49,7 @@ const ShowAddStationPopup = ({ map, latlng }) => { .then((response) => response.json()) .then((data) => console.log(data)) // Handle the response data .catch((error) => console.error(error)); // Handle any errors + await loadData(); // Check if map is not undefined and call closePopup if (map && typeof map.closePopup === "function") { diff --git a/pages/index copy.js b/pages/index copy.js new file mode 100644 index 000000000..7b39873d0 --- /dev/null +++ b/pages/index copy.js @@ -0,0 +1,98 @@ +// pages/index.js +import { useEffect, useState } from "react"; +import dynamic from "next/dynamic"; +import { useSetRecoilState } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; +const MapComponentWithNoSSR = dynamic( + () => import("../components/MapComponent"), + { ssr: false } +); + +export default function Home() { + const setLoadData = useSetRecoilState(loadDataStore); + 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 ( +
+ {/* Ihr Formular */} + +
+ ); +} diff --git a/pages/index.js b/pages/index.js index 284b9e8d9..7b39873d0 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,15 @@ // pages/index.js import { useEffect, useState } from "react"; import dynamic from "next/dynamic"; +import { useSetRecoilState } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; const MapComponentWithNoSSR = dynamic( () => import("../components/MapComponent"), { ssr: false } ); export default function Home() { + const setLoadData = useSetRecoilState(loadDataStore); const [mParam, setMParam] = useState([""]); const [uParam, setUParam] = useState([""]); @@ -23,6 +26,13 @@ export default function Home() { 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 @@ -60,27 +70,7 @@ export default function Home() { console.error("Fehler beim Hinzufügen des Standorts"); } }; - const handleSubmit = async (event) => { - event.preventDefault(); - const response = await fetch("/api/addLocation", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(formData), - }); - if (response.ok) { - console.log("Erfolg"); - setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen - loadData(); // Daten erneut laden - } else { - console.error("Fehler beim Speichern der Daten"); - } - }; - - const handleChange = (event) => { - const { name, value } = event.target; - setFormData((prevState) => ({ ...prevState, [name]: value })); - }; const handleLocationUpdate = (id, newLatitude, newLongitude) => { setLocations((prevLocations) => { return prevLocations.map((location) => { diff --git a/store/gisStationState.js b/store/atoms/gisStationState.js similarity index 84% rename from store/gisStationState.js rename to store/atoms/gisStationState.js index 2f4330bc1..057233e8e 100644 --- a/store/gisStationState.js +++ b/store/atoms/gisStationState.js @@ -1,4 +1,4 @@ -// Pfad: store/gisStationState.js +// Pfad: store/atoms/gisStationState.js import { atom } from "recoil"; export const gisStationsStaticDistrictState = atom({ diff --git a/store/gisSystemState.js b/store/atoms/gisSystemState.js similarity index 83% rename from store/gisSystemState.js rename to store/atoms/gisSystemState.js index 5abdb0987..784b41776 100644 --- a/store/gisSystemState.js +++ b/store/atoms/gisSystemState.js @@ -1,4 +1,4 @@ -// Pfad: store/gisStationState.js +// Pfad: store/atoms/gisStationState.js import { atom } from "recoil"; export const gisSystemStaticState = atom({ diff --git a/store/mapLayersState.js b/store/atoms/mapLayersState.js similarity index 100% rename from store/mapLayersState.js rename to store/atoms/mapLayersState.js diff --git a/store/poiTypState.js b/store/atoms/poiTypState.js similarity index 100% rename from store/poiTypState.js rename to store/atoms/poiTypState.js diff --git a/store/selectedAreaState.js b/store/atoms/selectedAreaState.js similarity index 100% rename from store/selectedAreaState.js rename to store/atoms/selectedAreaState.js diff --git a/store/zoomTriggerState.js b/store/atoms/zoomTriggerState.js similarity index 100% rename from store/zoomTriggerState.js rename to store/atoms/zoomTriggerState.js diff --git a/store/loadDataStore.js b/store/selectors/loadDataStore.js similarity index 100% rename from store/loadDataStore.js rename to store/selectors/loadDataStore.js