From 3037f620a6160cd97ea864f68cf75d2f06d7dd7f Mon Sep 17 00:00:00 2001
From: pcrane <trigunshin@gmail.com>
Date: Wed, 17 Jan 2018 17:00:58 -0500
Subject: [PATCH] Initial setup of filterbox on popover.

Did PairFilterBox pretty quick, open to refactors.

Styling's very basic; good-enough?
---
 src/components/app/PairsFilterBox.js | 58 ++++++++++++++++++++++++++++
 src/components/app/PairsPopover.js   |  7 +++-
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/components/app/PairsFilterBox.js

diff --git a/src/components/app/PairsFilterBox.js b/src/components/app/PairsFilterBox.js
new file mode 100644
index 0000000..1a23ce7
--- /dev/null
+++ b/src/components/app/PairsFilterBox.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+
+class PairsFilterBox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {filterText: ''};
+    this.onStateChange = this.onStateChange.bind(this);
+    this.onFilterChange = (e) => {this.onStateChange('filterText', e.target.value)};
+    this.renderChildren = this.renderChildren.bind(this);
+    this.getFilteredPairs = this.getFilteredPairs.bind(this);
+  }
+
+  onStateChange(key, value) {
+    this.setState({[key]: value});
+  }
+
+  getFilteredPairs(pairs) {
+    const ret = {};
+    const filterText = this.state.filterText.toLowerCase();
+
+    if(filterText.length === 0) return pairs;
+
+    const pairKeys = Object.keys(pairs);
+    pairKeys.forEach((key) => {
+      const pair = pairs[key];
+
+      if(pair.addr.toLowerCase().includes(filterText) || pair.name.toLowerCase().includes(filterText)) {
+        ret[key] = pair;
+      }
+    });
+
+    return ret;
+  }
+
+  renderChildren() {
+    const filteredPairs = this.getFilteredPairs(this.props.pairs);
+
+    return React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, {
+        pairs: filteredPairs
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <input type="search" value={this.state.filterText} style={{width: '100%'}}
+          placeholder="Filter by token (ETH) or contract address (0x0...)" onChange={this.onFilterChange}/>
+        <div>
+          {this.renderChildren()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PairsFilterBox;
diff --git a/src/components/app/PairsPopover.js b/src/components/app/PairsPopover.js
index 1e9abec..44d708b 100644
--- a/src/components/app/PairsPopover.js
+++ b/src/components/app/PairsPopover.js
@@ -3,11 +3,16 @@ import { AnchorButton, PopoverInteractionKind } from '@blueprintjs/core';
 
 import PairsTable from './PairsTable';
 import PopoverBlockingScroll from '../common/PopoverBlockingScroll';
+import PairsFilterBox from './PairsFilterBox';
 
 function PairsPopover({ pairs, lastUpdated }) {
   return (
     <PopoverBlockingScroll
-      content={<PairsTable pairs={pairs} lastUpdated={lastUpdated} />}
+      content={
+        <PairsFilterBox pairs={pairs}>
+          <PairsTable lastUpdated={lastUpdated} />
+        </PairsFilterBox>
+      }
       inline={false}
       interactionKind={PopoverInteractionKind.CLICK}
       placement="bottom-start"