From 83f54ac429f7f66755c3e6793d0e3c276faadb4b Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Sun, 15 May 2016 23:25:19 +0300 Subject: [PATCH 01/11] clean slate, step 0 --- comments.json | 7 ++++++- public/index.html | 1 - 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/comments.json b/comments.json index 7bef77ad..187f1e10 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,10 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1463343772374, + "author": "Andy", + "text": "Yohoho" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 34ebddf4..d569bc9d 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,6 @@
- From 81f31830d757a9e6fd7b5b74b65462ff700c31d6 Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Sun, 15 May 2016 23:48:16 +0300 Subject: [PATCH 03/11] composing components, refactor to main.js --- public/index.html | 15 +-------------- public/scripts/main.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 public/scripts/main.js diff --git a/public/index.html b/public/index.html index f5b6b056..6bc82daf 100644 --- a/public/index.html +++ b/public/index.html @@ -13,23 +13,10 @@
+ diff --git a/public/scripts/main.js b/public/scripts/main.js new file mode 100644 index 00000000..406878bc --- /dev/null +++ b/public/scripts/main.js @@ -0,0 +1,36 @@ +var CommentBox = React.createClass({ + render: function() { + return ( +
+

Comments

+ + +
+ ); + } +}); + +var CommentList = React.createClass({ + render: function() { + return ( +
+ I'm a commentList +
+ ); + } +}); + +var CommentForm = React.createClass({ + render: function() { + return ( +
+ I'm a commentForm +
+ ); + } +}); + +ReactDOM.render( + , + document.getElementById('content') +); From 403fb7d652889f2890db84eaf4900583c910e708 Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Sun, 15 May 2016 23:54:50 +0300 Subject: [PATCH 04/11] Component Properties --- public/scripts/main.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index 406878bc..e1734ab9 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -14,7 +14,8 @@ var CommentList = React.createClass({ render: function() { return (
- I'm a commentList + This is one comment + This is *another* comment
); } @@ -30,6 +31,19 @@ var CommentForm = React.createClass({ } }); +var Comment = React.createClass({ + render: function() { + return ( +
+

+ {this.props.author} +

+ {this.props.children} +
+ ) + } +}) + ReactDOM.render( , document.getElementById('content') From f39f6407ee401401b754c52cd61a031753dc7cfb Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Sun, 15 May 2016 23:57:27 +0300 Subject: [PATCH 05/11] Adding Markdown --- public/scripts/main.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index e1734ab9..6ddad5be 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -32,13 +32,18 @@ var CommentForm = React.createClass({ }); var Comment = React.createClass({ + rawMarkup: function() { + var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); + return { __html: rawMarkup }; + }, + render: function() { return (

{this.props.author}

- {this.props.children} +
) } From 2eb5e4d3ff9659fb5fefe84a1afa7f1d7cadc1a7 Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 00:09:35 +0300 Subject: [PATCH 06/11] Hook up the data model --- public/scripts/main.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index 6ddad5be..982ac843 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -1,9 +1,14 @@ +var data = [ + {id: 1, author: "Pete Hunt", text: "This is one comment"}, + {id: 2, author: "Jordan Walke", text: "This is *another* comment"} +]; + var CommentBox = React.createClass({ render: function() { return (

Comments

- +
); @@ -12,10 +17,16 @@ var CommentBox = React.createClass({ var CommentList = React.createClass({ render: function() { + var commentNodes = this.props.data.map(function(comment) { + return ( + + {comment.text} + + ); + }); return (
- This is one comment - This is *another* comment + {commentNodes}
); } @@ -50,6 +61,6 @@ var Comment = React.createClass({ }) ReactDOM.render( - , + , document.getElementById('content') ); From 5646f419dc598bfcfe797e87b21b834285ac180e Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 01:34:05 +0300 Subject: [PATCH 07/11] Fetching from the server --- public/scripts/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index 982ac843..d42416fe 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -61,6 +61,6 @@ var Comment = React.createClass({ }) ReactDOM.render( - , + , document.getElementById('content') ); From aca6779d5fa1d0240fc017dbf23d6c66c783e4be Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 01:56:43 +0300 Subject: [PATCH 08/11] set initial and update state --- public/scripts/main.js | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index d42416fe..0d2828cf 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -1,14 +1,34 @@ -var data = [ - {id: 1, author: "Pete Hunt", text: "This is one comment"}, - {id: 2, author: "Jordan Walke", text: "This is *another* comment"} -]; - 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) + }); + }, + + getInitialState: function() { + return { + data: [] + }; + }, + + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, + render: function() { return (

Comments

- +
); @@ -61,6 +81,6 @@ var Comment = React.createClass({ }) ReactDOM.render( - , + , document.getElementById('content') ); From 32e4b6a51523aca6dc9dbbfb17b69801e51db253 Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 12:01:55 +0300 Subject: [PATCH 09/11] Adding new comments: controlled components, fixed form tag --- public/scripts/main.js | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/public/scripts/main.js b/public/scripts/main.js index 0d2828cf..99be0895 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -53,11 +53,38 @@ var CommentList = React.createClass({ }); 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) { + console.log("in handleSubmit") + e.preventDefault(); + var author = this.state.author.trim(); + var text = this.state.text.trim(); + if(!author || !text) { + return; + } + //send data to server + this.setState({author: '', text: ''}); + + }, + render: function() { return ( -
- I'm a commentForm -
+
+ + + +
); } }); From fe1c70d955147f354dc7fe94447a1314bcdb3e7a Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 12:45:47 +0300 Subject: [PATCH 10/11] Adding new comments: callback as props --- comments.json | 5 +++++ public/scripts/main.js | 20 +++++++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/comments.json b/comments.json index 187f1e10..3e430df5 100644 --- a/comments.json +++ b/comments.json @@ -13,5 +13,10 @@ "id": 1463343772374, "author": "Andy", "text": "Yohoho" + }, + { + "id": 1463391341413, + "author": "lakaka", + "text": "sjdk" } ] \ No newline at end of file diff --git a/public/scripts/main.js b/public/scripts/main.js index 99be0895..40f6b727 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -13,6 +13,21 @@ var CommentBox = React.createClass({ }); }, + 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: [] @@ -29,7 +44,7 @@ var CommentBox = React.createClass({

Comments

- +
); } @@ -66,14 +81,13 @@ var CommentForm = React.createClass({ }, handleSubmit: function(e) { - console.log("in handleSubmit") e.preventDefault(); var author = this.state.author.trim(); var text = this.state.text.trim(); if(!author || !text) { return; } - //send data to server + this.props.onCommentSubmit({author: author, text: text}); this.setState({author: '', text: ''}); }, From 39a903863879d63a9446823bc529805a789918cc Mon Sep 17 00:00:00 2001 From: Andrew Yip Date: Mon, 16 May 2016 12:53:19 +0300 Subject: [PATCH 11/11] optimistic updates --- comments.json | 10 ++++++++++ public/scripts/main.js | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/comments.json b/comments.json index 3e430df5..dc892a59 100644 --- a/comments.json +++ b/comments.json @@ -18,5 +18,15 @@ "id": 1463391341413, "author": "lakaka", "text": "sjdk" + }, + { + "id": 1463392347234, + "author": "dddd", + "text": "ffff" + }, + { + "id": 1463392372806, + "author": "dddd", + "text": "wwww" } ] \ No newline at end of file diff --git a/public/scripts/main.js b/public/scripts/main.js index 40f6b727..2208a7b8 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -14,6 +14,10 @@ var CommentBox = React.createClass({ }, 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', @@ -23,6 +27,7 @@ var CommentBox = React.createClass({ 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) });