Files copy and paste from store atoms and selector to redux slices folder

components/DataSheet.js

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
-import { gisSystemStaticState } from "../store/atoms/gisSystemState";
-import { mapLayersState } from "../store/atoms/mapLayersState";
-import { selectedAreaState } from "../store/atoms/selectedAreaState";
-import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
+import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
+import { mapLayersState } from "../redux/slices/mapLayersState";
+import { selectedAreaState } from "../redux/slices/selectedAreaState";
+import { zoomTriggerState } from "../redux/slices/zoomTriggerState.js";
+import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleState";
 import EditModeToggle from "./EditModeToggle";
-import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
+import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleState"; // Import für Polyline-Visibility
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode

components/MapComponent.js

@@ -9,21 +9,21 @@ import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "./DataSheet.js";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
-import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
-import { mapLayersState } from "../store/atoms/mapLayersState.js";
-import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
-import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
+import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
+import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
+import { mapLayersState } from "../redux/slices/mapLayersState";
+import { selectedAreaState } from "../redux/slices/selectedAreaState";
+import { zoomTriggerState } from "../redux/slices/zoomTriggerState.js";
 import AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
-import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
+import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
 import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
 import PoiUpdateModal from "./pois/PoiUpdateModal.js";
-import { selectedPoiState } from "../store/atoms/poiState.js";
-import { currentPoiState } from "../store/atoms/currentPoiState.js";
+import { selectedPoiState } from "../redux/slices/selectedPoiState.js";
+import { currentPoiState } from "../redux/slices/currentPoiState.js";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
+import { mapIdState, userIdState } from "../redux/slices/urlParameterState.js";
+import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleState.js";
 import plusRoundIcon from "./PlusRoundIcon.js";
 import { createAndSetDevices } from "../utils/createAndSetDevices.js";
 import { restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
@@ -48,9 +48,9 @@ import useLineData from "../hooks/useLineData.js";
 
 //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
 import { useMapComponentState } from "../hooks/useMapComponentState";
-import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
-import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleState";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const polylineVisible = useRecoilValue(polylineLayerVisibleState);

components/PoiUpdateModal.js

@@ -2,8 +2,8 @@
 
 import React, { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
-import { selectedPoiState } from "../store/atoms/poiState";
-import { currentPoiState } from "../store/atoms/currentPoiState";
+import { selectedPoiState } from "../redux/slices/selectedPoiState";
+import { currentPoiState } from "../redux/slices/currentPoiState";
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
   const currentPoi = useRecoilValue(currentPoiState);
@@ -90,9 +90,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     const fetchData = async () => {
       try {
         // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
-        const response = await fetch(
-          "/api/talas_v5_DB/locationDevice/locationDevices"
-        );
+        const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
         const data = await response.json();
         setLocationDeviceData(data);
         if (poiData && poiData.idLD) {
@@ -207,11 +205,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         </select>
       </div>
 
-      <button
-        type="button"
-        onClick={handleDeletePoi}
-        className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
-      >
+      <button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
         POI löschen
       </button>
 

components/ShowAddStationPopup.js

@@ -2,8 +2,8 @@
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
-import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
-import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStore.js";
+import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
 
 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
@@ -26,10 +26,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         if (data && data.length > 0) {
           setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
           setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
-          console.log(
-            "Initial poiTypeId set in ShowAddStationPopup.js :",
-            data[0].idPoiTyp
-          );
+          console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der poiTyp Daten:", error);
@@ -72,10 +69,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         }
         console.log("Abgerufene Standort- und Gerätedaten:", data);
       } catch (error) {
-        console.error(
-          "Fehler beim Abrufen der Standort- und Gerätedaten:",
-          error
-        );
+        console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
       }
     };
 
@@ -91,8 +85,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
       poiTypeId,
       latitude,
       longitude,
-      idLD: locationDeviceData.find((device) => device.name === deviceName)
-        .idLD,
+      idLD: locationDeviceData.find((device) => device.name === deviceName).idLD,
     };
 
     const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -129,15 +122,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         <label htmlFor="name" className="block mr-2 flex-none">
           Name :
         </label>
-        <input
-          type="text"
-          id="name"
-          name="name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Name der Station"
-          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
-        />
+        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
       </div>
 
       {/* {locationDeviceData.----------------------------------------------*/}
@@ -145,13 +130,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         <label htmlFor="deviceName" className="block mr-2 flex-none">
           Gerät :
         </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"
-        >
+        <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">
           {locationDeviceData.map((device, index) => (
             <option key={index} value={device.name}>
               {device.name}
@@ -164,13 +143,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         <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"
-        >
+        <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}>
@@ -192,10 +165,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         </div>
       </div>
 
-      <button
-        type="submit"
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
-      >
+      <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>
     </form>

components/pois/AddPoiModalWindow.js

@@ -2,8 +2,8 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
 import { useSetRecoilState, useRecoilState } from "recoil";
-import { mapLayersState } from "../../store/atoms/mapLayersState";
-import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
+import { mapLayersState } from "../../redux/slices/mapLayersState";
+import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
 
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState([]);

components/pois/PoiUpdateModal.js

@@ -2,9 +2,9 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
 import { useRecoilState } from "recoil";
-import { selectedPoiState } from "../../store/atoms/poiState";
-import { currentPoiState } from "../../store/atoms/currentPoiState";
-import { mapLayersState } from "../../store/atoms/mapLayersState";
+import { selectedPoiState } from "../../redux/slices/selectedPoiState";
+import { currentPoiState } from "../../redux/slices/currentPoiState";
+import { mapLayersState } from "../../redux/slices/mapLayersState";
 
 const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const currentPoi = useRecoilState(currentPoiState);

components/pois/PoiUpdateModalWrapper.js

@@ -2,8 +2,8 @@
 import React, { useState } from "react";
 import PoiUpdateModal from "./PoiUpdateModal";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { currentPoiState, selectedPoiState } from "../../store/atoms/poiState";
-import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
+import { currentPoiState, selectedPoiState } from "../../redux/slices/currentPoiState";
+import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
 
 const PoiUpdateModalWrapper = ({ show, onClose, latlng }) => {
   const setSelectedPoi = useSetRecoilState(selectedPoiState);

hooks/useCreateAndSetDevices.js

@@ -1,7 +1,7 @@
 // /hooks/useCreateAndSetDevices.js
 import { useEffect } from "react";
 import { useRecoilState } from "recoil";
-import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledState";
 import { createAndSetDevices } from "../utils/createAndSetDevices";
 
 const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {

hooks/useMapComponentState.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import usePoiTypData from "./usePoiTypData";
 import { useRecoilValue } from "recoil";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+import { poiLayerVisibleState } from "../redux/slices/poiLayerVisible";
 
 export const useMapComponentState = () => {
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");

hooks/useMarkerLayers.js

@@ -1,7 +1,7 @@
 // hooks/useMarkerLayers.js
 import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
-import { mapLayersState } from "../store/atoms/mapLayersState";
+import { mapLayersState } from "../redux/slices/mapLayersState";
 
 const useMarkerLayers = (map, markers, layerType) => {
   const mapLayersVisibility = useRecoilValue(mapLayersState);

pages/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
-import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStore.js";
+import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
 
 const MapComponentWithNoSSR = dynamic(() => import("../components/MapComponent"), { ssr: false });
 // TestScript ohne SSR

redux/store.js

@@ -1,6 +1,6 @@
 // /redux/store.js
 import { configureStore } from "@reduxjs/toolkit";
-import websocketMiddleware from "./websocketMiddleware";
+import websocketMiddleware from "./middleware/websocketMiddleware";
 import websocketReducer from "./reducer";
 
 // Erstelle den Store mit configureStore

store/atoms/mapAtom.js

@@ -1,7 +0,0 @@
-// store/atoms/mapAtom.js
-import { atom } from "recoil";
-
-export const mapAtom = atom({
-  key: "mapAtom", // Ein eindeutiger Schlüssel für Recoil
-  default: null, // Standardwert ist null, da die Karte noch nicht erstellt wurde
-});

store/atoms/poiDeviceNameState.js

@@ -1,7 +0,0 @@
-// store/atoms/poiDeviceNameState.js
-import { atom } from "recoil";
-
-export const poiDeviceNameState = atom({
-  key: "poiDeviceNameState",
-  default: "",
-});

store/atoms/poiTypState.js

@@ -1,7 +0,0 @@
-// store/poiTypState.js
-import { atom } from "recoil";
-
-export const poiTypState = atom({
-  key: "poiTypState", // eindeutiger Schlüssel
-  default: [], // Initialer Standardwert, leeres Array
-});

utils/createAndSetDevices.js

@@ -6,7 +6,7 @@ import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
-import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
+import { setPolylineEventsDisabled } from "../redux/slices/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
 import { SERVER_URL } from "../config/urls.js";
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad

utils/setupPolylines.js

@@ -10,7 +10,7 @@ import endIcon from "../components/gisPolylines/icons/EndIcon";
 import { redrawPolyline } from "./mapUtils";
 import { openInNewTab } from "./openInNewTab";
 import { toast } from "react-toastify";
-import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleState";
 import { useRecoilValue } from "recoil";
 
 const protocol = window.location.protocol; // z. B. 'http:' oder 'https:'