status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-10 02:24:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(health-check-page): replace resize event with custom hook

Browse Source
This commit is contained in:
RadoslavDimchev 2024-02-05 22:37:26 +02:00 committed by Radoslav Dimchev
parent 243f7b70e0
commit 7bb9582795
1 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
View File

@ -1,39 +1,31 @@
import { useSelector } from 'react-redux'
import { Stack, XStack, YStack } from 'tamagui' import { Stack, XStack, YStack } from 'tamagui'
import { CloseCircleIcon } from '@status-im/icons'
import { Button, InformationBox } from '@status-im/components'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo' import NimbusLogo from '../../components/Logos/NimbusLogo'
import Titles from '../../components/General/Titles' import Titles from '../../components/General/Titles'
import DeviceStorageHealth from '../../components/Charts/DeviceStorageHealth' import DeviceStorageHealth from '../../components/Charts/DeviceStorageHealth'
import DeviceCPULoad from '../../components/Charts/DeviceCPULoad' import DeviceCPULoad from '../../components/Charts/DeviceCPULoad'
import HealthInfoSection from '../../components/General/HealthInfoSection' import HealthInfoSection from '../../components/General/HealthInfoSection'
import { Button, InformationBox } from '@status-im/components'
import DeviceMemory from '../../components/Charts/DeviceMemoryHealth' import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth' import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
import { CloseCircleIcon } from '@status-im/icons'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store' import { RootState } from '../../redux/store'
import { useEffect, useState } from 'react' import { useWindowSize } from '../../hooks/useWindowSize'
const DeviceHealthCheck = () => { const DeviceHealthCheck = () => {
const deviceHealthState = useSelector( const deviceHealthState = useSelector(
(state: RootState) => state.deviceHealth, (state: RootState) => state.deviceHealth,
) )
const [windowWidth, setWindowWidth] = useState(window.innerWidth) const windowSize = useWindowSize()
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
const breakpoint = 768 const breakpoint = 768
const responsiveStyle = { const responsiveStyle = {
flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap', flexWrap: windowSize.width <= breakpoint ? 'wrap' : 'nowrap',
flexDirection: windowWidth <= breakpoint ? 'column' : 'row', flexDirection: windowSize.width <= breakpoint ? 'column' : 'row',
alignItems: 'flex-start', alignItems: 'flex-start',
width: windowWidth <= breakpoint ? '200%' : '100%', width: windowSize.width <= breakpoint ? '200%' : '100%',
} }
return ( return (