fixed up profile editor

webapp/pages/profile-editor.jsx

@@ -1,6 +1,7 @@
 var React = require('react')
 var GetIPFS = require('getipfs.jsx')
 var Icon = require('icon.jsx')
+var Link = require('react-router').Link
 
 module.exports = function (boardsAPI) {
   return React.createClass({
@@ -45,7 +46,11 @@ module.exports = function (boardsAPI) {
       }
     },
     skip () {
-      this.setState({ loading: false })
+      this.setState({ loading: false, updating: false, error: false })
+    },
+    refresh () {
+      this.setState({ loading: true })
+      boardsAPI.use(b => this.getProfile(b))
     },
     save () {
       var boards = this.state.api
@@ -53,13 +58,24 @@ module.exports = function (boardsAPI) {
         name: this.state.name,
         description: this.state.description
       }
+      this.setState({ updating: true })
       boards.createProfile(profile, err => {
-        console.log('CREATE:', err)
+        this.setState({ error: err, updating: false })
+        if (err) console.log('Profile Publish error:', err)
       })
     },
     render () {
       if (this.state.api) {
-        if (this.state.loading) {
+        if (this.state.error) {
+          return <div>
+            <div className="text-center">
+              <Icon className="center-block fa-3x light" name="ban" />
+              <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>
             <div className="text-center">
               <Icon className="center-block fa-spin fa-3x light" name="refresh" />
@@ -67,6 +83,15 @@ module.exports = function (boardsAPI) {
               <button className="button button-primary center-block" onClick={this.skip}>Skip</button>
             </div>
           </div>
+        } else if (this.state.updating) {
+          return <div>
+            <div className="text-center">
+              <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+              <h4 className="top-half-em">Publishing...</h4>
+              <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">
@@ -74,6 +99,9 @@ module.exports = function (boardsAPI) {
               <p>This App uses IPFS to store your profile. When you are offline,
               other users or servers that viewed your profile will serve it to
               others.</p>
+            <p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute
+            for your changes to be visibile. Your profile will appear unchanged during
+            this time.</p>
               <div className="center-block thin">
                 <label htmlFor="name">Name</label>
                 <input className="u-full-width" type="text" id="name" value={this.state.name} onChange={this.handleChange} placeholder="Who are you on the interwebs?" />
@@ -84,6 +112,8 @@ module.exports = function (boardsAPI) {
               </div>
               <div className="buttons">
                 <button className="button button-primary" onClick={this.save}>Publish</button>
+                <button onClick={this.refresh} className="button not-first">Refresh</button>
+                <Link to='/@me' className="button not-first">View</Link>
               </div>
             </div>
           )

webapp/style.css

@@ -146,11 +146,6 @@ a:hover {
   margin-left: .5rem;
 }
 
-.settings .buttons .button {
-  display: block;
-  margin: 1rem auto;
-  width: 80%
-}
 .homepage {
   text-align: center;
   max-width: 70rem;
@@ -179,15 +174,27 @@ a:hover {
   margin: 3rem auto;
 }
 
-@media (min-width: 400px) {
+.buttons .button {
+  display: block;
+  margin: auto;
+  width: 80%
+}
+
+.buttons .not-first {
+  /* mobile only */
+  margin-top: 1rem;
+}
+
+@media (min-width: 500px) {
   /* larger than mobile */
-  .settings .buttons {
+  .buttons {
     text-align: inherit;
   }
-  .settings .buttons .not-first {
+  .buttons .not-first {
-    margin: 0 1rem;
+    margin-left: 1rem;
+    margin-top: auto;
   }
-  .settings .buttons .button {
+  .buttons .button {
     display: inline-block;
     width: auto;
   }