refactor: Upgrade to react-router@2

.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": ["react", "es2015", "stage-0"]
+  "presets": ["react", "es2015", "stage-0"],
+  "env": {
+    "development": {
+      "plugins": [
+        "transform-react-display-name",
+      ]
+    }
+  }
 }

app/scripts/app.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import Router from 'react-router'
+import {render} from 'react-dom'
+import Router, {hashHistory} from 'react-router'
+
 import routes from './routes'
 
 require('../styles/app.less')
@@ -9,8 +10,8 @@ if (process.env.NODE_ENV !== 'production') {
   window.uiDebug = require('debug')
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-  Router.run(routes, function (Handler) {
-    ReactDOM.render(<Handler />, document.getElementById('root'))
-  })
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.getElementById('root')
+
+  render(<Router history={hashHistory} routes={routes} />, root)
 })

app/scripts/pages/files.js

@@ -1,16 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import $ from 'jquery'
+import {Row, Col, Nav, NavItem, Panel} from 'react-bootstrap'
+import {LinkContainer} from 'react-router-bootstrap'
+
 import FileList from '../views/filelist'
 import LocalStorage from '../utils/localStorage'
-import $ from 'jquery'
 import i18n from '../utils/i18n.js'
-import {Row, Col, Nav, Panel} from 'react-bootstrap'
 
 export default React.createClass({
   displayName: 'Files',
   propTypes: {
     ipfs: React.PropTypes.object,
-    gateway: React.PropTypes.string
+    gateway: React.PropTypes.string,
+    location: React.PropTypes.object
   },
   getInitialState: function () {
     var t = this
@@ -125,62 +128,130 @@ export default React.createClass({
     // TODO
   },
 
-  render: function () {
-    var tab = window.location.hash.split('/')
-    tab = tab.length >= 3 ? tab[2] : tab[1]
+  _renderTitle () {
+    switch (this.props.location.pathname) {
+      case '/files':
+        return this._renderAdder()
+      case '/files/pinned':
+        return <h3>{i18n.t('Pinned Files')}</h3>
+      case '/files/all':
+        return <h3>{i18n.t('All Local Files')}</h3>
+      default:
+        return ''
+    }
+  },
 
+  _renderAdder () {
     return (
-  <Row>
-    <Col sm={10} smOffset={1}>
-      <Nav bsStyle={'tabs'}>
-        <li role='presentation' className={tab === 'files' ? 'active' : ''}><a href='#/files'>{i18n.t('Files')}</a></li>
-        <li role='presentation' className={tab === 'pinned' ? 'active' : ''}><a href='#/files/pinned'>{i18n.t('Pinned')}</a></li>
-        <li role='presentation' className={tab === 'all' ? 'active' : ''}><a href='#/files/all'>{i18n.t('All')}</a></li>
-      </Nav>
-
-      <div className={tab !== 'files' ? 'hidden' : ''}>
-        <div className='file-add-container'>
-          <div className='file-add-target' onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}></div>
-          <div className={'file-add-container-inner ' + (this.state.dragging ? 'hover' : '')}></div>
-          <div className={(this.state.dragging || this.state.confirm) ? 'hidden' : ''}>
-            <p><strong>{i18n.t('Drag-and-drop your files here')}</strong></p>
-            <p><span>{i18n.t('or')}</span></p>
-            <p>
-              <button className='btn btn-second add-file' onClick={this.addFile} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>
-                {i18n.t('Select files...')}
-              </button>
-            </p>
-          </div>
-          <div className={!this.state.dragging ? 'hidden' : ''}>
-            <p><strong>{i18n.t('Drop your file here to add it to IPFS')}</strong></p>
-          </div>
-          <div className={!this.state.confirm ? 'hidden' : ''}>
-            <p><i className='fa fa-lg fa-thumbs-up'></i> {i18n.t('Added')} <strong>{this.state.confirm}</strong></p>
-          </div>
-          <input type='file' className='file-select' style={{display: 'none'}} onChange={this.onFileChange}/>
+      <div className='file-add-container'>
+        <div
+            className='file-add-target'
+            onDragOver={this.onDragOver}
+            onDragLeave={this.onDragLeave}
+            onDrop={this.onDrop}
+        >
         </div>
-        <br/>
-
-        <Panel bsStyle={'default'}>
-          <FileList files={this.state.files} ipfs={this.props.ipfs} gateway={this.props.gateway} />
-        </Panel>
+        <div className={'file-add-container-inner ' + (this.state.dragging ? 'hover' : '')}></div>
+        <div className={(this.state.dragging || this.state.confirm) ? 'hidden' : ''}>
+          <p>
+            <strong>{i18n.t('Drag-and-drop your files here')}</strong>
+          </p>
+          <p>
+            <span>{i18n.t('or')}</span>
+          </p>
+          <p>
+            <button
+                className='btn btn-second add-file'
+                onClick={this.addFile}
+                onDragOver={this.onDragOver}
+                onDragLeave={this.onDragLeave}
+                onDrop={this.onDrop}
+            >
+              {i18n.t('Select files...')}
+            </button>
+          </p>
+        </div>
+        <div className={!this.state.dragging ? 'hidden' : ''}>
+          <p>
+            <strong>{i18n.t('Drop your file here to add it to IPFS')}</strong>
+          </p>
+        </div>
+        <div className={!this.state.confirm ? 'hidden' : ''}>
+          <p>
+            <i className='fa fa-lg fa-thumbs-up'></i> {i18n.t('Added')} <strong>{this.state.confirm}</strong>
+          </p>
+        </div>
+        <input
+            type='file'
+            className='file-select'
+            style={{display: 'none'}}
+            onChange={this.onFileChange}
+        />
       </div>
+    )
+  },
 
-      <div className={tab !== 'pinned' ? 'hidden' : ''}>
-        <h3>{i18n.t('Pinned Files')}</h3>
-        <Panel bsStyle={'default'}>
-          <FileList files={this.state.pinned} namesHidden ipfs={this.props.ipfs} gateway={this.props.gateway} />
-        </Panel>
-      </div>
+  _renderPanel () {
+    switch (this.props.location.pathname) {
+      case '/files':
+        return (
+          <Panel bsStyle={'default'}>
+            <FileList
+                files={this.state.files}
+                ipfs={this.props.ipfs}
+                gateway={this.props.gateway}
+            />
+          </Panel>
+        )
+      case '/files/pinned':
+        return (
+          <Panel bsStyle={'default'}>
+            <FileList
+                files={this.state.pinned}
+                namesHidden
+                ipfs={this.props.ipfs}
+                gateway={this.props.gateway}
+            />
+          </Panel>
+        )
+      case '/files/all':
+        return (
+          <Panel bsStyle={'default'}>
+            <FileList
+                files={this.state.local}
+                namesHidden
+                ipfs={this.props.ipfs}
+                gateway={this.props.gateway}
+            />
+          </Panel>
+        )
+      default:
+        return ''
+    }
+  },
 
-      <div className={tab !== 'all' ? 'hidden' : ''}>
-        <h3>{i18n.t('All Local Files')}</h3>
-        <Panel bsStyle={'default'}>
-          <FileList files={this.state.local} namesHidden ipfs={this.props.ipfs} gateway={this.props.gateway} />
-        </Panel>
-      </div>
-    </Col>
-  </Row>
+  render: function () {
+    return (
+      <Row>
+        <Col sm={10} smOffset={1}>
+          <Nav bsStyle='tabs'>
+            <LinkContainer to='/files'>
+              <NavItem>{i18n.t('Files')}</NavItem>
+            </LinkContainer>
+            <LinkContainer to='/files/pinned'>
+              <NavItem>{i18n.t('Pinned')}</NavItem>
+            </LinkContainer>
+            <LinkContainer to='/files/all'>
+              <NavItem>{i18n.t('All')}</NavItem>
+            </LinkContainer>
+          </Nav>
+
+          <div className={this.state.selected}>
+            {this._renderTitle()}
+            {this._renderPanel()}
+          </div>
+        </Col>
+      </Row>
     )
   }
 })

app/scripts/pages/notfound.js

@@ -1,19 +1,21 @@
-var React = require('react')
-var Row = require('react-bootstrap').Row
-var Col = require('react-bootstrap').Col
-var i18n = require('../utils/i18n.js')
+import React from 'react'
+import {Row, Col} from 'react-bootstrap'
+import i18n from '../utils/i18n.js'
+
+import {Link} from 'react-router'
 
 export default React.createClass({
   displayName: 'NotFound',
   render: function () {
     return (
       <Row>
         <Col sm={10} smOffset={1}>
-
           <h1>{i18n.t('404 - Not Found')}</h1>
-
-          <p><a href='#/'>{i18n.t('Go to console home')}</a></p>
-
+          <p>
+            <Link to='/'>
+              {i18n.t('Go to console home')}
+            </Link>
+          </p>
         </Col>
       </Row>
     )

app/scripts/pages/objects.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import Router from 'react-router'
 import $ from 'jquery'
 import ObjectView from '../views/object'
 import {parse} from '../utils/path.js'
@@ -8,10 +7,15 @@ import {Row, Col, Button} from 'react-bootstrap'
 
 export default React.createClass({
   displayName: 'Objects',
+
+  contextTypes: {
+    router: React.PropTypes.object.isRequired
+  },
+
   propTypes: {
-    gateway: React.PropTypes.string
+    gateway: React.PropTypes.string,
+    params: React.PropTypes.object
   },
-  mixins: [ Router.State ],
 
   componentDidMount: function () {
     window.addEventListener('hashchange', this.updateState)
@@ -22,7 +26,7 @@ export default React.createClass({
   },
 
   getStateFromRoute: function () {
-    var params = this.context.router.getCurrentParams()
+    const params = this.props.params
     var state = {}
     if (params.path) {
       var path = parse(params.path)
@@ -66,9 +70,13 @@ export default React.createClass({
 
   update: function (e) {
     if (e.which && e.which !== 13) return
-    var params = this.context.router.getCurrentParams()
+    const params = this.props.params
     params.path = parse(this.state.pathInput).urlify()
-    this.context.router.transitionTo('objects', params)
+
+    const route = ['/objects']
+    if (params.path) route.push(params.path)
+
+    this.context.router.push(route.join('/'))
   },
 
   render: function () {
@@ -82,8 +90,7 @@ export default React.createClass({
       : null
 
     // TODO add provider-view here
-    var views = {
-      object: (!error && this.state.object
+    var views = (!error && this.state.object
         ? <div className='row'>
             <div className='col-xs-12'>
               <ObjectView
@@ -94,10 +101,6 @@ export default React.createClass({
             </div>
           </div>
         : null)
-    }
-
-    var params = this.context.router.getCurrentParams()
-    var tab = params.tab
 
     return (
       <Row>
@@ -117,7 +120,7 @@ export default React.createClass({
             </Row>
           </Row>
           {error}
-          {views[tab]}
+          {views}
         </Col>
       </Row>
     )

app/scripts/routes.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Route, DefaultRoute, NotFoundRoute, Redirect} from 'react-router'
+import {Route, IndexRoute, Redirect} from 'react-router'
 
 import Page from './views/page'
 import HomePage from './pages/home'
@@ -13,18 +13,21 @@ import LogPage from './pages/logs'
 import NotFoundPage from './pages/notfound'
 
 export default (
-  <Route handler={Page} path='/'>
-    <DefaultRoute name='home' handler={HomePage} />
-    <Route name='connections' handler={ConnectionsPage} />
-    <Route name='files' handler={FilesPage} />
-    <Route name='files-pinned' path='/files/pinned' handler={FilesPage} />
-    <Route name='files-all' path='/files/all' handler={FilesPage} />
-    <Route name='objects' path='/objects/:tab/:path?' handler={ObjectsPage} />
-    <Route name='bitswap' handler={BitswapPage} />
-    <Route name='routing' handler={RoutingPage} />
-    <Route name='config' handler={ConfigPage} />
-    <Route name='logs' handler={LogPage} />
-    <NotFoundRoute handler={NotFoundPage} />
-    <Redirect from='/index.html' to='home' />
+  <Route component={Page} path='/'>
+    <IndexRoute component={HomePage}/>
+    <Route path='home' component={HomePage} />
+
+    <Route path='connections' component={ConnectionsPage} />
+    <Route path='files' component={FilesPage} />
+    <Route path='files/pinned' component={FilesPage} />
+    <Route path='files/all' component={FilesPage} />
+    <Route path='objects(/:path)' component={ObjectsPage} />
+    <Route path='bitswap' component={BitswapPage} />
+    <Route path='routing' component={RoutingPage} />
+    <Route path='config' component={ConfigPage} />
+    <Route path='logs' component={LogPage} />
+
+    <Route path='*' component={NotFoundPage} />
+    <Redirect from='/index.html' to='/home' />
   </Route>
 )