1 import autosize from "autosize";
2 import { Component, linkEvent } from "inferno";
5 AddModToCommunityResponse,
6 BanFromCommunityResponse,
23 } from "lemmy-js-client";
24 import { Subscription } from "rxjs";
25 import { i18n } from "../../i18next";
27 CommentNode as CommentNodeI,
31 } from "../../interfaces";
32 import { UserService, WebSocketService } from "../../services";
40 getCommentIdFromProps,
42 insertCommentIntoTree,
46 restoreScrollPosition,
58 import { CommentForm } from "../comment/comment-form";
59 import { CommentNodes } from "../comment/comment-nodes";
60 import { HtmlTags } from "../common/html-tags";
61 import { Icon, Spinner } from "../common/icon";
62 import { Sidebar } from "../community/sidebar";
63 import { PostListing } from "./post-listing";
66 postRes: GetPostResponse;
68 commentTree: CommentNodeI[];
70 commentSort: CommentSortType;
71 commentViewType: CommentViewType;
74 crossPosts: PostView[];
75 siteRes: GetSiteResponse;
76 showSidebarMobile: boolean;
79 export class Post extends Component<any, PostState> {
80 private subscription: Subscription;
81 private isoData = setIsoData(this.context);
82 private emptyState: PostState = {
84 postId: getIdFromProps(this.props),
86 commentId: getCommentIdFromProps(this.props),
87 commentSort: CommentSortType.Hot,
88 commentViewType: CommentViewType.Tree,
92 siteRes: this.isoData.site_res,
93 showSidebarMobile: false,
96 constructor(props: any, context: any) {
97 super(props, context);
99 this.state = this.emptyState;
101 this.parseMessage = this.parseMessage.bind(this);
102 this.subscription = wsSubscribe(this.parseMessage);
104 // Only fetch the data if coming from another route
105 if (this.isoData.path == this.context.router.route.match.url) {
106 this.state.postRes = this.isoData.routeData[0];
107 this.state.commentTree = buildCommentsTree(
108 this.state.postRes.comments,
109 this.state.commentSort
111 this.state.loading = false;
114 this.fetchCrossPosts();
115 if (this.state.commentId) {
116 this.scrollCommentIntoView();
125 let form: GetPost = {
126 id: this.state.postId,
127 auth: authField(false),
129 WebSocketService.Instance.send(wsClient.getPost(form));
133 if (this.state.postRes.post_view.post.url) {
135 q: this.state.postRes.post_view.post.url,
136 type_: SearchType.Url,
137 sort: SortType.TopAll,
138 listing_type: ListingType.All,
141 auth: authField(false),
143 WebSocketService.Instance.send(wsClient.search(form));
147 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
148 let pathSplit = req.path.split("/");
149 let promises: Promise<any>[] = [];
151 let id = Number(pathSplit[2]);
153 let postForm: GetPost = {
156 setOptionalAuth(postForm, req.auth);
158 promises.push(req.client.getPost(postForm));
163 componentWillUnmount() {
164 this.subscription.unsubscribe();
165 window.isoData.path = undefined;
166 saveScrollPosition(this.context);
169 componentDidMount() {
170 WebSocketService.Instance.send(
171 wsClient.postJoin({ post_id: this.state.postId })
173 autosize(document.querySelectorAll("textarea"));
176 componentDidUpdate(_lastProps: any, lastState: PostState) {
178 this.state.commentId &&
179 !this.state.scrolled &&
181 lastState.postRes.comments.length > 0
183 this.scrollCommentIntoView();
186 // Necessary if you are on a post and you click another post (same route)
187 if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
188 // TODO Couldnt get a refresh working. This does for now.
191 // let currentId = this.props.match.params.id;
192 // WebSocketService.Instance.getPost(currentId);
193 // this.context.refresh();
194 // this.context.router.history.push(_lastProps.location.pathname);
198 scrollCommentIntoView() {
199 var elmnt = document.getElementById(`comment-${this.state.commentId}`);
200 elmnt.scrollIntoView();
201 elmnt.classList.add("mark");
202 this.state.scrolled = true;
203 this.markScrolledAsRead(this.state.commentId);
206 // TODO this needs some re-work
207 markScrolledAsRead(commentId: number) {
208 let found = this.state.postRes.comments.find(
209 c => c.comment.id == commentId
211 let parent = this.state.postRes.comments.find(
212 c => found.comment.parent_id == c.comment.id
214 let parent_person_id = parent
216 : this.state.postRes.post_view.creator.id;
219 UserService.Instance.localUserView &&
220 UserService.Instance.localUserView.person.id == parent_person_id
222 let form: MarkCommentAsRead = {
223 comment_id: found.comment.id,
227 WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
228 UserService.Instance.unreadCountSub.next(
229 UserService.Instance.unreadCountSub.value - 1
234 get documentTitle(): string {
235 return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
238 get imageTag(): string {
239 let post = this.state.postRes.post_view.post;
241 post.thumbnail_url ||
242 (post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
246 get descriptionTag(): string {
247 let body = this.state.postRes.post_view.post.body;
248 return body ? previewLines(body) : undefined;
252 let pv = this.state.postRes?.post_view;
254 <div class="container">
255 {this.state.loading ? (
261 <div class="col-12 col-md-8 mb-3">
263 title={this.documentTitle}
264 path={this.context.router.route.match.url}
265 image={this.imageTag}
266 description={this.descriptionTag}
270 duplicates={this.state.crossPosts}
273 moderators={this.state.postRes.moderators}
274 admins={this.state.siteRes.admins}
276 this.state.siteRes.site_view.site.enable_downvotes
278 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
280 <div className="mb-2" />
282 postId={this.state.postId}
283 disabled={pv.post.locked}
285 <div class="d-block d-md-none">
287 class="btn btn-secondary d-inline-block mb-2 mr-3"
288 onClick={linkEvent(this, this.handleShowSidebarMobile)}
290 {i18n.t("sidebar")}{" "}
293 this.state.showSidebarMobile
297 classes="icon-inline"
300 {this.state.showSidebarMobile && this.sidebar()}
302 {this.state.postRes.comments.length > 0 && this.sortRadios()}
303 {this.state.commentViewType == CommentViewType.Tree &&
305 {this.state.commentViewType == CommentViewType.Chat &&
308 <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
318 <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
320 className={`btn btn-outline-secondary pointer ${
321 this.state.commentSort === CommentSortType.Hot && "active"
327 value={CommentSortType.Hot}
328 checked={this.state.commentSort === CommentSortType.Hot}
329 onChange={linkEvent(this, this.handleCommentSortChange)}
333 className={`btn btn-outline-secondary pointer ${
334 this.state.commentSort === CommentSortType.Top && "active"
340 value={CommentSortType.Top}
341 checked={this.state.commentSort === CommentSortType.Top}
342 onChange={linkEvent(this, this.handleCommentSortChange)}
346 className={`btn btn-outline-secondary pointer ${
347 this.state.commentSort === CommentSortType.New && "active"
353 value={CommentSortType.New}
354 checked={this.state.commentSort === CommentSortType.New}
355 onChange={linkEvent(this, this.handleCommentSortChange)}
359 className={`btn btn-outline-secondary pointer ${
360 this.state.commentSort === CommentSortType.Old && "active"
366 value={CommentSortType.Old}
367 checked={this.state.commentSort === CommentSortType.Old}
368 onChange={linkEvent(this, this.handleCommentSortChange)}
372 <div class="btn-group btn-group-toggle flex-wrap mb-2">
374 className={`btn btn-outline-secondary pointer ${
375 this.state.commentViewType === CommentViewType.Chat && "active"
381 value={CommentViewType.Chat}
382 checked={this.state.commentViewType === CommentViewType.Chat}
383 onChange={linkEvent(this, this.handleCommentViewTypeChange)}
392 // These are already sorted by new
396 nodes={commentsToFlatNodes(this.state.postRes.comments)}
398 locked={this.state.postRes.post_view.post.locked}
399 moderators={this.state.postRes.moderators}
400 admins={this.state.siteRes.admins}
401 postCreatorId={this.state.postRes.post_view.creator.id}
403 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
413 community_view={this.state.postRes.community_view}
414 moderators={this.state.postRes.moderators}
415 admins={this.state.siteRes.admins}
416 online={this.state.postRes.online}
417 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
424 handleCommentSortChange(i: Post, event: any) {
425 i.state.commentSort = Number(event.target.value);
426 i.state.commentViewType = CommentViewType.Tree;
427 i.state.commentTree = buildCommentsTree(
428 i.state.postRes.comments,
434 handleCommentViewTypeChange(i: Post, event: any) {
435 i.state.commentViewType = Number(event.target.value);
436 i.state.commentSort = CommentSortType.New;
437 i.state.commentTree = buildCommentsTree(
438 i.state.postRes.comments,
444 handleShowSidebarMobile(i: Post) {
445 i.state.showSidebarMobile = !i.state.showSidebarMobile;
453 nodes={this.state.commentTree}
454 locked={this.state.postRes.post_view.post.locked}
455 moderators={this.state.postRes.moderators}
456 admins={this.state.siteRes.admins}
457 postCreatorId={this.state.postRes.post_view.creator.id}
458 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
464 parseMessage(msg: any) {
465 let op = wsUserOp(msg);
468 toast(i18n.t(msg.error), "danger");
470 } else if (msg.reconnect) {
471 let postId = Number(this.props.match.params.id);
472 WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
473 WebSocketService.Instance.send(
476 auth: authField(false),
479 } else if (op == UserOperation.GetPost) {
480 let data = wsJsonToRes<GetPostResponse>(msg).data;
481 this.state.postRes = data;
482 this.state.commentTree = buildCommentsTree(
483 this.state.postRes.comments,
484 this.state.commentSort
486 this.state.loading = false;
489 this.fetchCrossPosts();
490 this.setState(this.state);
492 if (!this.state.commentId) restoreScrollPosition(this.context);
493 } else if (op == UserOperation.CreateComment) {
494 let data = wsJsonToRes<CommentResponse>(msg).data;
496 // Necessary since it might be a user reply, which has the recipients, to avoid double
497 if (data.recipient_ids.length == 0) {
498 this.state.postRes.comments.unshift(data.comment_view);
499 insertCommentIntoTree(this.state.commentTree, data.comment_view);
500 this.state.postRes.post_view.counts.comments++;
501 this.setState(this.state);
505 op == UserOperation.EditComment ||
506 op == UserOperation.DeleteComment ||
507 op == UserOperation.RemoveComment
509 let data = wsJsonToRes<CommentResponse>(msg).data;
510 editCommentRes(data.comment_view, this.state.postRes.comments);
511 this.setState(this.state);
512 } else if (op == UserOperation.SaveComment) {
513 let data = wsJsonToRes<CommentResponse>(msg).data;
514 saveCommentRes(data.comment_view, this.state.postRes.comments);
515 this.setState(this.state);
517 } else if (op == UserOperation.CreateCommentLike) {
518 let data = wsJsonToRes<CommentResponse>(msg).data;
519 createCommentLikeRes(data.comment_view, this.state.postRes.comments);
520 this.setState(this.state);
521 } else if (op == UserOperation.CreatePostLike) {
522 let data = wsJsonToRes<PostResponse>(msg).data;
523 createPostLikeRes(data.post_view, this.state.postRes.post_view);
524 this.setState(this.state);
526 op == UserOperation.EditPost ||
527 op == UserOperation.DeletePost ||
528 op == UserOperation.RemovePost ||
529 op == UserOperation.LockPost ||
530 op == UserOperation.StickyPost ||
531 op == UserOperation.SavePost
533 let data = wsJsonToRes<PostResponse>(msg).data;
534 this.state.postRes.post_view = data.post_view;
535 this.setState(this.state);
538 op == UserOperation.EditCommunity ||
539 op == UserOperation.DeleteCommunity ||
540 op == UserOperation.RemoveCommunity ||
541 op == UserOperation.FollowCommunity
543 let data = wsJsonToRes<CommunityResponse>(msg).data;
544 this.state.postRes.community_view = data.community_view;
545 this.state.postRes.post_view.community = data.community_view.community;
546 this.setState(this.state);
547 this.setState(this.state);
548 } else if (op == UserOperation.BanFromCommunity) {
549 let data = wsJsonToRes<BanFromCommunityResponse>(msg).data;
550 this.state.postRes.comments
551 .filter(c => c.creator.id == data.person_view.person.id)
552 .forEach(c => (c.creator_banned_from_community = data.banned));
554 this.state.postRes.post_view.creator.id == data.person_view.person.id
556 this.state.postRes.post_view.creator_banned_from_community =
559 this.setState(this.state);
560 } else if (op == UserOperation.AddModToCommunity) {
561 let data = wsJsonToRes<AddModToCommunityResponse>(msg).data;
562 this.state.postRes.moderators = data.moderators;
563 this.setState(this.state);
564 } else if (op == UserOperation.BanPerson) {
565 let data = wsJsonToRes<BanPersonResponse>(msg).data;
566 this.state.postRes.comments
567 .filter(c => c.creator.id == data.person_view.person.id)
568 .forEach(c => (c.creator.banned = data.banned));
570 this.state.postRes.post_view.creator.id == data.person_view.person.id
572 this.state.postRes.post_view.creator.banned = data.banned;
574 this.setState(this.state);
575 } else if (op == UserOperation.AddAdmin) {
576 let data = wsJsonToRes<AddAdminResponse>(msg).data;
577 this.state.siteRes.admins = data.admins;
578 this.setState(this.state);
579 } else if (op == UserOperation.Search) {
580 let data = wsJsonToRes<SearchResponse>(msg).data;
581 this.state.crossPosts = data.posts.filter(
582 p => p.post.id != Number(this.props.match.params.id)
584 this.setState(this.state);
585 } else if (op == UserOperation.TransferSite) {
586 let data = wsJsonToRes<GetSiteResponse>(msg).data;
587 this.state.siteRes = data;
588 this.setState(this.state);
589 } else if (op == UserOperation.TransferCommunity) {
590 let data = wsJsonToRes<GetCommunityResponse>(msg).data;
591 this.state.postRes.community_view = data.community_view;
592 this.state.postRes.post_view.community = data.community_view.community;
593 this.state.postRes.moderators = data.moderators;
594 this.setState(this.state);