typeface-comments.js

import _ from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom';
import Router from '../module/router';
import {api} from '../common/api';
import {Comment} from './comment';
import {Counter} from './counter';
import {TypefaceCommentForm} from './typeface-comment-form';

export class TypefaceComments extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      own_avatar: props.own_avatar,
      allow_delete: props.allow_delete,
      typeface: props.typeface,
      comments: [],
    };
  }

  setComments(response) {
    _.each(response.comments, (comment) => {
      comment.profileUrl = Router.generate('user_profile', {'slug': comment.username});
    });

    this.setState(response);
    this.updateCounter();
  }

  updateCounter() {
    if (this.counter) {
      this.counter.setState({count: this.state.comments.length});
    }
  }

  componentDidMount() {
    api.getComments(this.state.typeface, (response) => {
      this.setComments(response);
    });

    this.initCounter();
  }

  initCounter() {
    let counter = document.querySelector('#typeface-comment-count');
    if (counter) {
      let count = parseInt(counter.innerHTML.replace(/[()]/gi, ''), 10) || this.state.comments.length;
      this.counter = ReactDOM.render(
        <Counter count={count}/>,
        counter,
      );
    }
  }

  updateComments = (response) => {
    this.setComments(response);
  };

  render() {
    return (
      <ul className="list-unstyled">
        {this.state.comments.map((comment, index) =>
          <Comment comment={comment} on_delete={this.updateComments} allow_delete={this.state.allow_delete}
                   typeface={this.state.typeface} key={index}/>,
        )}
        <TypefaceCommentForm typeface={this.state.typeface} own_avatar={this.state.own_avatar}
                             on_submit={this.updateComments}/>
      </ul>
    );
  }
}