feature(channels): basic foundation for detailed channel modal

app/reducers/channels.js

@@ -1,13 +1,23 @@
+import { createSelector } from 'reselect'
 import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SET_CHANNEL = 'SET_CHANNEL'
+
 export const GET_CHANNELS = 'GET_CHANNELS'
 export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS'
 
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function setChannel(channel) {
+  return {
+    type: SET_CHANNEL,
+    channel
+  }
+}
+
 export function getChannels() {
   return {
     type: GET_CHANNELS
@@ -31,16 +41,29 @@ export const fetchChannels = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }),
+
   [GET_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
   [RECEIVE_CHANNELS]: (state, { channels }) => ({ ...state, channelsLoading: false, channels })
 }
 
+const channelsSelectors = {}
+const channelSelector = state => state.channels.channel
+
+channelsSelectors.channelModalOpen = createSelector(
+  channelSelector,
+  channel => channel ? true : false
+)
+
+export { channelsSelectors }
+
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
   channelsLoading: false,
-  channels: []
+  channels: [],
+  channel: null
 }
 
 export default function channelsReducer(state = initialState, action) {

app/routes/activity/components/components/Modal.js

@@ -4,22 +4,22 @@ import ReactModal from 'react-modal'
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-const customStyles = {
-  overlay: {
-    cursor: 'pointer'
-  },
-  content : {
-    top: 'auto',
-    left: '20%',
-    right: '0',
-    bottom: 'auto',
-    width: '40%',
-    margin: '50px auto'
-  }
-}
 
 class Modal extends Component {
-	render() {
+  render() {
+    const customStyles = {
+      overlay: {
+        cursor: 'pointer'
+      },
+      content : {
+        top: 'auto',
+        left: '20%',
+        right: '0',
+        bottom: 'auto',
+        width: '40%',
+        margin: '50px auto'
+      }
+    }
 		const {
       isOpen,
       resetObject,

app/routes/wallet/components/Wallet.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import ReactSVG from 'react-svg'
 import { FaCircle } from 'react-icons/lib/fa'
+import Channels from './components/channels'
 import styles from './Wallet.scss'
 
 class Wallet extends Component {
@@ -17,7 +18,9 @@ class Wallet extends Component {
   	const {
   		info,
   		peers: { peersLoading, peers },
-  		channels: { channelsLoading, channels }
+  		channels: { channelsLoading, channels, channel },
+      channelModalOpen,
+      setChannel
   	} = this.props
 
     return (  
@@ -32,61 +35,13 @@ class Wallet extends Component {
         		<ul>
         		</ul>
         	</div>
-        	<div className={styles.channels}>
+            <Channels
-        		<h3>Channels</h3>
+              channelsLoading={channelsLoading}
-        		<ul>
+              channels={channels}
-        			{
+              modalChannel={channel}
-        				!channelsLoading && channels.length ?
+              setChannel={setChannel}
-        					channels.map(channel => {
+              channelModalOpen={channelModalOpen}
-        						console.log('channel: ', channel)
+            />
-        						return (
-        							<li key={channel.chan_id} className={styles.channel}>
-        								<div className={styles.left}>
-        									<section className={styles.remotePubkey}>
-        										<span>
-        											Remote Pubkey
-        										</span>
-        										<h4>
-        											{channel.remote_pubkey}
-        										</h4>
-        									</section>
-        									<section className={styles.channelPoint}>
-        										<span>
-        											Channel Point
-        										</span>
-        										<h4>
-        											{channel.channel_point}
-        										</h4>
-        									</section>
-        								</div>
-        								<div className={styles.right}>
-        									<section className={styles.capacity}>
-        										<span>
-        											Capacity
-        										</span>
-        										<h2>
-        											{channel.capacity}
-        										</h2>
-        									</section>
-        									<div className={styles.balances}>
-        										<section>
-        											<h4>{channel.local_balance}</h4>
-        											<span>Local</span>
-        										</section>
-        										<section>
-        											<h4>{channel.remote_balance}</h4>
-        											<span>Remote</span>
-        										</section>
-        									</div>
-        								</div>
-        							</li>
-        						)
-        					})
-        				:
-        					'Loading...'
-        			}
-        		</ul>
-        	</div>
         </section>
       </div>
     )

app/routes/wallet/components/Wallet.scss

@@ -26,7 +26,7 @@
 .walletData {
 	padding: 60px 40px;
 
-	.peers, .channels {
+	.peers {
 		width: 75%;
 		margin: 50px auto;
 
@@ -40,74 +40,3 @@
 		}
 	}
 }
-
-.channel {
-	position: relative;
-	background: $white;
-	padding: 10px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	border-bottom: 1px solid $black;
-
-	.left, .right {
-		padding: 0 10px;
-		margin-bottom: 5;
-		
-		section {
-			margin-bottom: 20px;
-
-			span {
-				text-transform: uppercase;
-				letter-spacing: 1.6px;
-				color: $black;
-				font-size: 10px;
-				font-weight: bold;
-			}
-
-			h2 {
-				font-size: 30px;
-				padding: 5px 0;
-				color: $main;
-			}
-
-			h4 {
-				margin-top: 5px;
-			}
-		}
-	}
-
-	.left {
-		flex: 7;
-		border-right: 1px solid $grey;
-	}
-
-	.right {
-		flex: 3;
-
-		.capacity {
-			text-align: center;
-			border-bottom: 1px solid $grey;
-			margin-bottom: 10px;
-		}
-
-		.balances {
-			display: flex;
-			justify-content: space-between;
-
-			section {
-				flex: 5;
-				text-align: center;
-
-				h4 {
-					color: $main;
-					font-size: 20px;
-				}
-
-				&:first-child {
-					border-right: 1px solid $grey;
-				}
-			}
-		}
-	}
-}

app/routes/wallet/components/components/Channels/Channels.js

@@ -0,0 +1,42 @@
+// @flow
+import React, { Component } from 'react'
+import ChannelModal from './components/ChannelModal'
+import Channel from './components/Channel'
+import styles from './Channels.scss'
+
+class Channels extends Component {
+  render() {
+    const {
+        channelsLoading,
+        channels,
+        modalChannel,
+        setChannel,
+        channelModalOpen
+    } = this.props
+    return (
+        <div className={styles.channels}>
+            <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel}>
+                <h1>yooooo</h1>
+            </ChannelModal>
+            <h3>Channels</h3>
+            <ul>
+                {
+                    !channelsLoading && channels.length ? 
+                        channels.map(channel => 
+                            <Channel
+                                key={channel.chan_id}
+                                channel={channel}
+                                setChannel={setChannel} 
+                            />
+                        )
+                    :
+                        'Loading...'
+                }
+            </ul>
+        </div>
+    )
+  }
+}
+
+
+export default Channels

app/routes/wallet/components/components/Channels/Channels.scss

@@ -0,0 +1,15 @@
+@import '../../../../../variables.scss';
+
+.channels {
+		width: 75%;
+		margin: 50px auto;
+
+		h3 {
+			text-transform: uppercase;
+			color: $darkestgrey;
+			letter-spacing: 1.6px;
+			font-size: 14px;
+			font-weight: 400;
+			margin-bottom: 10px;
+		}
+	}

app/routes/wallet/components/components/Channels/components/Channel/Channel.js

@@ -0,0 +1,42 @@
+// @flow
+import React, { Component } from 'react'
+import styles from './Channel.scss'
+
+class Channel extends Component {
+  render() {
+    const { channel, setChannel } = this.props
+    return (
+        <li className={styles.channel} onClick={() => setChannel(channel)}>
+            <div className={styles.left}>
+                <section className={styles.remotePubkey}>
+                    <span>Remote Pubkey</span>
+                    <h4>{channel.remote_pubkey}</h4>
+                </section>
+                <section className={styles.channelPoint}>
+                    <span>Channel Point</span>
+                    <h4>{channel.channel_point}</h4>
+                </section>
+            </div>
+            <div className={styles.right}>
+                <section className={styles.capacity}>
+                    <span>Capacity</span>
+                    <h2>{channel.capacity}</h2>
+                </section>
+                <div className={styles.balances}>
+                    <section>
+                        <h4>{channel.local_balance}</h4>
+                        <span>Local</span>
+                    </section>
+                    <section>
+                        <h4>{channel.remote_balance}</h4>
+                        <span>Remote</span>
+                    </section>
+                </div>
+            </div>
+        </li>
+    )
+  }
+}
+
+
+export default Channel

app/routes/wallet/components/components/Channels/components/Channel/Channel.scss

@@ -0,0 +1,76 @@
+@import '../../../../../../../variables.scss';
+
+.channel {
+	position: relative;
+	background: $white;
+	padding: 10px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	border-top: 1px solid $black;
+
+	&:first-child {
+		border: none;
+	}
+
+	.left, .right {
+		padding: 0 10px;
+		margin-bottom: 5;
+		
+		section {
+			margin-bottom: 20px;
+
+			span {
+				text-transform: uppercase;
+				letter-spacing: 1.6px;
+				color: $black;
+				font-size: 10px;
+				font-weight: bold;
+			}
+
+			h2 {
+				font-size: 30px;
+				padding: 5px 0;
+				color: $main;
+			}
+
+			h4 {
+				margin-top: 5px;
+			}
+		}
+	}
+
+	.left {
+		flex: 7;
+		border-right: 1px solid $grey;
+	}
+
+	.right {
+		flex: 3;
+
+		.capacity {
+			text-align: center;
+			border-bottom: 1px solid $grey;
+			margin-bottom: 10px;
+		}
+
+		.balances {
+			display: flex;
+			justify-content: space-between;
+
+			section {
+				flex: 5;
+				text-align: center;
+
+				h4 {
+					color: $main;
+					font-size: 20px;
+				}
+
+				&:first-child {
+					border-right: 1px solid $grey;
+				}
+			}
+		}
+	}
+}

app/routes/wallet/components/components/Channels/components/Channel/index.js

@@ -0,0 +1,3 @@
+import Channel from './Channel'
+
+export default Channel

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js

@@ -0,0 +1,39 @@
+// @flow
+import React, { Component } from 'react'
+import ReactModal from 'react-modal'
+import styles from './ChannelModal.scss'
+
+class ChannelModal extends Component {
+  render() {
+    const customStyles = {
+      overlay: {
+        cursor: 'pointer'
+      },
+      content : {
+        top: 'auto',
+        left: '20%',
+        right: '0',
+        bottom: 'auto',
+        width: '40%',
+        margin: '50px auto'
+      }
+    }
+    const { isOpen, resetChannel, children } = this.props
+    return (
+    <ReactModal
+      isOpen={isOpen}
+      contentLabel="No Overlay Click Modal"
+      ariaHideApp={true}
+      shouldCloseOnOverlayClick={true}
+      onRequestClose={() => resetChannel(null)}
+      parentSelector={() => document.body}
+      style={customStyles}
+    >
+      {children}
+    </ReactModal>
+    )
+  }
+}
+
+
+export default ChannelModal

app/routes/wallet/components/components/Channels/components/ChannelModal/index.js

@@ -0,0 +1,3 @@
+import ChannelModal from './ChannelModal'
+
+export default ChannelModal

app/routes/wallet/components/components/Channels/index.js

@@ -0,0 +1,3 @@
+import Channels from './Channels'
+
+export default Channels

app/routes/wallet/containers/WalletContainer.js

@@ -1,19 +1,25 @@
 import { connect } from 'react-redux'
 import { fetchInfo } from '../../../reducers/info'
 import { fetchPeers } from '../../../reducers/peers'
-import { fetchChannels } from '../../../reducers/channels'
+import { fetchChannels, setChannel, channelsSelectors } from '../../../reducers/channels'
 import Wallet from '../components/Wallet'
 
 const mapDispatchToProps = {
 	fetchInfo,
+	
 	fetchPeers,
-	fetchChannels
+	
+	fetchChannels,
+	setChannel
 }
 
 const mapStateToProps = (state) => ({
 	info: state.info,
+	
 	peers: state.peers,
-	channels: state.channels
+	channels: state.channels,
+
+	channelModalOpen: channelsSelectors.channelModalOpen(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Wallet)