Hooked up comment form

Author: James Robson

.eslintrc.json

@@ -21,6 +21,7 @@
         "react"
     ],
     "rules": {
+        "no-var": "error",
         "indent": [
             "error",
             2

comments.json

@@ -10,8 +10,8 @@
         "text": "React is *great*!"
     },
     {
-        "id": 1469536026617,
-        "author": "ioahspefpi",
-        "text": "poiasdfpoijasdf"
+        "id": 1469622378109,
+        "author": "asef",
+        "text": "aesfas"
     }
 ]

public/scripts/tutorial.js

@@ -1,10 +1,6 @@
 (function() {
   'use strict';
 
-  let data = [
-    {id: 1, author: 'Pete Hunt', text: 'This is one comment'},
-    {id: 2, author: 'Jordan Walke', text: 'This is *another* comment'}
-  ];
   let Comment = React.createClass({
     rawMarkup: function() {
       let md = new Remarkable();
@@ -37,7 +33,28 @@
         }.bind(this)
       });
     },
-
+    handleCommentSubmit: function(comment) {
+      let 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();
+      let 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: []};
     },
@@ -52,7 +69,7 @@
         <div className="commentBox">
             <h1>Comments</h1>
             <CommentList data={this.state.data} />
-            <CommentForm />
+            <CommentForm onCommentSubmit={this.handleCommentSubmit} />
         </div>
       );
     }
@@ -76,16 +93,47 @@
   });
 
   let 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();
+      let author = this.state.author.trim();
+      let text = this.state.text.trim();
+      if (!text || !author) {
+        return;
+      }
+      this.props.onCommentSubmit({author: author, text: text});
+      this.setState({author: '', text: ''});
+    },
     render: function() {
       return (
-        <div className="commentForm">
-          Hello, world! I am a CommentForm.
-        </div>
+        <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..."
+            value={this.state.text}
+            onChange={this.handleTextChange}
+          />
+          <input type="submit" value="Post" />
+        </form>
       );
     }
   });
   ReactDOM.render(
-    <CommentBox url="/api/comments" pollInterval={2000}/>,
+    <CommentBox url="/api/comments" pollInterval={10000}/>,
     document.getElementById('content')
   );
 })();