From 3ea108b2469c094a7847f68953adacf308804a90 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:12:39 +0300 Subject: [PATCH] feat: implement states for percentages --- src/components/HealthInfoSection.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index c00ce1eb..52ae0fbf 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,22 +1,32 @@ import { YStack } from 'tamagui' +import { useEffect, useState } from 'react' +// Add more constant texts const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional node services.' const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' -const GOOD_RAM_MEMORY_TEXT = 'There is sufficient ram required for selected services.' +const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' const NETWORK_TEXT = 'Network Latency is low.' + type HealthInfoSectionProps = { usedStorage: number maxStorage: number - usedCpuClockRate: number usedRamMemory: number maxRamMemory: number - network: number } const HealthInfoSection = (props: HealthInfoSectionProps) => { - const { usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network } = props + const { usedStorage, maxStorage, usedRamMemory, maxRamMemory } = props - console.log(usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network) + const [usedStoragePercentage, setUsedStoragePercentage] = useState(0) + const [usedRamMemoryPercentage, setUsedRamMemoryPercentage] = useState(0) + + useEffect(() => { + setUsedStoragePercentage((usedStorage / maxStorage) * 100) + }, [usedStorage, maxStorage]) + + useEffect(() => { + setUsedRamMemoryPercentage((usedRamMemory / maxRamMemory) * 100) + }, [usedRamMemory, maxRamMemory]) return }