feat: move search to save state between tabs

This commit is contained in:
RadoslavDimchev 2023-11-16 00:26:40 +02:00
parent 41c1079767
commit 8a5afe16e4
2 changed files with 15 additions and 7 deletions

View File

@ -10,6 +10,8 @@ import './ManagementTable.css'
type ManagementTableProps = { type ManagementTableProps = {
tab: string tab: string
searchValue: string
changeSearchValue: (value: string) => void
} }
type Validator = { type Validator = {
@ -41,9 +43,8 @@ const isValidNumberOrAddress = (
return false return false
} }
const ManagementTable = ({ tab }: ManagementTableProps) => { const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTableProps) => {
const [validators, setValidators] = useState<Validator[]>([]) const [validators, setValidators] = useState<Validator[]>([])
const [searchValue, setSearchValue] = useState('')
useEffect(() => { useEffect(() => {
setValidators(VALIDATORS_DATA) setValidators(VALIDATORS_DATA)
@ -55,10 +56,6 @@ const ManagementTable = ({ tab }: ManagementTableProps) => {
.filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue)) .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue))
}, [validators, tab, searchValue]) }, [validators, tab, searchValue])
const changeSearchValue = (value: string) => {
setSearchValue(value)
}
return ( return (
<YStack> <YStack>
<XStack space={'$3'} justifyContent="space-between" alignItems="center"> <XStack space={'$3'} justifyContent="space-between" alignItems="center">

View File

@ -1,10 +1,17 @@
import { Tabs } from '@status-im/components' import { Tabs } from '@status-im/components'
import { Stack } from 'tamagui' import { Stack } from 'tamagui'
import { useState } from 'react'
import ManagementTable from './ManagementTable/ManagementTable' import ManagementTable from './ManagementTable/ManagementTable'
import { VALIDATOR_TABS } from '../../constants' import { VALIDATOR_TABS } from '../../constants'
const ManagementTabs = () => { const ManagementTabs = () => {
const [searchValue, setSearchValue] = useState('')
const changeSearchValue = (value: string) => {
setSearchValue(value)
}
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Tabs defaultValue={VALIDATOR_TABS[0]}> <Tabs defaultValue={VALIDATOR_TABS[0]}>
@ -19,7 +26,11 @@ const ManagementTabs = () => {
</Stack> </Stack>
{VALIDATOR_TABS.map(tab => ( {VALIDATOR_TABS.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}> <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
<ManagementTable tab={tab} /> <ManagementTable
tab={tab}
searchValue={searchValue}
changeSearchValue={changeSearchValue}
/>
</Tabs.Content> </Tabs.Content>
))} ))}
</Tabs> </Tabs>