feat: AddPOIModal auf Redux umgestellt, Icon-Problem nach POI-Erstellung behoben

- fetch durch addPoiThunk ersetzt
- Icon-Nachladen über fetchPoiIconsDataThunk integriert
- Modal schließt sich nach erfolgreichem Hinzufügen zuverlässig
- reload entfernt, Statushandling über Redux-Slice `addPoiSlice`
- Version erhöht auf 1.1.158

CHANGELOG.md

@@ -4,6 +4,37 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.158] – 2025-05-23
+
+### ✨ Feature
+
+- Neue POI-Hinzufügen-Logik mit Redux `addPoiThunk` umgesetzt
+- `AddPOIModal.js` vollständig umgebaut:
+  - kein direktes `fetch(...)` mehr
+  - stattdessen: Redux Thunk + Service
+  - Statusanzeige über `status` / `error` aus `addPoiSlice`
+- Automatisches Nachladen der POI-Icons über `fetchPoiIconsDataThunk`
+
+### 🐞 Fixed
+
+- Bug behoben: neu hinzugefügter POI zeigte Standard-Icon → Icon-Liste wird nach dem Hinzufügen erneut geladen
+
+### ✅ Clean
+
+- `window.location.reload()` aus `AddPOIModal.js` entfernt
+- API-Aufrufe vollständig in `services/database/addPoiService.js` gekapselt
+
+### 🧠 Architektur
+
+- Redux-Standardstruktur eingehalten: `Service` → `Thunk` → `Slice`
+- Redux-Status wird in Modal direkt über `useSelector` abgebildet
+
+### 🔧 Version
+
+- 📦 Version erhöht auf **1.1.158**
+
+---
+
 ## [1.1.153] - 2025-05-22
 
 ### ✨ Features

components/pois/AddPOIModal.js

@@ -1,98 +1,81 @@
-// components/AddPOIModal.js
-import React, { useState, useEffect, use } from "react";
-import ReactDOM from "react-dom";
-import { setPoiMarkers } from "../../redux/slices/readPoiMarkersStoreSlice";
-import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
+// /components/AddPOIModal.js
+import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
 import { fetchPoiTypes } from "../../redux/slices/database/poiTypesSlice";
 import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice";
+import { addPoiThunk } from "../../redux/thunks/database/addPoiThunk";
+import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/fetchPoiIconsDataThunk";
 
 const AddPOIModal = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
 
   const poiTypData = useSelector((state) => state.poiTypes.data);
+  const status = useSelector((state) => state.addPoi.status);
+  const error = useSelector((state) => state.addPoi.error);
 
   const [name, setName] = useState("");
-  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
-  const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
+  const [poiTypeId, setPoiTypeId] = useState("");
+  const [deviceName, setDeviceName] = useState("");
 
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
 
-  const [deviceName, setDeviceName] = useState("");
-  //-----------------------------------------------------
+  const gisStationsStatic = useSelector(selectGisStationsStaticDistrict);
+  const locationDeviceData = gisStationsStatic?.Points ?? [];
 
   useEffect(() => {
     if (poiTypData.length > 0 && !poiTypeId) {
       setPoiTypeId(poiTypData[0].idPoiTyp);
     }
   }, [poiTypData]);
-  useEffect(() => {
-    console.log("Aktueller POI Type:", poiTypeId);
-  }, [poiTypeId]);
-
-  //------------------------------------------------------------------------------------------
-  const gisStationsStatic = useSelector(selectGisStationsStaticDistrict);
-  const locationDeviceData = gisStationsStatic?.Points ?? [];
-
-  console.log("gisStationsStatic aus AddPOIModal:", gisStationsStatic);
 
   useEffect(() => {
     if (locationDeviceData?.length > 0) {
-      console.log("🎯 Gerätedaten erfolgreich geladen:", locationDeviceData);
       setDeviceName((prev) => prev || locationDeviceData[0]?.LD_Name || "");
     }
   }, [locationDeviceData]);
 
-  //------------------------------------------------------------------------------------------
-  //-----------------handleSubmit-------------------
+  useEffect(() => {
+    dispatch(fetchPoiTypes());
+  }, [dispatch]);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
+
     const formData = {
       name,
-      poiTypeId: Number(poiTypeId), // Umwandlung in eine Zahl
+      poiTypeId: Number(poiTypeId),
       latitude,
       longitude,
       idLD: locationDeviceData.find((device) => device.LD_Name === deviceName)?.IdLD,
     };
 
-    const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(formData),
-    });
-
-    if (response.ok) {
+    try {
+      await dispatch(addPoiThunk(formData)).unwrap();
       dispatch(incrementTrigger());
       onClose();
-      window.location.reload();
-    } else {
-      console.error("Fehler beim Hinzufügen des POI");
+
+      // Icons im Hintergrund nachladen (nicht blockierend)
+      setTimeout(() => {
+        dispatch(fetchPoiIconsDataThunk());
+      }, 100);
+    } catch (error) {
+      console.error("Fehler beim Hinzufügen des POI:", error);
     }
 
-    if (map && typeof map.closePopup === "function") {
+    if (map?.closePopup) {
       map.closePopup();
     }
-    //Seite neu laden
-    window.location.reload();
   };
-  //-----------------
-  // POI-Typen aus Redux laden, wenn die Komponente gemountet wird
-  useEffect(() => {
-    dispatch(fetchPoiTypes());
-  }, [dispatch]);
-
-  //---------------------
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]" onClick={onClose}>
       <div className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
-        {/* Schließen-Button */}
         <button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
           ✖
         </button>
 
-        {/* Modal-Inhalt */}
         <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
           <div className="flex items-center mb-4">
             <label htmlFor="name" className="block mr-2 flex-none">
@@ -107,28 +90,19 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
             </label>
             <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
               <option value="">-- Gerät auswählen --</option>
-              {locationDeviceData?.length > 0 ? (
-                locationDeviceData.map((device, index) => (
+              {locationDeviceData.map((device, index) => (
                 <option key={device?.IdLD || index} value={device?.LD_Name}>
                   {device?.LD_Name || "Unbekanntes Gerät"}
                 </option>
-                ))
-              ) : (
-                <option disabled>Keine Geräte gefunden</option>
-              )}
+              ))}
             </select>
           </div>
+
           <div className="flex items-center mb-4">
             <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
               Typ:
             </label>
-            <select
-              id="idPoiTyp2"
-              name="idPoiTyp2"
-              value={poiTypeId}
-              onChange={(e) => setPoiTypeId(Number(e.target.value))} // Hier ebenfalls umwandeln
-              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
-            >
+            <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(Number(e.target.value))} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
               {poiTypData.length === 0 ? (
                 <option value="" disabled>
                   Keine POI-Typen verfügbar
@@ -148,6 +122,9 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
             <span>Lng: {longitude}</span>
           </div>
 
+          {status === "loading" && <div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>}
+          {status === "failed" && error && <div className="text-red-500 mb-2 text-sm">Fehler: {error}</div>}
+
           <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
             POI hinzufügen
           </button>

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.157";
+export const APP_VERSION = "1.1.158";