<repo_name>Sergey73/react<file_sep>/app/src/js/index.js
var data = [
  {author: "<NAME>", text: "This is one comment"},
  {author: "<NAME>", text: "This is *another* comment"}
];

var a = 0;

/*setInterval(function () {

	text = data[a].author
	console.log(a);
	console.log(text);
}, 2000);*/

function getData () {
	var res = [];
	a ? a-- : a++;
	res.push(data[a]);
	return res;
}

var CommentBox = React.createClass({
	loadCommentsFromServer: function() {
	   this.setState({data: getData()});
	},

  handleCommentSubmit: function(comment) {
    // TODO: submit to the server and refresh the list
    console.dir(comment);
    this.setState({data: [comment]});
  },

	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>
  	);
	}
});

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

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

  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function (e) {
    e.preventDefault();
    var author = this.refs.author.value.trim();
    var text = this.refs.text.value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    this.refs.author.value = '';
    this.refs.text.value = '';
  },

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

ReactDOM.render(
	<div>
		<CommentBox url='/api/comments' pollInterval={1000 * 60 * 60 * 24}></CommentBox>
	</div>,
  document.getElementById('content')
);<file_sep>/README.md
babel app/src/js --watch --out-dir app/es5code