Scroll to comments on post's x comments button (#312)

* scroll to comments on post's x comments button

* scrolls down to comments using url params

src/shared/components/post/post-listing.tsx

@@ -466,13 +466,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let post_view = this.props.post_view;
     return (
       <div class="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold mb-1">
-        <button class="btn btn-link text-muted p-0">
+        <button 
+          class="btn btn-link text-muted p-0"
+        >
           <Link
             className="text-muted small"
             title={i18n.t("number_of_comments", {
               count: post_view.counts.comments,
             })}
-            to={`/post/${post_view.post.id}`}
+            to={`/post/${post_view.post.id}?scrollToComments=true`}
           >
             <Icon icon="message-square" classes="icon-inline mr-1" />
             {i18n.t("number_of_comments", {

src/shared/components/post/post.tsx

@@ -1,5 +1,5 @@
+import { Component, linkEvent, createRef, RefObject } from "inferno";
 import autosize from "autosize";
-import { Component, linkEvent } from "inferno";
 import {
   AddAdminResponse,
   AddModToCommunityResponse,
@@ -73,6 +73,7 @@ interface PostState {
   loading: boolean;
   crossPosts: PostView[];
   siteRes: GetSiteResponse;
+  commentSectionRef?: RefObject<HTMLDivElement>;
   showSidebarMobile: boolean;
 }
 
@@ -90,6 +91,7 @@ export class Post extends Component<any, PostState> {
     loading: true,
     crossPosts: [],
     siteRes: this.isoData.site_res,
+    commentSectionRef: null,
     showSidebarMobile: false,
   };
 
@@ -97,6 +99,7 @@ export class Post extends Component<any, PostState> {
     super(props, context);
 
     this.state = this.emptyState;
+    this.state.commentSectionRef = createRef();
 
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
@@ -114,6 +117,8 @@ export class Post extends Component<any, PostState> {
         this.fetchCrossPosts();
         if (this.state.commentId) {
           this.scrollCommentIntoView();
+        } else if (new URLSearchParams(this.props.location.search).get('scrollToComments')) {
+          this.scrollIntoCommentSection();
         }
       }
     } else {
@@ -183,6 +188,10 @@ export class Post extends Component<any, PostState> {
       this.scrollCommentIntoView();
     }
 
+    if (new URLSearchParams(this.props.location.search).get('scrollToComments') ) {
+      this.scrollIntoCommentSection();
+    }
+
     // Necessary if you are on a post and you click another post (same route)
     if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
       // TODO Couldnt get a refresh working. This does for now.
@@ -203,6 +212,10 @@ export class Post extends Component<any, PostState> {
     this.markScrolledAsRead(this.state.commentId);
   }
 
+  scrollIntoCommentSection() {
+    this.state.commentSectionRef.current?.scrollIntoView();
+  }
+
   // TODO this needs some re-work
   markScrolledAsRead(commentId: number) {
     let found = this.state.postRes.comments.find(
@@ -277,7 +290,7 @@ export class Post extends Component<any, PostState> {
                 }
                 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
               />
-              <div className="mb-2" />
+              <div ref={this.state.commentSectionRef} className="mb-2" />
               <CommentForm
                 postId={this.state.postId}
                 disabled={pv.post.locked}
@@ -490,6 +503,9 @@ export class Post extends Component<any, PostState> {
       this.setState(this.state);
       setupTippy();
       if (!this.state.commentId) restoreScrollPosition(this.context);
+      if (new URLSearchParams(this.props.location.search).get('scrollToComments') ) {
+        this.scrollIntoCommentSection();
+      }
     } else if (op == UserOperation.CreateComment) {
       let data = wsJsonToRes<CommentResponse>(msg).data;