fix(channel): display open channels and tweak channel design

app/components/Channels/Channel.js

@@ -1,11 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Channel.scss'
 
 const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
   <li className={styles.channel} onClick={() => setChannel(channel)}>
-    <h1 className={styles.status}>Status: Open</h1>
+    <header>
+      <span className={styles.status}>Open</span>
+      {
+        channel.active ? 
+          <span className={styles.active}>
+            <FaCircle />
+            <i>Active</i>
+          </span>
+          :
+          <span className={styles.notactive}>
+            <FaCircle />
+            <i>Not Active</i>
+          </span>
+      }
+    </header>
     <div className={styles.left}>
       <section className={styles.remotePubkey}>
         <span>Remote Pubkey</span>
@@ -30,6 +45,7 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
       </section>
       <div className={styles.balances}>
         <section>
+          <span>Local</span>
           <h4>
             {
               ticker.currency === 'btc' ?
@@ -38,9 +54,9 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
                 btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
             }
           </h4>
-          <span>Local</span>
         </section>
         <section>
+          <span>Remote</span>
           <h4>
             {
               ticker.currency === 'btc' ?
@@ -49,7 +65,6 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
                 btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
             }
           </h4>
-          <span>Remote</span>
         </section>
       </div>
     </div>

app/components/Channels/Channel.scss

@@ -2,12 +2,13 @@
 
 .channel {
 	position: relative;
-	background: $white;
+	background: $lightgrey;
+	margin: 5px 0;
 	padding: 10px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	border-top: 1px solid $grey;
+	border-top: 1px solid $white;
 	cursor: pointer;
 	transition: all 0.25s;
 
@@ -19,17 +20,36 @@
 		border: none;
 	}
 
-	.status {
-		color: $main;
+	header {
 		position: absolute;
-		top: 0;
+		top: 10px;
 		left: 10px;
-		padding: 10px;
-		text-transform: uppercase;
-		font-weight: bold;
-		font-size: 10px;
+
+		.status, .active, .notactive {
+			padding: 10px;
+			text-transform: uppercase;
+			font-weight: bold;
+			font-size: 10px;
+		}
+
+		.status {
+			color: $main;
+		}
+
+		.active i, .notactive i {
+			margin-left: 5px;
+		}
+
+		.active {
+			color: $green;
+		}
+
+		.notactive {
+			color: $red;
+		}
 	}
 
+
 	.left, .right {
 		padding: 0 10px;
 		margin-bottom: 5;
@@ -60,7 +80,6 @@
 
 	.left {
 		flex: 7;
-		border-right: 1px solid $grey;
 	}
 
 	.right {
@@ -68,7 +87,6 @@
 
 		.capacity {
 			text-align: center;
-			border-bottom: 1px solid $grey;
 			margin-bottom: 10px;
 		}
 
@@ -84,10 +102,6 @@
 					color: $main;
 					font-size: 16px;
 				}
-
-				&:first-child {
-					border-right: 1px solid $grey;
-				}
 			}
 		}
 	}

app/routes/channels/components/Channels.js

@@ -1,7 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+
 import { FaAlignJustify, FaThLarge } from 'react-icons/lib/fa'
 import { MdSearch } from 'react-icons/lib/md'
+
+import Channel from 'components/Channels/Channel'
+
 import styles from './Channels.scss'
 
 class Channels extends Component {
@@ -11,8 +15,13 @@ class Channels extends Component {
 
   render() {
     const {
-      channels
+      channels: { channels },
+      allChannels,
+
+      ticker,
+      currentTicker
     } = this.props
+    console.log('channels: ', channels)
 
     return (
       <div className={styles.container}>
@@ -46,7 +55,23 @@ class Channels extends Component {
         </header>
 
         <div className={styles.channels}>
-          channels
+          <ul>
+          {
+            allChannels.map((channel, index) => {
+              console.log('channel: ', channel)
+
+              return (
+                <Channel
+                  key={index}
+                  ticker={ticker}
+                  channel={channel}
+                  setChannel={() => console.log('hi')}
+                  currentTicker={currentTicker}
+                />
+              )
+            })
+          }
+          </ul>
         </div>
       </div>
     )

app/routes/channels/components/Channels.scss

@@ -65,4 +65,8 @@
 
 .createChannelContainer {
   padding: 40px;
-}
+}
+
+.channels {
+  padding: 10px 40px 40px 40px;
+}

app/routes/channels/containers/ChannelsContainer.js

@@ -3,8 +3,12 @@ import { connect } from 'react-redux'
 
 import {
   fetchChannels,
+
+  channelsSelectors
 } from 'reducers/channels'
 
+import { tickerSelectors } from 'reducers/ticker'
+
 import Channels from '../components/Channels'
 
 const mapDispatchToProps = {
@@ -12,7 +16,11 @@ const mapDispatchToProps = {
 }
 
 const mapStateToProps = state => ({
-  channels: state.channels
+  channels: state.channels,
+  ticker: state.ticker,
+
+  allChannels: channelsSelectors.allChannels(state),
+  currentTicker: tickerSelectors.currentTicker(state)
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Channels))