From dc4d82447b163ad3df84657b4e935b2b5a724b5b Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 25 Oct 2017 19:05:01 -0500
Subject: [PATCH] feature(channel search): hard code channel search bar style

---
 app/routes/channels/components/Channels.js    | 22 ++++++++++--
 app/routes/channels/components/Channels.scss  | 35 +++++++++++++++++++
 .../channels/containers/ChannelsContainer.js  |  6 ++++
 .../wallet/containers/WalletContainer.js      |  2 --
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
index e11cf3d1..b3b692c4 100644
--- a/app/routes/channels/components/Channels.js
+++ b/app/routes/channels/components/Channels.js
@@ -1,17 +1,33 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { MdSearch } from 'react-icons/lib/md'
 import styles from './Channels.scss'
 
 class Channels extends Component {
-  componentWillMount() {}
+  componentWillMount() {
+    this.props.fetchChannels()
+  }
 
   render() {
     const {
-      
+      channels
     } = this.props
 
     return (
-      <div>
+      <div className={styles.container}>
+        <div className={styles.search}>
+          <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
+            <MdSearch />
+          </label>
+          <input
+            value={''}
+            onChange={event => console.log('event: ', event)}
+            className={`${styles.text} ${styles.input}`}
+            placeholder='Search channels by funding transaction, channel id, remote public key, etc'
+            type='text'
+            id='invoiceSearch'
+          />
+        </div>
         channels
       </div>
     )
diff --git a/app/routes/channels/components/Channels.scss b/app/routes/channels/components/Channels.scss
index e69de29b..99007251 100644
--- a/app/routes/channels/components/Channels.scss
+++ b/app/routes/channels/components/Channels.scss
@@ -0,0 +1,35 @@
+@import '../../../variables.scss';
+
+.container {
+
+}
+
+.search {
+  height: 75px;
+  padding: 2px;
+  border-bottom: 1px solid $darkgrey;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 70px;
+    font-size: 25px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text {
+    width: 95%;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: 68px;
+    font-size: 18px;
+  }
+}
\ No newline at end of file
diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js
index 6a98ed3a..b388c4f8 100644
--- a/app/routes/channels/containers/ChannelsContainer.js
+++ b/app/routes/channels/containers/ChannelsContainer.js
@@ -1,12 +1,18 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
+import {
+  fetchChannels,
+} from 'reducers/channels'
+
 import Channels from '../components/Channels'
 
 const mapDispatchToProps = {
+  fetchChannels
 }
 
 const mapStateToProps = state => ({
+  channels: state.channels
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Channels))
diff --git a/app/routes/wallet/containers/WalletContainer.js b/app/routes/wallet/containers/WalletContainer.js
index fb7879d0..d0744edd 100644
--- a/app/routes/wallet/containers/WalletContainer.js
+++ b/app/routes/wallet/containers/WalletContainer.js
@@ -12,7 +12,6 @@ import {
 } from 'reducers/peers'
 import {
   fetchChannels,
-  fetchPendingChannels,
   setChannel,
   channelsSelectors,
   setChannelForm,
@@ -30,7 +29,6 @@ const mapDispatchToProps = {
   disconnectRequest,
 
   fetchChannels,
-  fetchPendingChannels,
   setChannel,
   openChannel,
   closeChannel,