From 392f534118bbe1302acbe623b0b940670ea3f093 Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 13:33:47 +1200
Subject: [PATCH 1/7] feat(navigation): scaffolded basic files

---
 app/components/Navigation.js | 13 +++++++++++++
 app/stories/Navigation.js    |  9 +++++++++
 app/stories/index.js         |  1 +
 app/styles/Navigation.js     |  3 +++
 4 files changed, 26 insertions(+)
 create mode 100644 app/components/Navigation.js
 create mode 100644 app/stories/Navigation.js
 create mode 100644 app/styles/Navigation.js

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
new file mode 100644
index 0000000..c41fda2
--- /dev/null
+++ b/app/components/Navigation.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import AppBar from 'material-ui/AppBar'
+
+function AppBarWithIcon () {
+  return (
+    <AppBar
+      title="Cobuy"
+      iconElementRight={<i className="fa fa-bars" aria-hidden="true"></i>}
+    />
+  )
+}
+
+export default AppBarWithIcon
diff --git a/app/stories/Navigation.js b/app/stories/Navigation.js
new file mode 100644
index 0000000..d95d473
--- /dev/null
+++ b/app/stories/Navigation.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Navigation from '../components/Navigation'
+
+storiesOf('app.Navigation', module)
+  .add('default', () => (
+    <Navigation />
+  ))
diff --git a/app/stories/index.js b/app/stories/index.js
index 2a246c4..0f3d7c3 100644
--- a/app/stories/index.js
+++ b/app/stories/index.js
@@ -1,3 +1,4 @@
 require('./Button')
 require('./TextField')
 require('./AvatarField')
+require('./Navigation')
diff --git a/app/styles/Navigation.js b/app/styles/Navigation.js
new file mode 100644
index 0000000..8a63301
--- /dev/null
+++ b/app/styles/Navigation.js
@@ -0,0 +1,3 @@
+export default {
+  container: (props) => ({})
+}

From a77251b9122e2901ecd04d5467bbe80df67d610e Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 15:40:15 +1200
Subject: [PATCH 2/7] feat(navigation): added drawer with some placeholder
 items

---
 app/components/Navigation.js | 48 +++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index c41fda2..104e30a 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -1,13 +1,49 @@
 import React from 'react'
 import AppBar from 'material-ui/AppBar'
 
-function AppBarWithIcon () {
+import Drawer from 'material-ui/Drawer';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false
+    }
+  }
+
+  handleToggle = () => this.setState({ open: !this.state.open })
+
+//   render() {
+//     return (
+//       <div>
+//         <RaisedButton
+//           label="Toggle Drawer"
+//           onTouchTap={this.handleToggle}
+//         />
+//         <Drawer open={this.state.open}>
+//           <MenuItem>Menu Item</MenuItem>
+//           <MenuItem>Menu Item 2</MenuItem>
+//         </Drawer>
+//       </div>
+//     );
+//   }
+// }
+
+render () {
   return (
-    <AppBar
-      title="Cobuy"
-      iconElementRight={<i className="fa fa-bars" aria-hidden="true"></i>}
-    />
+    <div>
+      <AppBar
+        title="Cobuy"
+        iconElementRight={<i className="fa fa-bars" aria-hidden="true" onClick={this.handleToggle}></i>}
+      />
+      <Drawer open={this.state.open}>
+        <MenuItem>Menu Item</MenuItem>
+        <MenuItem>Menu Item 2</MenuItem>
+      </Drawer>
+    </div>
   )
 }
 
-export default AppBarWithIcon
+// export default Navigation

From 63a27257d8cadf07ef1967081095ae10715ecbaf Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 16:01:40 +1200
Subject: [PATCH 3/7] feat(navigation): added drawer and toggle

---
 app/components/Navigation.js | 55 ++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index 104e30a..3e84636 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -9,41 +9,34 @@ export default class Navigation extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: false
+      drawerOpen: false
     }
   }
 
-  handleToggle = () => this.setState({ open: !this.state.open })
-
-//   render() {
-//     return (
-//       <div>
-//         <RaisedButton
-//           label="Toggle Drawer"
-//           onTouchTap={this.handleToggle}
-//         />
-//         <Drawer open={this.state.open}>
-//           <MenuItem>Menu Item</MenuItem>
-//           <MenuItem>Menu Item 2</MenuItem>
-//         </Drawer>
-//       </div>
-//     );
-//   }
-// }
+  handleDrawerToggle = () => {
+    this.setState({ drawerOpen: !this.state.drawerOpen })
+  }
 
-render () {
-  return (
-    <div>
-      <AppBar
-        title="Cobuy"
-        iconElementRight={<i className="fa fa-bars" aria-hidden="true" onClick={this.handleToggle}></i>}
-      />
-      <Drawer open={this.state.open}>
-        <MenuItem>Menu Item</MenuItem>
-        <MenuItem>Menu Item 2</MenuItem>
-      </Drawer>
-    </div>
-  )
+  render () {
+    return (
+      <div>
+        <AppBar
+          title="Cobuy"
+          onLeftIconButtonTouchTap={this.handleDrawerToggle}
+        />
+        <Drawer open={this.state.drawerOpen}>
+          <MenuItem
+            leftIcon={
+              <i className="fa fa-bars" aria-hidden="true"/>
+            }
+            onTouchTap={this.handleDrawerToggle}
+          />
+          <MenuItem>Menu Item</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+        </Drawer>
+      </div>
+    )
+  }
 }
 
 // export default Navigation

