use ReactRouter

Author: Rokt33r

browser/main/HomePage/SideNav/index.js

@@ -35,15 +35,27 @@ class SideNav extends React.Component {
     openModal(Preferences)
   }
 
+  handleHomeButtonClick (e) {
+    let { router } = this.context
+    router.push('/repositories')
+  }
+
+  handleStarredButtonClick (e) {
+    let { router } = this.context
+    router.push('/starred')
+  }
+
   render () {
-    let { repositories, dispatch } = this.props
+    let { repositories, dispatch, location } = this.props
     let repositorieElements = repositories.map((repo) => {
       return <RepositorySection
         key={repo.key}
         repository={repo}
         dispatch={dispatch}
       />
     })
+    let isHomeActive = location.pathname.match(/^\/home$/)
+    let isStarredActive = location.pathname.match(/^\/starred$/)
 
     return (
       <div
@@ -60,13 +72,15 @@ class SideNav extends React.Component {
         </div>
 
         <div styleName='menu'>
-          <button styleName='menu-button'
+          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+            onClick={(e) => this.handleHomeButtonClick(e)}
           >
             <i className='fa fa-home'/> Home
           </button>
-          <button styleName='menu-button'
+          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+            onClick={(e) => this.handleStarredButtonClick(e)}
           >
-            <i className='fa fa-star'/> Favorited
+            <i className='fa fa-star'/> Starred
           </button>
         </div>
 
@@ -84,6 +98,10 @@ class SideNav extends React.Component {
   }
 }
 
+SideNav.contextTypes = {
+  router: PropTypes.shape({})
+}
+
 SideNav.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array

browser/main/Main.js

@@ -27,7 +27,7 @@ export default class MainContainer extends React.Component {
         {this.state.updateAvailable ? (
           <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
-        <HomePage/>
+        <HomePage {...this.props}/>
       </div>
     )
   }

browser/main/index.js

@@ -6,9 +6,11 @@ import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
 import activityRecord from 'browser/lib/activityRecord'
 import fetchConfig from '../lib/fetchConfig'
+import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
+import { syncHistoryWithStore } from 'react-router-redux'
 
 const remote = electron.remote
 
@@ -73,12 +75,26 @@ ipc.on('open-finder', function () {
 })
 
 let el = document.getElementById('content')
+const history = syncHistoryWithStore(hashHistory, store)
+history.listen((location) => console.info(location))
 ReactDOM.render((
-  <div>
-    <Provider store={store}>
-      <Main/>
-    </Provider>
-  </div>
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path='/' component={Main}>
+        <IndexRedirect to='/home'/>
+        <Route path='home'/>
+        <Route path='starred'/>
+        <Route path='repositories'>
+          <IndexRedirect to='/home'/>
+          <Route path=':repositoryKey'>
+            <IndexRoute/>
+            <Route path='settings'/>
+            <Route path='folders/:folderKey'/>
+          </Route>
+        </Route>
+      </Route>
+    </Router>
+  </Provider>
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)

browser/main/store.js

@@ -1,5 +1,6 @@
 import { combineReducers, createStore } from 'redux'
 import _ from 'lodash'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
 
 /**
  * Repositories
@@ -110,7 +111,8 @@ function repositories (state = initialRepositories, action) {
 }
 
 let reducer = combineReducers({
-  repositories
+  repositories,
+  routing: routerReducer
 })
 
 let store = createStore(reducer)

package.json

@@ -45,7 +45,7 @@
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
     "highlight.js": "^9.3.0",
-    "lodash": "^3.10.1",
+    "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
@@ -73,6 +73,8 @@
     "nib": "^1.1.0",
     "oh-my-cdn": "^0.1.1",
     "react-css-modules": "^3.7.6",
+    "react-router": "^2.4.0",
+    "react-router-redux": "^4.0.4",
     "standard": "^6.0.8",
     "style-loader": "^0.12.4",
     "stylus": "^0.52.4",