fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-26 10:46:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source 
* scroll to comments on post's x comments button

* scrolls down to comments using url params
This commit is contained in:
hammsvietro 2021-08-11 22:00:26 -03:00 committed by GitHub
parent 6b4265bafe
commit 3870703b12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/shared/components/post/post-listing.tsx
View file

@ -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", {

20
src/shared/components/post/post.tsx
View file

@ -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;