From: Dessalines <dessalines@users.noreply.github.com> Date: Tue, 16 Nov 2021 14:46:12 +0000 (-0500) Subject: Adding post comment scrolling hack. Fixes #480 (#486) X-Git-Url: http://these/git/readmes/%7BpictrsAvatarThumbnail%28this.props.site.site.icon%29%7D?a=commitdiff_plain;h=fac71d1749c5dcc8992dd560816ef046be7796fb;p=lemmy-ui.git Adding post comment scrolling hack. Fixes #480 (#486) --- diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index 3605358..af1610a 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -15,6 +15,7 @@ interface CommentNodesProps { markable?: boolean; showContext?: boolean; showCommunity?: boolean; + maxCommentsShown?: number; enableDownvotes: boolean; } @@ -24,9 +25,13 @@ export class CommentNodes extends Component<CommentNodesProps, any> { } render() { + let maxComments = this.props.maxCommentsShown + ? this.props.maxCommentsShown + : this.props.nodes.length; + return ( <div className="comments"> - {this.props.nodes.map(node => ( + {this.props.nodes.slice(0, maxComments).map(node => ( <CommentNode key={node.comment_view.comment.id} node={node} diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index f1a7a8a..1213c5a 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -39,6 +39,7 @@ import { commentsToFlatNodes, createCommentLikeRes, createPostLikeRes, + debounce, editCommentRes, getCommentIdFromProps, getIdFromProps, @@ -66,6 +67,8 @@ import { Icon, Spinner } from "../common/icon"; import { Sidebar } from "../community/sidebar"; import { PostListing } from "./post-listing"; +const commentsShownInterval = 15; + interface PostState { postRes: GetPostResponse; postId: number; @@ -79,6 +82,7 @@ interface PostState { siteRes: GetSiteResponse; commentSectionRef?: RefObject<HTMLDivElement>; showSidebarMobile: boolean; + maxCommentsShown: number; } export class Post extends Component<any, PostState> { @@ -97,6 +101,7 @@ export class Post extends Component<any, PostState> { siteRes: this.isoData.site_res, commentSectionRef: null, showSidebarMobile: false, + maxCommentsShown: commentsShownInterval, }; constructor(props: any, context: any) { @@ -173,6 +178,7 @@ export class Post extends Component<any, PostState> { componentWillUnmount() { this.subscription.unsubscribe(); + document.removeEventListener("scroll", this.trackCommentsBoxScrolling); window.isoData.path = undefined; saveScrollPosition(this.context); } @@ -182,6 +188,11 @@ export class Post extends Component<any, PostState> { wsClient.postJoin({ post_id: this.state.postId }) ); autosize(document.querySelectorAll("textarea")); + + document.addEventListener( + "scroll", + debounce(this.trackCommentsBoxScrolling, 100) + ); } componentDidUpdate(_lastProps: any, lastState: PostState) { @@ -253,6 +264,21 @@ export class Post extends Component<any, PostState> { } } + isBottom(el: Element) { + return el.getBoundingClientRect().bottom <= window.innerHeight; + } + + /** + * Shows new comments when scrolling to the bottom of the comments div + */ + trackCommentsBoxScrolling = () => { + const wrappedElement = document.getElementsByClassName("comments")[0]; + if (this.isBottom(wrappedElement)) { + this.state.maxCommentsShown += commentsShownInterval; + this.setState(this.state); + } + }; + get documentTitle(): string { return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`; } @@ -416,6 +442,7 @@ export class Post extends Component<any, PostState> { <div> <CommentNodes nodes={commentsToFlatNodes(this.state.postRes.comments)} + maxCommentsShown={this.state.maxCommentsShown} noIndent locked={this.state.postRes.post_view.post.locked} moderators={this.state.postRes.moderators} @@ -473,6 +500,7 @@ export class Post extends Component<any, PostState> { <div> <CommentNodes nodes={this.state.commentTree} + maxCommentsShown={this.state.maxCommentsShown} locked={this.state.postRes.post_view.post.locked} moderators={this.state.postRes.moderators} admins={this.state.siteRes.admins}