From 23c6eeb2956c8a41722add597ce48c7c9a549624 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 1 Aug 2017 17:45:15 -0500
Subject: [PATCH] feature(wallet): add wallet route and active nav links

---
 app/routes.js                                 |  2 ++
 app/routes/app/components/App.js              |  3 ++-
 app/routes/app/components/components/Nav.js   | 27 ++++++++++++-------
 app/routes/app/components/components/Nav.scss |  5 ++--
 app/routes/wallet/components/Wallet.js        | 16 +++++++++++
 app/routes/wallet/components/Wallet.scss      |  0
 .../wallet/containers/WalletContainer.js      |  8 ++++++
 app/routes/wallet/index.js                    |  3 +++
 8 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 app/routes/wallet/components/Wallet.js
 create mode 100644 app/routes/wallet/components/Wallet.scss
 create mode 100644 app/routes/wallet/containers/WalletContainer.js
 create mode 100644 app/routes/wallet/index.js

diff --git a/app/routes.js b/app/routes.js
index ab92d615..5e3bb10b 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -3,10 +3,12 @@ import React from 'react'
 import { Switch, Route } from 'react-router'
 import App from './routes/app'
 import Activity from './routes/activity'
+import Wallet from './routes/wallet'
 
 export default () => (
   <App>
     <Switch>
+      <Route path='/wallet' component={Wallet} />
       <Route path='/' component={Activity} />
     </Switch>
   </App>
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index ac5e5c2b..cd853331 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -29,7 +29,8 @@ class App extends Component {
       payInvoice,
       children
     } = this.props
-
+    
+    console.log('children: ', this.props.children)
     return (
       <div>
         <Form
diff --git a/app/routes/app/components/components/Nav.js b/app/routes/app/components/components/Nav.js
index ee3a082d..31889d72 100644
--- a/app/routes/app/components/components/Nav.js
+++ b/app/routes/app/components/components/Nav.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 import ReactSVG from 'react-svg'
 import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
 import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
@@ -15,6 +15,7 @@ class Nav extends Component {
       setCurrency,
       formClicked
     } = this.props
+
     return (
       <nav className={styles.nav}>
         <ul className={styles.info}>
@@ -65,17 +66,23 @@ class Nav extends Component {
         </div>
 
         <ul className={styles.links}>
-          <li className={styles.link}>
-            <FaClockO />
-            <span>Activity</span>
+          <li>
+            <NavLink exact to='/' activeClassName={styles.active} className={styles.link}>
+              <FaClockO />
+              <span>Activity</span>
+            </NavLink>
           </li>
-          <li className={styles.link}>
-            <MdAccountBalanceWallet />
-            <span>Wallet</span>
+          <li>
+            <NavLink exact to='/wallet' activeClassName={styles.active} className={styles.link}>
+              <MdAccountBalanceWallet />
+              <span>Wallet</span>
+            </NavLink>
           </li>
-          <li className={styles.link}>
-            <MdSettings />
-            <span>Settings</span>
+          <li>
+            <NavLink to='/settings' activeClassName={styles.active} className={styles.link}>
+              <MdSettings />
+              <span>Settings</span>
+            </NavLink>
           </li>
         </ul>  
         <div className={styles.buttons}>
diff --git a/app/routes/app/components/components/Nav.scss b/app/routes/app/components/components/Nav.scss
index cabe12d3..140fabbd 100644
--- a/app/routes/app/components/components/Nav.scss
+++ b/app/routes/app/components/components/Nav.scss
@@ -70,13 +70,14 @@
 	margin: 0 auto;
 
 	.link {
+  	color: $main;
 	  margin-bottom: 20px;
 	  padding: 0 10px;
 	  opacity: 0.5;
 	  cursor: pointer;
+	  text-decoration: none;
 
-	  &:first-child {
-	  	color: $main;
+	  &.active {
 	  	opacity: 1.0;
 	  }
 
diff --git a/app/routes/wallet/components/Wallet.js b/app/routes/wallet/components/Wallet.js
new file mode 100644
index 00000000..2c29b932
--- /dev/null
+++ b/app/routes/wallet/components/Wallet.js
@@ -0,0 +1,16 @@
+// @flow
+import React, { Component } from 'react'
+import styles from './Wallet.scss'
+
+class Wallet extends Component {
+  render() {
+    return (
+      <div>
+        Wallet
+      </div>
+    )
+  }
+}
+
+
+export default Wallet
\ No newline at end of file
diff --git a/app/routes/wallet/components/Wallet.scss b/app/routes/wallet/components/Wallet.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/wallet/containers/WalletContainer.js b/app/routes/wallet/containers/WalletContainer.js
new file mode 100644
index 00000000..9bc09595
--- /dev/null
+++ b/app/routes/wallet/containers/WalletContainer.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux'
+import Wallet from '../components/Wallet'
+
+const mapDispatchToProps = {}
+
+const mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Wallet)
\ No newline at end of file
diff --git a/app/routes/wallet/index.js b/app/routes/wallet/index.js
new file mode 100644
index 00000000..267435d4
--- /dev/null
+++ b/app/routes/wallet/index.js
@@ -0,0 +1,3 @@
+import WalletContainer from './containers/WalletContainer'
+
+export default WalletContainer
\ No newline at end of file