tree components

src/App.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+
+import ReactDOM from 'react-dom';
+
 import logo from './logo.svg';
 import './1/1.js';
 
@@ -22,6 +25,7 @@ function getFeed() {
         text
         timestamp
         tagz
+        key
       }
     }`).then(data => store.dispatch({type: "DATA", data}))
 }
@@ -85,7 +89,7 @@ class FeedPost extends Component {
                 <div>{this.props.post.text}</div>
                 <div>{(new Date(this.props.post.timestamp *1000)).toLocaleString()}</div>
                 <TagList tags={this.props.post.tagz} />
-                <Link to={`/post/${this.props.post.id}`}>more...</Link>
+                <Link to={`/post/${this.props.post.key}`}>more...</Link>
             </div>
         );
     }
@@ -131,21 +135,58 @@ class FeedPage extends Component {
 }
 
 class Comment extends Component {
+    mouseOver(ev){
+        let parentId = +(ev.target.href.split('#')[1].match(/^comment(\d+)$/)[1])
+
+        this.props.onParentLink(parentId)
+    }
+
+
+    mouseOut(ev){
+        this.props.onParentLink(null)
+    }
+
+
     render (){
         return (
-            <div>
-              {this.props.comment.text}
+            <div id={`comment${this.props.comment.id}`} 
+              style={{backgroundColor: this.props.highlighted ? '#CFF' : ""}}>
+              {this.props.comment.text} 
+              { this.props.parentId ? <a onMouseOver={this.mouseOver.bind(this)}
+                                         onMouseOut={this.mouseOut.bind(this)}
+                                         href={`#comment${this.props.parentId}`}> answer to...</a> : "" }
             </div>
         )
     }
 }
 
 class CommentList extends Component {
+    constructor(props){
+        super(props)
+
+        this.state = {highlightedParentId: null};
+    }
+
+
+
+    onParentLink(highlightedParentId){
+        console.log(highlightedParentId)
+        this.setState({highlightedParentId})
+    }
+
+
     render (){
         if (this.props.comments){
             return (
                 <div className='commentList'>
-                    {this.props.comments.map( comment => <Comment comment={comment} key={comment.id}/>)}
+                    {this.props.comments.map( comment => 
+                        <Comment comment={comment} 
+                                 key={comment.id} 
+                                 parentId={comment.commentId} 
+                                 onParentLink={this.onParentLink.bind(this)}
+                                 highlighted = {this.state.highlightedParentId == comment.id }
+                        />
+                    )}
                 </div>
             )
         }
@@ -157,9 +198,97 @@ class CommentList extends Component {
     }
 }
 
+class TreeComment extends Component {
+    render() {
+        console.log(this.props.treeComponent)
+
+        let TreeComponent = this.props.treeComponent;
+
+        return (
+            <div>{this.props.comment.text}
+            <TreeComponent parentId={this.props.comment.id}/>
+            </div>
+        )
+    }
+}
+
+class CommentTree extends Component {
+    constructor(props){
+        super(props)
+        console.log(props)
+
+        this.state = {loaded: false, data: null};
+    }
+
+    load(){
+        this.setState({loaded: 'loading'})
+
+        if (!this.props.parentId){
+            gql.request(`query getComments($postID: Int!){
+              comments(id:$postID){
+                id
+                text
+                age
+                commentId
+              }
+            }`, {postID: this.props.postId})
+                .then(data => this.setState({loaded: true, data: data.comments}))
+        }
+        else {
+            console.log('aaaa', this.props.parentId)
+            gql.request(`
+                query getSubComments($commentID: Int!){
+                  subComments(id:$commentID){
+                                id
+                                text
+                                age
+                                commentId
+                  }
+            }`, {commentID: this.props.parentId})
+                .then(data => this.setState({loaded: true, data: data.subComments}))
+        }
+    }
+
+    render() {
+        console.log(this.state)
+        if (!this.state.loaded){
+            return (
+                <div className='commentList'>
+                    <button onClick={this.load.bind(this)}>Load thread...</button>
+                </div>
+            )
+        }
+
+        if (this.state.loaded == 'loading'){
+            return (
+                <div className='commentList'>
+                    Loading...
+                </div>
+            )
+        }
+
+
+        if (this.state.loaded === true){
+            console.log(this.state)
+            return (
+                <div className='commentList'>
+                    {this.state.data.map(comment => 
+                        <TreeComment comment={comment} 
+                                 key={comment.id} 
+                                 parentId={comment.commentId} 
+                                 highlighted = {this.state.highlightedParentId == comment.id }
+                                 treeComponent = {CommentTree}
+                        />
+                    )}
+                </div>
+            )
+        }
+    }
+}
+
 class Post extends Component {
     render(){
-        console.log(this.props.post.data)
+        console.log(this.props)
         if (this.props.post.data.status === 'EMPTY'){
             return (
                 <div className='post'>
@@ -173,6 +302,7 @@ class Post extends Component {
                 <div>{this.props.post.data.text}</div>
                 <div>{(new Date(this.props.post.data.timestamp *1000)).toLocaleString()}</div>
                 <TagList tags={this.props.post.data.tagz} />
+                <CommentTree postId={this.props.post.data.id} parentId={null}/>
                 <CommentList comments={this.props.post.data.comments} />
             </div>
         )
@@ -184,7 +314,7 @@ Post = connect(mapStateToProps)(Post)
 
 class PostPage extends Component {
     render(){
-        gql.request(`query getPostWithComments($postID: Int!){
+        gql.request(`query getPostWithComments($postID: String!){
                           post(id:$postID){
                             id
                             title
@@ -195,6 +325,7 @@ class PostPage extends Component {
                               id
                               text
                               age
+                              commentId
                             }
                           }
                         }`, {postID: this.props.match.params.id})