format files

src/components/Charts/DeviceCPULoad.tsx

@@ -20,14 +20,13 @@ type DeviceCPULoadProps = {
   load: number[]
 }
 const DeviceCPULoad = ({ load }: DeviceCPULoadProps) => {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false)
 
   const dataObj = load.map((yValue, index: number) => ({
     x: index + 1,
     y: yValue,
   }))
-  const currentLoad =
+  const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
-    dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
 
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
@@ -47,7 +46,7 @@ const DeviceCPULoad = ({ load }: DeviceCPULoadProps) => {
         minHeight: '135px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
-        backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
+        backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

src/components/Charts/DeviceMemoryHealth.tsx

@@ -23,15 +23,13 @@ type DeviceMemoryHealthProps = {
   maxMemory: number
 }
 const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProps) => {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false)
-
 
   const dataObj = currentMemory.map((yValue, index: number) => ({
     x: index + 1,
     y: yValue,
   }))
-  const currentLoad =
+  const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
-    dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
 
   const message = currentLoad < maxMemory ? 'Good' : 'Poor'
 
@@ -52,7 +50,7 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
         minHeight: '135px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
-        backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
+        backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

src/components/Charts/DeviceNetworkHealth.stories.tsx

@@ -16,18 +16,18 @@ type Story = StoryObj<typeof meta>
 
 export const GoodStats: Story = {
   args: {
-    latency:[55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59]
+    latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59],
   },
 }
 
 export const BadStats: Story = {
   args: {
-     latency:[55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, ]
+    latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35],
   },
 }
 
 export const NoStats: Story = {
   args: {
-     latency:[]
+    latency: [],
   },
 }

src/components/Charts/DeviceNetworkHealth.tsx

@@ -16,21 +16,21 @@ type ChartData = {
   data: DataPoint[]
 }
 type DeviceNetworkHealthProps = {
-  latency: number[];
+  latency: number[]
-};
+}
 
 const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false)
 
-  const THRESHOLD = 60;
+  const THRESHOLD = 60
-  const GOOD_COLOR = '#8DC6BC';
+  const GOOD_COLOR = '#8DC6BC'
-  const POOR_COLOR_LATENCY = '#D92344';
+  const POOR_COLOR_LATENCY = '#D92344'
 
   const processLatency = (latency: number[], id: string) => {
-    const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue }));
+    const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue }))
-    const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0;
+    const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
-    const message = currentLatency < THRESHOLD ? 'Good' : 'Poor';
+    const message = currentLatency < THRESHOLD ? 'Good' : 'Poor'
-    const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY;
+    const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY
 
     return {
       id,
@@ -38,12 +38,12 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
       data: dataObj,
       currentLatency,
       message,
-    };
+    }
-  };
+  }
 
-  const processedLatency = processLatency(latency, 'latency');
+  const processedLatency = processLatency(latency, 'latency')
 
-  const chartData: ChartData[] = [processedLatency];
+  const chartData: ChartData[] = [processedLatency]
 
   return (
     <ShadowBox
@@ -53,7 +53,11 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
         minHeight: '135px',
         borderRadius: '16px',
         border: processedLatency.message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
-        backgroundColor: isHovered ? '#f8f6ff' : (processedLatency.message === 'Poor' ? '#fefafa' : '#fff'),
+        backgroundColor: isHovered
+          ? '#f8f6ff'
+          : processedLatency.message === 'Poor'
+          ? '#fefafa'
+          : '#fff',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -81,7 +85,13 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
           <IconText
-            icon={processedLatency.message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+            icon={
+              processedLatency.message === 'Good' ? (
+                <CheckCircleIcon size={16} />
+              ) : (
+                <IncorrectIcon size={16} />
+              )
+            }
             weight={'semibold'}
           >
             {processedLatency.message}
@@ -93,7 +103,7 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
           )}
         </XStack>
       </YStack>
-    </ShadowBox >
+    </ShadowBox>
   )
 }
 

src/components/Charts/DeviceStorageHealth.tsx

@@ -9,15 +9,15 @@ interface DeviceStorageHealthProps {
   storage: number
   maxStorage: number
 }
-const GOOD_COLOR = '#8DC6BC';
+const GOOD_COLOR = '#8DC6BC'
-const POOR_COLOR = '#E95460';
+const POOR_COLOR = '#E95460'
 
 const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps) => {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false)
 
-  const message = storage < maxStorage ? 'Good' : 'Poor';
+  const message = storage < maxStorage ? 'Good' : 'Poor'
-  const free = maxStorage - storage;
+  const free = maxStorage - storage
-  const utilization = (storage / (maxStorage || 1)) * 100;
+  const utilization = (storage / (maxStorage || 1)) * 100
 
   const data = (free: number) => {
     return [
@@ -33,7 +33,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
         value: free,
         color: '#E7EAEE',
       },
-    ];
+    ]
   }
   return (
     <Shadow
@@ -43,7 +43,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
         minHeight: '135px',
         borderRadius: '16px',
         border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
-        backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
+        backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -64,7 +64,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
               height: '4.75rem',
             }}
           >
-            <StandardGauge data={data(free)} isInteractive={false}/>
+            <StandardGauge data={data(free)} isInteractive={false} />
           </Stack>
           <YStack space={'$3'}>
             <Text size={15} weight={'semibold'}>

src/components/Charts/StandardLineChart.tsx

@@ -31,7 +31,6 @@ const StandartLineChart = ({ data, isInteractive }: StandartLineChartProps) => {
         stacked: true,
         reverse: false,
       }}
-
       axisTop={null}
       axisRight={null}
       axisBottom={null}

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -45,10 +45,7 @@ const DeviceHealthCheck = () => {
             currentMemory={deviceHealthState.memory}
             maxMemory={deviceHealthState.maxMemory}
           />
-          <DeviceNetworkHealth
+          <DeviceNetworkHealth latency={deviceHealthState.latency} />
-            latency={deviceHealthState.latency}
-
-          />
         </XStack>
         <HealthInfoSection
           usedStorage={120}

src/pages/PairDevice/GenerateId.tsx

@@ -33,7 +33,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
           icon={<CompleteIdIcon size={20} />}
           onPress={generateIdHandler}
         >
-         Regenerate ID
+          Regenerate ID
         </Button>
       </XStack>
       <YStack space={'$2'}>

src/redux/deviceHealthCheck/slice.ts

@@ -7,7 +7,6 @@ interface DeviceHealthState {
   memory: number[]
   maxMemory: number
   latency: number[]
-
 }
 
 const initialState: DeviceHealthState = {
@@ -17,7 +16,6 @@ const initialState: DeviceHealthState = {
   memory: [15, 31, 5, 14, 20, 81, 50, 34, 12, 123, 4, 90, 56, 35, 90],
   maxMemory: 120,
   latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59],
-
 }
 
 const deviceHealthSlice = createSlice({
@@ -41,12 +39,8 @@ const deviceHealthSlice = createSlice({
       state.memory = action.payload.memory
       state.maxMemory = action.payload.maxMemory
     },
-    setNetworkHealth: (
+    setNetworkHealth: (state: DeviceHealthState, action: PayloadAction<{ latency: number[] }>) => {
-      state: DeviceHealthState,
-      action: PayloadAction<{ latency: number[] }>,
-    ) => {
       state.latency = action.payload.latency
-
     },
   },
 })