Implement redux in device health check

src/App.tsx

@@ -7,6 +7,8 @@ import LandingPage from './pages/LandingPage/LandingPage'
 import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
 import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
 import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
+import { Provider as ReduxProvider } from 'react-redux'
+import store from './redux/store'
 
 const router = createBrowserRouter([
   {
@@ -20,20 +22,21 @@ const router = createBrowserRouter([
   {
     path: '/connect-device',
     element: <ConnectDevicePage />,
-   
   },
   {
     path: '/device-sync-status',
     element: <DeviceSyncStatus />,
-  }
+  },
 ])
 
 function App() {
   return (
     <TamaguiProvider config={config}>
+      <ReduxProvider store={store}>
         <StatusProvider>
           <RouterProvider router={router} />
         </StatusProvider>
+      </ReduxProvider>
     </TamaguiProvider>
   )
 }

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -9,8 +9,13 @@ import { Button, InformationBox } from '@status-im/components'
 import Icon from '../../components/General/Icon'
 import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
 import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
 
 const DeviceHealthCheck = () => {
+  // Extract state from Redux store
+  const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
+  console.log(deviceHealthState)
   return (
     <PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
       <YStack
@@ -29,12 +34,21 @@ const DeviceHealthCheck = () => {
           isAdvancedSettings={true}
         />
         <XStack space={'$4'}>
-          <DeviceStorageHealth storage={44} maxStorage={30} />
+          <DeviceStorageHealth
-          <DeviceCPULoad load={[12, 123, 4, 90]} />
+            storage={deviceHealthState.storage}
+            maxStorage={deviceHealthState.maxMemory}
+          />
+          <DeviceCPULoad load={deviceHealthState.cpuLoad} />
         </XStack>
         <XStack space={'$4'}>
-          <DeviceMemory currentMemory={[25, 31, 5, 14, 20, 81]} maxMemory={38} />
+          <DeviceMemory
-          <DeviceNetworkHealth uploadRate={[1, 4, 23, 55]} downloadRate={[20, 3, 40, 56]} />
+            currentMemory={deviceHealthState.memory}
+            maxMemory={deviceHealthState.maxMemory}
+          />
+          <DeviceNetworkHealth
+            uploadRate={deviceHealthState.uploadRate}
+            downloadRate={deviceHealthState.downloadRate}
+          />
         </XStack>
         <HealthInfoSection
           usedStorage={120}

src/redux/deviceHealthCheck/slice.tsx

@@ -1,76 +1,51 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 interface DeviceHealthState {
-  storage: number;
+  storage: number
-  maxStorage: number;
+  maxStorage: number
-  cpuLoad: number[];
+  cpuLoad: number[]
-  memory: number[];
+  memory: number[]
-  maxMemory: number;
+  maxMemory: number
-  uploadRate: number[];
+  uploadRate: number[]
-  downloadRate: number[];
+  downloadRate: number[]
-  usedStorage: number;
-  maxRamMemory: number;
-  usedRamMemory: number;
-  cpuClockRate: number;
-  networkLatency: number;
 }
 
 const initialState: DeviceHealthState = {
-  storage: 0,
+  storage: 44,
-  maxStorage: 0,
+  maxStorage: 100,
-  cpuLoad: [],
+  cpuLoad: [12, 123, 4, 90],
-  memory: [],
+  memory: [25, 31, 5, 14, 20, 81],
-  maxMemory: 0,
+  maxMemory: 120,
-  uploadRate: [],
+  uploadRate: [1, 4, 25, 65],
-  downloadRate: [],
+  downloadRate: [20, 3, 50, 30],
-  usedStorage: 0,
+}
-  maxRamMemory: 0,
-  usedRamMemory: 0,
-  cpuClockRate: 0,
-  networkLatency: 0,
-};
 
 const deviceHealthSlice = createSlice({
   name: 'deviceHealth',
   initialState,
   reducers: {
     setStorage: (state, action: PayloadAction<{ storage: number; maxStorage: number }>) => {
-      state.storage = action.payload.storage;
+      state.storage = action.payload.storage
-      state.maxStorage = action.payload.maxStorage;
+      state.maxStorage = action.payload.maxStorage
     },
     setCpuLoad: (state, action: PayloadAction<number[]>) => {
-      state.cpuLoad = action.payload;
+      state.cpuLoad = action.payload
     },
     setMemory: (state, action: PayloadAction<{ memory: number[]; maxMemory: number }>) => {
-      state.memory = action.payload.memory;
+      state.memory = action.payload.memory
-      state.maxMemory = action.payload.maxMemory;
+      state.maxMemory = action.payload.maxMemory
     },
-    setNetworkHealth: (state, action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>) => {
+    setNetworkHealth: (
-      state.uploadRate = action.payload.uploadRate;
+      state,
-      state.downloadRate = action.payload.downloadRate;
+      action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>,
+    ) => {
+      state.uploadRate = action.payload.uploadRate
+      state.downloadRate = action.payload.downloadRate
     },
-    setHealthInfo: (state, action: PayloadAction<{
-      usedStorage: number;
-      maxRamMemory: number;
-      usedRamMemory: number;
-      cpuClockRate: number;
-      networkLatency: number;
-    }>) => {
-      state.usedStorage = action.payload.usedStorage;
-      state.maxRamMemory = action.payload.maxRamMemory;
-      state.usedRamMemory = action.payload.usedRamMemory;
-      state.cpuClockRate = action.payload.cpuClockRate;
-      state.networkLatency = action.payload.networkLatency;
   },
-  }
+})
-});
 
-export const {
+export const { setStorage, setCpuLoad, setMemory, setNetworkHealth} =
-  setStorage,
+  deviceHealthSlice.actions
-  setCpuLoad,
-  setMemory,
-  setNetworkHealth,
-  setHealthInfo
-} = deviceHealthSlice.actions;
 
-export default deviceHealthSlice.reducer;
+export default deviceHealthSlice.reducer