From 49862c397e902c5eedd6659a576574cd46463c73 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 9 Apr 2024 17:39:40 +0300
Subject: [PATCH] feat(management-tabs): use slice and fix filtering

---
 .../ValidatorManagement/ManagementTabs.tsx    | 29 +++++++++++++------
 src/redux/ValidatorManagement/slice.ts        |  4 ++-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx
index 8ec4b318..b6c9c008 100644
--- a/src/pages/ValidatorManagement/ManagementTabs.tsx
+++ b/src/pages/ValidatorManagement/ManagementTabs.tsx
@@ -1,11 +1,13 @@
 import { Tabs } from '@status-im/components'
 import { Stack, XStack } from 'tamagui'
 import { useEffect, useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { VALIDATOR_TABS_MANAGEMENT, VALIDATORS_DATA } from '../../constants'
 import ManagementTable from './ManagementTable/ManagementTable'
 import SearchManagement from './ManagementTable/SearchManagement'
 import DropdownFilter from './ManagementTable/DropdownFilter'
+import { RootState } from '../../redux/store'
 
 export type Validator = {
   name: string
@@ -46,25 +48,31 @@ const isValidNameOrAddress = (
 const ManagementTabs = () => {
   const [searchValue, setSearchValue] = useState('')
   const [validators, setValidators] = useState<Validator[]>([])
+  const { currentTab } = useSelector(
+    (state: RootState) => state.validatorManagement,
+  )
+  const dispatch = useDispatch()
 
   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])
+    return validators
+      .filter(validator => isValidStatus(validator.status, currentTab))
+      .filter(validator =>
+        isValidNameOrAddress(validator.name, validator.address, searchValue),
+      )
+  }, [validators, searchValue, currentTab])
 
   const changeSearchValue = (value: string) => {
     setSearchValue(value)
   }
 
+  const changeCurrentTabHandler = (value: string) => {
+    dispatch({ type: 'validatorManagement/setCurrentTab', payload: value })
+  }
+
   return (
     <div
       style={{
@@ -75,7 +83,10 @@ const ManagementTabs = () => {
         paddingBottom: '12px',
       }}
     >
-      <Tabs defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}>
+      <Tabs
+        defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}
+        onValueChange={changeCurrentTabHandler}
+      >
         <div
           className="tabs transparent-scrollbar"
           style={{
diff --git a/src/redux/ValidatorManagement/slice.ts b/src/redux/ValidatorManagement/slice.ts
index 880fe229..524ed0d1 100644
--- a/src/redux/ValidatorManagement/slice.ts
+++ b/src/redux/ValidatorManagement/slice.ts
@@ -1,11 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import { VALIDATOR_TABS_MANAGEMENT } from '../../constants'
+
 type ValidatorManagementType = {
   currentTab: string
 }
 
 const initialState: ValidatorManagementType = {
-  currentTab: '',
+  currentTab: VALIDATOR_TABS_MANAGEMENT[0],
 }
 
 const ValidatorManagementSlice = createSlice({