1 import autosize from "autosize";
2 import { Component, createRef, linkEvent, RefObject } from "inferno";
5 AddModToCommunityResponse,
6 BanFromCommunityResponse,
24 } from "lemmy-js-client";
25 import { Subscription } from "rxjs";
26 import { i18n } from "../../i18next";
28 CommentNode as CommentNodeI,
32 } from "../../interfaces";
33 import { UserService, WebSocketService } from "../../services";
41 getCommentIdFromProps,
43 insertCommentIntoTree,
47 restoreScrollPosition,
60 import { CommentForm } from "../comment/comment-form";
61 import { CommentNodes } from "../comment/comment-nodes";
62 import { HtmlTags } from "../common/html-tags";
63 import { Icon, Spinner } from "../common/icon";
64 import { Sidebar } from "../community/sidebar";
65 import { PostListing } from "./post-listing";
68 postRes: GetPostResponse;
70 commentTree: CommentNodeI[];
72 commentSort: CommentSortType;
73 commentViewType: CommentViewType;
76 crossPosts: PostView[];
77 siteRes: GetSiteResponse;
78 commentSectionRef?: RefObject<HTMLDivElement>;
79 showSidebarMobile: boolean;
82 export class Post extends Component<any, PostState> {
83 private subscription: Subscription;
84 private isoData = setIsoData(this.context);
85 private emptyState: PostState = {
87 postId: getIdFromProps(this.props),
89 commentId: getCommentIdFromProps(this.props),
90 commentSort: CommentSortType.Hot,
91 commentViewType: CommentViewType.Tree,
95 siteRes: this.isoData.site_res,
96 commentSectionRef: null,
97 showSidebarMobile: false,
100 constructor(props: any, context: any) {
101 super(props, context);
103 this.state = this.emptyState;
104 this.state.commentSectionRef = createRef();
106 this.parseMessage = this.parseMessage.bind(this);
107 this.subscription = wsSubscribe(this.parseMessage);
109 // Only fetch the data if coming from another route
110 if (this.isoData.path == this.context.router.route.match.url) {
111 this.state.postRes = this.isoData.routeData[0];
112 this.state.commentTree = buildCommentsTree(
113 this.state.postRes.comments,
114 this.state.commentSort
116 this.state.loading = false;
119 this.fetchCrossPosts();
120 if (this.state.commentId) {
121 this.scrollCommentIntoView();
124 if (this.checkScrollIntoCommentsParam) {
125 this.scrollIntoCommentSection();
134 let form: GetPost = {
135 id: this.state.postId,
136 auth: authField(false),
138 WebSocketService.Instance.send(wsClient.getPost(form));
142 if (this.state.postRes.post_view.post.url) {
144 q: this.state.postRes.post_view.post.url,
145 type_: SearchType.Url,
146 sort: SortType.TopAll,
147 listing_type: ListingType.All,
150 auth: authField(false),
152 WebSocketService.Instance.send(wsClient.search(form));
156 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
157 let pathSplit = req.path.split("/");
158 let promises: Promise<any>[] = [];
160 let id = Number(pathSplit[2]);
162 let postForm: GetPost = {
165 setOptionalAuth(postForm, req.auth);
167 promises.push(req.client.getPost(postForm));
172 componentWillUnmount() {
173 this.subscription.unsubscribe();
174 window.isoData.path = undefined;
175 saveScrollPosition(this.context);
178 componentDidMount() {
179 WebSocketService.Instance.send(
180 wsClient.postJoin({ post_id: this.state.postId })
182 autosize(document.querySelectorAll("textarea"));
185 componentDidUpdate(_lastProps: any, lastState: PostState) {
187 this.state.commentId &&
188 !this.state.scrolled &&
190 lastState.postRes.comments.length > 0
192 this.scrollCommentIntoView();
195 if (this.checkScrollIntoCommentsParam) {
196 this.scrollIntoCommentSection();
199 // Necessary if you are on a post and you click another post (same route)
200 if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
201 // TODO Couldnt get a refresh working. This does for now.
204 // let currentId = this.props.match.params.id;
205 // WebSocketService.Instance.getPost(currentId);
206 // this.context.refresh();
207 // this.context.router.history.push(_lastProps.location.pathname);
211 scrollCommentIntoView() {
212 var elmnt = document.getElementById(`comment-${this.state.commentId}`);
213 elmnt.scrollIntoView();
214 elmnt.classList.add("mark");
215 this.state.scrolled = true;
216 this.markScrolledAsRead(this.state.commentId);
219 get checkScrollIntoCommentsParam() {
221 new URLSearchParams(this.props.location.search).get("scrollToComments")
225 scrollIntoCommentSection() {
226 this.state.commentSectionRef.current?.scrollIntoView();
229 // TODO this needs some re-work
230 markScrolledAsRead(commentId: number) {
231 let found = this.state.postRes.comments.find(
232 c => c.comment.id == commentId
234 let parent = this.state.postRes.comments.find(
235 c => found.comment.parent_id == c.comment.id
237 let parent_person_id = parent
239 : this.state.postRes.post_view.creator.id;
242 UserService.Instance.myUserInfo &&
243 UserService.Instance.myUserInfo.local_user_view.person.id ==
246 let form: MarkCommentAsRead = {
247 comment_id: found.comment.id,
251 WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
252 UserService.Instance.unreadCountSub.next(
253 UserService.Instance.unreadCountSub.value - 1
258 get documentTitle(): string {
259 return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
262 get imageTag(): string {
263 let post = this.state.postRes.post_view.post;
265 post.thumbnail_url ||
266 (post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
270 get descriptionTag(): string {
271 let body = this.state.postRes.post_view.post.body;
272 return body ? previewLines(body) : undefined;
276 let pv = this.state.postRes?.post_view;
278 <div class="container">
279 {this.state.loading ? (
285 <div class="col-12 col-md-8 mb-3">
287 title={this.documentTitle}
288 path={this.context.router.route.match.url}
289 image={this.imageTag}
290 description={this.descriptionTag}
294 duplicates={this.state.crossPosts}
297 moderators={this.state.postRes.moderators}
298 admins={this.state.siteRes.admins}
300 this.state.siteRes.site_view.site.enable_downvotes
302 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
304 <div ref={this.state.commentSectionRef} className="mb-2" />
306 postId={this.state.postId}
307 disabled={pv.post.locked}
309 <div class="d-block d-md-none">
311 class="btn btn-secondary d-inline-block mb-2 mr-3"
312 onClick={linkEvent(this, this.handleShowSidebarMobile)}
314 {i18n.t("sidebar")}{" "}
317 this.state.showSidebarMobile
321 classes="icon-inline"
324 {this.state.showSidebarMobile && this.sidebar()}
326 {this.state.postRes.comments.length > 0 && this.sortRadios()}
327 {this.state.commentViewType == CommentViewType.Tree &&
329 {this.state.commentViewType == CommentViewType.Chat &&
332 <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
342 <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
344 className={`btn btn-outline-secondary pointer ${
345 this.state.commentSort === CommentSortType.Hot && "active"
351 value={CommentSortType.Hot}
352 checked={this.state.commentSort === CommentSortType.Hot}
353 onChange={linkEvent(this, this.handleCommentSortChange)}
357 className={`btn btn-outline-secondary pointer ${
358 this.state.commentSort === CommentSortType.Top && "active"
364 value={CommentSortType.Top}
365 checked={this.state.commentSort === CommentSortType.Top}
366 onChange={linkEvent(this, this.handleCommentSortChange)}
370 className={`btn btn-outline-secondary pointer ${
371 this.state.commentSort === CommentSortType.New && "active"
377 value={CommentSortType.New}
378 checked={this.state.commentSort === CommentSortType.New}
379 onChange={linkEvent(this, this.handleCommentSortChange)}
383 className={`btn btn-outline-secondary pointer ${
384 this.state.commentSort === CommentSortType.Old && "active"
390 value={CommentSortType.Old}
391 checked={this.state.commentSort === CommentSortType.Old}
392 onChange={linkEvent(this, this.handleCommentSortChange)}
396 <div class="btn-group btn-group-toggle flex-wrap mb-2">
398 className={`btn btn-outline-secondary pointer ${
399 this.state.commentViewType === CommentViewType.Chat && "active"
405 value={CommentViewType.Chat}
406 checked={this.state.commentViewType === CommentViewType.Chat}
407 onChange={linkEvent(this, this.handleCommentViewTypeChange)}
416 // These are already sorted by new
420 nodes={commentsToFlatNodes(this.state.postRes.comments)}
422 locked={this.state.postRes.post_view.post.locked}
423 moderators={this.state.postRes.moderators}
424 admins={this.state.siteRes.admins}
425 postCreatorId={this.state.postRes.post_view.creator.id}
427 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
437 community_view={this.state.postRes.community_view}
438 moderators={this.state.postRes.moderators}
439 admins={this.state.siteRes.admins}
440 online={this.state.postRes.online}
441 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
448 handleCommentSortChange(i: Post, event: any) {
449 i.state.commentSort = Number(event.target.value);
450 i.state.commentViewType = CommentViewType.Tree;
451 i.state.commentTree = buildCommentsTree(
452 i.state.postRes.comments,
458 handleCommentViewTypeChange(i: Post, event: any) {
459 i.state.commentViewType = Number(event.target.value);
460 i.state.commentSort = CommentSortType.New;
461 i.state.commentTree = buildCommentsTree(
462 i.state.postRes.comments,
468 handleShowSidebarMobile(i: Post) {
469 i.state.showSidebarMobile = !i.state.showSidebarMobile;
477 nodes={this.state.commentTree}
478 locked={this.state.postRes.post_view.post.locked}
479 moderators={this.state.postRes.moderators}
480 admins={this.state.siteRes.admins}
481 postCreatorId={this.state.postRes.post_view.creator.id}
482 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
488 parseMessage(msg: any) {
489 let op = wsUserOp(msg);
492 toast(i18n.t(msg.error), "danger");
494 } else if (msg.reconnect) {
495 let postId = Number(this.props.match.params.id);
496 WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
497 WebSocketService.Instance.send(
500 auth: authField(false),
503 } else if (op == UserOperation.GetPost) {
504 let data = wsJsonToRes<GetPostResponse>(msg).data;
505 this.state.postRes = data;
506 this.state.commentTree = buildCommentsTree(
507 this.state.postRes.comments,
508 this.state.commentSort
510 this.state.loading = false;
513 this.fetchCrossPosts();
514 this.setState(this.state);
516 if (!this.state.commentId) restoreScrollPosition(this.context);
518 if (this.checkScrollIntoCommentsParam) {
519 this.scrollIntoCommentSection();
521 } else if (op == UserOperation.CreateComment) {
522 let data = wsJsonToRes<CommentResponse>(msg).data;
524 // Necessary since it might be a user reply, which has the recipients, to avoid double
525 if (data.recipient_ids.length == 0) {
526 this.state.postRes.comments.unshift(data.comment_view);
527 insertCommentIntoTree(this.state.commentTree, data.comment_view);
528 this.state.postRes.post_view.counts.comments++;
529 this.setState(this.state);
533 op == UserOperation.EditComment ||
534 op == UserOperation.DeleteComment ||
535 op == UserOperation.RemoveComment
537 let data = wsJsonToRes<CommentResponse>(msg).data;
538 editCommentRes(data.comment_view, this.state.postRes.comments);
539 this.setState(this.state);
540 } else if (op == UserOperation.SaveComment) {
541 let data = wsJsonToRes<CommentResponse>(msg).data;
542 saveCommentRes(data.comment_view, this.state.postRes.comments);
543 this.setState(this.state);
545 } else if (op == UserOperation.CreateCommentLike) {
546 let data = wsJsonToRes<CommentResponse>(msg).data;
547 createCommentLikeRes(data.comment_view, this.state.postRes.comments);
548 this.setState(this.state);
549 } else if (op == UserOperation.CreatePostLike) {
550 let data = wsJsonToRes<PostResponse>(msg).data;
551 createPostLikeRes(data.post_view, this.state.postRes.post_view);
552 this.setState(this.state);
554 op == UserOperation.EditPost ||
555 op == UserOperation.DeletePost ||
556 op == UserOperation.RemovePost ||
557 op == UserOperation.LockPost ||
558 op == UserOperation.StickyPost ||
559 op == UserOperation.SavePost
561 let data = wsJsonToRes<PostResponse>(msg).data;
562 this.state.postRes.post_view = data.post_view;
563 this.setState(this.state);
566 op == UserOperation.EditCommunity ||
567 op == UserOperation.DeleteCommunity ||
568 op == UserOperation.RemoveCommunity ||
569 op == UserOperation.FollowCommunity
571 let data = wsJsonToRes<CommunityResponse>(msg).data;
572 this.state.postRes.community_view = data.community_view;
573 this.state.postRes.post_view.community = data.community_view.community;
574 this.setState(this.state);
575 this.setState(this.state);
576 } else if (op == UserOperation.BanFromCommunity) {
577 let data = wsJsonToRes<BanFromCommunityResponse>(msg).data;
578 this.state.postRes.comments
579 .filter(c => c.creator.id == data.person_view.person.id)
580 .forEach(c => (c.creator_banned_from_community = data.banned));
582 this.state.postRes.post_view.creator.id == data.person_view.person.id
584 this.state.postRes.post_view.creator_banned_from_community =
587 this.setState(this.state);
588 } else if (op == UserOperation.AddModToCommunity) {
589 let data = wsJsonToRes<AddModToCommunityResponse>(msg).data;
590 this.state.postRes.moderators = data.moderators;
591 this.setState(this.state);
592 } else if (op == UserOperation.BanPerson) {
593 let data = wsJsonToRes<BanPersonResponse>(msg).data;
594 this.state.postRes.comments
595 .filter(c => c.creator.id == data.person_view.person.id)
596 .forEach(c => (c.creator.banned = data.banned));
598 this.state.postRes.post_view.creator.id == data.person_view.person.id
600 this.state.postRes.post_view.creator.banned = data.banned;
602 this.setState(this.state);
603 } else if (op == UserOperation.AddAdmin) {
604 let data = wsJsonToRes<AddAdminResponse>(msg).data;
605 this.state.siteRes.admins = data.admins;
606 this.setState(this.state);
607 } else if (op == UserOperation.Search) {
608 let data = wsJsonToRes<SearchResponse>(msg).data;
609 this.state.crossPosts = data.posts.filter(
610 p => p.post.id != Number(this.props.match.params.id)
612 this.setState(this.state);
613 } else if (op == UserOperation.TransferSite) {
614 let data = wsJsonToRes<GetSiteResponse>(msg).data;
615 this.state.siteRes = data;
616 this.setState(this.state);
617 } else if (op == UserOperation.TransferCommunity) {
618 let data = wsJsonToRes<GetCommunityResponse>(msg).data;
619 this.state.postRes.community_view = data.community_view;
620 this.state.postRes.post_view.community = data.community_view.community;
621 this.state.postRes.moderators = data.moderators;
622 this.setState(this.state);
623 } else if (op == UserOperation.BlockPerson) {
624 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
625 updatePersonBlock(data);