day 2

Author: chunwei

comments.json

@@ -2,16 +2,16 @@
     {
         "author": "Pete Hunt",
         "text": "Hey there!",
-        "likedCount":0
+        "likedCount": 0
     },
     {
         "author": "Paul O’Shannessy",
         "text": "React is *great*!",
-        "likedCount":15
+        "likedCount": 15
     },
     {
         "author": "小明",
         "text": "我是晓明，come on baby。我是晓明，come on baby。我是晓明，come on baby。我是晓明，come on baby。",
-        "likedCount":15
+        "likedCount": 15
     }
 ]

public/css/comment.css

@@ -75,9 +75,13 @@ button, html input[type="button"], input[type="reset"], input[type="submit"] {
   float: right;
   color: #faad4c;
 }
+.commentFooter .reply a{
+  color: #faad4c;
+  text-decoration: none;
+}
 
 .commentFormHolder{
-  display: none;
+/*  display: none;*/
   position: fixed;
   top: 0;
   left: 0;
@@ -115,6 +119,8 @@ button, html input[type="button"], input[type="reset"], input[type="submit"] {
   background-color: #fff;
 }
 .commentBar .BtnOpenForm{
+  display: inline-block;
+  text-align: center;
   font-size: 1.1em;
   width: 60%;
   color: #fff;

public/index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="css/comment.css" />
     <script src="lib/react.js"></script>
     <script src="lib/JSXTransformer.js"></script>
+    <script src="lib/ReactRouter.min.js"></script>
     <script src="lib/jquery.min.js"></script>
     <script src="lib/marked.min.js"></script>
   </head>

public/scripts/example.js

@@ -69,7 +69,7 @@ var CommentFooter = React.createClass({
     return (
       <div className="commentFooter">
         <span className="time">25分钟前</span>
-        <span className="reply">回复</span>
+        <span className="reply"><a href='#/reply'>回复</a></span>
       </div>
     );
   }
@@ -117,24 +117,42 @@ var CommentBox = React.createClass({
         console.error(this.props.url, status, err.toString());
       }.bind(this)
     });
+    window.location.hash='';
   },
   handleOpenForm:function(){
-    $('.commentFormHolder').show();//.css('display','block');
+    console.log('handleOpenForm');
+    //$('.commentFormHolder').show();//.css('display','block');
+  },
+  handleHashChange:function() {console.log(window.location.hash.substr(1));
+    this.setState({
+      route: window.location.hash.substr(1)
+    })
   },
   getInitialState: function() {
-    return {data: []};
+    return {
+      data: [],
+      route:window.location.hash.substr(1)
+    };
   },
   componentDidMount: function() {
+    window.addEventListener('hashchange', this.handleHashChange);
     this.loadCommentsFromServer();
     setInterval(this.loadCommentsFromServer, this.props.pollInterval);
   },
   render: function() {
+
+    var CommentFormA;console.log('render',this.state.route);
+    switch (this.state.route) {
+      case '/post': CommentFormA = CommentForm; break;
+      case '/reply': CommentFormA = CommentForm; break;
+      default:      CommentFormA = CommentFormBlank;
+    }
     return (
       <div className="commentBox">
         <h1>Comments</h1>
         <CommentList data={this.state.data} />
         <CommentBar onOpenForm={this.handleOpenForm}/>
-        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
+        <CommentFormA onCommentSubmit={this.handleCommentSubmit} />
       </div>
     );
   }
@@ -164,11 +182,16 @@ var CommentBar = React.createClass({
   render: function () {
     return (
       <div className="commentBar">
-        <button className="BtnOpenForm" onClick={this.props.onOpenForm}>我也来说说</button>
+        <a href='#/post' className="BtnOpenForm" onClick={this.props.onOpenForm}>我也来说说</a>
       </div>
     )
   }
 });
+var CommentFormBlank = React.createClass({
+  render: function() {
+    return (<br/>);
+  }
+});
 var CommentForm = React.createClass({
   handleSubmit: function(e) {
     e.preventDefault();
@@ -177,11 +200,13 @@ var CommentForm = React.createClass({
     if (!text || !author) {
       return;
     }
-    this.props.onCommentSubmit({author: author, text: text});
+    this.props.onCommentSubmit({author: author, text: text,likedCount:0});
     React.findDOMNode(this.refs.author).value = '';
     React.findDOMNode(this.refs.text).value = '';
   },
   render: function() {
+/*    var id = this.props.params.id;
+    console.log('key=',id);*/
     return (
       <div className="commentFormHolder">
         <form className="commentForm" onSubmit={this.handleSubmit}>
@@ -198,3 +223,18 @@ React.render(
   <CommentBox url="comments.json" pollInterval={2000} />,
   document.getElementById('content')
 );
+
+
+/*var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+var Link = ReactRouter.Link;
+
+React.render((
+  <Router>
+    <Route path="/" component={CommentBox} >
+      <Route path="post" component={CommentForm} />
+      <Route path="reply/:id" component={CommentForm} />
+    </Route>
+  </Router>
+  ),  document.getElementById('content')
+);*/