looks like everything works.. needs moar testing

webapp/components/comment.jsx

@@ -41,7 +41,7 @@ var Comment = React.createClass({
           {this.getParentlink()}
         </div>
         <Markdown source={this.props.comment.text} />
-      <hr/></div>
+      <hr/>{this.getComments()}</div>
     } else {
       return <div><hr/>Invalid Comment<hr/></div>
     }

webapp/components/post.jsx

@@ -3,41 +3,39 @@ var Markdown = require('markdown.jsx')
 var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 var Clock = require('clock.jsx')
+var UserID = require('userID.jsx')
 
-module.exports = function(){
+module.exports = React.createClass({
-  var UserID = require('userID.jsx')()
+  getInitialState: function(){
-  return React.createClass({
+    return { moment: false }
-    getInitialState: function(){
+  },
-      return { moment: false }
+  componentDidMount: function(){
-    },
+    require.ensure(['moment'],_ => {
-    componentDidMount: function(){
+      if(this.isMounted()) this.setState({ moment: require('moment') })
-      require.ensure(['moment'],_ => {
+    })
-        if(this.isMounted()) this.setState({ moment: require('moment') })
+  },
-      })
+  postLink: function(){
-    },
+    if(this.props.post.op){
-    postLink: function(){
+      if(this.props.board){
-      if(this.props.post.op){
+        return '/@'+this.props.post.op+'/'+this.props.board+'/'+this.props.post.hash
-        if(this.props.board){
-          return '/@'+this.props.post.op+'/'+this.props.board+'/'+this.props.post.hash
-        } else {
-          return '/@'+this.props.post.op+'/post/'+this.props.post.hash
-        }
       } else {
-        return '/post/'+this.props.post.hash
+        return '/@'+this.props.post.op+'/post/'+this.props.post.hash
       }
-    },
+    } else {
-    render: function(){
+      return '/post/'+this.props.post.hash
-      return <div key={this.props.post.title} className="post">
+    }
-        <div className="content">
+  },
-          <h5>{this.props.post.title}</h5><hr/>
+  render: function(){
-          <Markdown source={this.props.post.text} /><hr/>
+    return <div key={this.props.post.title} className="post">
-          <div className="icons">
+      <div className="content">
-            <UserID id={this.props.post.op} api={this.props.api} ></UserID>
+        <h5>{this.props.post.title}</h5><hr/>
-            <Clock className="not-first" date={this.props.post.date} />
+        <Markdown source={this.props.post.text} /><hr/>
-            <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
+        <div className="icons">
-          </div>
+          <UserID id={this.props.post.op} api={this.props.api} ></UserID>
+          <Clock className="not-first" date={this.props.post.date} />
+          <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
         </div>
       </div>
-    }
+    </div>
-  })
+  }
-}
+})

webapp/components/postlist.jsx

@@ -1,58 +1,56 @@
 var React = require('react')
 var sortedIndex = require('lodash.sortedindex')
 var Icon = require('icon.jsx')
+var Post = require('post.jsx')
 
-module.exports = function(){
+module.exports = React.createClass({
-  var Post = require('post.jsx')()
+  getInitialState: function(){
-  return React.createClass({
+    return { posts: [], api: false }
-    getInitialState: function(){
+  },
-      return { posts: [], api: false }
+  sortFn: function(a,b){
-    },
+    return (b.date || 0) - (a.date || 0)
-    sortFn: function(a,b){
+  },
-      return (b.date || 0) - (a.date || 0)
+  init: function(boards){
-    },
+    this.setState({ api: true })
-    init: function(boards){
+    boards.getPostsInBoard(this.props.admin,this.props.board)
-      this.setState({ api: true })
+    .on('post in '+this.props.board+(this.props.admin?'@'+this.props.admin:''),(post,hash) => {
-      boards.getPostsInBoard(this.props.admin,this.props.board)
+      if(!this.isMounted()) return true
-      .on('post in '+this.props.board+(this.props.admin?'@'+this.props.admin:''),(post,hash) => {
+      var now = (new Date()).getTime()
-        if(!this.isMounted()) return true
+      var posts = this.state.posts
-        var now = (new Date()).getTime()
+      if(post.date === undefined || post.date <= 0){
-        var posts = this.state.posts
+        posts.push(post)
-        if(post.date === undefined || post.date <= 0){
+      } else if(post.date <= now){
-          posts.push(post)
+        var i = sortedIndex(posts,post,(p) => now-p.date || now)
-        } else if(post.date <= now){
+        posts.splice(i,0,post)
-          var i = sortedIndex(posts,post,(p) => now-p.date || now)
+      } else {
-          posts.splice(i,0,post)
+        console.log('Post discarded cause date in the future:',post)
-        } else {
-          console.log('Post discarded cause date in the future:',post)
-        }
-        this.setState({ posts })
-      })
-    },
-    componentDidMount: function(){
-      var boards = this.props.api
-      if(boards){
-        if(boards.isInit) this.init(boards)
-        else boards.getEventEmitter().on('init',err => {
-          if(!err && this.isMounted()) this.init(boards)
-        })
       }
-    },
+      this.setState({ posts })
-    getPosts: function(){
+    })
-      if(this.state.posts.length > 0 || this.state.api){
+  },
-        return this.state.posts.map(post => {
+  componentDidMount: function(){
-          return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} api={this.props.api} />
+    var boards = this.props.api
-        })
+    if(boards){
-      } else return <div className="center-block text-center">
+      if(boards.isInit) this.init(boards)
-        <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+      else boards.getEventEmitter().on('init',err => {
-      </div>
+        if(!err && this.isMounted()) this.init(boards)
-    },
+      })
-    render: function(){
-      return (
-        <div className="postList">
-          {this.getPosts()}
-        </div>
-      )
     }
-  })
+  },
-}
+  getPosts: function(){
+    if(this.state.posts.length > 0 || this.state.api){
+      return this.state.posts.map(post => {
+        return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} api={this.props.api} />
+      })
+    } else return <div className="center-block text-center">
+      <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+    </div>
+  },
+  render: function(){
+    return (
+      <div className="postList">
+        {this.getPosts()}
+      </div>
+    )
+  }
+})

webapp/components/userID.jsx

@@ -2,52 +2,50 @@ var React = require('react')
 var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 
-module.exports = function(){
+module.exports = React.createClass({
-  return React.createClass({
+  getInitialState: function(){
-    getInitialState: function(){
+    return { }
-      return { }
+  },
-    },
+  componentDidMount: function(){
-    componentDidMount: function(){
+    var boards = this.props.api
-      var boards = this.props.api
+    if(boards){
-      if(boards){
+      if(boards.isInit){
-        if(boards.isInit){
+        this.getProfile(boards)
-          this.getProfile(boards)
-        }
-        boards.getEventEmitter().on('init',err => {
-          if(!err && this.isMounted()) this.getProfile(boards)
-          else console.log('ERR INIT',err)
-        })
       }
-    },
+      boards.getEventEmitter().on('init',err => {
-    getProfile: function(boards){
+        if(!err && this.isMounted()) this.getProfile(boards)
-      if(this.props.id === undefined) return
+        else console.log('ERR INIT',err)
-      boards.getProfile(this.props.id, (err,res) => {
-        if(!this.isMounted()) return true
-        if(err){
-          console.log('Error while resolving user badge:',err)
-        } else {
-          this.setState({ name: res.name || 'Unknown Name' })
-        }
       })
-    },
-    getContent: function(){
-      if(this.state.name){
-        return (<Icon name="user" />)
-      } else {
-        return '@'
-      }
-    },
-    render: function(){
-      if(this.props.id === undefined || this.props.id === 'undefined')
-        return <div className="user-id">
-            <Icon name="ban" /> Unknown User
-          </div>
-      else
-        return (<div className="user-id">
-          <Link className="light nounderline" to={'/@'+this.props.id}>
-            {this.getContent()}{this.state.name || this.props.id}
-          </Link>
-        </div>)
     }
-  })
+  },
-}
+  getProfile: function(boards){
+    if(this.props.id === undefined) return
+    boards.getProfile(this.props.id, (err,res) => {
+      if(!this.isMounted()) return true
+      if(err){
+        console.log('Error while resolving user badge:',err)
+      } else {
+        this.setState({ name: res.name || 'Unknown Name' })
+      }
+    })
+  },
+  getContent: function(){
+    if(this.state.name){
+      return (<Icon name="user" />)
+    } else {
+      return '@'
+    }
+  },
+  render: function(){
+    if(this.props.id === undefined || this.props.id === 'undefined')
+      return <div className="user-id">
+          <Icon name="ban" /> Unknown User
+        </div>
+    else
+      return (<div className="user-id">
+        <Link className="light nounderline" to={'/@'+this.props.id}>
+          {this.getContent()}{this.state.name || this.props.id}
+        </Link>
+      </div>)
+  }
+})

webapp/pages/board.jsx

@@ -2,11 +2,11 @@ var React = require('react')
 var Markdown = require('markdown.jsx')
 var Link = require('react-router').Link
 var Icon = require('icon.jsx')
+var UserID = require('userID.jsx')
+var PostList = require('postlist.jsx')
+var GetIPFS = require('getipfs.jsx')
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')()
-  var PostList = require('postlist.jsx')()
-  var GetIPFS = require('getipfs.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { name: this.props.params.boardname, api: false }

webapp/pages/commentpage.jsx

@@ -1,13 +1,12 @@
 var React = require('react')
 var Link = require('react-router').Link
 var Icon = require('icon.jsx')
+var UserID = require('userID.jsx')
+var GetIPFS = require('getipfs.jsx')
+var Post = require('post.jsx')
+var Comment = require('comment.jsx').Comment
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')()
-  var GetIPFS = require('getipfs.jsx')()
-  var Post = require('post.jsx')()
-  var Comment = require('comment.jsx').Comment
-
   return React.createClass({
     getInitialState: function(){
       return { parent: false, api: false }
@@ -25,6 +24,11 @@ module.exports = function(boardsAPI){
         }
       })
     },
+    componentWillReceiveProps: function(nextProps) {
+      if(nextProps.params.commenthash !== this.props.params.commenthash){
+        location.reload() // cheap hack, should swap with something more efficient
+      }
+    },
     init: function(boards){
       if(this.state.init) return
       this.setState({ api: true, boards: boards })

webapp/pages/getipfs.jsx

@@ -2,65 +2,63 @@ var React = require('react')
 var Link = require('react-router').Link
 var Icon = require('icon.jsx')
 
-module.exports = function(){
+module.exports = React.createClass({
-  return React.createClass({
+  getInitialState: function(){
-    getInitialState: function(){
+    return { connected: false, error: false, long: false }
-      return { connected: false, error: false, long: false }
+  },
-    },
+  componentDidMount: function(){
-    componentDidMount: function(){
+    var boards = this.props.api
-      var boards = this.props.api
+    if(boards){
-      if(boards){
+      if(!this.isMounted()) return
-        if(!this.isMounted()) return
+      if(boards.isInit){
-        if(boards.isInit){
+        this.setState({ connected: true })
-          this.setState({ connected: true })
-        } else {
-          setTimeout(_ => {
-            if(this.isMounted()) this.setState({ long: true })
-          }, 5000)
-          boards.getEventEmitter().on('init', err => {
-            if(!this.isMounted()) return
-            if(err){
-              this.setState({ error: true })
-            } else {
-              this.setState({ connected: true })
-            }
-          })
-        }
-      }
-    },
-    render: function(){
-      var opt = require('options.jsx').get()
-      if(this.state.error){
-        return (
-        <div className="">
-          <h1><Icon name="ban"/> Connection to IPFS not available</h1>
-          <h4 className="light">Sorry, but at the moment an external application is needed to try the Prototype</h4>
-          <p>You don't have an IPFS node running at <code>{opt.addr}:{opt.port}</code> or it is not reachable.
-          The IPFS Boards prototype requires a full IPFS node. Please start one by following the
-          <a href="https://github.com/ipfs/go-ipfs"><code>go-ipfs</code> documentation.</a></p>
-          <h5>Do you have a running node but the app won't work?</h5>
-          <p>It's probably one of these issues:</p>
-          <ul>
-            <li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to="/settings">Settings Page</Link> to configure the connection.</li>
-            <li>You edited your settings and saved them but didn't reload the page</li>
-            <li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href="https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh">here</a> for the fix.</li>
-            <li>You're downloading the app via `https`: at the moment, connecting to IPFS only works if you donwload the app via plain HTTP. If you're using `ipfs.io` please consider accessing the app via a local gateway like `localhost:8080`</li>
-            <li>Some other networking or browser security issue is preventing the App from talking to your node.</li>
-          </ul>
-          <p>Still can't fix it? <a href="https://github.com/fazo96/ipfs-board/issues">File a issue on GitHub</a>, we'll be happy to help!</p>
-        </div>
-      )} else if(this.state.connected){
-        return <div class="text-center">
-          <h1><Icon name="check" /></h1>
-          <h5 class="light">You're connected!</h5>
-        </div>
       } else {
-        return <div className="center-block text-center">
+        setTimeout(_ => {
-          <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+          if(this.isMounted()) this.setState({ long: true })
-          <h4>Connecting to IPFS</h4>
+        }, 5000)
-          {this.state.long?(<p>It's taking long... there's probably something wrong</p>):<p></p>}
+        boards.getEventEmitter().on('init', err => {
-        </div>
+          if(!this.isMounted()) return
+          if(err){
+            this.setState({ error: true })
+          } else {
+            this.setState({ connected: true })
+          }
+        })
       }
     }
-  })
+  },
-}
+  render: function(){
+    var opt = require('options.jsx').get()
+    if(this.state.error){
+      return (
+      <div className="">
+        <h1><Icon name="ban"/> Connection to IPFS not available</h1>
+        <h4 className="light">Sorry, but at the moment an external application is needed to try the Prototype</h4>
+        <p>You don't have an IPFS node running at <code>{opt.addr}:{opt.port}</code> or it is not reachable.
+        The IPFS Boards prototype requires a full IPFS node. Please start one by following the
+        <a href="https://github.com/ipfs/go-ipfs"><code>go-ipfs</code> documentation.</a></p>
+        <h5>Do you have a running node but the app won't work?</h5>
+        <p>It's probably one of these issues:</p>
+        <ul>
+          <li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to="/settings">Settings Page</Link> to configure the connection.</li>
+          <li>You edited your settings and saved them but didn't reload the page</li>
+          <li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href="https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh">here</a> for the fix.</li>
+          <li>You're downloading the app via `https`: at the moment, connecting to IPFS only works if you donwload the app via plain HTTP. If you're using `ipfs.io` please consider accessing the app via a local gateway like `localhost:8080`</li>
+          <li>Some other networking or browser security issue is preventing the App from talking to your node.</li>
+        </ul>
+        <p>Still can't fix it? <a href="https://github.com/fazo96/ipfs-board/issues">File a issue on GitHub</a>, we'll be happy to help!</p>
+      </div>
+    )} else if(this.state.connected){
+      return <div class="text-center">
+        <h1><Icon name="check" /></h1>
+        <h5 class="light">You're connected!</h5>
+      </div>
+    } else {
+      return <div className="center-block text-center">
+        <Icon name="refresh" className="fa-3x center-block light fa-spin" />
+        <h4>Connecting to IPFS</h4>
+        {this.state.long?(<p>It's taking long... there's probably something wrong</p>):<p></p>}
+      </div>
+    }
+  }
+})

webapp/pages/postpage.jsx

@@ -1,12 +1,11 @@
 var React = require('react')
 var Link = require('react-router').Link
+var UserID = require('userID.jsx')
+var GetIPFS = require('getipfs.jsx')
+var Post = require('post.jsx')
+var Comments = require('comment.jsx').Comments
 
 module.exports = function(boardsAPI){
-  var UserID = require('userID.jsx')()
-  var GetIPFS = require('getipfs.jsx')()
-  var Post = require('post.jsx')()
-  var Comments = require('comment.jsx').Comments
-
   return React.createClass({
     getInitialState: function(){
       return { post: { title: '...', text: '...' }, api: false }

webapp/pages/profile.jsx

@@ -2,9 +2,9 @@ var React = require('react')
 var Markdown = require('markdown.jsx')
 var Link = require('react-router').Link
 var Icon = require('icon.jsx')
+var GetIPFS = require('getipfs.jsx')
 
 module.exports = function(boardsAPI){
-  var GetIPFS = require('getipfs.jsx')(boardsAPI)
   return React.createClass({
     getInitialState: function(){
       return { name: '...', boards: [], api: false }

webapp/pages/users.jsx

@@ -1,9 +1,9 @@
 var React = require('react')
 var Icon = require('icon.jsx')
+var GetIPFS = require('getipfs.jsx')
+var UserID = require('userID.jsx')
 
 module.exports = function(boardsAPI){
-  var GetIPFS = require('getipfs.jsx')()
-  var UserID = require('userID.jsx')()
   return React.createClass({
     getInitialState: function(){
       return { users: [], api: false }