diff --git a/webapp/pages/profile.jsx b/webapp/pages/profile.jsx index cfe82c3..62be316 100644 --- a/webapp/pages/profile.jsx +++ b/webapp/pages/profile.jsx @@ -3,13 +3,14 @@ var Markdown = require('markdown.jsx') var Link = require('react-router').Link var Icon = require('icon.jsx') var GetIPFS = require('getipfs.jsx') +var { Loading, Error } = require('status-components.jsx') module.exports = function (boardsAPI) { return React.createClass({ - getInitialState: function () { - return { name: '...', boards: [], api: false } + getInitialState () { + return { loading: true, boards: [], api: false } }, - componentDidMount: function () { + componentDidMount () { boardsAPI.use(boards => { if (boards.isInit) { 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)) + this.setState({ loading: true }) }, - downloadProfile: function (boards, props) { + downloadProfile (boards, props) { var ee = boards.getEventEmitter() var uid = props.params.userid if (uid === 'me') uid = boards.id @@ -40,23 +42,20 @@ module.exports = function (boardsAPI) { boards.getProfile(uid, (err, res) => { if (!this.isMounted()) return true if (err) { - this.setState({ - name: Error, - error: err - }) + this.setState({ loading: false, error: err }) } 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 (boards.isInit || this.state.api) { this.downloadProfile(boards, this.props) this.setState({ init: true }) } }, - linkToEditor: function () { + linkToEditor () { var uid = this.props.params.userid if (uid === 'me' && this.state.id) uid = this.state.id if (uid === this.state.id) { @@ -70,22 +69,31 @@ module.exports = function (boardsAPI) { } return '' }, - render: function () { + getEditButton () { + return Edit Profile + }, + render () { if (this.state.api) { - var uid = this.props.params.userid - if (uid === 'me') uid = this.state.id - return (
- {this.linkToEditor()} -

{this.state.name}

- -
-
@{uid}
- {this.state.boards.map(n => { - return
- # {n.name} -
- })} -
) + if (this.state.error) { + return {this.getEditButton()} + } else if (this.state.loading) { + return {this.getEditButton()} + } else { + var uid = this.props.params.userid + if (uid === 'me') uid = this.state.id + return (
+ {this.linkToEditor()} +

{this.state.name}

+ +
+
@{uid}
+ {this.state.boards.map(n => { + return
+ # {n.name} +
+ })} +
) + } } else return } })