From 0346d3a7ac30875a76595d06510727b821cf1ca5 Mon Sep 17 00:00:00 2001
From: peterberwind <peterberwind@gmail.com>
Date: Tue, 27 Sep 2016 02:53:30 -0400
Subject: [PATCH 1/4] first 3 components + mock data

---
 public/index.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/public/index.html b/public/index.html
index b88096b6..e7e5a3a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,6 +17,67 @@
     <script type="text/babel">
       // To get started with this tutorial running your own code, simply remove
       // the script tag loading scripts/example.js and start writing code here.
+
+      // mock data
+      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 (
+            <div className="commentBox">
+              <h1>Comments</h1>
+              <CommentList data={this.props.data} />
+              <CommentForm />
+            </div>
+          );
+        }
+      });
+
+      var CommentList = React.createClass({
+        render: function() {
+          return (
+            <div className="commentList">
+              <Comment author="Pete Hunt">This is one comment</Comment>
+              <Comment author="Jordan Walke">This is *another* comment</Comment>
+            </div>
+          );
+        }
+      });
+
+      var Comment = React.createClass({
+        rawMarkup: function() {
+          var md = new Remarkable();
+          var rawMarkup = md.render(this.props.children.toString());
+          return { __html: rawMarkup };
+        },
+        render: function() {
+          return (
+            <div className="comment">
+              <h2 className="commentAuthor">
+                {this.props.author}
+              </h2>
+              <span dangerouslySetInnerHTML={this.rawMarkup()} />
+            </div>
+          );
+        }
+      });
+
+      var CommentForm = React.createClass({
+        render: function() {
+          return (
+            <div className="commentForm">
+              Hello, world! I am a CommentForm.
+            </div>
+          );
+        }
+      });
+      ReactDOM.render(
+        <CommentBox data={data} />,
+        document.getElementById('content')
+      );
     </script>
   </body>
 </html>

From b41e35c7faeb03400aa27594a02cbece6af86f22 Mon Sep 17 00:00:00 2001
From: peterberwind <peterberwind@gmail.com>
Date: Wed, 28 Sep 2016 01:37:34 -0400
Subject: [PATCH 2/4] Fetching from the server + State

---
 comments.json     |  2 +-
 public/index.html | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/comments.json b/comments.json
index 7bef77ad..8553450c 100644
--- a/comments.json
+++ b/comments.json
@@ -6,7 +6,7 @@
     },
     {
         "id": 1420070400000,
-        "author": "Paul O’Shannessy",
+        "author": "Test O’Shannessy",
         "text": "React is *great*!"
     }
 ]
diff --git a/public/index.html b/public/index.html
index e7e5a3a3..40bc047c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,11 +25,31 @@
       ];
 
       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 (
             <div className="commentBox">
               <h1>Comments</h1>
-              <CommentList data={this.props.data} />
+              <CommentList data={this.state.data} />
               <CommentForm />
             </div>
           );
@@ -38,10 +58,16 @@ <h1>Comments</h1>
 
       var CommentList = React.createClass({
         render: function() {
+          var commentNodes = this.props.data.map(function(comment) {
+            return (
+              <Comment author={comment.author} key={comment.id}>
+                {comment.text}
+              </Comment>
+            );
+          });
           return (
             <div className="commentList">
-              <Comment author="Pete Hunt">This is one comment</Comment>
-              <Comment author="Jordan Walke">This is *another* comment</Comment>
+              {commentNodes}
             </div>
           );
         }
@@ -75,7 +101,7 @@ <h2 className="commentAuthor">
         }
       });
       ReactDOM.render(
-        <CommentBox data={data} />,
+        <CommentBox url="/api/comments" pollInterval={2000} />,
         document.getElementById('content')
       );
     </script>

From dfc9e3c5c5180e9ec6ad48b740faea22028a0d79 Mon Sep 17 00:00:00 2001
From: peterberwind <peterberwind@gmail.com>
Date: Wed, 28 Sep 2016 01:51:02 -0400
Subject: [PATCH 3/4] add form + posting via ajax

---
 comments.json     | 17 ++++++++++++++-
 public/index.html | 53 +++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/comments.json b/comments.json
index 8553450c..f805af83 100644
--- a/comments.json
+++ b/comments.json
@@ -8,5 +8,20 @@
         "id": 1420070400000,
         "author": "Test O’Shannessy",
         "text": "React is *great*!"
+    },
+    {
+        "id": 1475041776187,
+        "author": "Peter",
+        "text": "test"
+    },
+    {
+        "id": 1475041781064,
+        "author": "Peter",
+        "text": "Test"
+    },
+    {
+        "id": 1475041791863,
+        "author": "Peter",
+        "text": "TEst"
     }
-]
+]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 40bc047c..3fd0d297 100644
--- a/public/index.html
+++ b/public/index.html
@@ -45,12 +45,26 @@
           this.loadCommentsFromServer();
           setInterval(this.loadCommentsFromServer, this.props.pollInterval);
         },
+        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)
+          });
+        },
         render: function() {
           return (
             <div className="commentBox">
               <h1>Comments</h1>
               <CommentList data={this.state.data} />
-              <CommentForm />
+              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
             </div>
           );
         }
@@ -92,11 +106,42 @@ <h2 className="commentAuthor">
       });
 
       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) {
+          e.preventDefault();
+          var author = this.state.author.trim();
+          var 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>
           );
         }
       });

From d1617f58a592731492ca39e673c28052dfa0b5ea Mon Sep 17 00:00:00 2001
From: peterberwind <peterberwind@gmail.com>
Date: Wed, 28 Sep 2016 01:52:48 -0400
Subject: [PATCH 4/4] eager loading optimization

---
 public/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/index.html b/public/index.html
index 3fd0d297..34665258 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,6 +46,13 @@
           setInterval(this.loadCommentsFromServer, this.props.pollInterval);
         },
         handleCommentSubmit: function(comment) {
+          var 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();
+          var newComments = comments.concat([comment]);
+          this.setState({data: newComments});
           $.ajax({
             url: this.props.url,
             dataType: 'json',
@@ -55,6 +62,7 @@
               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)
           });