From 0961884bbc7fa20b3cd89a4bb6eeedc4f2a2e5c7 Mon Sep 17 00:00:00 2001
From: Greg Back <gback@mitre.org>
Date: Wed, 4 May 2016 22:59:28 -0500
Subject: [PATCH 1/2] Recreate example by following tutorial

---
 public/index.html          |   6 +-
 public/scripts/example2.js | 131 +++++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 5 deletions(-)
 create mode 100644 public/scripts/example2.js
diff --git a/public/index.html b/public/index.html
index 34ebddf4..75bd08c5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,6 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/babel" src="scripts/example.js"></script>
-    <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.
-    </script>
+    <script type="text/babel" src="scripts/example2.js" />
   </body>
 </html>
diff --git a/public/scripts/example2.js b/public/scripts/example2.js
new file mode 100644
index 00000000..1e85e97e
--- /dev/null
+++ b/public/scripts/example2.js
@@ -0,0 +1,131 @@
+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 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) {
+    var comments = this.state.data;
+    comment.id = Date.now();
+    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) {
+        this.setState({data: comments});
+        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>
+    );
+  }
+});
+
+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">
+        {commentNodes}
+      </div>
+    );
+  }
+});
+
+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 (
+      <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} />,
+  document.getElementById('content')
+);

From 497ffa044eb26ee38a17b9eeedc355c4727e5112 Mon Sep 17 00:00:00 2001
From: Greg Back <gback@mitre.org>
Date: Wed, 4 May 2016 23:00:37 -0500
Subject: [PATCH 2/2] Add relative date using moment.js

---
 public/index.html          | 1 +
 public/scripts/example2.js | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 75bd08c5..eac1d2bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
   </head>
   <body>
     <div id="content"></div>
diff --git a/public/scripts/example2.js b/public/scripts/example2.js
index 1e85e97e..04f1a086 100644
--- a/public/scripts/example2.js
+++ b/public/scripts/example2.js
@@ -5,11 +5,13 @@ var Comment = React.createClass({
   },
 
   render: function() {
+    var date = moment(this.props.id).fromNow();
     return (
       <div className="comment">
         <h2 className="commentAuthor">
           {this.props.author}
         </h2>
+        { date }
         <span dangerouslySetInnerHTML={this.rawMarkup()} />
       </div>
     );
@@ -71,7 +73,7 @@ var CommentList = React.createClass({
   render: function() {
     var commentNodes = this.props.data.map(function(comment) {
       return (
-        <Comment author={comment.author} key={comment.id}>
+        <Comment author={comment.author} key={comment.id} id={comment.id}>
           {comment.text}
         </Comment>
       );
