modularize loading, error and saving components

webapp/components/status-components.jsx

@@ -0,0 +1,41 @@
+var React = require('react')
+var Icon = require('icon.jsx')
+
+var Error = React.createClass({
+  render () {
+    return <div>
+      <div className="text-center">
+        <Icon className="center-block fa-3x light" name="ban" />
+        <h4 className="top-half-em">Ooops</h4>
+        <p>{'' + this.props.error || 'Something went wrong'}</p>
+        { this.props.children }
+      </div>
+    </div>
+  }
+})
+
+var Loading = React.createClass({
+  render () {
+    return <div>
+      <div className="text-center">
+        <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+        <h4 className="top-half-em">{this.props.title}</h4>
+        { this.props.children }
+      </div>
+    </div>
+  }
+})
+
+var Saving = React.createClass({
+  render () {
+    return <div>
+      <div className="text-center">
+        <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+        <h4 className="top-half-em">Publishing...</h4>
+        { this.props.children }
+      </div>
+    </div>
+  }
+})
+
+module.exports = { Error, Loading, Saving }

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 <div>
+          return <Error error={this.state.error} >
-            <div className="text-center">
+            <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
-              <Icon className="center-block fa-3x light" name="ban" />
+          </Error>
-              <h4 className="top-half-em">Ooops</h4>
-              <p>{'' + this.state.error}</p>
-              <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
-            </div>
-          </div>
         } else if (this.state.loading) {
-          return <div>
+          return <Loading title="Fetching your current Board Settings...">
-            <div className="text-center">
+            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-              <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+          </Loading>
-              <h4 className="top-half-em">Fetching your current Board Settings...</h4>
-              <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-            </div>
-          </div>
         } else if (this.state.updating) {
-          return <div>
+          return <Saving>
-            <div className="text-center">
+            <p>Pressing the Skip button will not abort the publish operation.</p>
-              <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-              <h4 className="top-half-em">Publishing...</h4>
+          </Saving>
-              <p>Pressing the Skip button will not abort the publish operation.</p>
-              <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-            </div>
-          </div>
         } else {
           return (
             <div className="editor">

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 <div>
+          return <Error error={this.state.error} >
-            <div className="text-center">
+            <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
-              <Icon className="center-block fa-3x light" name="ban" />
+          </Error>
-              <h4 className="top-half-em">Ooops</h4>
-              <p>{'' + this.state.error}</p>
-              <button className="button button-primary center-block" onClick={this.skip}>Continue</button>
-            </div>
-          </div>
         } else if (this.state.loading) {
-          return <div>
+          return <Loading title="Fetching your current Profile...">
-            <div className="text-center">
+            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-              <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+          </Loading>
-              <h4 className="top-half-em">Fetching your current profile...</h4>
-              <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-            </div>
-          </div>
         } else if (this.state.updating) {
-          return <div>
+          return <Saving>
-            <div className="text-center">
+            <p>Pressing the Skip button will not abort the publish operation.</p>
-              <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+            <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-              <h4 className="top-half-em">Publishing...</h4>
+          </Saving>
-              <p>Pressing the Skip button will not abort the publish operation.</p>
-              <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
-            </div>
-          </div>
         } else {
           return (
             <div className="editor">