From 8a5afe16e4380750234e78dd00936f7a36844758 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 16 Nov 2023 00:26:40 +0200
Subject: [PATCH] feat: move search to save state between tabs

---
 .../ManagementTable/ManagementTable.tsx             |  9 +++------
 src/pages/ValidatorManagement/ManagementTabs.tsx    | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
index 107af58f..d096f42f 100644
--- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
+++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
@@ -10,6 +10,8 @@ import './ManagementTable.css'
 
 type ManagementTableProps = {
   tab: string
+  searchValue: string
+  changeSearchValue: (value: string) => void
 }
 
 type Validator = {
@@ -41,9 +43,8 @@ const isValidNumberOrAddress = (
   return false
 }
 
-const ManagementTable = ({ tab }: ManagementTableProps) => {
+const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTableProps) => {
   const [validators, setValidators] = useState<Validator[]>([])
-  const [searchValue, setSearchValue] = useState('')
 
   useEffect(() => {
     setValidators(VALIDATORS_DATA)
@@ -55,10 +56,6 @@ const ManagementTable = ({ tab }: ManagementTableProps) => {
       .filter(validator => isValidNumberOrAddress(validator.number, validator.address, searchValue))
   }, [validators, tab, searchValue])
 
-  const changeSearchValue = (value: string) => {
-    setSearchValue(value)
-  }
-
   return (
     <YStack>
       <XStack space={'$3'} justifyContent="space-between" alignItems="center">
diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx
index 32732603..3d93d0f3 100644
--- a/src/pages/ValidatorManagement/ManagementTabs.tsx
+++ b/src/pages/ValidatorManagement/ManagementTabs.tsx
@@ -1,10 +1,17 @@
 import { Tabs } from '@status-im/components'
 import { Stack } from 'tamagui'
+import { useState } from 'react'
 
 import ManagementTable from './ManagementTable/ManagementTable'
 import { VALIDATOR_TABS } from '../../constants'
 
 const ManagementTabs = () => {
+  const [searchValue, setSearchValue] = useState('')
+
+  const changeSearchValue = (value: string) => {
+    setSearchValue(value)
+  }
+
   return (
     <div style={{ width: '100%' }}>
       <Tabs defaultValue={VALIDATOR_TABS[0]}>
@@ -19,7 +26,11 @@ const ManagementTabs = () => {
         </Stack>
         {VALIDATOR_TABS.map(tab => (
           <Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
-            <ManagementTable tab={tab} />
+            <ManagementTable
+              tab={tab}
+              searchValue={searchValue}
+              changeSearchValue={changeSearchValue}
+            />
           </Tabs.Content>
         ))}
       </Tabs>