mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-26 14:21:13 +00:00
parent
07bf60252c
commit
fac71d1749
2 changed files with 34 additions and 1 deletions
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue