From 8f381be69a7fdd95591a3aa23f04f8bf64b679b4 Mon Sep 17 00:00:00 2001
From: Daniel Hahn <dha@betterplace.org>
Date: Tue, 20 Oct 2015 22:05:37 +0200
Subject: [PATCH] Doing tutorial

---
 public/index.html           |  2 +-
 public/scripts/tutorial1.js | 93 +++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 public/scripts/tutorial1.js
diff --git a/public/index.html b/public/index.html
index c6494446..d193fca2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/babel" src="scripts/example.js"></script>
+    <script type="text/babel" src="scripts/tutorial1.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.
diff --git a/public/scripts/tutorial1.js b/public/scripts/tutorial1.js
new file mode 100644
index 00000000..b3f34f33
--- /dev/null
+++ b/public/scripts/tutorial1.js
@@ -0,0 +1,93 @@
+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 author={comment.author}>
+          {comment.text}
+        </Comment>
+      );
+    });
+    return (
+      <div className="commentList">
+        {commentNodes}
+      </div>
+    );
+  }
+});
+
+var CommentForm = React.createClass({
+  handleCommentSubmit: function(e) {
+    e.preventDefault();
+    var author = this.refs.author.value.trim();
+    var text= this.refs.text.value.trim();
+    if (!text || !author) {
+      return;
+    }
+    this.refs.author.value = '';
+    this.refs.author.value = '';
+    return;
+  },
+  render: function() {
+    return (
+      <form className="commentForm" onSubmit={this.handleSubmit}>
+        <input type="text" placeholder="Your name" ref="author" />
+        <input type="text" placeholder="Say something..." ref="text" />
+        <input type="submit" value="Post" />
+      </form>
+    );
+  }
+});
+
+var CommentBox = React.createClass({
+  getInitialState: function() {
+    return { data: []};
+  },
+  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)
+    });
+  },
+  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 />
+      </div>
+    );
+  }
+});
+
+var data = [
+  {author: "Pete Hunt", text: "First comment"},
+  {author: "Daniel Hahn", text: "My own comment"}
+]
+
+ReactDOM.render(<CommentBox url="/api/comments" pollInterval={2000} />, document.getElementById('content'));
