1
0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-02-09 17:14:19 +01:00
ipfs-boards/webapp/components/navbar.jsx
2015-12-15 17:15:12 +01:00

71 lines
2.3 KiB
JavaScript

var React = require('react')
var Icon = require('icon.jsx')
var Link = require('react-router').Link
var Updater = React.createClass({
componentDidMount () {
if (this.props.api) this.checkForUpdates(this.props.api)
},
componentWillReceiveProps (props) {
this.checkForUpdates(props.api)
},
checkForUpdates (boards) {
var v = window.location.pathname
if (/\/ipfs\/./.test(v)) {
boards.getIPFS().path.resolve(v.substring(6), (err, res) => {
console.log('PATH RESOLVE', err, res)
})
}
},
render () {
return <div></div>
}
})
module.exports = function (boardsAPI) {
return React.createClass({
getInitialState: function () {
return { loading: true }
},
componentDidMount () {
boardsAPI.use(boards => {
if (boards.isInit) this.setState({ api: boards })
boards.getEventEmitter().on('init', err => {
if (!this.isMounted()) return
if (err) {
this.setState({ loading: false, api: false })
} else {
this.setState({ api: boards })
}
})
})
},
extraButtons: function () {
if (this.state.api) {
return <span>
<Link className="nounderline" to="/@me"><Icon name="user" className="fa-2x light"/></Link>
<Link className="nounderline" to="/users"><Icon name="globe" className="fa-2x light"/></Link>
<Updater api={this.state.api} />
</span>
} else if (this.state.loading) {
return <Icon name="refresh" className="fa-2x fa-spin light"/>
} else {
return <Link className="nounderline" to="/users"><Icon name="ban" className="fa-2x light"/></Link>
}
},
render: function () {
return (
<div className="navbar">
<div className="container">
<h4><Link to="/"><Icon name="comments" className="light"/> Boards</Link></h4>
<div className="u-pull-right iconbar">
{this.extraButtons()}
<Link className="nounderline" to="/settings"><Icon name="cog" className="fa-2x light"/></Link>
<a className="nounderline" href="https://github.com/fazo96/ipfs-boards"><Icon name="github" className="fa-2x light"/></a>
</div>
</div>
</div>)
}
})
}