From 9a425cb75bd0c4817db45a238ba90f68b81dd50a Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 10 Jan 2018 17:38:00 +0100
Subject: [PATCH 1/3] SideBar integration

---
 src/components/SideBar.js       | 17 ----------
 src/components/SideBar/Item.js  | 56 +++++++++++++++++++++++++++++++++
 src/components/SideBar/index.js | 47 +++++++++++++++++++++++++++
 src/styles/global.js            |  1 +
 4 files changed, 104 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/SideBar.js
 create mode 100644 src/components/SideBar/Item.js
 create mode 100644 src/components/SideBar/index.js

diff --git a/src/components/SideBar.js b/src/components/SideBar.js
deleted file mode 100644
index 2e9c2592..00000000
--- a/src/components/SideBar.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-
-import Box from 'components/base/Box'
-
-class SideBar extends PureComponent<{}> {
-  render() {
-    return (
-      <Box bg="night" py={3} noShrink style={{ width: 250 }}>
-        {''}
-      </Box>
-    )
-  }
-}
-
-export default SideBar
diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
new file mode 100644
index 00000000..fc44577a
--- /dev/null
+++ b/src/components/SideBar/Item.js
@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import type { Element } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+type Props = {
+  children: string,
+  desc?: string | null,
+  icon?: Element<*> | null,
+}
+
+const Container = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  color: 'lead',
+  p: 2,
+})`
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+`
+
+const IconWrapper = styled(Box)`
+  width: 30px;
+  height: 30px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+`
+
+export default function Item({ children, desc, icon }: Props) {
+  return (
+    <Container>
+      <IconWrapper mr={2}>{icon || null}</IconWrapper>
+      <div>
+        <Text fontWeight="bold" fontSize={1}>
+          {children}
+        </Text>
+        {desc && (
+          <Box color="steel" fontSize={0}>
+            {desc}
+          </Box>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+Item.defaultProps = {
+  icon: null,
+  desc: null,
+}
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
new file mode 100644
index 00000000..94c99565
--- /dev/null
+++ b/src/components/SideBar/index.js
@@ -0,0 +1,47 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box, { GrowScroll } from 'components/base/Box'
+import Item from './Item'
+
+const CapsSubtitle = styled(Box).attrs({
+  px: 2,
+  fontSize: 0,
+  color: 'shark',
+})`
+  text-transform: uppercase;
+  font-weight: bold;
+`
+
+class SideBar extends PureComponent<{}> {
+  render() {
+    return (
+      <Box noShrink style={{ width: 250 }}>
+        <GrowScroll flow={4} py={4} bg="night">
+          <Box flow={2}>
+            <CapsSubtitle>{'Menu'}</CapsSubtitle>
+            <div>
+              <Item>{'Dashboard'}</Item>
+              <Item>{'Send'}</Item>
+              <Item>{'Receive'}</Item>
+              <Item>{'Settings'}</Item>
+            </div>
+          </Box>
+          <Box flow={2}>
+            <CapsSubtitle>{'Accounts'}</CapsSubtitle>
+            <div>
+              <Item desc="BTC 3.78605936">{'Brian Account'}</Item>
+              <Item desc="ETH 0.05944">{'Virginie Account'}</Item>
+              <Item desc="DOGE 2.2658">{'Ledger Account'}</Item>
+              <Item desc="BTC 0.00015486">{'Nicolas Account'}</Item>
+            </div>
+          </Box>
+        </GrowScroll>
+      </Box>
+    )
+  }
+}
+
+export default SideBar
diff --git a/src/styles/global.js b/src/styles/global.js
index 7c4bb783..fba9bcf4 100644
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -11,6 +11,7 @@ injectGlobal`
     font: inherit;
     color: inherit;
     user-select: none;
+    cursor: inherit;
     min-width: 0;
   }
 

From 40327c77011f838de3baa2db392c704e059d6c95 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 10 Jan 2018 18:30:09 +0100
Subject: [PATCH 2/3] Create Settings and Account pages. Link them to SideBar.

---
 .eslintrc                                    |  1 +
 src/components/AccountPage.js                | 15 +++++++++++++++
 src/components/{Home.js => DashboardPage.js} |  4 ++--
 src/components/SettingsPage.js               | 15 +++++++++++++++
 src/components/SideBar/Item.js               | 18 +++++++++++++++---
 src/components/SideBar/index.js              | 20 ++++++++++++++------
 src/components/Wrapper.js                    |  9 +++++++--
 webpack.renderer.js                          |  3 +++
 8 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 src/components/AccountPage.js
 rename src/components/{Home.js => DashboardPage.js} (86%)
 create mode 100644 src/components/SettingsPage.js

diff --git a/.eslintrc b/.eslintrc
index f022f0dd..f64ba51d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,6 +10,7 @@
   "rules": {
     "camelcase": 0,
     "no-shadow": 0,
+    "no-void": 0,
     "new-cap": 0,
     "no-return-assign": 0,
     "no-nested-ternary": 0,
diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js
new file mode 100644
index 00000000..50b14595
--- /dev/null
+++ b/src/components/AccountPage.js
@@ -0,0 +1,15 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+type Props = {}
+
+class AccountPage extends PureComponent<Props> {
+  render() {
+    return <Box>{'account'}</Box>
+  }
+}
+
+export default AccountPage
diff --git a/src/components/Home.js b/src/components/DashboardPage.js
similarity index 86%
rename from src/components/Home.js
rename to src/components/DashboardPage.js
index 0d37bf87..1544391a 100644
--- a/src/components/Home.js
+++ b/src/components/DashboardPage.js
@@ -18,7 +18,7 @@ type Props = {
   currentDevice: Device | null,
 }
 
-class Home extends PureComponent<Props> {
+class DashboardPage extends PureComponent<Props> {
   render() {
     const { currentDevice } = this.props
     return currentDevice !== null ? (
@@ -29,4 +29,4 @@ class Home extends PureComponent<Props> {
   }
 }
 
-export default connect(mapStateToProps)(Home)
+export default connect(mapStateToProps)(DashboardPage)
diff --git a/src/components/SettingsPage.js b/src/components/SettingsPage.js
new file mode 100644
index 00000000..7e947b98
--- /dev/null
+++ b/src/components/SettingsPage.js
@@ -0,0 +1,15 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+type Props = {}
+
+class SettingsPage extends PureComponent<Props> {
+  render() {
+    return <Box>{'settings'}</Box>
+  }
+}
+
+export default SettingsPage
diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index fc44577a..93459b88 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -1,16 +1,25 @@
 // @flow
 
 import React from 'react'
-import type { Element } from 'react'
 import styled from 'styled-components'
+import { push } from 'react-router-redux'
+import { connect } from 'react-redux'
+
+import type { Element } from 'react'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
 type Props = {
   children: string,
+  linkTo?: string | null,
   desc?: string | null,
   icon?: Element<*> | null,
+  push: Function,
+}
+
+const mapDispatchToProps = {
+  push,
 }
 
 const Container = styled(Box).attrs({
@@ -32,9 +41,9 @@ const IconWrapper = styled(Box)`
   border: 2px solid rgba(255, 255, 255, 0.1);
 `
 
-export default function Item({ children, desc, icon }: Props) {
+function Item({ children, desc, icon, linkTo, push }: Props) {
   return (
-    <Container>
+    <Container onClick={linkTo ? () => push(linkTo) : void 0}>
       <IconWrapper mr={2}>{icon || null}</IconWrapper>
       <div>
         <Text fontWeight="bold" fontSize={1}>
@@ -53,4 +62,7 @@ export default function Item({ children, desc, icon }: Props) {
 Item.defaultProps = {
   icon: null,
   desc: null,
+  linkTo: null,
 }
+
+export default connect(null, mapDispatchToProps)(Item)
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 94c99565..c9f66310 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -23,19 +23,27 @@ class SideBar extends PureComponent<{}> {
           <Box flow={2}>
             <CapsSubtitle>{'Menu'}</CapsSubtitle>
             <div>
-              <Item>{'Dashboard'}</Item>
+              <Item linkTo="/">{'Dashboard'}</Item>
               <Item>{'Send'}</Item>
               <Item>{'Receive'}</Item>
-              <Item>{'Settings'}</Item>
+              <Item linkTo="/settings">{'Settings'}</Item>
             </div>
           </Box>
           <Box flow={2}>
             <CapsSubtitle>{'Accounts'}</CapsSubtitle>
             <div>
-              <Item desc="BTC 3.78605936">{'Brian Account'}</Item>
-              <Item desc="ETH 0.05944">{'Virginie Account'}</Item>
-              <Item desc="DOGE 2.2658">{'Ledger Account'}</Item>
-              <Item desc="BTC 0.00015486">{'Nicolas Account'}</Item>
+              <Item linkTo="/account/brian" desc="BTC 3.78605936">
+                {'Brian Account'}
+              </Item>
+              <Item linkTo="/account/virginie" desc="ETH 0.05944">
+                {'Virginie Account'}
+              </Item>
+              <Item linkTo="/account/ledger" desc="DOGE 2.2658">
+                {'Ledger Account'}
+              </Item>
+              <Item linkTo="/account/nicolas" desc="BTC 0.00015486">
+                {'Nicolas Account'}
+              </Item>
             </div>
           </Box>
         </GrowScroll>
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 902fc036..2d108c6d 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -6,7 +6,10 @@ import { translate } from 'react-i18next'
 
 import Box from 'components/base/Box'
 
-import Home from 'components/Home'
+import DashboardPage from 'components/DashboardPage'
+import SettingsPage from 'components/SettingsPage'
+import AccountPage from 'components/AccountPage'
+
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
 
@@ -15,7 +18,9 @@ const Wrapper = () => (
     <SideBar />
     <Box grow bg="cream">
       <TopBar />
-      <Route path="/" component={Home} />
+      <Route path="/" component={DashboardPage} />
+      <Route path="/settings" component={SettingsPage} />
+      <Route path="/account/:account" component={AccountPage} />
     </Box>
   </Box>
 )
diff --git a/webpack.renderer.js b/webpack.renderer.js
index 7343ff5a..cc8bb0dc 100644
--- a/webpack.renderer.js
+++ b/webpack.renderer.js
@@ -9,4 +9,7 @@ module.exports = {
       __PROD__,
     }),
   ],
+  devServer: {
+    historyApiFallback: true,
+  },
 }

From cd8f1c987796b153044208375deb50684577d176 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 10 Jan 2018 19:06:08 +0100
Subject: [PATCH 3/3] Make SideBar items active on route. Fix history api with
 webpack.

---
 src/components/SideBar/Item.js | 19 ++++++++++++++++---
 webpack.renderer.js            |  3 +++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 93459b88..42bd8ad7 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -2,10 +2,13 @@
 
 import React from 'react'
 import styled from 'styled-components'
+import { compose } from 'redux'
+import { withRouter } from 'react-router'
 import { push } from 'react-router-redux'
 import { connect } from 'react-redux'
 
 import type { Element } from 'react'
+import type { Location } from 'react-router'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
@@ -15,6 +18,7 @@ type Props = {
   linkTo?: string | null,
   desc?: string | null,
   icon?: Element<*> | null,
+  location: Location,
   push: Function,
 }
 
@@ -29,6 +33,7 @@ const Container = styled(Box).attrs({
   p: 2,
 })`
   cursor: pointer;
+  color: ${p => (p.active ? p.theme.colors.white : '')};
 
   &:hover {
     background: rgba(255, 255, 255, 0.05);
@@ -41,9 +46,10 @@ const IconWrapper = styled(Box)`
   border: 2px solid rgba(255, 255, 255, 0.1);
 `
 
-function Item({ children, desc, icon, linkTo, push }: Props) {
+function Item({ children, desc, icon, linkTo, push, location }: Props) {
+  const { pathname } = location
   return (
-    <Container onClick={linkTo ? () => push(linkTo) : void 0}>
+    <Container onClick={linkTo ? () => push(linkTo) : void 0} active={pathname === linkTo}>
       <IconWrapper mr={2}>{icon || null}</IconWrapper>
       <div>
         <Text fontWeight="bold" fontSize={1}>
@@ -65,4 +71,11 @@ Item.defaultProps = {
   linkTo: null,
 }
 
-export default connect(null, mapDispatchToProps)(Item)
+export default compose(
+  withRouter,
+  // connect router here only to make components re-render
+  // see https://github.com/ReactTraining/react-router/issues/4671
+  connect(({ router }) => ({ router }), mapDispatchToProps, null, {
+    pure: false,
+  }),
+)(Item)
diff --git a/webpack.renderer.js b/webpack.renderer.js
index cc8bb0dc..2bba9be0 100644
--- a/webpack.renderer.js
+++ b/webpack.renderer.js
@@ -3,6 +3,9 @@ const webpack = require('webpack')
 require('./src/globals')
 
 module.exports = {
+  output: {
+    publicPath: '/',
+  },
   plugins: [
     new webpack.DefinePlugin({
       __DEV__,