From ad0211fda0c86b08ff4184f3b1a8c1e4d5bde00e Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 31 Oct 2018 12:50:28 +0100 Subject: [PATCH] Implementing Search Filter by Token --- .../safe/component/Balances/Tokens/index.jsx | 31 ++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/routes/safe/component/Balances/Tokens/index.jsx b/src/routes/safe/component/Balances/Tokens/index.jsx index 32316156..0b4c30c4 100644 --- a/src/routes/safe/component/Balances/Tokens/index.jsx +++ b/src/routes/safe/component/Balances/Tokens/index.jsx @@ -102,10 +102,24 @@ type Props = { tokens: List, } -class Tokens extends React.Component { - requestSearch = () => { - // eslint-disable-next-line - console.log("Filtering by name or symbol...") +type State = { + filter: string, +} + +const filterBy = (filter: string, tokens: List): List => + tokens.filter((token: Token) => !filter || token.get('symbol').toLowerCase().startsWith(filter.toLowerCase())) + +class Tokens extends React.Component { + state = { + filter: '', + } + + onCancelSearch = () => { + this.setState(() => ({ filter: '' })) + } + + onChangeSearchBar = (value) => { + this.setState(() => ({ filter: value })) } render() { @@ -117,6 +131,8 @@ class Tokens extends React.Component { searchContainer: classes.searchContainer, } + const filteredTokens = filterBy(this.state.filter, tokens) + return ( @@ -132,20 +148,21 @@ class Tokens extends React.Component { } + onChange={this.onChangeSearchBar} + onCancelSearch={this.onCancelSearch} /> - - {tokens.map((token: Token) => ( + {filteredTokens.map((token: Token) => ( {token.get('name')}