From 14e168f2fd20493204c8aee1706ce6dbecaf9bc6 Mon Sep 17 00:00:00 2001
From: khieu <hieule246@gmail.com>
Date: Thu, 4 Feb 2016 19:03:04 -0500
Subject: [PATCH 1/2] tutorial update1

---
 public/index.html           |  3 +-
 public/scripts/tutorial1.js | 87 +++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 public/scripts/tutorial1.js
diff --git a/public/index.html b/public/index.html
index c6494446..d3492d12 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,8 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/babel" src="scripts/example.js"></script>
+    <!--<script type="text/babel" src="scripts/example.js"></script> -->
+    <script type="text/babel" src="scripts/tutorial1.js"></script>
     <script type="text/babel">
       // To get started with this tutorial running your own code, simply remove
       // the script tag loading scripts/example.js and start writing code here.
diff --git a/public/scripts/tutorial1.js b/public/scripts/tutorial1.js
new file mode 100644
index 00000000..df8647ee
--- /dev/null
+++ b/public/scripts/tutorial1.js
@@ -0,0 +1,87 @@
+var data = [
+  	{
+  		id: 1, 
+  		author: "Pete Hunt", 
+  		text: "This is one comment"
+	},
+  	{
+  		id: 2, 
+  		author: "Jordan Walke", 
+  		text: "This is *another* comment"
+  	}
+];
+
+
+var CommentForm = React.createClass({
+	render: function() {
+		return (
+			<div className="commentForm">
+				A CommentForm
+			</div>
+		);
+	}
+});
+
+var CommentList = React.createClass({
+
+	render: function() {
+		console.log(this.props.data);
+		var commentNodes = this.props.data.map(
+				function(comment) {
+					console.log(comment.author);
+					return (
+						<Comment 
+							author={comment.author} 
+							key={comment.id}
+						>
+							{comment.text}
+						</Comment>
+					);
+				}
+		);
+
+		return (
+			<div className="commentList">
+				{commentNodes}
+			</div>
+		);
+	}
+});
+
+var Comment = React.createClass({
+
+	rawMarkup: function() {
+		console.log(this.props.author);
+    var rawMarkup = marked(this.props.children.toString());
+    
+    return { __html: rawMarkup };
+  },
+
+	render: function() {
+		return (
+			<div className="comment">
+				<h2>
+					{this.props.author}
+				</h2>
+				<span dangerouslySetInnerHTML={this.rawMarkup()}/>
+			</div>
+		);
+	}
+
+});
+
+var CommentBox = React.createClass({
+	render: function() {
+		return (
+			<div className="commentBox">
+				<h1>Comments</h1>
+				<CommentList data={this.props.data}/>
+				<CommentForm />
+			</div>);
+	}
+});
+
+ReactDOM.render(
+	<CommentBox data={data} />,
+  	document.getElementById('content')
+);
\ No newline at end of file

From a327ad72f9f48c73e40757989bcd0f89b7fcf71f Mon Sep 17 00:00:00 2001
From: khieu <hieule246@gmail.com>
Date: Sun, 7 Feb 2016 02:12:28 -0500
Subject: [PATCH 2/2] finished react tutorial

---
 comments.json               | 32 ++++++++++++-
 public/scripts/tutorial1.js | 96 ++++++++++++++++++++++++++++++++++---
 2 files changed, 121 insertions(+), 7 deletions(-)

diff --git a/comments.json b/comments.json
index 7bef77ad..e130383e 100644
--- a/comments.json
+++ b/comments.json
@@ -8,5 +8,35 @@
         "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
+    },
+    {
+        "id": 1454791323450,
+        "author": "Hieu",
+        "text": "i am doing react"
+    },
+    {
+        "id": 1454791423714,
+        "author": "John",
+        "text": "test again"
+    },
+    {
+        "id": 1454791465196,
+        "author": "Tim",
+        "text": "try 1 more time"
+    },
+    {
+        "id": 1454791800404,
+        "author": "Momo",
+        "text": "should work this time"
+    },
+    {
+        "id": 1454791807921,
+        "author": "Hieu",
+        "text": "Finally haha :)"
+    },
+    {
+        "id": 1454792442800,
+        "author": "Hieu",
+        "text": "Optimize it."
     }
-]
+]
\ No newline at end of file
diff --git a/public/scripts/tutorial1.js b/public/scripts/tutorial1.js
index df8647ee..0c66b95b 100644
--- a/public/scripts/tutorial1.js
+++ b/public/scripts/tutorial1.js
@@ -13,11 +13,50 @@ var data = [
 
 
 var CommentForm = React.createClass({
+
+	getInitialState: function() {
+		return {author: '', text: ''};
+	},
+
+	handleAuthorChange: function(e) {
+		this.setState({author: e.target.value});
+	},
+	
+	handleTextChange: function(e) {
+		this.setState({text: e.target.value});
+	},
+
+	handleSubmit: function(e) {
+		e.preventDefault();
+		var author = this.state.author.trim();
+		var text = this.state.text.trim();
+		if (!text || !author){ 
+			return;
+		}
+		this.props.onCommentSubmit({author: author, text: text});
+    	this.setState({author: '', text: ''});
+	},
 	render: function() {
 		return (
-			<div className="commentForm">
-				A CommentForm
-			</div>
+			<form 
+				className="commentForm"
+				onSubmit={this.handleSubmit}
+			>
+				<input 
+					type="text" 
+					placeholder="Your Name" 
+					value={this.state.author}
+					onChange={this.handleAuthorChange}
+
+				/>
+				<input 
+					type="text" 
+					placeholder="Say something ..." 
+					value={this.state.text}
+					onChange={this.handleTextChange}
+				/>
+				<input type="submit" value="Post" />
+			</form>
 		);
 	}
 });
@@ -71,17 +110,62 @@ var Comment = React.createClass({
 });
 
 var CommentBox = React.createClass({
+
+	getInitialState: function() {
+		return{data: []};
+	},
+
+
+	loadCommentsFromServer: function() {
+	    $.ajax({
+	      url: this.props.url,
+	      dataType: 'json',
+	      cache: false,
+	      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: function(comment) {
+		var comments = this.state.data;
+		comment.id = Date.now();
+		var newComments = comments.concat([comment]);
+		this.setState({data: newComments});
+		$.ajax({
+	      url: this.props.url,
+	      dataType: 'json',
+	      type: 'POST',
+	      data: comment,
+	      success: function(data) {
+	        this.setState({data: data});
+	      }.bind(this),
+	      error: function(xhr, status, err) {
+	      	this.setState({data: comments});
+	        console.error(this.props.url, status, err.toString());
+	      }.bind(this)
+    });
+	},
+
+	componentDidMount: function() {
+    	this.loadCommentsFromServer();
+    	setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+  	},
+
 	render: function() {
 		return (
 			<div className="commentBox">
 				<h1>Comments</h1>
-				<CommentList data={this.props.data}/>
-				<CommentForm />
+				<CommentList data={this.state.data}/>
+				<CommentForm onCommentSubmit={this.handleCommentSubmit} />
 			</div>);
 	}
 });
 
 ReactDOM.render(
-	<CommentBox data={data} />,
+	<CommentBox url='/api/comments' pollInterval={2000}/>,
   	document.getElementById('content')
 );
\ No newline at end of file
