Ui refactor style

Depends on !1160 (closed)

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

@@ -5,6 +5,7 @@ import {
 } from '@api/api'
 import { DeviceViewTabValues } from '@component/devices/view/device.view.tabs'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { REHYDRATE } from 'redux-persist'
 import { RootState } from 'src/stores'
 import '../routines/index'
 import { startListening } from '/src/stores/middleware/listener.middleware'
@@ -32,6 +33,13 @@ const initialState: DeviceSliceState = {
     selected: null,
 }
 
+interface SetSelectedDeviceType {
+    device: Device | null,
+    options?: {
+        bypassCheck: boolean
+    }
+}
+
 const deviceSlice = createSlice({
     name: 'device',
     initialState,
@@ -46,24 +54,33 @@ const deviceSlice = createSlice({
             state.activeTab = action.payload
         },
         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
+            reducer: (state, { payload, meta }: PayloadAction<SetSelectedDeviceType, string, { skipListener?: boolean }>) => {
+                /**
+                 * Do nothing if desired device is already selected
+                 * Bypass the check if the flag is set to true. We
+                 * use this bypass to trigger the listener functions
+                 * accordingly
+                 */
+                if (!payload?.options?.bypassCheck && state.selected?.device.id === payload.device?.id) {
+                    meta.skipListener = true
                     return
                 }
 
-                let selectedObject = null;
-                if (action.payload) {
-                    selectedObject = { device: action.payload, mne: null, json: null }
+                if (!payload.device) {
+                    throw Error('Passed null device as parameter while bypassing the safety check')
+                }
+
+                let selectedObject: SelectedObject | null = null;
+                if (payload) {
+                    selectedObject = { device: payload.device, mne: null, json: null }
                 }
 
                 state.selected = selectedObject
             },
-            prepare: (device: Device | null) => {
+            prepare: (payload) => {
                 return {
-                    payload: device,
-                    meta: { skipListener: false } // set to true when needed
+                    payload,
+                    meta: { skipListener: false }
                 }
             }
         },
@@ -107,7 +124,24 @@ startListening({
         }
 
         // if there are no devices available do set null
-        const newDevices = action.payload?.[0] || null
-        listenerApi.dispatch(setSelectedDevice(newDevices))
+        const device = action.payload?.[0] || null
+        listenerApi.dispatch(setSelectedDevice({ device } as SetSelectedDeviceType))
     },
 })
+
+
+/**
+ * On startup reset the selected device 
+ */
+startListening({
+    predicate: ({ type }: any) => type === REHYDRATE,
+    effect: async (_, listenerApi) => {
+        const { device: state } = listenerApi.getState() as RootState
+        const device = state.selected?.device
+        if (!device) {
+            return
+        }
+
+        listenerApi.dispatch(setSelectedDevice({ device, options: { bypassCheck: true } } as SetSelectedDeviceType))
+    },
+})
\ No newline at end of file