diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index 3605358f..af1610a2 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 { } render() { + let maxComments = this.props.maxCommentsShown + ? this.props.maxCommentsShown + : this.props.nodes.length; + return (
- {this.props.nodes.map(node => ( + {this.props.nodes.slice(0, maxComments).map(node => ( ; showSidebarMobile: boolean; + maxCommentsShown: number; } export class Post extends Component { @@ -97,6 +101,7 @@ export class Post extends Component { 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 { 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 { 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 { } } + 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 {
{