From ad0211fda0c86b08ff4184f3b1a8c1e4d5bde00e Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
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<Token>,
 }
 
-class Tokens extends React.Component<Props> {
-  requestSearch = () => {
-    // eslint-disable-next-line
-    console.log("Filtering by name or symbol...")
+type State = {
+  filter: string,
+}
+
+const filterBy = (filter: string, tokens: List<Token>): List<Token> =>
+  tokens.filter((token: Token) => !filter || token.get('symbol').toLowerCase().startsWith(filter.toLowerCase()))
+
+class Tokens extends React.Component<Props, State> {
+  state = {
+    filter: '',
+  }
+
+  onCancelSearch = () => {
+    this.setState(() => ({ filter: '' }))
+  }
+
+  onChangeSearchBar = (value) => {
+    this.setState(() => ({ filter: value }))
   }
 
   render() {
@@ -117,6 +131,8 @@ class Tokens extends React.Component<Props> {
       searchContainer: classes.searchContainer,
     }
 
+    const filteredTokens = filterBy(this.state.filter, tokens)
+
     return (
       <React.Fragment>
         <Block className={classes.root}>
@@ -132,20 +148,21 @@ class Tokens extends React.Component<Props> {
             <SearchBar
               placeholder="Search by name or symbol"
               classes={searchClasses}
-              onRequestSearch={this.requestSearch}
               searchIcon={<div />}
+              onChange={this.onChangeSearchBar}
+              onCancelSearch={this.onCancelSearch}
             />
             <Spacer />
             <Divider />
             <Spacer />
-            <Button variant="contained" size="small" color="secondary" className={classes.add}>
+            <Button variant="contained" size="small" color="secondary" className={classes.add} disabled>
               + ADD CUSTOM TOKEN
             </Button>
           </Row>
           <Hairline />
         </Block>
         <MuiList className={classes.list}>
-          {tokens.map((token: Token) => (
+          {filteredTokens.map((token: Token) => (
             <ListItem key={token.get('address')} className={classes.token}>
               <ListItemIcon>
                 <Img src={token.get('logoUrl')} height={28} alt={token.get('name')} />