feat(management): move validators and filtering

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<typeof meta>
 
 export const Default: Story = {
   args: {
-    searchValue: '',
-    tab: 'Active',
+    filteredValidators: VALIDATORS_DATA,
   },
 }

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<Validator[]>([])
-
-  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 (
     <YStack>
       <table className="validator-management-table">

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[]

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<Validator[]>([])
+
+  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 = () => {
         </div>
         {VALIDATOR_TABS_MANAGEMENT.map(tab => (
           <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
-            <ManagementTable tab={tab} searchValue={searchValue} />
+            <ManagementTable filteredValidators={filteredValidators} />
           </Tabs.Content>
         ))}
       </Tabs>