implemented new Post component

lib/boards-api.js

@@ -10,7 +10,6 @@ Needs to be browserified to work in the browser
 var EventEmitter = require('wolfy87-eventemitter')
 var asyncjs = require('async')
 var semver = require('semver')
-var moment = require('moment')
 
 function asObj (str, done) {
   if (str.toString) str = str.toString()
@@ -168,7 +167,7 @@ BoardsAPI.prototype.createBoard = function (board, done) {
 
 BoardsAPI.prototype.createPost = function (post, board, done) {
   try {
-    post.date = moment().unix()
+    post.date = (new Date()).getTime()
     post.op = this.id
     var post_str = JSON.stringify(post)
   } catch (e) {
@@ -423,9 +422,18 @@ BoardsAPI.prototype.getBoardSettings = function (userID, board, done) {
 }
 
 BoardsAPI.prototype.downloadPost = function (hash, adminID, board, op, done) {
-  if (typeof adminID === 'function') done = adminID
+  if (typeof adminID === 'function') {
-  if (typeof board === 'function') done = board
+    done = adminID
-  if (typeof op === 'function') done = op
+    adminID = undefined
+  }
+  if (typeof board === 'function') {
+    done = board
+    board = undefined
+  }
+  if (typeof op === 'function') {
+    done = op
+    op = undefined
+  }
   console.log('Downloading post', hash)
   this.ipfs.cat(hash, (err2, r) => {
     if (err2) {
@@ -439,11 +447,11 @@ BoardsAPI.prototype.downloadPost = function (hash, adminID, board, op, done) {
         post.hash = hash
         if (op) post.op = op // Inject op
         if (board) {
-          if (adminID) this.ee.emit('post in ' + board + '@' + adminID, post, hash)
+          if (adminID) this.ee.emit('post in ' + board + '@' + adminID, hash, post.date, post)
-          else this.ee.emit('post in ' + board, post, hash)
+          else this.ee.emit('post in ' + board, hash, post.date, post)
         }
         this.ee.emit(hash, post, adminID, board)
-        if (done && done.apply) done(null, post)
+        if (done && done.apply) done(null, hash, post.date, post)
       })
     }
   })
@@ -484,17 +492,19 @@ BoardsAPI.prototype.getAllowedContentProducers = function (adminID, board, optio
   return this.ee
 }
 
-BoardsAPI.prototype.getPostsInBoard = function (adminID, board) {
+BoardsAPI.prototype.getPostsInBoard = function (adminID, board, opt) {
+  opt = opt || {}
+  var emitPost = i => this.ee.emit('post in ' + board + '@' + adminID, i.hash, i.date)
   if (adminID) {
     this.ee.on('approved posts for ' + board + '@' + adminID, ret => {
       // Automatically download approved posts
-      ret.forEach(item => this.downloadPost(item.hash, adminID, board))
+      ret.forEach(emitPost)
     })
     this.ee.on('whitelist for ' + board + '@' + adminID, whitelist => {
       // download posts for each user in whitelist
       whitelist.forEach(item => {
         this.getUserPostListInBoard(item, board, (err, postList) => {
-          if (!err) postList.forEach(i => this.downloadPost(i.hash, adminID, board, item))
+          if (!err) postList.forEach(emitPost)
         })
       })
     })
@@ -502,7 +512,7 @@ BoardsAPI.prototype.getPostsInBoard = function (adminID, board) {
     this.getAllowedContentProducers(adminID, board, { posts: true })
     // Get the admin's posts
     this.getUserPostListInBoard(adminID, board, (err, res) => {
-      if (!err) res.forEach(item => this.downloadPost(item.hash, adminID, board, adminID))
+      if (!err) res.forEach(emitPost)
     })
   } else {
     // TODO: Download all posts in board from everyone
@@ -510,7 +520,7 @@ BoardsAPI.prototype.getPostsInBoard = function (adminID, board) {
     this.getUserPostListInBoard(this.id, board, (err, res) => {
       if (err) {
         console.log(err)
-      } else res.forEach(item => this.downloadPost(item.hash, undefined, board, this.id))
+      } else res.forEach(emitPost)
     })
   }
   return this.ee

webapp/components/post.jsx

@@ -4,38 +4,58 @@ var Icon = require('icon.jsx')
 var Link = require('react-router').Link
 var Clock = require('clock.jsx')
 var UserID = require('userID.jsx')
+var { Error, Loading } = require('status-components.jsx')
 
 module.exports = React.createClass({
-  getInitialState: function () {
+  getInitialState () {
-    return { moment: false }
+    return { loading: true }
   },
-  componentDidMount: function () {
+  componentDidMount () {
-    require.ensure(['moment'], _ => {
+    this.init(this.props)
-      if (this.isMounted()) this.setState({ moment: require('moment') })
+  },
+  componentWillReceiveProps (props) {
+    this.init(props)
+  },
+  init (props) {
+    var boards = props.api
+    if (!boards) return this.setState({ error: 'Could not connect to IPFS' })
+    this.setState({ loading: true })
+    boards.downloadPost(props.hash, props.adminID, props.board, (err, hash, date, post) => {
+      this.setState({ error: err, post: post, loading: false })
     })
   },
-  postLink: function () {
+  postLink () {
-    if (this.props.post.op) {
+    if (this.state.post.op) {
       if (this.props.board) {
-        return '/@' + this.props.post.op + '/' + this.props.board + '/' + this.props.post.hash
+        return '/@' + this.state.post.op + '/' + this.props.board + '/' + this.props.hash
       } else {
-        return '/@' + this.props.post.op + '/post/' + this.props.post.hash
+        return '/@' + this.state.post.op + '/post/' + this.props.hash
       }
     } else {
-      return '/post/' + this.props.post.hash
+      return '/post/' + this.props.hash
     }
   },
-  render: function () {
+  getContent () {
-    return <div key={this.props.post.title} className="post">
+    if (this.state.error) {
-      <div className="content">
+      return <Error className="content" error={this.state.error} />
-        <h5>{this.props.post.title}</h5><hr/>
+    } else if (this.state.loading) {
-        <Markdown source={this.props.post.text} /><hr/>
+      return <Loading className="content" title="Downloading post"/>
+    } else {
+      return <div className="content">
+        { this.state.post.title
+          ? <div><h5>{this.state.post.title}</h5><hr/></div>
+          : <div />
+        }
+        <Markdown source={this.state.post.text} /><hr/>
         <div className="icons">
-          <UserID id={this.props.post.op} api={this.props.api} ></UserID>
+          <UserID id={this.state.post.op} api={this.props.api} ></UserID>
-          <Clock className="not-first" date={this.props.post.date} />
+          <Clock className="not-first" date={this.state.post.date} />
           <Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
         </div>
       </div>
-    </div>
+    }
+  },
+  render () {
+    return <div className="post">{this.getContent()}</div>
   }
 })

webapp/components/postlist.jsx

@@ -13,18 +13,18 @@ module.exports = React.createClass({
   init: function (boards) {
     if (this.state.init) return
     this.setState({ api: true })
-    var onPost = (post, hash) => {
+    var onPost = (hash, date, post) => {
       if (!this.isMounted()) return true
       var now = (new Date()).getTime()
       var posts = this.state.posts
-      if (post.date === undefined || post.date <= 0) {
+      if (date === undefined || date <= 0) {
-        posts.push(post)
+        posts.push(hash)
-      } else if (post.date <= now) {
+      } else /* if (date <= now) */ {
-        var i = sortedIndex(posts, post, (p) => now - p.date || now)
+        var i = sortedIndex(posts, post, (p) => now - date || now)
-        posts.splice(i, 0, post)
+        posts.splice(i, 0, hash)
-      } else {
+      } /* else {
-        console.log('Post discarded cause date in the future:', post)
+        console.log('Post discarded cause date in the future:', hash)
-      }
+      }*/
       this.setState({ posts })
     }
     boards.getEventEmitter().on('post in ' + this.props.board + (this.props.admin ? '@' + this.props.admin : ''), onPost)
@@ -45,8 +45,8 @@ module.exports = React.createClass({
   },
   getPosts: function () {
     if (this.state.posts.length > 0 || this.state.api) {
-      return this.state.posts.map(post => {
+      return this.state.posts.map(hash => {
-        return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} api={this.props.api} />
+        return <Post key={hash} board={this.props.board} admin={this.props.admin} hash={hash} api={this.props.api} />
       })
     } else {
       return <div className="center-block text-center">

webapp/pages/postpage.jsx

@@ -8,11 +8,10 @@ var Comments = require('comment.jsx').Comments
 module.exports = function (boardsAPI) {
   return React.createClass({
     getInitialState: function () {
-      return { post: { title: '...', text: '...' }, api: false }
+      return { }
     },
     componentDidMount: function () {
       boardsAPI.use(boards => {
-        boards.init()
         boards.getEventEmitter().on('init', err => {
           if (!err && this.isMounted()) {
             this.init(boards)
@@ -21,26 +20,12 @@ module.exports = function (boardsAPI) {
         if (this.isMounted() && boards.isInit) {
           this.init(boards)
         }
-      })
+        boards.init()
-    },
-    componentWillReceiveProps: function (nextProps) {
-      boardsAPI.use(boards => this.downloadPost(boards, nextProps))
-    },
-    downloadPost: function (boards, props) {
-      boards.downloadPost(props.params.posthash, props.params.userid, props.params.boardname, props.params.userid, (err, post) => {
-        if (err) {
-          this.setState({
-            post: { title: 'Error', text: err.Message || err.Error }
-          })
-        } else {
-          this.setState({ post })
-        }
       })
     },
     init: function (boards) {
       if (this.state.init) return
-      this.setState({ api: true, boards: boards })
+      this.setState({ api: boards })
-      this.downloadPost(boards, this.props)
     },
     getContext: function () {
       if (this.props.params.userid) {
@@ -57,7 +42,7 @@ module.exports = function (boardsAPI) {
           <div className="text-center">
             {this.getContext()}
           </div>
-          <Post post={this.state.post} board={this.props.params.boardname} api={this.state.boards} />
+          <Post hash={this.props.params.posthash} board={this.props.params.boardname} api={this.state.api} />
           <Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} api={this.state.boards} />
         </div>
       } else {