Switched to using state

Author: James Robson

.eslintrc.json

@@ -6,7 +6,8 @@
     "globals": {
         "React": 0,
         "Remarkable": 0,
-        "ReactDOM": 0
+        "ReactDOM": 0,
+        "$": 0
     },
     "extends": "eslint:recommended",
     "parserOptions": {

public/scripts/tutorial.js

@@ -24,11 +24,34 @@
   });
 
   let 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 (
         <div className="commentBox">
             <h1>Comments</h1>
-            <CommentList data={this.props.data} />
+            <CommentList data={this.state.data} />
             <CommentForm />
         </div>
       );
@@ -62,7 +85,7 @@
     }
   });
   ReactDOM.render(
-    <CommentBox data={data} />,
+    <CommentBox url="/api/comments" pollInterval={2000}/>,
     document.getElementById('content')
   );
 })();