From f1237602a37c1feecf144b1ffa40fa0a4c794dd0 Mon Sep 17 00:00:00 2001 From: Sara Falkoff Date: Sun, 10 Jan 2016 20:49:17 -0800 Subject: [PATCH 1/2] Completed through hook up data model --- comments.json | 7 ++++- public/index.html | 72 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 75 insertions(+), 4 deletions(-) diff --git a/comments.json b/comments.json index 7bef77ad..efa5b809 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,10 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1452484385530, + "author": "Sara Falkoff", + "text": "Let's go!" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index c6494446..18eb888d 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,76 @@
- From 271400ef2ead23f15b482986aa02cc0578fbc1e4 Mon Sep 17 00:00:00 2001 From: Sara Falkoff Date: Mon, 18 Jan 2016 17:43:13 -0800 Subject: [PATCH 2/2] Completed react tutorial --- comments.json | 12 ++++++- public/index.html | 87 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 91 insertions(+), 8 deletions(-) diff --git a/comments.json b/comments.json index efa5b809..f815c644 100644 --- a/comments.json +++ b/comments.json @@ -12,6 +12,16 @@ { "id": 1452484385530, "author": "Sara Falkoff", - "text": "Let's go!" + "text": "Let's go adventuring!" + }, + { + "id": 1453167545505, + "author": "Mary Poppins", + "text": "Off we go!" + }, + { + "id": 1453167753803, + "author": "Harry Potter", + "text": "I survived." } ] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 18eb888d..b36514f8 100644 --- a/public/index.html +++ b/public/index.html @@ -21,12 +21,54 @@ ]; var CommentBox = React.createClass({ + 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; + // 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', + 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: []}; + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, render: function() { return (

Comments

- - + +
); } @@ -51,15 +93,46 @@

Comments

}); 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. -
+
+ + + +
); } }); - + var Comment = React.createClass({ rawMarkup: function() { var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); @@ -79,7 +152,7 @@

}); ReactDOM.render( - , + , document.getElementById('content') );