sort posts by date and fix submitter display

lib/boards-api.js

@@ -254,14 +254,16 @@ BoardsAPI.prototype.getBoardSettings = function(userID,board){
 }
 
 BoardsAPI.prototype.getPostsInBoard = function(adminID,board){
-  var downloadPost = hash => {
+  var downloadPost = (hash,op) => {
     this.ipfs.cat(hash,(err2,r) => {
       if(err2){
         this.ee.emit('error',err2)
         console.log('Could not download post',hash,'of',board+'@'+adminID)
       } else {
         // It already returns a JSON?
-        this.ee.emit('post in '+board+'@'+adminID,r,hash)
+        var post = r
+        if(op) post.op = op // Inject op
+        this.ee.emit('post in '+board+'@'+adminID,post,hash)
       }
     })
   }
@@ -297,7 +299,7 @@ BoardsAPI.prototype.getPostsInBoard = function(adminID,board){
   this.getUserPostListInBoard(adminID,board,(err,res) => {
     if(err){
       console.log(err)
-    } else res.forEach(item => downloadPost(item.hash))
+    } else res.forEach(item => downloadPost(item.hash,adminID))
   })
   return this.ee
 }

package.json

@@ -37,6 +37,7 @@
     "gulp-util": "~3.0.7",
     "history": "~1.13.1",
     "ipfs-api": "~2.7.6",
+    "lodash.sortedindex": "~3.1.1",
     "moment": "~2.10.6",
     "react": "~0.14.2",
     "react-dom": "~0.14.2",

webapp/app.jsx

@@ -7,6 +7,8 @@ var Redirect = require('react-router').Redirect
 var Link = require('react-router').Link
 
 var MarkdownLib = require('react-markdown')
+var moment = require('moment')
+var sortedIndex = require('lodash.sortedindex')
 var BoardsAPI = require('../lib/boards-api.js')
 
 var opt, s = localStorage.getItem('ipfs-boards-settings')
@@ -75,14 +77,21 @@ var Navbar = React.createClass({
 })
 
 var Post = React.createClass({
+  getDate: function(){
+    if(this.props.post.date){
+      return moment.unix(this.props.post.date).fromNow()
+    } else {
+      return 'Unknown Date'
+    }
+  },
   render: function(){
     return <div key={this.props.post.title} className="post">
       <div className="content">
         <h5>{this.props.post.title}</h5><hr/>
         <Markdown source={this.props.post.text} skipHtml={true} /><hr/>
         <div className="icons">
-          <UserID id={this.props.post.op} />
+          <UserID id={this.props.post.op}></UserID>
-          <Icon name="clock-o" class="not-first"/> Date
+          <Icon name="clock-o" class="not-first"/> {this.getDate()}
           <Icon name="comments" class="not-first" /> Comments
         </div>
       </div>
@@ -94,12 +103,25 @@ var PostList = React.createClass({
   getInitialState: function(){
     return { posts: [] }
   },
+  sortFn: function(a,b){
+    return (b.date || 0) - (a.date || 0)
+  },
   componentDidMount: function(){
     console.log('Initial POSTS',this.state.posts.length)
     boards.getPostsInBoard(this.props.admin,this.props.board)
     .on('post in '+this.props.board+'@'+this.props.admin,(post,hash) => {
       if(!this.isMounted()) return true
-      this.setState({ posts: this.state.posts.concat(post) })
+      var now = moment().unix()
+      var posts = this.state.posts
+      if(post.date === undefined || post.date <= 0){
+        posts.push(post)
+      } else if(post.date <= now){
+        var i = sortedIndex(posts,post,(p) => now-p.date || now)
+        posts.splice(i,0,post)
+      } else {
+        console.log('Post discarded cause date in the future:',post)
+      }
+      this.setState({ posts })
     })
   },
   render: function(){
@@ -118,7 +140,7 @@ var UserID = React.createClass({
     return { }
   },
   componentDidMount: function(){
-    boards.getProfile(this.props.id, (err,res) => {
+    if(this.props.id) boards.getProfile(this.props.id, (err,res) => {
       if(!this.isMounted()) return true
       if(!err) {
         this.setState({ name: res.name.trim() })
@@ -133,11 +155,15 @@ var UserID = React.createClass({
     }
   },
   render: function(){
-    return (<div className="user-id">
+    if(this.props.id)
-      <Link className="light nounderline" to={'/@'+this.props.id}>
+      return (<div className="user-id">
-        {this.getContent()}{this.state.name || this.props.id}
+        <Link className="light nounderline" to={'/@'+this.props.id}>
-      </Link>
+          {this.getContent()}{this.state.name || this.props.id}
-    </div>)
+        </Link>
+      </div>)
+    else return <div className="user-id">
+        <Icon name="ban" /> Unknown User
+      </div>
   }
 })