frontend.js

'use strict';

let DjangoCSRFToken = React.createClass({
  render: function () {
    var csrfToken = $.cookie('csrftoken');

    return React.DOM.input(
      {type: 'hidden', name:'csrfmiddlewaretoken', value:csrfToken}
    )
  }
});

let CommentBox = React.createClass({
  loadCommentsFromServer: function () {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function (data) {
        this.setState({data: data.results});
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function (comment) {
    let comments = this.state.data;
    let newComments = comments.concat([comment]);

    this.setState({data: newComments});

    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      beforeSend: function (request) {
        request.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
      },
      data: comment,
      success: function (data) {
        this.setState({data: data});
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function () {
    return {data: []};
  },
  componentDidMount: function () {
    this.loadCommentsFromServer();

    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function () {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

let CommentList = React.createClass({
  render: function () {
    if (this.props.data) {
      var commentNodes = this.props.data.map(function (comment) {
        return (
          <Comment author={comment.author}>{comment.text}</Comment>
        );
      });
    }

    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

let CommentForm = React.createClass({
  handleSubmit: function (e) {
    e.preventDefault();

    let author = React.findDOMNode(this.refs.author).value.trim();
    let text = React.findDOMNode(this.refs.text).value.trim();

    if (!text || !author) {
      return;
    }

    this.props.onCommentSubmit({author: author, text: text});

    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';

    return;
  },
  render: function () {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <DjangoCSRFToken />
        <input type="text" placeholder="Your name" ref="author" />
        <textarea type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

let Comment = React.createClass({
  render: function () {
    let rawMarkup = marked(this.props.children.toString(), {
      sanitize: true
    });

    return (
      <div className="comment">
        <h2 className="commentAuthor">{this.props.author}</h2>

        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

React.render(
  <CommentBox url='/api/comments/' pollInterval={2000000} />,
  document.getElementById('content')
);