fix: Seite nach POI-Hinzufügen automatisch neu laden

- Problem mit der Icon-Aktualisierung nach dem Hinzufügen eines POI behoben
- Temporäre Lösung: `window.location.reload()` nach `handleSubmit`
- Redux bleibt weiterhin für POI-Typen aktiv, spätere Optimierung ohne Reload geplant

components/AddPOIModal.js

@@ -4,11 +4,14 @@ import ReactDOM from "react-dom";
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
 import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice.js";
-import { useSelector } from "react-redux";
 import { selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchPoiTypes } from "../redux/slices/db/poiTypesSlice";
 
 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
-  const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
+  const dispatch = useDispatch();
+  const poiTypData = useSelector((state) => state.poiTypes.data);
+
   const [name, setName] = useState("");
   const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
   const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
@@ -82,8 +85,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     if (map && typeof map.closePopup === "function") {
       map.closePopup();
     }
+    //Seite neu laden
+    window.location.reload();
   };
-  //-----------------handleSubmit-------------------
+  //-----------------
+  // 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}>
@@ -119,18 +130,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
               )}
             </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(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-              {poiTypData &&
-                poiTypData.map((poiTyp, index) => (
-                  <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
-                    {poiTyp.name}
-                  </option>
-                ))}
+              {poiTypData.map((poiTyp) => (
+                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
+                  {poiTyp.name}
+                </option>
+              ))}
             </select>
           </div>