ipfs-boards/webapp/components/postlist.jsx

var React = require('react')
var sortedIndex = require('lodash.sortedindex')
var Icon = require('icon.jsx')
var Post = require('post.jsx')

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