diff --git a/comments.json b/comments.json index 32938452..93e944d9 100644 --- a/comments.json +++ b/comments.json @@ -2,5 +2,17 @@ { "author": "Pete Hunt", "text": "Hey there!" + }, + { + "author": "Gideon Dresdner", + "text": "Boom" + }, + { + "author": "Chaka", + "text": "Laka" + }, + { + "author": "Joe", + "text": "I find this very interesting." } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index c6220169..d40006bb 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,7 @@
- + + diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js new file mode 100644 index 00000000..56241b8c --- /dev/null +++ b/public/scripts/tutorial.js @@ -0,0 +1,110 @@ +var data = [ + {author: "Pete Hunt", text: "This is one comment"}, + {author: "Jordan Walke", text: "This is *another* comment"} +]; +var Comment = React.createClass({ + render: function() { + var raw_markup = marked(this.props.children.toString(), {santize: true}); + return ( +
+

+ {this.props.author} +

+ +
+ ); + } +}); + +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.log(this.props.url, status, err.toString()); + } + }); + }, + handleCommentSubmit: function(comment) { + var comments = this.state.data; + 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) { + console.log(this.props.url, status, err.toString()); + }.bind(this) + }); + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, + render: function() { + return ( +
+

Comments

+ + +
+ ); + } +}); + +var CommentList = React.createClass({ + render: function() { + var commentNodes = this.props.data.map(function(comment){ + return ( + + {comment.text} + + ); + }); + return ( +
+ {commentNodes} +
+ ); + } +}); + +var CommentForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var author = React.findDOMNode(this.refs.author).value.trim(); + var text = React.findDOMNode(this.refs.text).value.trim(); + if (!text || !author) { + return; + } + this.props.onCommentSubmit({author: author, text: text}); + React.findDOMNode(this.refs.author).value = ''; + React.findDOMNode(this.refs.text).value = ''; + return; + }, + render: function() { + return ( +
+ + + +
+ ); + } +}); + +React.render(, + document.getElementById('content'));