Merge pull request #4 from meriadec/next

Sidebar integration start

.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,

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

src/components/Home.js → 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)

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

src/components/SideBar.js

@@ -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

src/components/SideBar/Item.js

@@ -0,0 +1,81 @@
+// @flow
+
+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'
+
+type Props = {
+  children: string,
+  linkTo?: string | null,
+  desc?: string | null,
+  icon?: Element<*> | null,
+  location: Location,
+  push: Function,
+}
+
+const mapDispatchToProps = {
+  push,
+}
+
+const Container = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  color: 'lead',
+  p: 2,
+})`
+  cursor: pointer;
+  color: ${p => (p.active ? p.theme.colors.white : '')};
+
+  &: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);
+`
+
+function Item({ children, desc, icon, linkTo, push, location }: Props) {
+  const { pathname } = location
+  return (
+    <Container onClick={linkTo ? () => push(linkTo) : void 0} active={pathname === linkTo}>
+      <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,
+  linkTo: null,
+}
+
+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)

src/components/SideBar/index.js

@@ -0,0 +1,55 @@
+// @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 linkTo="/">{'Dashboard'}</Item>
+              <Item>{'Send'}</Item>
+              <Item>{'Receive'}</Item>
+              <Item linkTo="/settings">{'Settings'}</Item>
+            </div>
+          </Box>
+          <Box flow={2}>
+            <CapsSubtitle>{'Accounts'}</CapsSubtitle>
+            <div>
+              <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>
+      </Box>
+    )
+  }
+}
+
+export default SideBar

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>
 )

src/styles/global.js

@@ -11,6 +11,7 @@ injectGlobal`
     font: inherit;
     color: inherit;
     user-select: none;
+    cursor: inherit;
     min-width: 0;
   }
 

webpack.renderer.js

@@ -3,10 +3,16 @@ const webpack = require('webpack')
 require('./src/globals')
 
 module.exports = {
+  output: {
+    publicPath: '/',
+  },
   plugins: [
     new webpack.DefinePlugin({
       __DEV__,
       __PROD__,
     }),
   ],
+  devServer: {
+    historyApiFallback: true,
+  },
 }