day 3

Author: chunwei

.gitignore

@@ -1,3 +1,4 @@
 *~
-node_modules
+node_modules/*
 .DS_Store
+.idea/*

.idea/encodings.xml

@@ -14,10 +14,22 @@ This is the React comment box example from [the React tutorial](http://facebook.
 There are several simple server implementations included. They all serve static files from `public/` and handle requests to `comments.json` to fetch or add data. Start a server with one of the following:
 
 ### Node
-
+>
+#### Development
+>
+```sh
+npm install
+npm run dev-server    ---index.html    script: http://localhost:8080/app.js
+or
+npm run build    ---index.html    script: public/build/app.js
+npm start
+```
+>
+#### Production
+>
 ```sh
 npm install
-npm run build
+npm run deploy
 npm start
 ```
 

README.md

@@ -1,17 +1,48 @@
 [
     {
+        "id": 1,
         "author": "Pete Hunt",
         "text": "Hey there!",
         "likedCount": 0
     },
     {
+        "id": 2,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!",
-        "likedCount": 15
+        "likedCount": 15,
+        "replys": [
+            {
+                "author": "BBB",
+                "text": "回复2:BBB",
+                "likedCount": "0",
+                "parentId": "2"
+            }
+        ]
     },
     {
+        "id": 3,
         "author": "小明",
         "text": "我是晓明，come on baby。我是晓明，come on baby。我是晓明，come on baby。我是晓明，come on baby。",
-        "likedCount": 15
+        "likedCount": 15,
+        "replys": [
+            {
+                "id": 4,
+                "author": "Baby",
+                "text": "滚粗！",
+                "likedCount": 10
+            },
+            {
+                "id": 5,
+                "author": "晓明",
+                "text": "谁敢冒充哥？！",
+                "likedCount": 5
+            },
+            {
+                "author": "AAA",
+                "text": "回复3:AAA",
+                "likedCount": "0",
+                "parentId": "3"
+            }
+        ]
     }
-]
+]

comments.json

@@ -32,7 +32,22 @@ app.get('/comments.json', function(req, res) {
 app.post('/comments.json', function(req, res) {
   fs.readFile('comments.json', function(err, data) {
     var comments = JSON.parse(data);
-    comments.push(req.body);
+    var comment=req.body;
+    var pId=comment.parentId;
+    if(pId&&pId!=0){//这是回复评论
+      var parentComment;
+      for(var item of comments){
+        if(item.id==pId) {
+          parentComment=item;
+          break;
+        }
+      }
+      if(parentComment.replys==undefined)parentComment.replys=[];
+      parentComment.replys.push(comment);
+    }else{
+      comments.push(comment);
+    }
+    //comments.push(req.body);
     fs.writeFile('comments.json', JSON.stringify(comments, null, 4), function(err) {
       res.setHeader('Cache-Control', 'no-cache');
       res.json(comments);

server.js

@@ -31,10 +31,13 @@ var CommentContent = React.createClass({
 });
 var CommentFooter = React.createClass({
   render: function () {
+    let comment_id=this.props.comment_id;
+    let replyUrl='/reply/'+comment_id;
+
     return (
       <div className="commentFooter">
         <span className="time">25分钟前</span>
-        <span className="reply"><Link to='/reply/1'>回复</Link></span>
+        <span className="reply"><Link to={replyUrl}>回复</Link></span>
       </div>
     );
   }
@@ -46,7 +49,8 @@ var Comment = React.createClass({
       <div className="comment">
         <CommentHeader author={this.props.comment.author} likedCount={this.props.comment.likedCount}/>
         <CommentContent>{this.props.comment.text}</CommentContent>
-        <CommentFooter/>
+        <CommentFooter comment_id={this.props.comment.id}/>
+        {this.props.children}
       </div>
     );
   }

src/components/comment/Comment.js

@@ -9,7 +9,7 @@ var CommentBar = React.createClass({
   render: function () {
     return (
       <div className="commentBar">
-        <Link to='/post' className="BtnOpenForm">我也来说说</Link>
+        <Link to='/reply/0' className="BtnOpenForm">我也来说说</Link>
       </div>
     )
   }

src/components/comment/CommentBar.js

@@ -25,8 +25,22 @@ var CommentBox = React.createClass({
   },
   handleCommentSubmit: function (comment) {
     var comments = this.state.data;
-    var newComments = comments.concat([comment]);
-    this.setState({data: newComments});
+    let pId=comment.parentId;
+    if(pId&&pId!=0){//这是回复评论
+      var parentComment;
+      for(var item of comments){
+        if(item.id==pId) {
+          parentComment=item;
+          break;
+        }
+      }
+      if(parentComment.replys==undefined)parentComment.replys=[];
+      parentComment.replys.push(comment);
+    }else{
+      comments.push(comment);
+    }
+    //var newComments = comments.concat([comment]);
+    this.setState({data: comments});
     $.ajax({
       url: this.props.url,
       dataType: 'json',
@@ -58,10 +72,16 @@ var CommentBox = React.createClass({
   },
   componentDidMount: function () {
     this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+    //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
   },
   render: function () {
-
+    let children=this.props.children;
+    //console.log('Children.count=',React.Children.count(children));
+    React.Children.forEach(children,function (child,i) {
+      //console.log('child=',child);
+      //console.log('thisArg=',this);
+      child.props.onCommentSubmit=this.handleCommentSubmit;
+    },this);
     return (
       <div className="commentBox">
         <h1>Comments - 评论</h1>

src/components/comment/CommentBox.js

@@ -12,19 +12,27 @@ var CommentForm = React.createClass({
     if (!text || !author) {
       return;
     }
-    this.props.onCommentSubmit({author: author, text: text, likedCount: 0});
+    console.log(author,text);
+    var pid =parseInt(this.props.params.id);
+    this.props.onCommentSubmit({author: author, text: text, likedCount: 0,parentId:pid});
     React.findDOMNode(this.refs.author).value = '';
     React.findDOMNode(this.refs.text).value = '';
+  },
+  getCommentById: function (id) {
+      return comment;
+  },
+  componentDidMount: function(){
+
   },
   render: function () {
-    var id = this.props.params.id;
-    console.log('key=', id);
+    var pid = this.props.params.id;
+    var replyTo=pid?`回复${pid}:`:'';
     return (
       <div className="commentFormHolder">
         <form className="commentForm" onSubmit={this.handleSubmit}>
-          <input ref="author" type="text" placeholder="Your name"/>
+          <input ref="author" type="text"  placeholder="Your name"/>
 
-          <p><textarea ref="text" className="content-textarea" rows="5" placeholder="你有什么看法呢？"></textarea></p>
+          <p><textarea ref="text" defaultValue={replyTo} className="content-textarea" rows="5" placeholder="我有话说"></textarea></p>
           <input type="submit" value="发表评论" className="submit"/>
         </form>
       </div>

src/components/comment/CommentForm.js

@@ -7,19 +7,27 @@ import Comment from './Comment.js';
 
 var CommentList = React.createClass({
   render: function () {
-    var commentNodes = this.props.data.map(function (comment, index) {
+    var comments = this.props.data.map(function (comment, index) {
+      var replys=!!!comment.replys?'':comment.replys.map(function(reply,index){
+        return(
+          <Comment author={reply.author} key={index} comment={reply} />
+        );
+      });
       return (
         // `key` is a React-specific concept and is not mandatory for the
         // purpose of this tutorial. if you're curious, see more here:
         // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
         <Comment author={comment.author} key={index} comment={comment}>
-          {comment.text}
+          <div className="replys">
+            {replys}
+          </div>
         </Comment>
+
       );
     });
     return (
       <div className="commentList">
-        {commentNodes}
+        {comments}
       </div>
     );
   }

src/components/comment/CommentList.js

@@ -7,7 +7,9 @@ button, html input[type="button"], input[type="reset"], input[type="submit"] {
   margin-top: 20px;
   border-bottom: solid 1px #eee;
 }
-
+.comment .replys{
+  margin-left:50px;
+}
 .commentHeader, .commentContent, .commentFooter {
   position: relative;
   overflow: hidden;
@@ -100,7 +102,9 @@ button, html input[type="button"], input[type="reset"], input[type="submit"] {
   border-top: solid 1px #ccc;
   background-color: #fff;
 }
-
+.commentBar a{
+  text-decoration: none;
+}
 .commentBar .BtnOpenForm {
   display: inline-block;
   text-align: center;

src/components/comment/comment.css

@@ -11,8 +11,9 @@ var App = React.createClass({
   render: function () {
     return (
       <div>
-        <CommentBox url="comments.json" pollInterval={2000}/>
+        <CommentBox url="comments.json" pollInterval={2000}>
         {this.props.children}
+        </CommentBox>
       </div>
     );
   }
@@ -22,7 +23,6 @@ var App = React.createClass({
 React.render((
     <Router>
       <Route path="/" component={App}>
-        <Route path="post" component={CommentForm}/>
         <Route path="reply/:id" component={CommentForm}/>
       </Route>
     </Router>