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) => (
-                poiTypData.map((poiTyp, index) => (
+                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
-                  <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+                  {poiTyp.name}
-                    {poiTyp.name}
+                </option>
-                  </option>
+              ))}
-                ))}
             </select>
           </div>
 

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.35";
+export const APP_VERSION = "1.1.36";

redux/slices/db/poiTypesSlice.js

@@ -0,0 +1,29 @@
+// /redux/slices/db/poiTypesSlice.js
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+
+// API-Abruf für POI-Typen
+export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
+  const response = await fetch("http://192.168.10.33:3000/api/talas_v5_DB/poiTyp/readPoiTyp");
+  return await response.json();
+});
+
+const poiTypesSlice = createSlice({
+  name: "poiTypes",
+  initialState: { data: [], status: "idle" },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchPoiTypes.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchPoiTypes.fulfilled, (state, action) => {
+        state.data = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchPoiTypes.rejected, (state) => {
+        state.status = "failed";
+      });
+  },
+});
+
+export default poiTypesSlice.reducer;

redux/store.js

@@ -9,6 +9,7 @@ import gisStationsStatusDistrictReducer from "./slices/webService/gisStationsSta
 import gisStationsMeasurementsReducer from "./slices/webService/gisStationsMeasurementsSlice";
 import gisSystemStaticReducer from "./slices/webService/gisSystemStaticSlice";
 import gisStationsStaticReducer from "./slices/webService/gisStationsStaticSlice";
+import poiTypesReducer from "./slices/db/poiTypesSlice";
 
 export const store = configureStore({
   reducer: {
@@ -21,5 +22,6 @@ export const store = configureStore({
     gisStationsMeasurements: gisStationsMeasurementsReducer,
     gisSystemStatic: gisSystemStaticReducer,
     gisStationsStatic: gisStationsStaticReducer,
+    poiTypes: poiTypesReducer,
   },
 });