fix: revert simplify search bar filter string handling and reduce # of state changes" (#4731)

Revert "fix: simplify search bar filter string handling and reduce # of state changes (#4716)"

This reverts commit 86785c72.

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
 import useDebounce from 'hooks/useDebounce'
-import { useResetAtom, useUpdateAtom } from 'jotai/utils'
+import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -59,17 +59,18 @@ const SearchInput = styled.input`
 `
 
 export default function SearchBar() {
-  const [localFilterString, setLocalFilterString] = useState('')
+  const currentString = useAtomValue(filterStringAtom)
+  const [localFilterString, setLocalFilterString] = useState(currentString)
   const setFilterString = useUpdateAtom(filterStringAtom)
-  const resetFilterString = useResetAtom(filterStringAtom)
   const debouncedLocalFilterString = useDebounce(localFilterString, 300)
 
+  useEffect(() => {
+    setLocalFilterString(currentString)
+  }, [currentString])
+
   useEffect(() => {
     setFilterString(debouncedLocalFilterString)
-    return () => {
-      resetFilterString()
-    }
-  }, [debouncedLocalFilterString, setFilterString, resetFilterString])
+  }, [debouncedLocalFilterString, setFilterString])
 
   return (
     <SearchBarContainer>

src/pages/Tokens/index.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { PageName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
+import { filterStringAtom } from 'components/Tokens/state'
 import FavoriteButton from 'components/Tokens/TokenTable/FavoriteButton'
 import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
 import SearchBar from 'components/Tokens/TokenTable/SearchBar'
@@ -10,7 +11,9 @@ import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/Toke
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { isValidBackendChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
-import { useNavigate } from 'react-router-dom'
+import { useResetAtom } from 'jotai/utils'
+import { useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -67,6 +70,12 @@ const FiltersWrapper = styled.div`
 `
 
 const Tokens = () => {
+  const resetFilterString = useResetAtom(filterStringAtom)
+  const location = useLocation()
+  useEffect(() => {
+    resetFilterString()
+  }, [location, resetFilterString])
+
   const navigate = useNavigate()
   useOnGlobalChainSwitch((chain) => {
     if (isValidBackendChainName(chain)) navigate(`/tokens/${chain.toLowerCase()}`)