From 3e838274d81bbb2f176d17816d479a20422eab5f Mon Sep 17 00:00:00 2001 From: Mike Dalton Date: Mon, 27 Jun 2016 18:47:30 -0400 Subject: [PATCH 1/3] comments from JS object --- public/index.html | 71 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 5af72a45..c2ab45ce 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,79 @@
- + From 251e64905d1251ebfd5707dd279d64bb632d933d Mon Sep 17 00:00:00 2001 From: Mike Dalton Date: Mon, 27 Jun 2016 19:00:47 -0400 Subject: [PATCH 2/3] comments from API --- public/index.html | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index c2ab45ce..51c5d58f 100644 --- a/public/index.html +++ b/public/index.html @@ -71,19 +71,39 @@

}); var CommentBox = React.createClass({ - render: function() { - return ( -
-

Comments

- - -
- ); - } + 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) + }); + }, + getInitialState: function() { + return {data: []}; + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, + render: function() { + return ( +
+

Comments

+ + +
+ ); + } }); ReactDOM.render( - , + , document.getElementById('content') ); From e4efd7ef11be758ceb329c03ec873f3f7543bae9 Mon Sep 17 00:00:00 2001 From: Mike Dalton Date: Sat, 27 Aug 2016 00:22:03 -0400 Subject: [PATCH 3/3] Final work on tutorial --- comments.json | 12 ++++++++++- public/index.html | 54 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 61 insertions(+), 5 deletions(-) diff --git a/comments.json b/comments.json index 7bef77ad..543aa5d7 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,15 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1467070212721, + "author": "Mike Dalton", + "text": "Hello, world" + }, + { + "id": 1467070317160, + "author": "Michael Dalton", + "text": "Foo Bar" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 51c5d58f..a000aec6 100644 --- a/public/index.html +++ b/public/index.html @@ -61,11 +61,38 @@

}); 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 ( -
- Hello, world! I am a CommentForm. -
+
+ + + +
); } }); @@ -84,6 +111,25 @@

}.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) + }); + }, getInitialState: function() { return {data: []}; }, @@ -96,7 +142,7 @@

Comments

- +
); }