updater implemented

webapp/app.jsx

@@ -34,6 +34,7 @@ require.ensure('react', _ => {
   var BoardEditor = require('board-editor.jsx')(boards)
   var PostEditor = require('post-editor.jsx')(boards)
   var Status = require('status.jsx')(boards)
+  var Update = require('update.jsx')
 
   // Define Main Components
 
@@ -121,6 +122,7 @@ require.ensure('react', _ => {
             <Route path="users" component={Users} />
             <Route path="settings" component={Settings} />
             <Route path="status" component={Status} />
+            <Route path="version" component={Update} />
             <Route path="*" component={NotFound} />
           </Route>
         </Router>

webapp/components/navbar.jsx

@@ -3,20 +3,25 @@ var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 
 var Updater = React.createClass({
+  getInitialState () {
+    return {}
+  },
   componentDidMount () {
-    if (this.props.api) this.checkForUpdates(this.props.api)
+    this.checkForUpdates()
   },
-  componentWillReceiveProps (props) {
-    this.checkForUpdates(props.api)
-  },
-  checkForUpdates (boards) {
+  checkForUpdates () {
     var v = window.location.pathname
-    if (/\/ip(f|n)s\/./.test(v)) {
-      // Advise user to run from another URL
+    var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0
+    if (v !== '/ipns/boards.ydns.eu' || !gateway) {
+      this.setState({ update: true })
     }
   },
   render () {
-    return <div></div>
+    if (this.state.update) {
+      return <Link className="nounderline" to='/version' >
+        <Icon name="history" className="fa-2x light" />
+      </Link>
+    } else return <div></div>
   }
 })
 
@@ -43,7 +48,6 @@ module.exports = function (boardsAPI) {
         return <span>
             <Link className="nounderline" to={'/@' + this.state.userid}><Icon name="user" className="fa-2x light"/></Link>
             <Link className="nounderline" to="/users"><Icon name="globe" className="fa-2x light"/></Link>
-            <Updater api={this.state.api} />
           </span>
       } else if (this.state.loading) {
         return <Link className="nounderline" to="/status"><Icon name="refresh" className="fa-2x fa-spin light"/></Link>
@@ -59,6 +63,7 @@ module.exports = function (boardsAPI) {
           <div className="container">
             <h4><Link to="/"><Icon name="comments" className="light"/> Boards</Link></h4>
             <div className="u-pull-right iconbar">
+              <Updater/>
               {this.extraButtons()}
               <Link className="nounderline" to="/settings"><Icon name="cog" className="fa-2x light"/></Link>
               <a className="nounderline" href="https://github.com/fazo96/ipfs-boards"><Icon name="github" className="fa-2x light"/></a>

webapp/pages/update.jsx

@@ -0,0 +1,24 @@
+var React = require('react')
+var Icon = require('icon.jsx')
+
+module.exports = React.createClass({
+  render () {
+    var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0
+    return <div>
+      <div className="text-center">
+        <h1><Icon name="history" className="light" /></h1>
+        <h3 className="light">Version Center</h3>
+      </div>
+      <p>This page lets you reach the latest version
+      of the app from any older versions. In the future, you will be able to manage
+      and easily access any old version of the app too, for compatibility
+      and archival reasons.</p>
+      <p><b>You're free to keep going</b>, but if you want the latest updates as
+      soon as they are published, you can click the following button, that will
+      bring you to an IPFS URL that always points to the latest version.</p>
+      <div className="buttons">
+        <a className="button button-primary" href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
+      </div>
+    </div>
+  }
+})