From 52f799c4995e94f5171ca10c9e644fa53896aebd Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 16:13:17 +1200
Subject: [PATCH 4/7] feat(navigation): added some menu items

---
 app/components/Navigation.js | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index 3e84636..ba5ae14 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -1,9 +1,8 @@
 import React from 'react'
 import AppBar from 'material-ui/AppBar'
-
-import Drawer from 'material-ui/Drawer';
-import MenuItem from 'material-ui/MenuItem';
-import RaisedButton from 'material-ui/RaisedButton';
+import Drawer from 'material-ui/Drawer'
+import MenuItem from 'material-ui/MenuItem'
+import Divider from 'material-ui/Divider'
 
 export default class Navigation extends React.Component {
   constructor(props) {
@@ -30,9 +29,26 @@ export default class Navigation extends React.Component {
               <i className="fa fa-bars" aria-hidden="true"/>
             }
             onTouchTap={this.handleDrawerToggle}
-          />
-          <MenuItem>Menu Item</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
+          >
+            Close Menu
+          </MenuItem>
+          <Divider />
+          <MenuItem
+            leftIcon={
+              <i className="fa fa-tachometer" aria-hidden="true" />
+            }
+          >
+            Dashboard
+          </MenuItem>
+          <Divider />
+          <MenuItem
+            leftIcon={
+              <i className="fa fa-sign-out" aria-hidden="true" />
+            }
+          >
+            Log Out
+          </MenuItem>
+          <Divider />
         </Drawer>
       </div>
     )

From 0977bec076ee03733aa798c3106c23ee5eede0fe Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 16:22:13 +1200
Subject: [PATCH 5/7] feat(navigation): plugged in fela, intl

---
 app/components/Navigation.js | 34 ++++++++++++++++++++++++++++------
 app/locales/en.json          |  3 +++
 app/styles/Navigation.js     |  5 ++++-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index ba5ae14..a725f46 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -1,10 +1,15 @@
 import React from 'react'
+import { connect as connectFela } from 'react-fela'
+import { pipe } from 'ramda'
 import AppBar from 'material-ui/AppBar'
 import Drawer from 'material-ui/Drawer'
 import MenuItem from 'material-ui/MenuItem'
 import Divider from 'material-ui/Divider'
 
-export default class Navigation extends React.Component {
+import styles from '../styles/Navigation'
+import { FormattedMessage } from '../../lib/Intl'
+
+class Navigation extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -17,10 +22,16 @@ export default class Navigation extends React.Component {
   }
 
   render () {
+    const { styles } = this.props
     return (
       <div>
         <AppBar
-          title="Cobuy"
+          title={
+            <FormattedMessage
+              id='app.name'
+              className={styles.labelText}
+            />
+          }
           onLeftIconButtonTouchTap={this.handleDrawerToggle}
         />
         <Drawer open={this.state.drawerOpen}>
@@ -30,7 +41,10 @@ export default class Navigation extends React.Component {
             }
             onTouchTap={this.handleDrawerToggle}
           >
-            Close Menu
+            <FormattedMessage
+              id='app.closeMenu'
+              className={styles.labelText}
+            />
           </MenuItem>
           <Divider />
           <MenuItem
@@ -38,7 +52,10 @@ export default class Navigation extends React.Component {
               <i className="fa fa-tachometer" aria-hidden="true" />
             }
           >
-            Dashboard
+            <FormattedMessage
+              id='app.dashboard'
+              className={styles.labelText}
+            />
           </MenuItem>
           <Divider />
           <MenuItem
@@ -46,7 +63,10 @@ export default class Navigation extends React.Component {
               <i className="fa fa-sign-out" aria-hidden="true" />
             }
           >
-            Log Out
+            <FormattedMessage
+              id='app.logOut'
+              className={styles.labelText}
+            />
           </MenuItem>
           <Divider />
         </Drawer>
@@ -55,4 +75,6 @@ export default class Navigation extends React.Component {
   }
 }
 
-// export default Navigation
+export default pipe(
+  connectFela(styles)
+)(Navigation)
diff --git a/app/locales/en.json b/app/locales/en.json
index 9b2dd03..5edf89f 100644
--- a/app/locales/en.json
+++ b/app/locales/en.json
@@ -1,5 +1,8 @@
 {
   "app.name": "Cobuy",
+  "app.closeMenu": "close menu",
+  "app.dashboard": "dashboard",
+  "app.logOut": "log out",
   "agents.nameLabel": "name",
   "agents.descriptionLabel": "description",
   "agents.logout": "log out",
diff --git a/app/styles/Navigation.js b/app/styles/Navigation.js
index 8a63301..092fd57 100644
--- a/app/styles/Navigation.js
+++ b/app/styles/Navigation.js
@@ -1,3 +1,6 @@
 export default {
-  container: (props) => ({})
+  container: (props) => ({}),
+  labelText: () => ({
+    textTransform: 'capitalize'
+  })
 }

From 41e6584d641aa0b94dcbdc79a135e6524a7125de Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 16:25:07 +1200
Subject: [PATCH 6/7] feat(navigation): formatting fascism

---
 app/components/Navigation.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index a725f46..fef5e16 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -10,8 +10,8 @@ import styles from '../styles/Navigation'
 import { FormattedMessage } from '../../lib/Intl'
 
 class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor (props) {
+    super(props)
     this.state = {
       drawerOpen: false
     }

From f62c2ec1fc1d29da92918026305080fc15a643a1 Mon Sep 17 00:00:00 2001
From: Gregory Kan <kan.gregory@gmail.com>
Date: Thu, 13 Jul 2017 20:32:44 +1200
Subject: [PATCH 7/7] chore(purity): use recompose to handle state

---
 app/components/Navigation.js | 123 +++++++++++++++++------------------
 1 file changed, 58 insertions(+), 65 deletions(-)

diff --git a/app/components/Navigation.js b/app/components/Navigation.js
index fef5e16..79f8c14 100644
--- a/app/components/Navigation.js
+++ b/app/components/Navigation.js
@@ -1,80 +1,73 @@
 import React from 'react'
 import { connect as connectFela } from 'react-fela'
-import { pipe } from 'ramda'
+import { not } from 'ramda'
 import AppBar from 'material-ui/AppBar'
 import Drawer from 'material-ui/Drawer'
 import MenuItem from 'material-ui/MenuItem'
 import Divider from 'material-ui/Divider'
+import { withState, withHandlers, compose } from 'recompose'
 
 import styles from '../styles/Navigation'
 import { FormattedMessage } from '../../lib/Intl'
 
-class Navigation extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      drawerOpen: false
-    }
-  }
+function Navigation (props) {
+  const { styles, isDrawerOpen, toggleDrawer } = props
 
-  handleDrawerToggle = () => {
-    this.setState({ drawerOpen: !this.state.drawerOpen })
-  }
-
-  render () {
-    const { styles } = this.props
-    return (
-      <div>
-        <AppBar
-          title={
-            <FormattedMessage
-              id='app.name'
-              className={styles.labelText}
-            />
+  return (
+    <div>
+      <AppBar
+        title={
+          <FormattedMessage
+            id='app.name'
+            className={styles.labelText}
+          />
+        }
+        onLeftIconButtonTouchTap={toggleDrawer}
+      />
+      <Drawer open={isDrawerOpen}>
+        <MenuItem
+          leftIcon={
+            <i className="fa fa-bars" aria-hidden="true"/>
+          }
+          onTouchTap={toggleDrawer}
+        >
+          <FormattedMessage
+            id='app.closeMenu'
+            className={styles.labelText}
+          />
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          leftIcon={
+            <i className="fa fa-tachometer" aria-hidden="true" />
+          }
+        >
+          <FormattedMessage
+            id='app.dashboard'
+            className={styles.labelText}
+          />
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          leftIcon={
+            <i className="fa fa-sign-out" aria-hidden="true" />
           }
-          onLeftIconButtonTouchTap={this.handleDrawerToggle}
-        />
-        <Drawer open={this.state.drawerOpen}>
-          <MenuItem
-            leftIcon={
-              <i className="fa fa-bars" aria-hidden="true"/>
-            }
-            onTouchTap={this.handleDrawerToggle}
-          >
-            <FormattedMessage
-              id='app.closeMenu'
-              className={styles.labelText}
-            />
-          </MenuItem>
-          <Divider />
-          <MenuItem
-            leftIcon={
-              <i className="fa fa-tachometer" aria-hidden="true" />
-            }
-          >
-            <FormattedMessage
-              id='app.dashboard'
-              className={styles.labelText}
-            />
-          </MenuItem>
-          <Divider />
-          <MenuItem
-            leftIcon={
-              <i className="fa fa-sign-out" aria-hidden="true" />
-            }
-          >
-            <FormattedMessage
-              id='app.logOut'
-              className={styles.labelText}
-            />
-          </MenuItem>
-          <Divider />
-        </Drawer>
-      </div>
-    )
-  }
+        >
+          <FormattedMessage
+            id='app.logOut'
+            className={styles.labelText}
+          />
+        </MenuItem>
+        <Divider />
+      </Drawer>
+    </div>
+  )
 }
 
-export default pipe(
-  connectFela(styles)
+export default compose(
+  connectFela(styles),
+  withState('isDrawerOpen', 'setDrawerOpen', false),
+  withHandlers({
+    toggleDrawer: ({ setDrawerOpen }) => () => setDrawerOpen(not)
+  })
 )(Navigation)