ShowAddStationPopup.js Komponent erstellt statt in MapComponent für bessere Organisation in das Projekt

components/MapComponent.js

@@ -1,5 +1,6 @@
 // components/MapComponent.js
 import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
@@ -8,16 +9,19 @@ import * as config from "../config/config.js";
 import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
-import DataSheet from "../components/DataSheet";
-import { useRecoilState, useRecoilValue } 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 { poiTypState } from "../store/poiTypState";
+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 ShowAddStationPopup from "./ShowAddStationPopup";
+//import { createRoot } from "react-dom/client";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
@@ -322,6 +326,29 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }
   //----------------------------------
+  //------------------------------------------
+  // Funktion zum Abrufen der poiTyp Daten
+
+  useEffect(() => {
+    const fetchPoiTypData = async () => {
+      try {
+        const response = await fetch("/api/poiTyp");
+        const data = await response.json();
+        setPoiTypData(data); // Daten im Recoil State speichern
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+      }
+    };
+
+    fetchPoiTypData();
+  }, []);
+
+  // Effekt zum Loggen der poiTypData, wenn sie sich ändern
+  useEffect(() => {
+    console.log("poiTypData aktualisiert:", poiTypData);
+  }, [poiTypData]);
+
+  //----------------------------------------------------
   //-----Kontextmenu----------------
   const newLink = (e) => {
     try {
@@ -382,99 +409,39 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   };
   //-----Kontextmenu----ende------------
   // Ensure this function is only called when map is initialized and available
-  const showAddStationPopup = (e) => {
-    if (!initMap) {
-      return;
-    }
+  const showAddStationPopup = (e, map) => {
+    const container = L.DomUtil.create("div");
 
-    const popupContent = L.DomUtil.create("div");
-    popupContent.innerHTML = `
-  <form id="addStationForm" class="m-0 p-2 w-full">
-      <!-- Kommantar von hier
-        <div class="flex items-center mb-4">
+    // Create a root container for the React component inside the popup
+    const root = ReactDOM.createRoot(container);
 
-        <label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
-        <input
-          type="text"
-          id="idPoi"
-          name="idPoi"
-          value="2" 
-          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-      <div class="flex items-center mb-4">
-      <label for="idPoiTyp" class="block mr-2 flex-none">ID idPoiTyp:</label>
-      <input
-        type="text"
-        id="idPoiTyp"
-        name="idPoiTyp"
-        value="2" 
-        class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-      />
-      </div>
-      Kommantar bis hier-->
-  <div class="flex items-center mb-4">      
-    <label for="name" class="block mr-2 flex-none">Name:</label>
-    <input
-      type="text"
-      id="name"
-      name="name"
-      placeholder="Name der Station"
-      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-    />
-  </div>
-  
-  <div class="flex items-center mb-4">   
-    <label for="idPoi" class="block mr-3 flex-none">Type:</label>
-    <input
-      type="text"
-      id="type"
-      name="type"
-      placeholder="Typ der Station"
-      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-    />
-  </div>
-  
-  <div class="flex items-center mb-4">
-    <label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
-    <input
-      type="text"
-      id="lat"
-      name="lat"
-      value="${e.latlng.lat.toFixed(5)}"
-      readonly
-      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-    />
-  </div>
-   
-  <div class="flex items-center mb-4">   
-    <label for="lng" class="block mr-2 flex-none">Längengrad:</label>
-    <input
-      type="text"
-      id="lng"
-      name="lng"
-      value="${e.latlng.lng.toFixed(5)}"
-      readonly
-      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-    />
-  </div>
+    root.render(
+      <RecoilRoot>
+        <ShowAddStationPopup map={map} latlng={e.latlng} />
+      </RecoilRoot>
+    );
 
-  
-  <button
-    type="submit"
-    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
-  >
-    Station hinzufügen
-  </button>
-</form>
-  `;
+    // Create and configure the popup
+    L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);
 
-    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initMap);
-
-    // Attach event listener here
-    L.DomEvent.on(popupContent, "submit", handleSubmit);
+    // Cleanup when the popup is closed
+    initMap.on("popupclose", () => {
+      root.unmount(); // Use unmount method from the root
+    });
   };
 
+  // Inside your ShowAddStationPopup component
+  useEffect(() => {
+    // Cleanup function to unmount React component
+    return () => {
+      if (container._reactRoot) {
+        container._reactRoot.unmount();
+      }
+    };
+  }, []);
+
+  //------------------------------------------
+
   // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
   async function handleSubmit(event) {
     event.preventDefault();
@@ -1507,30 +1474,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       } // Ihre bereits existierende Funktion, die Zoom-Out ausführt
     }
   }, [map, zoomTrigger]);
-  //------------------------------------------
-  // Funktion zum Abrufen der poiTyp Daten
-  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
 
-  useEffect(() => {
-    const fetchPoiTypData = async () => {
-      try {
-        const response = await fetch("/api/poiTyp");
-        const data = await response.json();
-        setPoiTypData(data); // Daten im Recoil State speichern
-      } catch (error) {
-        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
-      }
-    };
-
-    fetchPoiTypData();
-  }, []);
-
-  // Effekt zum Loggen der poiTypData, wenn sie sich ändern
-  useEffect(() => {
-    console.log("poiTypData aktualisiert:", poiTypData);
-  }, [poiTypData]);
-
-  //----------------------------------------------------
+  //---------------------------------------------------------
 
   return (
     <>