(ui): refactor rehydration routine subscriptions

react-ui/src/components/devices/reducer/device.reducer.ts

@@ -45,13 +45,27 @@ const deviceSlice = createSlice({
         setActiveTab: (state, action: PayloadAction<DeviceViewTabValues>) => {
             state.activeTab = action.payload
         },
-        setSelectedDevice: (state, action: PayloadAction<Device | null>) => {
-            let selectedObject = null;
-            if (action.payload) {
-                selectedObject = { device: action.payload, mne: null, json: null }
-            }
+        setSelectedDevice: {
+            reducer: (state, action: PayloadAction<Device | null, string, { skipListener?: boolean }>) => {
+                // do thing if desired device is already selected
+                if (state.selected?.device.id === action.payload?.id) {
+                    action.meta.skipListener = true
+                    return
+                }
+
+                let selectedObject = null;
+                if (action.payload) {
+                    selectedObject = { device: action.payload, mne: null, json: null }
+                }
 
-            state.selected = selectedObject
+                state.selected = selectedObject
+            },
+            prepare: (device: Device | null) => {
+                return {
+                    payload: device,
+                    meta: { skipListener: false } // set to true when needed
+                }
+            }
         },
         setSelectedMne: (state, action: PayloadAction<NetworkelementManagedNetworkElement>) => {
             if (!state.selected) {

react-ui/src/components/devices/routines/mne.routine.ts

@@ -7,7 +7,8 @@ import {
 } from '@component/devices/reducer/device.reducer'
 import { createAsyncThunk } from '@reduxjs/toolkit'
 import { addRoutine } from '@shared/reducer/routine.reducer'
-import { Category } from '@shared/types/category.type'
+import { Category, CategoryType } from '@shared/types/category.type'
+import { RoutineHolderSingleton } from '@utils/routine-holder.singleton'
 import { RootState } from 'src/stores'
 import { startListening } from '../../../stores/middleware/listener.middleware'
 
@@ -20,13 +21,14 @@ export const FETCH_MNE_ACTION = 'subscription/device/fetchSelectedMNE'
  * Triggered by a selectedDevice
  */
 startListening({
-    predicate: (action) => setSelectedDevice.match(action) && !!action.payload,
+    predicate: (action) => setSelectedDevice.match(action) && !!action.payload && !action.meta?.skipListener,
     effect: async (action, listenerApi) => {
+        const factory = RoutineHolderSingleton.getInstance();
         listenerApi.dispatch(
             addRoutine({
-                thunk: fetchSelectedMneThunk,
-                category: Category.TAB,
-                payload: action.payload,
+                thunk: factory.getRoutineByName("fetchSelectedMneThunk"),
+                category: Category.TAB as CategoryType,
+                payload: action.payload as Object,
             })
         )
     },

react-ui/src/index.tsx

+import { fetchSelectedMneThunk } from '@component/devices/routines/mne.routine'
 import { UtilsProvider } from '@provider/utils.provider'
+import { RoutineHolderSingleton } from '@utils/routine-holder.singleton'
 import i18next from 'i18next'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -18,6 +20,12 @@ import { persistor, store } from './stores'
 
 window.env = window.location.hostname === 'localhost' ? 'development' : 'production';
 
+const factory = RoutineHolderSingleton.getInstance();
+factory.registerRoutine("fetchSelectedMneThunk", {
+    func: fetchSelectedMneThunk,
+    id: 0
+});
+
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
         <ErrorBoundary fallback={<div>Something went wrong</div>}>

react-ui/src/shared/api/user.fetch.ts

@@ -16,7 +16,7 @@ export const fetchUser = createAsyncThunk('user/fetchUser', (_, thunkAPI) => {
         const matchedUser = response.data.user.find((_user) => _user.name === user.username)
 
         if (!matchedUser) {
-            // TODO proper error handling
+            // TODO proper error handling => logout
             throw new Error('No user found with the provided username')
         }
 

react-ui/src/shared/reducer/routine.reducer.ts

 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { CategoryType } from '@shared/types/category.type'
-import { ThunkEntityDTO } from '@shared/types/thunk.type'
+import { ThunkDTO, ThunkPersist } from '@shared/types/thunk.type'
+import { RoutineHolderSingleton } from '@utils/routine-holder.singleton'
 import { RoutineManager } from '@utils/routine.manager'
+import { REHYDRATE } from 'redux-persist'
 import { RootState } from '../../stores'
 import { startListening } from '../../stores/middleware/listener.middleware'
 import { setToken } from './user.reducer'
 
 export interface ReducerState {
-    thunks: Record<CategoryType, ThunkEntityDTO | null>
+    thunks: Record<CategoryType, ThunkPersist | null>
 }
 
 const initialState: ReducerState = {
@@ -23,9 +25,14 @@ const RoutineSlice = createSlice({
     name: 'routine',
     initialState,
     reducers: {
-        addRoutine: (state: any, { payload }: PayloadAction<ThunkEntityDTO>) => {
-            const newThunk: ThunkEntityDTO = payload
-            state.thunks[payload.category] = newThunk
+        addRoutine: (state: any, { payload }: PayloadAction<ThunkDTO>) => {
+            const thunk: ThunkPersist = {
+                category: payload.category,
+                payload: payload.payload,
+                thunkId: payload.thunk.id
+            }
+
+            state.thunks[payload.category] = thunk
         },
 
         removeAll: (state) => {
@@ -48,19 +55,26 @@ startListening({
 // on rehydrate add all persistet routines
 // TODO -> thunk does not have the thunk function object due to its coming from the store that ignores the value.
 // at this point we have to figure out how to get the thunk function out of the "string" name
-// startListening({
-//     predicate: ({ type }) => type === REHYDRATE,
-//     effect: async (_, listenerApi) => {
-//         const { routine } = listenerApi.getState() as RootState
-//         for (const [_, thunk] of Object.entries<ThunkEntity>(routine.thunks)) {
-//             if (!thunk) {
-//                 continue
-//             }
-//             const dto: ThunkEntityDTO = thunk
-//             listenerApi.dispatch(addRoutine(dto))
-//         }
-//     },
-// })
+startListening({
+    predicate: ({ type }) => type === REHYDRATE,
+    effect: async (_, listenerApi) => {
+        const { routine } = listenerApi.getState() as RootState
+        const routines = RoutineHolderSingleton.getInstance()
+
+        Object.values(routine.thunks)
+            .filter(thunk => !!thunk)
+            .forEach(thunk => {
+                const container = routines.getRoutineById(thunk.thunkId)
+                const dto: ThunkDTO = {
+                    category: thunk.category,
+                    payload: thunk.payload,
+                    thunk: container
+                }
+
+                listenerApi.dispatch(addRoutine(dto))
+            })
+    },
+})
 
 /**
  * Add new routine
@@ -72,8 +86,8 @@ startListening({
 startListening({
     predicate: (action) => addRoutine.match(action),
     effect: async (action, listenerApi) => {
-        const { thunk } = action.payload as ThunkEntityDTO
-        const subscription = await listenerApi.dispatch(thunk(action.payload.payload))
+        const { thunk } = action.payload as ThunkDTO
+        const subscription = await listenerApi.dispatch(thunk.func(action.payload.payload))
         RoutineManager.add(subscription.payload, action.payload.category)
     },
 })

react-ui/src/shared/types/thunk.type.ts

 import { CategoryType } from "./category.type"
 
-export interface ThunkEntityDTO {
-    thunk: any
+
+/**
+ * Contains the thunk function combined with a unique id
+ * Giving a explicit id (and not the index of the object)
+ * prevents missmatching the function if a update changes
+ * the RoutineList object length 
+ */
+export interface ThunkContainer {
+    id: number
+    func: any,
+}
+
+
+export interface ThunkDTO {
+    thunk: ThunkContainer
+
     payload: Object
 
     /**
@@ -9,4 +23,10 @@ export interface ThunkEntityDTO {
      * New subscription will unsubscribe and overwrite the old one
      */
     category: CategoryType
-}
+}
\ No newline at end of file
+
+export interface ThunkPersist {
+    thunkId: number,
+    payload: Object
+    category: CategoryType
+}

react-ui/src/shared/utils/routine-holder.singleton.ts

+import { ThunkContainer } from "@shared/types/thunk.type";
+
+interface LocalThunkContainer {
+    container: ThunkContainer,
+    name: string
+}
+
+export class RoutineHolderSingleton {
+    private static instance: RoutineHolderSingleton;
+    private routineList: Array<LocalThunkContainer> = []
+
+    private constructor() { }
+
+    static getInstance(): RoutineHolderSingleton {
+        if (!RoutineHolderSingleton.instance) {
+            RoutineHolderSingleton.instance = new RoutineHolderSingleton();
+        }
+        return RoutineHolderSingleton.instance;
+    }
+
+    registerRoutine(name: string, thunk: ThunkContainer) {
+        this.routineList = [...this.routineList, { container: thunk, name }];
+    }
+
+    getRoutineById(id: number): ThunkContainer {
+        const routine = this.routineList.find((thunk) => thunk.container.id === id)
+
+        if (!routine) {
+            throw new Error('')
+            // TODO
+        }
+
+        return routine.container;
+    }
+
+
+    getRoutineByName(name: string): ThunkContainer {
+        const routine = this.routineList.find((thunk) => thunk.name === name)
+
+        if (!routine) {
+            throw new Error('')
+            // TODO
+        }
+
+        return routine.container;
+    }
+}
\ No newline at end of file

react-ui/src/shared/utils/routine.manager.ts

@@ -38,6 +38,8 @@ export const RoutineManager = (() => {
             ...state.routines,
             [category]: entity
         }
+        infoMessage("Routine subscribed to category " + category)
+
         return true
     }