Vulcan/packages/base-components/lib/comments/list/CommentItem.jsx

import React, { PropTypes, Component } from 'react';

class CommentItem extends Component{

  constructor() {
    super();
    ['showReply', 'cancelReply', 'replyCallback', 'showEdit', 'cancelEdit', 'editCallback'].forEach(methodName => {this[methodName] = this[methodName].bind(this)});
    this.state = {
      showReply: false,
      showEdit: false
    };
  }

  showReply(event) {
    event.preventDefault();
    this.setState({showReply: true});
  }

  cancelReply(event) {
    event.preventDefault();
    this.setState({showReply: false});
  }

  replyCallback() {
    this.setState({showReply: false});
  }

  showEdit(event) {
    event.preventDefault();
    this.setState({showEdit: true});
  }
  
  cancelEdit(event) {
    event.preventDefault();
    this.setState({showEdit: false});
  }

  editCallback() {
    this.setState({showEdit: false});
  }

  renderComment() {
    const htmlBody = {__html: this.props.comment.htmlBody};

    return (
      <div dangerouslySetInnerHTML={htmlBody}></div>
    )
  }

  renderReply() {
    
    ({CommentNew} = Telescope.components);

    return (
      <div className="comment-reply">
        <CommentNew postId={this.props.comment.postId} parentComment={this.props.comment} submitCallback={this.replyCallback} cancelCallback={this.cancelReply} type="reply" />
        <a href="#" onClick={this.cancelReply} className="button button--secondary">Cancel</a>
      </div>
    )
  }

  renderEdit() {

    ({CommentEdit}  = Telescope.components);
    
    return (
      <CommentEdit comment={this.props.comment} submitCallback={this.editCallback} cancelCallback={this.cancelEdit}/>
    )
  }

  renderActions() {
    return (
      <ul>
        <li><a href="#" onClick={this.showReply}>Reply</a></li>
        {Users.can.edit(this.props.currentUser, this.props.comment) ? <li><a href="#" onClick={this.showEdit}>Edit</a></li> : ""}
      </ul>
    )
  }

  render() {
    
    ({UserAvatar}  = Telescope.components);

    const comment = this.props.comment;

    return (
      <div className="comment-item">
        <div className="comment-body">
          <div className="comment-meta">
            <a href={Users.getProfileUrl(comment.user)}><UserAvatar user={comment.user}/>{Users.getDisplayName(comment.user)}</a>, {moment(comment.postedAt).fromNow()}
          </div>
          {this.state.showEdit ? this.renderEdit() : this.renderComment()}
          {this.renderActions()}
        </div>
        {this.state.showReply ? this.renderReply() : ""}
      </div>
    )
  }

}

CommentItem.propTypes = {
  comment: React.PropTypes.object.isRequired, // the current comment
  currentUser: React.PropTypes.object, // the current user
}

module.exports = CommentItem;