useDataFilter hook

[W3stside]

Changes what used to be this code inside DepositWidget/index for filtering into:

// ... DepositWidget Code ...
const [search, setSearch] = useState('')
  const [hideZeroBalances, setHideZeroBalances] = useState(false)

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setSearch(e.target.value)

  const handleHideZeroBalances = (e: React.ChangeEvent<HTMLInputElement>): void => setHideZeroBalances(e.target.checked)

  const { value: debouncedSearch, setImmediate: setDebouncedSearch } = useDebounce(search, 500)

  const clearFilters = (): void => {
    setSearch('')
    setDebouncedSearch('')
    setHideZeroBalances(false)
  }

  const [{ localTokens }] = useGlobalState()

  const filteredBalances = useMemo(() => {
    if ((!debouncedSearch && localTokens.disabled.size === 0) || !balances || balances.length === 0) return balances

    const searchTxt = debouncedSearch.trim().toLowerCase()

    return balances.filter(({ symbol, name, address }) => {
      if (localTokens.disabled.has(address)) return false

      if (searchTxt === '') return true

      return (
        symbol?.toLowerCase().includes(searchTxt) ||
        name?.toLowerCase().includes(searchTxt) ||
        address.toLowerCase().includes(searchTxt)
      )
    })
  }, [debouncedSearch, balances, localTokens.disabled])

  const displayedBalances = useMemo(() => {
    if (!hideZeroBalances || !filteredBalances || filteredBalances.length === 0) return filteredBalances
    return filteredBalances.filter(({ totalExchangeBalance, pendingWithdraw, walletBalance }) => {
      return !totalExchangeBalance.isZero() || !pendingWithdraw.amount.isZero() || !walletBalance.isZero()
    })
  }, [hideZeroBalances, filteredBalances])

into

// ... DepositWidget Code ...
const [{ localTokens }] = useGlobalState()

  const { filteredData: filteredBalances, search, handleSearch } = useDataFilter({
    data: balances,
    filterFnFactory: customFilterFnFactory((params: TokenDetails) => localTokens.disabled.has(params.address)),
    customStopCheck: () => localTokens.disabled.size === 0,
  })

  const {
    filteredData: displayedBalances,
    showFilter: hideZeroBalances,
    handleToggleFilter: handleHideZeroBalances,
    clearFilters,
  } = useDataFilter({
    data: filteredBalances,
    filterFnFactory: () => customHideZeroFilterFn,
    isSearchFilter: false,
  })
// ... rest of DepositWidget Code ...

From the useDataFilter hook

Will reuuse this logic inside OrdersWidget so made sense to move into own file

Though I am not sure if this is the cleanest of even a necessary implementation so feedback obv welcome

[ghost]

Travis automatic deployment:
https://pr1094--dexreact.review.gnosisdev.com

[anxolin]

Cool!

[Velenir]

Really like how reusable useDataFilter is 👍