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.

components/ShowAddStationPopup.js

@@ -1,16 +1,33 @@
 // components/ShowAddStationPopup.js
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue ,useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
+import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
+
 const ShowAddStationPopup = ({ map, latlng }) => {
-  const loadData = useRecoilValue(readPoiMarkersStore);
+ 
   const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
   const [name, setName] = useState("");
   const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
+  const setLoadData = useSetRecoilState(readPoiMarkersStore);
+  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
 
+
+/*   useEffect(() => {
+    if (map && loadData) {
+      
+      console.log("Map and loadData are defined in ShowAddStationPopup.js", map);
+      console.log("loadData object in ShowAddStationPopup.js:", loadData);
+      // Your code here
+    }else{
+      console.log("Map and loadData are not defined in ShowAddStationPopup.js");
+    }
+  }, [map, loadData]); */
+
+// In Kontextmenü-Formular Typen anzeigen
   useEffect(() => {
     const fetchPoiTypData2 = async () => {
       try {
@@ -32,32 +49,40 @@ const ShowAddStationPopup = ({ map, latlng }) => {
     fetchPoiTypData2();
   }, []);
 
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    const formData = {
-      name, // Name der Station
-      poiTypeId, // Typ der Station, logged as idPoiTyp
-      latitude, // Breitengrad
-      longitude, // Längengrad
-    };
+//-----------------handleSubmit-------------------
+const handleSubmit = async (event) => {
+  event.preventDefault();
+  const formData = {
+      name,
+      poiTypeId,
+      latitude,
+      longitude,
+  };
 
-    fetch("/api/addLocation", {
+  const response = await fetch("/api/addLocation", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(formData),
-    })
-      .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") {
+  if (response.ok) {
+      setTrigger((trigger) => {
+          console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
+          const newTrigger = trigger + 1;
+          console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+          return newTrigger;
+      });
+  } else {
+      console.error("Fehler beim Hinzufügen des POI");
+  }
+
+  if (map && typeof map.closePopup === "function") {
       map.closePopup();
-    } else {
-      console.error("Map object is undefined or closePopup is not a function");
-    }
-  };
+  }
+};
+
+
+  
 
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">