From 06e0ca8a7ae42d85345f60f9caf516bb899ee328 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 13:13:46 +0900 Subject: [PATCH 01/12] [WIP]pull request first From 529017cf93119cffbe7645e93842c1921ac2850d Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 13:33:23 +0900 Subject: [PATCH 02/12] create commentbox using simple div elm --- gulpfile.js | 2 +- src/index.html | 2 +- src/javascripts/CommentBox.jsx | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 src/javascripts/CommentBox.jsx diff --git a/gulpfile.js b/gulpfile.js index 66a1fd6..fa4946c 100644 --- 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/CommentBox.jsx'], transform: [reactify] }); return b.bundle() diff --git a/src/index.html b/src/index.html index 5fd21db..c237cbd 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ -
+
diff --git a/src/javascripts/CommentBox.jsx b/src/javascripts/CommentBox.jsx new file mode 100644 index 0000000..2eb0731 --- /dev/null +++ b/src/javascripts/CommentBox.jsx @@ -0,0 +1,15 @@ +var React = require('react'); +var CommentBox = React.createClass({ + render: function() { + return ( +
+ Hello, world! Iam a CommentBox. +
+ ); + } +}) + +React.render( + , + document.getElementById('content') +) From 816b20b946a9e341209fcb2fe6f9762d11437df2 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 13:59:06 +0900 Subject: [PATCH 03/12] rename CommentBox.jsx -> main.js --- gulpfile.js | 2 +- package.json | 7 +++++-- src/javascripts/CommentBox.jsx | 15 --------------- src/javascripts/main.js | 16 ++++++++++++++++ 4 files changed, 22 insertions(+), 18 deletions(-) delete mode 100644 src/javascripts/CommentBox.jsx create mode 100644 src/javascripts/main.js diff --git a/gulpfile.js b/gulpfile.js index fa4946c..2e7cc6e 100644 --- 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/CommentBox.jsx'], + entries: ['./src/javascripts/main.js'], transform: [reactify] }); return b.bundle() diff --git a/package.json b/package.json index a203de8..042884f 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "json-server": "0.6.4" }, "favicon.ico": [], - "javascripts": [] -} \ No newline at end of file + "javascripts": [], + "dependencies": { + "glob": "^5.0.3" + } +} diff --git a/src/javascripts/CommentBox.jsx b/src/javascripts/CommentBox.jsx deleted file mode 100644 index 2eb0731..0000000 --- a/src/javascripts/CommentBox.jsx +++ /dev/null @@ -1,15 +0,0 @@ -var React = require('react'); -var CommentBox = React.createClass({ - render: function() { - return ( -
- Hello, world! Iam a CommentBox. -
- ); - } -}) - -React.render( - , - document.getElementById('content') -) diff --git a/src/javascripts/main.js b/src/javascripts/main.js new file mode 100644 index 0000000..2e4bece --- /dev/null +++ b/src/javascripts/main.js @@ -0,0 +1,16 @@ +var React = require('React'); +var CommentBox = React.createClass({ + displayName: 'CommentBox', + render: function() { + return ( + React.createElement('div', {className: "commentBox"}, + "Hello, world! I am a CommentBox." + ) + ); + } +}) + +React.render( + React.createElement(CommentBox, null), + document.getElementById('content') +) From 7961b6af7625a7d8cb5efffd4e83e617358c3ff9 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 14:08:41 +0900 Subject: [PATCH 04/12] add CommentList and CommentForm --- src/javascripts/main.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/src/javascripts/main.js b/src/javascripts/main.js index 2e4bece..5358fd1 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -1,12 +1,34 @@ var React = require('React'); + +var CommentList = React.createClass({ + render: function() { + return ( +
+ Hello, world! I am a CommentList. +
+ ) + } +}); + +var CommentForm = React.createClass({ + render: function() { + return ( +
+ Hello, world! I am a CommentForm. +
+ ) + } +}); + var CommentBox = React.createClass({ - displayName: 'CommentBox', render: function() { return ( - React.createElement('div', {className: "commentBox"}, - "Hello, world! I am a CommentBox." - ) - ); +
+

Comments

+ + +
+ ) } }) From f539e24d070596ce1e04926c419bbe6b54e52bc9 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 15:06:09 +0900 Subject: [PATCH 05/12] add funcdtion show static comment data --- db.json | 18 +++++++----------- src/index.html | 1 + src/javascripts/main.js | 33 +++++++++++++++++++++++++++++---- 3 files changed, 37 insertions(+), 15 deletions(-) diff --git a/db.json b/db.json index f08c31c..7829b6e 100644 --- a/db.json +++ b/db.json @@ -1,17 +1,13 @@ { - "posts": [ - { - "id": 1, - "title": "json-server", - "author": "typicode" - } - ], "comments": [ { - "id": 1, - "body": "some comment", - "postId": 1 + "author": "Nico Yazawa", + "text": "Nico nico nii~" + }, + { + "author": "Aoba Suzukaze", + "text": "zoi" } ], "favicon.ico": [] -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index c237cbd..545fa20 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@
+ diff --git a/src/javascripts/main.js b/src/javascripts/main.js index 5358fd1..e6e23f5 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -1,10 +1,30 @@ var React = require('React'); +var converter = new Showdown.converter(); + +var Comment = React.createClass({ + render: function() { + var rawMarkup = converter.makeHtml(this.props.children.toString()) + return ( +
+

+ { this.props.author } +

+ +
+ ) + } +}); var CommentList = React.createClass({ render: function() { + var comments = this.props.data.map(function(c) { + return ( + {c.text} + ) + }) return (
- Hello, world! I am a CommentList. + {comments}
) } @@ -25,14 +45,19 @@ var CommentBox = React.createClass({ return (

Comments

- +
) } -}) +}); + +var data = [ + {"author":"Nico Yazawa","text":"Nico nico nii~"}, + {"author":"Aoba Suzukaze","text":"zoi"} +]; React.render( - React.createElement(CommentBox, null), + , document.getElementById('content') ) From 5f45b4aed761d62c6ac7177bf3a527723f0a7b4a Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 16:14:01 +0900 Subject: [PATCH 06/12] change data source --- db.json | 2 +- package.json | 4 +++- src/javascripts/main.js | 22 +++++++++++++++++++--- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/db.json b/db.json index 7829b6e..1b1c28b 100644 --- a/db.json +++ b/db.json @@ -10,4 +10,4 @@ } ], "favicon.ico": [] -} +} \ No newline at end of file diff --git a/package.json b/package.json index 042884f..cb53d02 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,8 @@ "favicon.ico": [], "javascripts": [], "dependencies": { - "glob": "^5.0.3" + "bluebird": "^2.9.14", + "glob": "^5.0.3", + "superagent": "^1.1.0" } } diff --git a/src/javascripts/main.js b/src/javascripts/main.js index e6e23f5..bedf071 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -1,5 +1,7 @@ -var React = require('React'); +var React = require('react'); var converter = new Showdown.converter(); +window.Promise = require('bluebird'); +window.request = require('superagent'); var Comment = React.createClass({ render: function() { @@ -41,11 +43,25 @@ var CommentForm = React.createClass({ }); var CommentBox = React.createClass({ + getInitialState: function() { + return {data: []} + }, + componentDidMount: function() { + request + .get('/comments') + .end(function(err, res) { + if (err) { + console.log(err) + } else { + this.setState({data: res.body}) + } + }.bind(this)) + }, render: function() { return (

Comments

- +
) @@ -58,6 +74,6 @@ var data = [ ]; React.render( - , + , document.getElementById('content') ) From 2ce6fc284a3fd727dd1684041c1c1e694dc89799 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 18:10:24 +0900 Subject: [PATCH 07/12] add comment form --- db.json | 11 ++++++-- package.json | 1 - src/javascripts/main.js | 58 ++++++++++++++++++++++++++++------------- 3 files changed, 49 insertions(+), 21 deletions(-) diff --git a/db.json b/db.json index 1b1c28b..8cdb9c9 100644 --- a/db.json +++ b/db.json @@ -1,12 +1,19 @@ { "comments": [ + { + "author": "Maki Nishikino", + "text": "imi wakannai", + "id": "c9fd1ac6-b2f7-4a6c-b63e-099c851a0f31" + }, { "author": "Nico Yazawa", - "text": "Nico nico nii~" + "text": "Nico nico nii~", + "id": "e8686677-41da-4bef-b033-cc678e08e814" }, { "author": "Aoba Suzukaze", - "text": "zoi" + "text": "zoi", + "id": "a5a3e078-8033-44dc-8f3b-43e443415b5a" } ], "favicon.ico": [] diff --git a/package.json b/package.json index cb53d02..2f659f5 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "favicon.ico": [], "javascripts": [], "dependencies": { - "bluebird": "^2.9.14", "glob": "^5.0.3", "superagent": "^1.1.0" } diff --git a/src/javascripts/main.js b/src/javascripts/main.js index bedf071..6425c39 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -1,6 +1,5 @@ var React = require('react'); var converter = new Showdown.converter(); -window.Promise = require('bluebird'); window.request = require('superagent'); var Comment = React.createClass({ @@ -21,7 +20,7 @@ var CommentList = React.createClass({ render: function() { var comments = this.props.data.map(function(c) { return ( - {c.text} + { c.text } ) }) return ( @@ -33,23 +32,34 @@ var CommentList = React.createClass({ }); var CommentForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var author = React.findDOMNode(this.refs.author).value.trim(); + var text = React.findDOMNode(this.refs.text).value.trim(); + if(!author || !text) { + return; + } + this.props.onCommentSubmit({author: author, text:text}) + React.findDOMNode(this.refs.author).value = ''; + React.findDOMNode(this.refs.text).value = ''; + }, render: function() { return ( -
- Hello, world! I am a CommentForm. -
+
+ + + +
) } }); var CommentBox = React.createClass({ - getInitialState: function() { - return {data: []} + fetchComments: function() { + return request.get(this.props.url); }, - componentDidMount: function() { - request - .get('/comments') - .end(function(err, res) { + loadCommentsFromServer: function() { + this.fetchComments().end(function(err, res) { if (err) { console.log(err) } else { @@ -57,23 +67,35 @@ var CommentBox = React.createClass({ } }.bind(this)) }, + postComment: function(d) { + return request.post(this.props.url).send(d) + }, + handleCommentSubmit: function(d) { + 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 (

Comments

- +
) } }); -var data = [ - {"author":"Nico Yazawa","text":"Nico nico nii~"}, - {"author":"Aoba Suzukaze","text":"zoi"} -]; - React.render( - , + , document.getElementById('content') ) From a54377d163c4324d0eb503eee5c40aca9acb6722 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sat, 21 Mar 2015 18:17:55 +0900 Subject: [PATCH 08/12] clear the delay, post and update --- db.json | 10 ++++++++++ src/javascripts/main.js | 3 +++ 2 files changed, 13 insertions(+) diff --git a/db.json b/db.json index 8cdb9c9..c8974c7 100644 --- a/db.json +++ b/db.json @@ -14,6 +14,16 @@ "author": "Aoba Suzukaze", "text": "zoi", "id": "a5a3e078-8033-44dc-8f3b-43e443415b5a" + }, + { + "author": "Kou Yagami", + "text": "Shigoto bakka sitettoyo-", + "id": "cb550e14-8063-4113-9948-48d996e29d26" + }, + { + "author": "Yuiko Kuroki", + "text": "Tomoya!", + "id": "66c06445-8de5-4f0d-83bf-6e00c45bbb8b" } ], "favicon.ico": [] diff --git a/src/javascripts/main.js b/src/javascripts/main.js index 6425c39..e05c635 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -71,6 +71,9 @@ var CommentBox = React.createClass({ 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) From d689a2dac5c5f2063cc631478e0348bc0587cf8c Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sun, 22 Mar 2015 07:18:54 +0900 Subject: [PATCH 09/12] del not necessary child_process --- gulpfile.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2e7cc6e..85f81c5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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(object) // 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']); From 0a32308943c17904b75999f59910d51b45e319a6 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sun, 22 Mar 2015 07:55:19 +0900 Subject: [PATCH 10/12] modify data source --- db.json | 2 +- gulpfile.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/db.json b/db.json index c8974c7..468ceca 100644 --- a/db.json +++ b/db.json @@ -27,4 +27,4 @@ } ], "favicon.ico": [] -} \ No newline at end of file +} diff --git a/gulpfile.js b/gulpfile.js index 85f81c5..81f0469 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -28,7 +28,7 @@ gulp.task('json-server', function() { var jsonServer = require('json-server') var object = require('./db.json'); - var router = jsonServer.router(object) // Express router + var router = jsonServer.router('./db.json'); // Express router var server = jsonServer.create() // Express server var port = 3000; server.use(router) From 6d719d9518a407fc7918788028acf087eb31c94d Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sun, 22 Mar 2015 23:18:53 +0900 Subject: [PATCH 11/12] add css, font-awesome, postdate --- db.json | 7 ++++- package.json | 1 + src/index.html | 2 ++ src/javascripts/main.js | 52 ++++++++++++++++++++++++++++++++----- src/stylesheets/comment.css | 20 ++++++++++++++ 5 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 src/stylesheets/comment.css diff --git a/db.json b/db.json index 468ceca..78e8ee5 100644 --- a/db.json +++ b/db.json @@ -3,28 +3,33 @@ { "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": [] -} +} \ No newline at end of file diff --git a/package.json b/package.json index 2f659f5..ea58b9b 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "favicon.ico": [], "javascripts": [], "dependencies": { + "dateformat": "^1.0.11", "glob": "^5.0.3", "superagent": "^1.1.0" } diff --git a/src/index.html b/src/index.html index 545fa20..95c6577 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,8 @@ + +
diff --git a/src/javascripts/main.js b/src/javascripts/main.js index e05c635..45300a1 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -1,26 +1,63 @@ var React = require('react'); var converter = new Showdown.converter(); -window.request = require('superagent'); +var dateFormat = require('dateformat'); +var request = require('superagent'); + +var CommentHeader = React.createClass({ + render: function() { + return ( +
+ + { this.props.author } +
+ ) + } +}) +var CommentFooter = React.createClass({ + render: function() { + return( +
+ + { dateFormat(this.props.postdate, "yyyy-mm-dd HH:MM") } +
+ ) + } +}) var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()) return (
-

- { this.props.author } -

- + +
+ +
+
+
) } }); +var EditButton = React.createClass({ + handleClick: function(e) { + console.log('edit is not implemented yet, sorry....') + }, + render: function() { + return( + + ) + } +}) + var CommentList = React.createClass({ render: function() { var comments = this.props.data.map(function(c) { return ( - { c.text } + + { c.text } + ) }) return ( @@ -46,7 +83,8 @@ var CommentForm = React.createClass({ render: function() { return (
- +

New Comment

+
diff --git a/src/stylesheets/comment.css b/src/stylesheets/comment.css new file mode 100644 index 0000000..1d7fca8 --- /dev/null +++ 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; +} From c89f214e92c9ecbb87c44cba9905c00c2e9eefe8 Mon Sep 17 00:00:00 2001 From: hkdnet Date: Sun, 22 Mar 2015 23:28:09 +0900 Subject: [PATCH 12/12] Fix:new comment should have its postdate / add db.json to .gitignore --- .gitignore | 1 + src/javascripts/main.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 36170a7..17e43c0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules public +db.json diff --git a/src/javascripts/main.js b/src/javascripts/main.js index 45300a1..27c13dc 100644 --- a/src/javascripts/main.js +++ b/src/javascripts/main.js @@ -69,14 +69,20 @@ var CommentList = React.createClass({ }); 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 author = React.findDOMNode(this.refs.author).value.trim(); - var text = React.findDOMNode(this.refs.text).value.trim(); - if(!author || !text) { + var d = this.getValues(); + if(!d.author || !d.text) { return; } - this.props.onCommentSubmit({author: author, text:text}) + this.props.onCommentSubmit(d); React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; },