diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx index 45bcb0c8..344ad98a 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import ManagementTable from './ManagementTable' +import { VALIDATORS_DATA } from '../../../constants' const meta = { title: 'ValidatorManagement/ManagementTable', @@ -16,7 +17,6 @@ type Story = StoryObj export const Default: Story = { args: { - searchValue: '', - tab: 'Active', + filteredValidators: VALIDATORS_DATA, }, } diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx index 28085576..d9d32731 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx @@ -1,67 +1,15 @@ -import { useEffect, useMemo, useState } from 'react' import { YStack } from 'tamagui' -import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import ManagementTableHeader from './ManagementTableHeader' import ManagementTableBody from './ManagementTableBody' +import { Validator } from '../ManagementTabs' import './ManagementTable.module.css' type ManagementTableProps = { - tab: string - searchValue: string + filteredValidators: Validator[] } -export type Validator = { - name: string - address: string - balance: number - income: number - proposals: string - attestations: string - effectiveness: number - status: string -} - -const isValidStatus = (validatorStatus: string, tabStatus: string) => { - if ( - validatorStatus === tabStatus || - tabStatus === - VALIDATOR_TABS_MANAGEMENT[VALIDATOR_TABS_MANAGEMENT.length - 1] - ) { - return true - } - return false -} - -const isValidNameOrAddress = ( - validatorName: string, - validatorAddress: string, - searchValue: string, -) => { - if ( - validatorName.includes(searchValue) || - validatorAddress.includes(searchValue) - ) { - return true - } - return false -} - -const ManagementTable = ({ tab, searchValue }: ManagementTableProps) => { - const [validators, setValidators] = useState([]) - - useEffect(() => { - setValidators(VALIDATORS_DATA) - }, []) - - const filteredValidators = useMemo(() => { - return validators - .filter(validator => isValidStatus(validator.status, tab)) - .filter(validator => - isValidNameOrAddress(validator.name, validator.address, searchValue), - ) - }, [validators, tab, searchValue]) - +const ManagementTable = ({ filteredValidators }: ManagementTableProps) => { return ( diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx index ce08a584..872852ca 100644 --- a/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx +++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx @@ -1,7 +1,7 @@ import { Text } from '@status-im/components' -import { Validator } from './ManagementTable' import ManagementTableRow from './ManagementTableRow' +import { Validator } from '../ManagementTabs' type ManagementTableBodyProps = { filteredValidators: Validator[] diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx index 852e5d7b..0d3be134 100644 --- a/src/pages/ValidatorManagement/ManagementTabs.tsx +++ b/src/pages/ValidatorManagement/ManagementTabs.tsx @@ -1,14 +1,65 @@ import { Tabs } from '@status-im/components' import { Stack, XStack } from 'tamagui' -import { useState } from 'react' +import { useEffect, useMemo, useState } from 'react' -import { VALIDATOR_TABS_MANAGEMENT } from '../../constants' +import { VALIDATOR_TABS_MANAGEMENT, VALIDATORS_DATA } from '../../constants' import ManagementTable from './ManagementTable/ManagementTable' import SearchManagement from './ManagementTable/SearchManagement' import DropdownFilter from './ManagementTable/DropdownFilter' +export type Validator = { + name: string + address: string + balance: number + income: number + proposals: string + attestations: string + effectiveness: number + status: string +} + +const isValidStatus = (validatorStatus: string, tabStatus: string) => { + if ( + validatorStatus === tabStatus || + tabStatus === + VALIDATOR_TABS_MANAGEMENT[VALIDATOR_TABS_MANAGEMENT.length - 1] + ) { + return true + } + return false +} + +const isValidNameOrAddress = ( + validatorName: string, + validatorAddress: string, + searchValue: string, +) => { + if ( + validatorName.includes(searchValue) || + validatorAddress.includes(searchValue) + ) { + return true + } + return false +} + const ManagementTabs = () => { const [searchValue, setSearchValue] = useState('') + const [validators, setValidators] = useState([]) + + useEffect(() => { + setValidators(VALIDATORS_DATA) + }, []) + + const filteredValidators = useMemo(() => { + return ( + validators + // .filter(validator => isValidStatus(validator.status, tab)) + .filter(validator => + isValidNameOrAddress(validator.name, validator.address, searchValue), + ) + ) + }, [validators, searchValue]) const changeSearchValue = (value: string) => { setSearchValue(value) @@ -60,7 +111,7 @@ const ManagementTabs = () => { {VALIDATOR_TABS_MANAGEMENT.map(tab => ( - + ))}