feat: move search to save state between tabs
This commit is contained in:
parent
41c1079767
commit
8a5afe16e4
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue