From 6884de0afc381174bbbb49f35913cd4499f44027 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Fri, 5 Apr 2019 13:22:59 -0700
Subject: [PATCH] Adding comment permalinks.

Fixes #18
---
 ui/src/components/post-listings.tsx |  2 +-
 ui/src/components/post.tsx          | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index fcc41cf5b..98fe8f211 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -83,7 +83,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
         {this.state.posts.length > 0 
           ? this.state.posts.map(post => 
             <PostListing post={post} showCommunity={!this.props.communityId}/>) 
-          : <div>No Listings</div>
+          : <div>No Listings. Subscribe to some <Link to="/communities">forums</Link>.</div>
         }
       </div>
     )
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 2a870c4dc..e7c66e94b 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -21,6 +21,7 @@ interface PostState {
   commentSort: CommentSortType;
   community: Community;
   moderators: Array<CommunityUser>;
+  scrolled: boolean;
 }
 
 export class Post extends Component<any, PostState> {
@@ -31,7 +32,8 @@ export class Post extends Component<any, PostState> {
     comments: [],
     commentSort: CommentSortType.Hot,
     community: null,
-    moderators: []
+    moderators: [],
+    scrolled: false
   }
 
   constructor(props, context) {
@@ -60,6 +62,15 @@ export class Post extends Component<any, PostState> {
     autosize(document.querySelectorAll('textarea'));
   }
 
+  componentDidUpdate(lastProps: any, lastState: PostState, snapshot: any) {
+    if (!this.state.scrolled && lastState.comments.length > 0 && window.location.href.includes('#comment-')) {
+      let id = window.location.hash.split("#")[2];
+      var elmnt = document.getElementById(`${id}`);
+      elmnt.scrollIntoView(); 
+      this.state.scrolled = true;
+    }
+  }
+
   render() {
     return (
       <div class="container">
@@ -294,7 +305,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   render() {
     let node = this.props.node;
     return (
-      <div className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
+      <div id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
         <div className="float-left small text-center">
           <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
           <div>{node.comment.score}</div>
@@ -336,7 +347,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </li>
                 }
                 <li className="list-inline-item">
-                  <a className="text-muted" href="test">link</a>
+                  <Link className="text-muted" to={`/post/${node.comment.post_id}#comment-${node.comment.id}`}>link</Link>
                 </li>
               </ul>
             </div>