Adding post comment scrolling hack. Fixes #480 (#486)

This commit is contained in:
Dessalines 2021-11-16 09:46:12 -05:00 committed by GitHub
parent 07bf60252c
commit fac71d1749
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 1 deletions

View file

@ -15,6 +15,7 @@ interface CommentNodesProps {
markable?: boolean; markable?: boolean;
showContext?: boolean; showContext?: boolean;
showCommunity?: boolean; showCommunity?: boolean;
maxCommentsShown?: number;
enableDownvotes: boolean; enableDownvotes: boolean;
} }
@ -24,9 +25,13 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
} }
render() { render() {
let maxComments = this.props.maxCommentsShown
? this.props.maxCommentsShown
: this.props.nodes.length;
return ( return (
<div className="comments"> <div className="comments">
{this.props.nodes.map(node => ( {this.props.nodes.slice(0, maxComments).map(node => (
<CommentNode <CommentNode
key={node.comment_view.comment.id} key={node.comment_view.comment.id}
node={node} node={node}

View file

@ -39,6 +39,7 @@ import {
commentsToFlatNodes, commentsToFlatNodes,
createCommentLikeRes, createCommentLikeRes,
createPostLikeRes, createPostLikeRes,
debounce,
editCommentRes, editCommentRes,
getCommentIdFromProps, getCommentIdFromProps,
getIdFromProps, getIdFromProps,
@ -66,6 +67,8 @@ import { Icon, Spinner } from "../common/icon";
import { Sidebar } from "../community/sidebar"; import { Sidebar } from "../community/sidebar";
import { PostListing } from "./post-listing"; import { PostListing } from "./post-listing";
const commentsShownInterval = 15;
interface PostState { interface PostState {
postRes: GetPostResponse; postRes: GetPostResponse;
postId: number; postId: number;
@ -79,6 +82,7 @@ interface PostState {
siteRes: GetSiteResponse; siteRes: GetSiteResponse;
commentSectionRef?: RefObject<HTMLDivElement>; commentSectionRef?: RefObject<HTMLDivElement>;
showSidebarMobile: boolean; showSidebarMobile: boolean;
maxCommentsShown: number;
} }
export class Post extends Component<any, PostState> { export class Post extends Component<any, PostState> {
@ -97,6 +101,7 @@ export class Post extends Component<any, PostState> {
siteRes: this.isoData.site_res, siteRes: this.isoData.site_res,
commentSectionRef: null, commentSectionRef: null,
showSidebarMobile: false, showSidebarMobile: false,
maxCommentsShown: commentsShownInterval,
}; };
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -173,6 +178,7 @@ export class Post extends Component<any, PostState> {
componentWillUnmount() { componentWillUnmount() {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
document.removeEventListener("scroll", this.trackCommentsBoxScrolling);
window.isoData.path = undefined; window.isoData.path = undefined;
saveScrollPosition(this.context); saveScrollPosition(this.context);
} }
@ -182,6 +188,11 @@ export class Post extends Component<any, PostState> {
wsClient.postJoin({ post_id: this.state.postId }) wsClient.postJoin({ post_id: this.state.postId })
); );
autosize(document.querySelectorAll("textarea")); autosize(document.querySelectorAll("textarea"));
document.addEventListener(
"scroll",
debounce(this.trackCommentsBoxScrolling, 100)
);
} }
componentDidUpdate(_lastProps: any, lastState: PostState) { 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 { get documentTitle(): string {
return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`; 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> <div>
<CommentNodes <CommentNodes
nodes={commentsToFlatNodes(this.state.postRes.comments)} nodes={commentsToFlatNodes(this.state.postRes.comments)}
maxCommentsShown={this.state.maxCommentsShown}
noIndent noIndent
locked={this.state.postRes.post_view.post.locked} locked={this.state.postRes.post_view.post.locked}
moderators={this.state.postRes.moderators} moderators={this.state.postRes.moderators}
@ -473,6 +500,7 @@ export class Post extends Component<any, PostState> {
<div> <div>
<CommentNodes <CommentNodes
nodes={this.state.commentTree} nodes={this.state.commentTree}
maxCommentsShown={this.state.maxCommentsShown}
locked={this.state.postRes.post_view.post.locked} locked={this.state.postRes.post_view.post.locked}
moderators={this.state.postRes.moderators} moderators={this.state.postRes.moderators}
admins={this.state.siteRes.admins} admins={this.state.siteRes.admins}