diff --git a/webapp/components/status-components.jsx b/webapp/components/status-components.jsx new file mode 100644 index 0000000..cda7b65 --- /dev/null +++ b/webapp/components/status-components.jsx @@ -0,0 +1,41 @@ +var React = require('react') +var Icon = require('icon.jsx') + +var Error = React.createClass({ + render () { + return
+
+ +

Ooops

+

{'' + this.props.error || 'Something went wrong'}

+ { this.props.children } +
+
+ } +}) + +var Loading = React.createClass({ + render () { + return
+
+ +

{this.props.title}

+ { this.props.children } +
+
+ } +}) + +var Saving = React.createClass({ + render () { + return
+
+ +

Publishing...

+ { this.props.children } +
+
+ } +}) + +module.exports = { Error, Loading, Saving } diff --git a/webapp/pages/board-editor.jsx b/webapp/pages/board-editor.jsx index 3b1bb01..58be557 100644 --- a/webapp/pages/board-editor.jsx +++ b/webapp/pages/board-editor.jsx @@ -2,6 +2,7 @@ var React = require('react') var GetIPFS = require('getipfs.jsx') var Icon = require('icon.jsx') var Link = require('react-router').Link +var { Error, Loading, Saving } = require('status-components.jsx') module.exports = function (boardsAPI) { return React.createClass({ @@ -81,31 +82,18 @@ module.exports = function (boardsAPI) { render () { if (this.state.api) { if (this.state.error) { - return
-
- -

Ooops

-

{'' + this.state.error}

- -
-
+ return + + } else if (this.state.loading) { - return
-
- -

Fetching your current Board Settings...

- -
-
+ return + + } else if (this.state.updating) { - return
-
- -

Publishing...

-

Pressing the Skip button will not abort the publish operation.

- -
-
+ return +

Pressing the Skip button will not abort the publish operation.

+ +
} else { return (
diff --git a/webapp/pages/profile-editor.jsx b/webapp/pages/profile-editor.jsx index b107fcd..000741a 100644 --- a/webapp/pages/profile-editor.jsx +++ b/webapp/pages/profile-editor.jsx @@ -2,6 +2,7 @@ var React = require('react') var GetIPFS = require('getipfs.jsx') var Icon = require('icon.jsx') var Link = require('react-router').Link +var { Error, Loading, Saving } = require('status-components.jsx') module.exports = function (boardsAPI) { return React.createClass({ @@ -67,31 +68,18 @@ module.exports = function (boardsAPI) { render () { if (this.state.api) { if (this.state.error) { - return
-
- -

Ooops

-

{'' + this.state.error}

- -
-
+ return + + } else if (this.state.loading) { - return
-
- -

Fetching your current profile...

- -
-
+ return + + } else if (this.state.updating) { - return
-
- -

Publishing...

-

Pressing the Skip button will not abort the publish operation.

- -
-
+ return +

Pressing the Skip button will not abort the publish operation.

+ +
} else { return (