fazo96/ipfs-boards
1
0
Fork 0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-03-12 21:48:39 +01:00
Code Issues Releases Wiki Activity

refactored profile.jsx

Browse Source
This commit is contained in:
Enrico Fasoli 2015-12-17 18:43:10 +01:00
parent 0020f52a48
commit dcf02abb7d
1 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
webapp/pages/profile.jsx
View File

@ -3,13 +3,14 @@ var Markdown = require('markdown.jsx')
var Link = require('react-router').Link var Link = require('react-router').Link
var Icon = require('icon.jsx') var Icon = require('icon.jsx')
var GetIPFS = require('getipfs.jsx') var GetIPFS = require('getipfs.jsx')
var { Loading, Error } = require('status-components.jsx')
module.exports = function (boardsAPI) { module.exports = function (boardsAPI) {
return React.createClass({ return React.createClass({
getInitialState: function () { getInitialState () {
return { name: '...', boards: [], api: false } return { loading: true, boards: [], api: false }
}, },
componentDidMount: function () { componentDidMount () {
boardsAPI.use(boards => { boardsAPI.use(boards => {
if (boards.isInit) { if (boards.isInit) {
this.setState({ api: boards, id: boards.id }) this.setState({ api: boards, id: boards.id })
@ -24,10 +25,11 @@ module.exports = function (boardsAPI) {
}) })
}) })
}, },
componentWillReceiveProps: function (nextProps) { componentWillReceiveProps (nextProps) {
boardsAPI.use(boards => this.downloadProfile(boards, nextProps)) boardsAPI.use(boards => this.downloadProfile(boards, nextProps))
this.setState({ loading: true })
}, },
downloadProfile: function (boards, props) { downloadProfile (boards, props) {
var ee = boards.getEventEmitter() var ee = boards.getEventEmitter()
var uid = props.params.userid var uid = props.params.userid
if (uid === 'me') uid = boards.id if (uid === 'me') uid = boards.id
@ -40,23 +42,20 @@ module.exports = function (boardsAPI) {
boards.getProfile(uid, (err, res) => { boards.getProfile(uid, (err, res) => {
if (!this.isMounted()) return true if (!this.isMounted()) return true
if (err) { if (err) {
this.setState({ this.setState({ loading: false, error: err })
name: <span><Icon name="ban" /> Error</span>,
error: err
})
} else { } else {
this.setState({ name: res.name, description: res.description }) this.setState({ loading: false, name: res.name, description: res.description })
} }
}) })
}, },
init: function (boards) { init (boards) {
if (this.state.init) return if (this.state.init) return
if (boards.isInit || this.state.api) { if (boards.isInit || this.state.api) {
this.downloadProfile(boards, this.props) this.downloadProfile(boards, this.props)
this.setState({ init: true }) this.setState({ init: true })
} }
}, },
linkToEditor: function () { linkToEditor () {
var uid = this.props.params.userid var uid = this.props.params.userid
if (uid === 'me' && this.state.id) uid = this.state.id if (uid === 'me' && this.state.id) uid = this.state.id
if (uid === this.state.id) { if (uid === this.state.id) {
@ -70,22 +69,31 @@ module.exports = function (boardsAPI) {
} }
return '' return ''
}, },
render: function () { getEditButton () {
return <Link className="button button-primary" to="/edit/profile">Edit Profile</Link>
},
render () {
if (this.state.api) { if (this.state.api) {
var uid = this.props.params.userid if (this.state.error) {
if (uid === 'me') uid = this.state.id return <Error error={this.state.error}>{this.getEditButton()}</Error>
return (<div className="profile"> } else if (this.state.loading) {
{this.linkToEditor()} return <Loading title="Downloading Profile">{this.getEditButton()}</Loading>
<h1>{this.state.name}</h1> } else {
<Markdown source={this.state.erro ? this.state.error : this.state.description} skipHtml={true} /> var uid = this.props.params.userid
<hr/> if (uid === 'me') uid = this.state.id
<div className="light breaker">@{uid}</div> return (<div className="profile">
{this.state.boards.map(n => { {this.linkToEditor()}
return <h6 className="light" key={uid + '/' + n.name}> <h1>{this.state.name}</h1>
<Link to={'/@' + uid + '/' + n.name}># {n.name}</Link> <Markdown source={this.state.description} skipHtml={true} />
</h6> <hr/>
})} <div className="light breaker">@{uid}</div>
</div>) {this.state.boards.map(n => {
return <h6 className="light" key={uid + '/' + n.name}>
<Link to={'/@' + uid + '/' + n.name}># {n.name}</Link>
</h6>
})}
</div>)
}
} else return <GetIPFS api={this.state.api} /> } else return <GetIPFS api={this.state.api} />
} }
}) })