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.

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 (
+    <div>
+      {/* Ihr Formular */}
+      <MapComponentWithNoSSR
+        locations={locations}
+        onAddLocation={handleAddLocation}
+        onLocationUpdate={handleLocationUpdate}
+      />
+    </div>
+  );
+}

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) => {