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 { 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;
78 export class Post extends Component<any, PostState> {
79 private subscription: Subscription;
80 private isoData = setIsoData(this.context);
81 private emptyState: PostState = {
83 postId: getIdFromProps(this.props),
85 commentId: getCommentIdFromProps(this.props),
86 commentSort: CommentSortType.Hot,
87 commentViewType: CommentViewType.Tree,
91 siteRes: this.isoData.site_res,
94 constructor(props: any, context: any) {
95 super(props, context);
97 this.state = this.emptyState;
99 this.parseMessage = this.parseMessage.bind(this);
100 this.subscription = wsSubscribe(this.parseMessage);
102 // Only fetch the data if coming from another route
103 if (this.isoData.path == this.context.router.route.match.url) {
104 this.state.postRes = this.isoData.routeData[0];
105 this.state.commentTree = buildCommentsTree(
106 this.state.postRes.comments,
107 this.state.commentSort
109 this.state.loading = false;
112 this.fetchCrossPosts();
113 if (this.state.commentId) {
114 this.scrollCommentIntoView();
123 let form: GetPost = {
124 id: this.state.postId,
125 auth: authField(false),
127 WebSocketService.Instance.send(wsClient.getPost(form));
131 if (this.state.postRes.post_view.post.url) {
133 q: this.state.postRes.post_view.post.url,
134 type_: SearchType.Url,
135 sort: SortType.TopAll,
136 listing_type: ListingType.All,
139 auth: authField(false),
141 WebSocketService.Instance.send(wsClient.search(form));
145 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
146 let pathSplit = req.path.split("/");
147 let promises: Promise<any>[] = [];
149 let id = Number(pathSplit[2]);
151 let postForm: GetPost = {
154 setOptionalAuth(postForm, req.auth);
156 promises.push(req.client.getPost(postForm));
161 componentWillUnmount() {
162 this.subscription.unsubscribe();
163 window.isoData.path = undefined;
164 saveScrollPosition(this.context);
167 componentDidMount() {
168 WebSocketService.Instance.send(
169 wsClient.postJoin({ post_id: this.state.postId })
171 autosize(document.querySelectorAll("textarea"));
174 componentDidUpdate(_lastProps: any, lastState: PostState) {
176 this.state.commentId &&
177 !this.state.scrolled &&
179 lastState.postRes.comments.length > 0
181 this.scrollCommentIntoView();
184 // Necessary if you are on a post and you click another post (same route)
185 if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
186 // TODO Couldnt get a refresh working. This does for now.
189 // let currentId = this.props.match.params.id;
190 // WebSocketService.Instance.getPost(currentId);
191 // this.context.refresh();
192 // this.context.router.history.push(_lastProps.location.pathname);
196 scrollCommentIntoView() {
197 var elmnt = document.getElementById(`comment-${this.state.commentId}`);
198 elmnt.scrollIntoView();
199 elmnt.classList.add("mark");
200 this.state.scrolled = true;
201 this.markScrolledAsRead(this.state.commentId);
204 // TODO this needs some re-work
205 markScrolledAsRead(commentId: number) {
206 let found = this.state.postRes.comments.find(
207 c => c.comment.id == commentId
209 let parent = this.state.postRes.comments.find(
210 c => found.comment.parent_id == c.comment.id
212 let parent_person_id = parent
214 : this.state.postRes.post_view.creator.id;
217 UserService.Instance.localUserView &&
218 UserService.Instance.localUserView.person.id == parent_person_id
220 let form: MarkCommentAsRead = {
221 comment_id: found.comment.id,
225 WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
226 UserService.Instance.unreadCountSub.next(
227 UserService.Instance.unreadCountSub.value - 1
232 get documentTitle(): string {
233 return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
236 get imageTag(): string {
237 let post = this.state.postRes.post_view.post;
239 post.thumbnail_url ||
240 (post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
244 get descriptionTag(): string {
245 let body = this.state.postRes.post_view.post.body;
246 return body ? previewLines(body) : undefined;
250 let pv = this.state.postRes?.post_view;
252 <div class="container">
253 {this.state.loading ? (
259 <div class="col-12 col-md-8 mb-3">
261 title={this.documentTitle}
262 path={this.context.router.route.match.url}
263 image={this.imageTag}
264 description={this.descriptionTag}
268 duplicates={this.state.crossPosts}
271 moderators={this.state.postRes.moderators}
272 admins={this.state.siteRes.admins}
274 this.state.siteRes.site_view.site.enable_downvotes
276 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
278 <div className="mb-2" />
280 postId={this.state.postId}
281 disabled={pv.post.locked}
283 {this.state.postRes.comments.length > 0 && this.sortRadios()}
284 {this.state.commentViewType == CommentViewType.Tree &&
286 {this.state.commentViewType == CommentViewType.Chat &&
289 <div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
299 <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
301 className={`btn btn-outline-secondary pointer ${
302 this.state.commentSort === CommentSortType.Hot && "active"
308 value={CommentSortType.Hot}
309 checked={this.state.commentSort === CommentSortType.Hot}
310 onChange={linkEvent(this, this.handleCommentSortChange)}
314 className={`btn btn-outline-secondary pointer ${
315 this.state.commentSort === CommentSortType.Top && "active"
321 value={CommentSortType.Top}
322 checked={this.state.commentSort === CommentSortType.Top}
323 onChange={linkEvent(this, this.handleCommentSortChange)}
327 className={`btn btn-outline-secondary pointer ${
328 this.state.commentSort === CommentSortType.New && "active"
334 value={CommentSortType.New}
335 checked={this.state.commentSort === CommentSortType.New}
336 onChange={linkEvent(this, this.handleCommentSortChange)}
340 className={`btn btn-outline-secondary pointer ${
341 this.state.commentSort === CommentSortType.Old && "active"
347 value={CommentSortType.Old}
348 checked={this.state.commentSort === CommentSortType.Old}
349 onChange={linkEvent(this, this.handleCommentSortChange)}
353 <div class="btn-group btn-group-toggle flex-wrap mb-2">
355 className={`btn btn-outline-secondary pointer ${
356 this.state.commentViewType === CommentViewType.Chat && "active"
362 value={CommentViewType.Chat}
363 checked={this.state.commentViewType === CommentViewType.Chat}
364 onChange={linkEvent(this, this.handleCommentViewTypeChange)}
373 // These are already sorted by new
377 nodes={commentsToFlatNodes(this.state.postRes.comments)}
379 locked={this.state.postRes.post_view.post.locked}
380 moderators={this.state.postRes.moderators}
381 admins={this.state.siteRes.admins}
382 postCreatorId={this.state.postRes.post_view.creator.id}
384 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
394 community_view={this.state.postRes.community_view}
395 moderators={this.state.postRes.moderators}
396 admins={this.state.siteRes.admins}
397 online={this.state.postRes.online}
398 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
405 handleCommentSortChange(i: Post, event: any) {
406 i.state.commentSort = Number(event.target.value);
407 i.state.commentViewType = CommentViewType.Tree;
408 i.state.commentTree = buildCommentsTree(
409 i.state.postRes.comments,
415 handleCommentViewTypeChange(i: Post, event: any) {
416 i.state.commentViewType = Number(event.target.value);
417 i.state.commentSort = CommentSortType.New;
418 i.state.commentTree = buildCommentsTree(
419 i.state.postRes.comments,
429 nodes={this.state.commentTree}
430 locked={this.state.postRes.post_view.post.locked}
431 moderators={this.state.postRes.moderators}
432 admins={this.state.siteRes.admins}
433 postCreatorId={this.state.postRes.post_view.creator.id}
434 enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
440 parseMessage(msg: any) {
441 let op = wsUserOp(msg);
444 toast(i18n.t(msg.error), "danger");
446 } else if (msg.reconnect) {
447 let postId = Number(this.props.match.params.id);
448 WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
449 WebSocketService.Instance.send(
452 auth: authField(false),
455 } else if (op == UserOperation.GetPost) {
456 let data = wsJsonToRes<GetPostResponse>(msg).data;
457 this.state.postRes = data;
458 this.state.commentTree = buildCommentsTree(
459 this.state.postRes.comments,
460 this.state.commentSort
462 this.state.loading = false;
465 this.fetchCrossPosts();
466 this.setState(this.state);
468 if (!this.state.commentId) restoreScrollPosition(this.context);
469 } else if (op == UserOperation.CreateComment) {
470 let data = wsJsonToRes<CommentResponse>(msg).data;
472 // Necessary since it might be a user reply, which has the recipients, to avoid double
473 if (data.recipient_ids.length == 0) {
474 this.state.postRes.comments.unshift(data.comment_view);
475 insertCommentIntoTree(this.state.commentTree, data.comment_view);
476 this.state.postRes.post_view.counts.comments++;
477 this.setState(this.state);
481 op == UserOperation.EditComment ||
482 op == UserOperation.DeleteComment ||
483 op == UserOperation.RemoveComment
485 let data = wsJsonToRes<CommentResponse>(msg).data;
486 editCommentRes(data.comment_view, this.state.postRes.comments);
487 this.setState(this.state);
488 } else if (op == UserOperation.SaveComment) {
489 let data = wsJsonToRes<CommentResponse>(msg).data;
490 saveCommentRes(data.comment_view, this.state.postRes.comments);
491 this.setState(this.state);
493 } else if (op == UserOperation.CreateCommentLike) {
494 let data = wsJsonToRes<CommentResponse>(msg).data;
495 createCommentLikeRes(data.comment_view, this.state.postRes.comments);
496 this.setState(this.state);
497 } else if (op == UserOperation.CreatePostLike) {
498 let data = wsJsonToRes<PostResponse>(msg).data;
499 createPostLikeRes(data.post_view, this.state.postRes.post_view);
500 this.setState(this.state);
502 op == UserOperation.EditPost ||
503 op == UserOperation.DeletePost ||
504 op == UserOperation.RemovePost ||
505 op == UserOperation.LockPost ||
506 op == UserOperation.StickyPost ||
507 op == UserOperation.SavePost
509 let data = wsJsonToRes<PostResponse>(msg).data;
510 this.state.postRes.post_view = data.post_view;
511 this.setState(this.state);
514 op == UserOperation.EditCommunity ||
515 op == UserOperation.DeleteCommunity ||
516 op == UserOperation.RemoveCommunity ||
517 op == UserOperation.FollowCommunity
519 let data = wsJsonToRes<CommunityResponse>(msg).data;
520 this.state.postRes.community_view = data.community_view;
521 this.state.postRes.post_view.community = data.community_view.community;
522 this.setState(this.state);
523 this.setState(this.state);
524 } else if (op == UserOperation.BanFromCommunity) {
525 let data = wsJsonToRes<BanFromCommunityResponse>(msg).data;
526 this.state.postRes.comments
527 .filter(c => c.creator.id == data.person_view.person.id)
528 .forEach(c => (c.creator_banned_from_community = data.banned));
530 this.state.postRes.post_view.creator.id == data.person_view.person.id
532 this.state.postRes.post_view.creator_banned_from_community =
535 this.setState(this.state);
536 } else if (op == UserOperation.AddModToCommunity) {
537 let data = wsJsonToRes<AddModToCommunityResponse>(msg).data;
538 this.state.postRes.moderators = data.moderators;
539 this.setState(this.state);
540 } else if (op == UserOperation.BanPerson) {
541 let data = wsJsonToRes<BanPersonResponse>(msg).data;
542 this.state.postRes.comments
543 .filter(c => c.creator.id == data.person_view.person.id)
544 .forEach(c => (c.creator.banned = data.banned));
546 this.state.postRes.post_view.creator.id == data.person_view.person.id
548 this.state.postRes.post_view.creator.banned = data.banned;
550 this.setState(this.state);
551 } else if (op == UserOperation.AddAdmin) {
552 let data = wsJsonToRes<AddAdminResponse>(msg).data;
553 this.state.siteRes.admins = data.admins;
554 this.setState(this.state);
555 } else if (op == UserOperation.Search) {
556 let data = wsJsonToRes<SearchResponse>(msg).data;
557 this.state.crossPosts = data.posts.filter(
558 p => p.post.id != Number(this.props.match.params.id)
560 this.setState(this.state);
561 } else if (op == UserOperation.TransferSite) {
562 let data = wsJsonToRes<GetSiteResponse>(msg).data;
563 this.state.siteRes = data;
564 this.setState(this.state);
565 } else if (op == UserOperation.TransferCommunity) {
566 let data = wsJsonToRes<GetCommunityResponse>(msg).data;
567 this.state.postRes.community_view = data.community_view;
568 this.state.postRes.post_view.community = data.community_view.community;
569 this.state.postRes.moderators = data.moderators;
570 this.setState(this.state);