Add tutorial20

Author: Matt Calthrop

public/index.html

@@ -24,6 +24,7 @@
     <!--<script type="text/babel" src="scripts/tutorial14.js"></script>-->
     <!--<script type="text/babel" src="scripts/tutorial15-16.js"></script>-->
     <!--<script type="text/babel" src="scripts/tutorial17.js"></script>-->
-    <script type="text/babel" src="scripts/tutorial18-19.js"></script>
+    <!--<script type="text/babel" src="scripts/tutorial18-19.js"></script>-->
+    <script type="text/babel" src="scripts/tutorial20.js"></script>
   </body>
 </html>

public/scripts/tutorial20.js

@@ -0,0 +1,149 @@
+/* global $, _, React, ReactDOM, marked */
+
+var Comment = React.createClass({
+    rawMarkup: function () {
+        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
+
+        return {__html: rawMarkup};
+    },
+    render: function () {
+        return (
+            <div className="comment">
+                <h2 className="commentAuthor">
+                    {this.props.author}
+                </h2>
+                <span dangerouslySetInnerHTML={this.rawMarkup()}/>
+            </div>
+        );
+    }
+});
+
+var CommentList = React.createClass({
+    render: function () {
+        var commentNodes = this.props.data.map(function (comment) {
+            return (
+                <Comment key={comment.id} author={comment.author}>
+                    {comment.text}
+                </Comment>
+            );
+        });
+
+        return (
+            <div className="commentList">
+                {commentNodes}
+            </div>
+        );
+    }
+});
+
+var CommentForm = React.createClass({
+    initialState: {
+        author: '',
+        text: ''
+    },
+    getInitialState: function () {
+        return _.clone(this.initialState);
+    },
+    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) {
+            this.props.onCommentSubmit({
+                author: author,
+                text: text
+            });
+            this.setState(this.getInitialState());
+        }
+    },
+    componentDidMount: function () {
+        // check if required properties have been set
+        if (!this.props.onCommentSubmit) {
+            throw new Error('onCommentSubmit property not set');
+        }
+    },
+    render: function () {
+        return (
+            <form
+                className="commentForm"
+                onSubmit={this.handleSubmit}>
+                <input
+                    type="text"
+                    placeholder="Your name"
+                    value={this.state.author}
+                    onChange={this.handleAuthorChange}
+                />
+                <input
+                    type="text"
+                    placeholder="Say something&hellip;"
+                    value={this.state.text}
+                    onChange={this.handleTextChange}
+                />
+                <input
+                    type="submit"
+                    value="Post"
+                />
+            </form>
+        );
+    }
+});
+
+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) {
+        $.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: []
+        };
+    },
+    componentDidMount: function () {
+        this.loadCommentsFromServer();
+        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+    },
+    render: function () {
+        return (
+            <div className="commentBox">
+                <h1>Comments</h1>
+                <CommentList data={this.state.data}/>
+                <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
+            </div>
+        );
+    }
+});
+
+ReactDOM.render(
+    <CommentBox url="/api/comments" pollInterval={5000}/>,
+    document.getElementById('content')
+);