components.js

/** @jsx React.DOM */

var Thread = React.createClass({
  getInitialState: function() {
    return {
      replies: []
    };
  },

  handleReply: function() {
    if (event.keyCode == 13 && hoodie.account.hasAccount()) { // ENTER
      var message = {title: event.target.value, author: hoodie.account.username, parent: this.props.topic.id};
      hoodie.store.add('message', message)
    }
  },

  componentDidMount: function() {
    var c = this;

    function sortByCreatedAt(a, b) { 
      return a.createdAt > b.createdAt
    }

    hoodie.store.findAll(function(o) { return ( o.type == 'message' && o.parent == c.props.topic.id) }).then(function(messages) {
      if (typeof messages !== 'undefined' && messages.length > 0) {
        c.setState({replies: messages.sort(sortByCreatedAt).slice(0,3) })
      }
    })
  },


  render: function() {
    var c = this;
    var messages = this.state.replies.map(function (message) {
      return <Message data={message} allowReply={!c.props.preview} />;
    });
    var replyForm = <input type='text' ref='replyForm' onKeyPress={this.handleReply} placeholder='type reply ↵' />;

    return (
      <div className="thread">
        <h3 className="thread__topic">{this.props.topic.title}</h3>
        {messages}
        {replyForm}
      </div>
    );
  }
});

var Message = React.createClass({
  getInitialState: function() {
    return {
      thread: false,
      replying: false,
      replies: []
    };
  },

  showReplyForm: function() {
    console.log('show reply form')
    this.setState({replying: true});
  },

  handleReply: function() {
    if (event.keyCode == 13 && hoodie.account.hasAccount()) { // ENTER
      hoodie.store.add('message', {title: event.target.value, author: hoodie.account.username, parent: this.props.data.id});
      this.setState({replying: false});
    }
  },

  componentDidUpdate: function() {
    if (this.state.replying) {
      this.refs.replyForm.getDOMNode().focus();
    }
  },

  componentDidMount: function() {
    var c = this;

    function sortByCreatedAt(a, b) { 
      return a.createdAt > b.createdAt
    }

    hoodie.store.findAll(function(o) { return ( o.type == 'message' && o.parent == c.props.data.id) }).then(function(messages) {
      if (typeof messages !== 'undefined' && messages.length > 0) {
        c.setState({replies: messages.sort(sortByCreatedAt) })
      }
    })
  },

  render: function() {
    var replyForm = <input type='text' ref='replyForm' onKeyPress={this.handleReply} placeholder='type reply ↵' />;
    // var thread = <Thread firstMessage={this.props.data} messages={this.state.replies} preview={true} />;
    var replyBtn = <a onClick={this.showReplyForm}> reply</a>;
    var message = <p className='message__text'>{this.props.data.title}{replyBtn}</p>;
    var replies = this.state.replies.map(function (message) {
      return <p className='reply'>{message.title}</p>;
    })

    var replies_with_form = <div className='threadpreview'>{replies}{replyForm}</div>;

    return (
      <div className="message">
        { message }
        { replies }
        { this.state.replies.length > 0 ? replies_with_form : replyBtn }
      </div>
    );
  }
});