From 444f58eb9e9a0cbbea40ec46c003a2706073d186 Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 11:53:29 +0000 Subject: [PATCH 01/12] Added CommentBox --- public/index.html | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index c6494446..6cbdee36 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,20 @@
- From 81ef2c8d4d092d692ae4b8593f700511dba2d566 Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 11:56:19 +0000 Subject: [PATCH 02/12] Added comment list and form --- public/index.html | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 6cbdee36..127ae774 100644 --- a/public/index.html +++ b/public/index.html @@ -14,11 +14,33 @@
From a69f2e0d0e470505e51bd5f24b58ad402b4b3e87 Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 12:19:33 +0000 Subject: [PATCH 06/12] Obtain comment data from server --- public/index.html | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index da7c5692..289d457e 100644 --- a/public/index.html +++ b/public/index.html @@ -14,11 +14,6 @@
From b5994cc4c221e9ed3cdd9a361810a68ef953357f Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 14:07:21 +0000 Subject: [PATCH 07/12] Poll server for comments --- public/index.html | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 289d457e..d97afb50 100644 --- a/public/index.html +++ b/public/index.html @@ -60,10 +60,7 @@

}); var CommentBox = React.createClass({ - getInitialState: function() { - return {data: []}; - }, - componentDidMount: function() { + loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', @@ -76,6 +73,13 @@

}.bind(this) }); }, + getInitialState: function() { + return {data: []}; + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, render: function() { return (
@@ -87,7 +91,7 @@

Comments

} }); ReactDOM.render( - , + , document.getElementById('content') ); From 3c787ee68f83f2dd5b0afb2e7828e86a8c9e507c Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 14:18:46 +0000 Subject: [PATCH 08/12] Add input fields to comment form --- public/index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index d97afb50..a83cf280 100644 --- a/public/index.html +++ b/public/index.html @@ -52,9 +52,11 @@

var CommentForm = React.createClass({ render: function() { return ( -
- Hello, world! I am a CommentForm. -
+
+ + + +
); } }); From 4f11963ea07a514c8b411309b9c815cfdd2d8da6 Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 14:19:05 +0000 Subject: [PATCH 09/12] Store form state in component --- public/index.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index a83cf280..8f3ac5d5 100644 --- a/public/index.html +++ b/public/index.html @@ -50,11 +50,30 @@

}); 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}); + }, render: function() { return (
- - + +
); From 27f537019b8ac356e85317f1a4875747dc8d7e8f Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 14:21:45 +0000 Subject: [PATCH 10/12] Clear comment form on submission --- public/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 8f3ac5d5..75de0719 100644 --- a/public/index.html +++ b/public/index.html @@ -59,9 +59,19 @@

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; + } + // TODO: send request to the server + this.setState({author: '', text: ''}); + }, render: function() { return ( -
+ Date: Fri, 27 Nov 2015 14:26:00 +0000 Subject: [PATCH 11/12] Made comment form submit to server --- public/index.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 75de0719..342895cd 100644 --- a/public/index.html +++ b/public/index.html @@ -66,7 +66,7 @@

if (!text || !author) { return; } - // TODO: send request to the server + this.props.onCommentSubmit({author: author, text: text}); this.setState({author: '', text: ''}); }, render: function() { @@ -104,6 +104,20 @@

}.bind(this) }); }, + handleCommentSubmit: function(comment) { + $.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) { + console.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, getInitialState: function() { return {data: []}; }, @@ -116,7 +130,7 @@

Comments

- +
); } From 133f9fc70a697de371cccb86321ef6e7a4d14bdf Mon Sep 17 00:00:00 2001 From: Mark Hobson Date: Fri, 27 Nov 2015 14:27:34 +0000 Subject: [PATCH 12/12] Optimistically update comments on submission --- public/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/public/index.html b/public/index.html index 342895cd..7c5760cf 100644 --- a/public/index.html +++ b/public/index.html @@ -105,6 +105,13 @@

}); }, handleCommentSubmit: function(comment) { + var comments = this.state.data; + // Optimistically set an id on the new comment. It will be replaced by an + // id generated by the server. In a production application you would likely + // not use Date.now() for this and would have a more robust system in place. + comment.id = Date.now(); + var newComments = comments.concat([comment]); + this.setState({data: newComments}); $.ajax({ url: this.props.url, dataType: 'json',