Skip to content

Commit

Permalink
refactor: Upgrade to react-router@2
Browse files Browse the repository at this point in the history 
This also upgrades the test story to be more
useful as I found some issues with the one before.
So this superseeds #154.

Closes #131
  • Loading branch information
@dignifiedquire
dignifiedquire committed Jan 2, 2016
1 parent c0b08b6 commit 2ead6c5
Show file tree
Hide file tree
Showing 20 changed files with 335 additions and 140 deletions.
9 changes: 8 additions & 1 deletion .babelrc
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
{
"presets": ["react", "es2015", "stage-0"]
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"plugins": [
"transform-react-display-name",
]
}
}
}
13 changes: 7 additions & 6 deletions app/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -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)
})
177 changes: 124 additions & 53 deletions app/scripts/pages/files.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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>
)
}
})
18 changes: 10 additions & 8 deletions app/scripts/pages/notfound.js
View file
Original file line number Diff line number Diff line change
@@ -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>
)
Expand Down
29 changes: 16 additions & 13 deletions app/scripts/pages/objects.js
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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 () {
Expand All @@ -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
Expand All @@ -94,10 +101,6 @@ export default React.createClass({
</div>
</div>
: null)
}

var params = this.context.router.getCurrentParams()
var tab = params.tab

return (
<Row>
Expand All @@ -117,7 +120,7 @@ export default React.createClass({
</Row>
</Row>
{error}
{views[tab]}
{views}
</Col>
</Row>
)
Expand Down
31 changes: 17 additions & 14 deletions app/scripts/routes.js
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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>
)
2 changes: 1 addition & 1 deletion app/scripts/views/filelist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default React.createClass({
}

var gatewayPath = t.props.gateway + '/ipfs/' + file.id
var dagPath = '#/objects/object/' + file.id
var dagPath = '#/objects/' + file.id

var tooltip = (
<Tooltip id={file.id}>{i18n.t('Remove')}</Tooltip>
Expand Down
Loading

0 comments on commit 2ead6c5

Please sign in to comment.