hkdnet · hkdnet · Mar 21, 2015 · Mar 21, 2015 · Mar 21, 2015 · Mar 21, 2015
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 public
+db.json
diff --git a/db.json b/db.json
@@ -1,16 +1,34 @@
 {
-  "posts": [
-    {
-      "id": 1,
-      "title": "json-server",
-      "author": "typicode"
-    }
-  ],
   "comments": [
     {
-      "id": 1,
-      "body": "some comment",
-      "postId": 1
+      "author": "Maki Nishikino",
+      "text": "imi wakannai",
+      "postdate": 1427032542268,
+      "id": "c9fd1ac6-b2f7-4a6c-b63e-099c851a0f31"
+    },
+    {
+      "author": "Nico Yazawa",
+      "text": "Nico nico nii~",
+      "postdate": 1427034542268,
+      "id": "e8686677-41da-4bef-b033-cc678e08e814"
+    },
+    {
+      "author": "Aoba Suzukaze",
+      "text": "zoi",
+      "postdate": 1427038542268,
+      "id": "a5a3e078-8033-44dc-8f3b-43e443415b5a"
+    },
+    {
+      "author": "Kou Yagami",
+      "text": "Shigoto bakka sitettoyo-",
+      "postdate": 1427040542268,
+      "id": "cb550e14-8063-4113-9948-48d996e29d26"
+    },
+    {
+      "author": "Yuiko Kuroki",
+      "text": "Tomoya!",
+      "postdate": 1427041542268,
+      "id": "66c06445-8de5-4f0d-83bf-6e00c45bbb8b"
     }
   ],
   "favicon.ico": []

diff --git a/gulpfile.js b/gulpfile.js
@@ -14,7 +14,7 @@ gulp.task('build.copy', function() {
 
 gulp.task('build.react', function(){
   var b = browserify({
-    entries: ['./src/javascripts/hello.jsx'],
+    entries: ['./src/javascripts/main.js'],
     transform: [reactify]
   });
   return b.bundle()
@@ -24,8 +24,16 @@ gulp.task('build.react', function(){
 
 gulp.task('build', ['build.copy','build.react']);
 
-gulp.task('run', ['build'], function() {
-  var exec = require("child_process").exec
-  exec('json-server db.json')
-  console.log('db ok')
-});
+gulp.task('json-server', function() {
+  var jsonServer = require('json-server')
+  var object = require('./db.json');
+
+  var router = jsonServer.router('./db.json'); // Express router
+  var server = jsonServer.create()       // Express server
+  var port = 3000;
+  server.use(router)
+  server.listen(port)
+  console.log('json-server is ready at port:' +  port)
+})
+
+gulp.task('run', ['build', 'json-server']);
diff --git a/package.json b/package.json
@@ -31,5 +31,10 @@
     "json-server": "0.6.4"
   },
   "favicon.ico": [],
-  "javascripts": []
-}
+  "javascripts": [],
+  "dependencies": {
+    "dateformat": "^1.0.11",
+    "glob": "^5.0.3",
+    "superagent": "^1.1.0"
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="/stylesheets/comment.css" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
   <body>
-    <div id="example"></div>
+    <div id="content"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
     <script src="/javascripts/main.js"></script>
   </body>
 </html>
diff --git a/src/javascripts/main.js b/src/javascripts/main.js
@@ -0,0 +1,148 @@
+var React = require('react');
+var converter = new Showdown.converter();
+var dateFormat = require('dateformat');
+var request = require('superagent');
+
+var CommentHeader = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <i className="fa fa-user" />
+        <span className="author">{ this.props.author }</span>
+      </div>
+    )
+  }
+})
+var CommentFooter = React.createClass({
+  render: function() {
+    return(
+      <div className="commentFooter">
+        <i className="fa fa-clock-o" />
+        { dateFormat(this.props.postdate, "yyyy-mm-dd HH:MM") }
+      </div>
+    )
+  }
+})
+
+var Comment = React.createClass({
+  render: function() {
+    var rawMarkup = converter.makeHtml(this.props.children.toString())
+    return (
+      <div className="comment">
+        <CommentHeader author={ this.props.author } />
+        <div>
+          <i className="fa fa-comment-o" />
+          <div className="commentBody" dangerouslySetInnerHTML={{ __html: rawMarkup }} />
+        </div>
+        <CommentFooter postdate={ this.props.postdate } />
+      </div>
+    )
+  }
+});
+
+var EditButton = React.createClass({
+  handleClick: function(e) {
+    console.log('edit is not implemented yet, sorry....')
+  },
+  render: function() {
+    return(
+      <button className="edit" onClick={ this.handleClick }>Edit</button>
+    )
+  }
+})
+
+var CommentList = React.createClass({
+  render: function() {
+    var comments = this.props.data.map(function(c) {
+      return (
+        <Comment author={ c.author } postdate={ c.postdate }>
+          { c.text }
+        </Comment>
+      )
+    })
+    return (
+      <div className="commentList">
+        {comments}
+      </div>
+    )
+  }
+});
+
+var CommentForm = React.createClass({
+  getValues: function() {
+    return {
+      author: React.findDOMNode(this.refs.author).value.trim(),
+      text: React.findDOMNode(this.refs.text).value.trim(),
+      postdate: Date.now()
+    }
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var d = this.getValues();
+    if(!d.author || !d.text) {
+      return;
+    }
+    this.props.onCommentSubmit(d);
+    React.findDOMNode(this.refs.author).value = '';
+    React.findDOMNode(this.refs.text).value = '';
+  },
+  render: function() {
+    return (
+      <form className="commentForm" onSubmit={ this.handleSubmit }>
+        <h2>New Comment</h2>
+        <input type="text" ref="author" placeholder="name" /><br />
+        <input type="text" ref="text" placeholder="say something..." />
+        <input type="submit" value="Post" />
+      </form>
+    )
+  }
+});
+
+var CommentBox = React.createClass({
+  fetchComments: function() {
+    return request.get(this.props.url);
+  },
+  loadCommentsFromServer: function() {
+    this.fetchComments().end(function(err, res) {
+        if (err) {
+          console.log(err)
+        } else {
+          this.setState({data: res.body})
+        }
+      }.bind(this))
+  },
+  postComment: function(d) {
+    return request.post(this.props.url).send(d)
+  },
+  handleCommentSubmit: function(d) {
+    var s = this.state;
+    s.data.push(d);
+    this.setState(s);
+    this.postComment(d).end(function(err, res) {
+      if (err) {
+        console.error(err)
+      }
+    })
+  },
+  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>
+    )
+  }
+});
+
+React.render(
+  <CommentBox url="/comments" pollInterval={ 2000 } />,
+  document.getElementById('content')
+)
diff --git a/src/stylesheets/comment.css b/src/stylesheets/comment.css
@@ -0,0 +1,20 @@
+.comment {
+  width: 400px;
+  border: 1px gray solid;
+  padding: 5px;
+  margin: 5px;
+}
+
+.commentFooter {
+  color: gray;
+  text-align: right;
+}
+
+.commentBody {
+  margin-left: 5px;
+  display: inline-block;
+}
+
+.author {
+  padding-left: 5px;
+}