feat(validator-management): move filtered validators into redux

src/pages/ValidatorManagement/ManagementTable/ManagementTable.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import ManagementTable from './ManagementTable'
-import { VALIDATORS_DATA } from '../../../constants'
 
 const meta = {
   title: 'ValidatorManagement/ManagementTable',
@@ -18,7 +17,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    filteredValidators: VALIDATORS_DATA,
-  },
+  args: {},
 }

src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx

@@ -2,19 +2,14 @@ import { YStack } from 'tamagui'
 
 import ManagementTableHeader from './ManagementTableHeader'
 import ManagementTableBody from './ManagementTableBody'
-import { Validator } from '../ManagementTabs'
 import './ManagementTable.module.css'
 
-type ManagementTableProps = {
-  filteredValidators: Validator[]
-}
-
-const ManagementTable = ({ filteredValidators }: ManagementTableProps) => {
+const ManagementTable = () => {
   return (
     <YStack>
       <table className="validator-management-table">
         <ManagementTableHeader />
-        <ManagementTableBody filteredValidators={filteredValidators} />
+        <ManagementTableBody />
       </table>
     </YStack>
   )

src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import ManagementTableBody from './ManagementTableBody'
-import { VALIDATORS_DATA } from '../../../constants'
 
 const meta = {
   title: 'ValidatorManagement/ManagementTableBody',
@@ -18,7 +17,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    filteredValidators: VALIDATORS_DATA,
-  },
+  args: {},
 }

src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx

@@ -1,15 +1,14 @@
 import { Text } from '@status-im/components'
+import { useSelector } from 'react-redux'
 
 import ManagementTableRow from './ManagementTableRow'
-import { Validator } from '../ManagementTabs'
+import { RootState } from '../../../redux/store'
 
-type ManagementTableBodyProps = {
-  filteredValidators: Validator[]
-}
+const ManagementTableBody = () => {
+  const { filteredValidators } = useSelector(
+    (state: RootState) => state.validatorManagement,
+  )
 
-const ManagementTableBody = ({
-  filteredValidators,
-}: ManagementTableBodyProps) => {
   return (
     <tbody>
       {filteredValidators.map(validator => (

src/pages/ValidatorManagement/ManagementTabs.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from '@status-im/components'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { VALIDATOR_TABS_MANAGEMENT, VALIDATORS_DATA } from '../../constants'
@@ -28,20 +28,13 @@ const isValidNameOrAddress = (
   validatorName: string,
   validatorAddress: string,
   searchValue: string,
-) => {
-  if (
-    validatorName.includes(searchValue) ||
-    validatorAddress.includes(searchValue)
-  ) {
-    return true
-  }
-  return false
-}
+) =>
+  validatorName.includes(searchValue) || validatorAddress.includes(searchValue)
 
 const ManagementTabs = () => {
   const [searchValue, setSearchValue] = useState('')
   const [validators, setValidators] = useState<Validator[]>([])
-  const { currentTab } = useSelector(
+  const { currentTab, filteredValidators } = useSelector(
     (state: RootState) => state.validatorManagement,
   )
   const dispatch = useDispatch()
@@ -50,12 +43,17 @@ const ManagementTabs = () => {
     setValidators(VALIDATORS_DATA)
   }, [])
 
-  const filteredValidators = useMemo(() => {
-    return validators
+  useEffect(() => {
+    const newValidators = validators
       .filter(validator => isValidStatus(validator.status, currentTab))
       .filter(validator =>
         isValidNameOrAddress(validator.name, validator.address, searchValue),
       )
+
+    dispatch({
+      type: 'validatorManagement/setFilteredValidators',
+      payload: newValidators,
+    })
   }, [validators, searchValue, currentTab])
 
   const changeSearchValue = (value: string) => {
@@ -96,7 +94,7 @@ const ManagementTabs = () => {
         </div>
         {VALIDATOR_TABS_MANAGEMENT.map(tab => (
           <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
-            <ManagementTable filteredValidators={filteredValidators} />
+            <ManagementTable />
           </Tabs.Content>
         ))}
       </Tabs>

src/redux/ValidatorManagement/slice.ts

@@ -1,13 +1,16 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 import { VALIDATOR_TABS_MANAGEMENT } from '../../constants'
+import { Validator } from '../../pages/ValidatorManagement/ManagementTabs'
 
 type ValidatorManagementType = {
   currentTab: string
+  filteredValidators: Validator[]
 }
 
 const initialState: ValidatorManagementType = {
   currentTab: VALIDATOR_TABS_MANAGEMENT[0],
+  filteredValidators: [],
 }
 
 const ValidatorManagementSlice = createSlice({
@@ -17,9 +20,13 @@ const ValidatorManagementSlice = createSlice({
     setCurrentTab: (state, action) => {
       state.currentTab = action.payload
     },
+    setFilteredValidators: (state, action) => {
+      state.filteredValidators = action.payload
+    },
   },
 })
 
-export const { setCurrentTab } = ValidatorManagementSlice.actions
+export const { setCurrentTab, setFilteredValidators } =
+  ValidatorManagementSlice.actions
 
 export default ValidatorManagementSlice.reducer