From c9bc0c89ffa81f598351e3a3b0a27aa730b299ad Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Tue, 3 Jan 2017 12:16:24 +0900
Subject: [PATCH] refactor: cut down the component from SideNav component

---
 browser/components/SideNavFilter.js   | 41 +++++++++++++++++++++++++++
 browser/components/SideNavFilter.styl | 32 +++++++++++++++++++++
 browser/main/SideNav/SideNav.styl     | 32 ---------------------
 browser/main/SideNav/index.js         | 25 ++++++----------
 4 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 browser/components/SideNavFilter.js
 create mode 100644 browser/components/SideNavFilter.styl

diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
new file mode 100644
index 00000000..4d92e1c7
--- /dev/null
+++ b/browser/components/SideNavFilter.js
@@ -0,0 +1,41 @@
+/**
+ * @fileoverview Filter for all notes.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNavFilter.styl'
+
+/**
+ * @param {boolean} isHomeActive
+ * @param {Function} handleAllNotesButtonClick
+ * @param {boolean} isStarredActive
+ * @param {Function} handleStarredButtonClick
+ * @return {React.Component}
+ */
+const SideNavFilter = ({
+  isHomeActive, handleAllNotesButtonClick, isStarredActive, handleStarredButtonClick
+}) => (
+  <div styleName='menu'>
+    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleAllNotesButtonClick}
+    >
+      <i className='fa fa-book fa-fw'/>
+      <span styleName='menu-button-label'>All Notes</span>
+    </button>
+    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleStarredButtonClick}
+    >
+      <i className='fa fa-star fa-fw'/>
+      <span styleName='menu-button-label'>Starred</span>
+    </button>
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired,
+}
+
+export default CSSModules(SideNavFilter, styles)
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
new file mode 100644
index 00000000..8dceaeab
--- /dev/null
+++ b/browser/components/SideNavFilter.styl
@@ -0,0 +1,32 @@
+.menu
+  margin-bottom 30px
+
+.menu-button
+  navButtonColor()
+  height 32px
+  padding 0 15px
+  font-size 14px
+  width 100%
+  text-align left
+  overflow ellipsis
+
+.menu-button--active
+  @extend .menu-button
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.menu-button-label
+  margin-left 5px
+
+body[data-theme="dark"]
+  .menu-button
+    navDarkButtonColor()
+
+  .menu-button--active
+    @extend .menu-button
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 8855e573..cfc9871f 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -20,28 +20,6 @@
   margin-left 5px
   overflow ellipsis
 
-.menu
-  margin-bottom 30px
-
-.menu-button
-  navButtonColor()
-  height 32px
-  padding 0 15px
-  font-size 14px
-  width 100%
-  text-align left
-  overflow ellipsis
-
-.menu-button--active
-  @extend .menu-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.menu-button-label
-  margin-left 5px
-
 .storageList
   absolute left right
   overflow-y auto
@@ -131,16 +109,6 @@ body[data-theme="dark"]
   .top-menu
     navDarkButtonColor()
 
-  .menu-button
-    navDarkButtonColor()
-
-  .menu-button--active
-    @extend .menu-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
   .storageList-empty
     color $ui-dark-inactive-text-color
 
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index e0ade645..425a3655 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -5,6 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
+import SideNavFilter from 'browser/components/SideNavFilter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -39,8 +40,8 @@ class SideNav extends React.Component {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
-    let isHomeActive = location.pathname.match(/^\/home$/)
-    let isStarredActive = location.pathname.match(/^\/starred$/)
+    let isHomeActive = !!location.pathname.match(/^\/home$/)
+    let isStarredActive = !!location.pathname.match(/^\/starred$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -69,20 +70,12 @@ class SideNav extends React.Component {
           </button>
         </div>
 
-        <div styleName='menu'>
-          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleHomeButtonClick(e)}
-          >
-            <i className='fa fa-book fa-fw'/>
-            <span styleName='menu-button-label'>All Notes</span>
-          </button>
-          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleStarredButtonClick(e)}
-          >
-            <i className='fa fa-star fa-fw'/>
-            <span styleName='menu-button-label'>Starred</span>
-          </button>
-        </div>
+        <SideNavFilter
+          isHomeActive={isHomeActive}
+          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+          isStarredActive={isStarredActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+        />
 
         <div styleName='storageList'>
           {storageList.length > 0 ? storageList : (