Carpetfizz/comments.json

## comments.json
[
	{"author": "Pete Hunt", "text":"This is one comment"},
	{"author": "Jordan Walke", "text": "This is another comment"},
	{"author": "Elon Musk", "text": "SPAAAAAAAAAACE"}
]

## index.html
<!--Slightly modified/documented version of ReactJS tutorial found on http://facebook.github.io/react/docs/tutorial.html-->
<html>

	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>

	<body>

			<!--React will render all content onto #content-->
			<div id="content"></div>


			<!--Use "src" to link to external React files, also frees up markup-->
			<script type="text/jsx" src="index.js"></script>


	</body>

</html>

## index.js
/*  Comment
	@author: passed in from CommentList
	@children: text in between <Comment/> tags

	- Declares a class for a Comment which includes text and author
*/
var Comment = React.createClass({
	render: function() {
		return (

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

		)
	}
});

/*  CommentList
	@data: passed in from CommentBox ([] retrieved from server)

	- Creates and returns a list of <Comment/> elements by mapping the []
*/
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>
		);

	}

});

/*  CommentList
	@author: "ref" from input box,
	@text: "ref" from input box,
	@onCommentSubmit: calls handleCommentSubmit() in CommentBox, passing in the comment

	- Declares a class for a CommentForm which calls CommentBox to handle submission
*/
var CommentForm = React.createClass({

	handleSubmit: function(e) {
		e.preventDefault();
		var author = this.refs.author.getDOMNode().value.trim();
		var text = this.refs.text.getDOMNode().value.trim();

		if(!text||!author){
			return;
		}
		/*
			onCommentSubmit is in CommentBox and takes the params of a comment object
		*/
		this.props.onCommentSubmit({author: author, text: text});
		this.refs.author.getDOMNode().value = '';
		this.refs.text.getDOMNode().value = '';
	},

	render: function() {

		return (

			<form className="commentForm" onSubmit={this.handleSubmit}> //this.handleSubmit is delegated to CommentBox
				<input type="text" placeholder="Your name" ref="author" />
				<input type="text" placeholder="Say something..." ref="text"/>
				<input type="submit" value="Post"/>
			</form>

		);
	}

});

/*  CommentBox

	@url: passed in by React.render(), used to perform AJAX requests,
	@pollInterval: passed in by React.render(), interval in which to make requests

	- Declares a class for a CommentBox which contains CommentList and CommentForm
	- "State Machine", state is private only to CommentBox, which acts upon state change
*/
var CommentBox = React.createClass({

	/*

		getInitialState()

		- Called only once, the data is empty upon load

	*/
	getInitialState: function() {
		return {data: []};
	},
	/*

		loadCommentsFromServer()

		- Simple AJAX GET, called when mounted and when server is polled

	*/
	loadCommentsFromServer: function(){
		$.get(this.props.url).success(function(data){
			this.setState({data: data});
		}.bind(this)).error(function(xhr,status,err){
			console.error(this.props.url, status, err.toString());
		}.bind(this));
	},
	/*

		handleCommentSubmit()

		- Simple AJAX POST, called by CommentForm with comment data
		- State is changed with the new comments, thus rerendering the page

		NOTE: This fails in this particular example because I'm using a dummy comments.json
		      I kept it to show that the "optimistic comment" disappears when request fails
	*/
	handleCommentSubmit: function(comment){
		var comments = this.state.data;
		var newComments = comments.concat([comment]);
		this.setState({data: newComments});
		$.post(this.props.url, comment).success(function(data){
			this.setState({data: data});
		}.bind(this)).error(function(data){
			//#optimistic no handling
		}.bind(this));
	},
	/*

		componentDidMount()

		- Called when CommentBox is actually placed onto the DOM

	*/
	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>

		);
	}
});

React.render(
	<CommentBox url="comments.json" pollInterval={2000}/>,
	document.getElementById('content')
);
	[
	{"author": "Pete Hunt", "text":"This is one comment"},
	{"author": "Jordan Walke", "text": "This is another comment"},
	{"author": "Elon Musk", "text": "SPAAAAAAAAAACE"}
	]
	<!--Slightly modified/documented version of ReactJS tutorial found on http://facebook.github.io/react/docs/tutorial.html-->
	<html>

	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>

	<body>

	<!--React will render all content onto #content-->
	<div id="content"></div>


	<!--Use "src" to link to external React files, also frees up markup-->
	<script type="text/jsx" src="index.js"></script>


	</body>

	</html>
	/* Comment
	@author: passed in from CommentList
	@children: text in between <Comment/> tags

	- Declares a class for a Comment which includes text and author
	*/
	var Comment = React.createClass({
	render: function() {
	return (

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

	)
	}
	});

	/* CommentList
	@data: passed in from CommentBox ([] retrieved from server)

	- Creates and returns a list of <Comment/> elements by mapping the []
	*/
	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>
	);

	}

	});

	/* CommentList
	@author: "ref" from input box,
	@text: "ref" from input box,
	@onCommentSubmit: calls handleCommentSubmit() in CommentBox, passing in the comment

	- Declares a class for a CommentForm which calls CommentBox to handle submission
	*/
	var CommentForm = React.createClass({

	handleSubmit: function(e) {
	e.preventDefault();
	var author = this.refs.author.getDOMNode().value.trim();
	var text = this.refs.text.getDOMNode().value.trim();

	if(!text\|\|!author){
	return;
	}
	/*
	onCommentSubmit is in CommentBox and takes the params of a comment object
	*/
	this.props.onCommentSubmit({author: author, text: text});
	this.refs.author.getDOMNode().value = '';
	this.refs.text.getDOMNode().value = '';
	},

	render: function() {

	return (

	<form className="commentForm" onSubmit={this.handleSubmit}> //this.handleSubmit is delegated to CommentBox
	<input type="text" placeholder="Your name" ref="author" />
	<input type="text" placeholder="Say something..." ref="text"/>
	<input type="submit" value="Post"/>
	</form>

	);
	}

	});

	/* CommentBox

	@url: passed in by React.render(), used to perform AJAX requests,
	@pollInterval: passed in by React.render(), interval in which to make requests

	- Declares a class for a CommentBox which contains CommentList and CommentForm
	- "State Machine", state is private only to CommentBox, which acts upon state change
	*/
	var CommentBox = React.createClass({

	/*

	getInitialState()

	- Called only once, the data is empty upon load

	*/
	getInitialState: function() {
	return {data: []};
	},
	/*

	loadCommentsFromServer()

	- Simple AJAX GET, called when mounted and when server is polled

	*/
	loadCommentsFromServer: function(){
	$.get(this.props.url).success(function(data){
	this.setState({data: data});
	}.bind(this)).error(function(xhr,status,err){
	console.error(this.props.url, status, err.toString());
	}.bind(this));
	},
	/*

	handleCommentSubmit()

	- Simple AJAX POST, called by CommentForm with comment data
	- State is changed with the new comments, thus rerendering the page

	NOTE: This fails in this particular example because I'm using a dummy comments.json
	I kept it to show that the "optimistic comment" disappears when request fails
	*/
	handleCommentSubmit: function(comment){
	var comments = this.state.data;
	var newComments = comments.concat([comment]);
	this.setState({data: newComments});
	$.post(this.props.url, comment).success(function(data){
	this.setState({data: data});
	}.bind(this)).error(function(data){
	//#optimistic no handling
	}.bind(this));
	},
	/*

	componentDidMount()

	- Called when CommentBox is actually placed onto the DOM

	*/
	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>

	);
	}
	});

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