19 restoreScrollPosition,
21 } from "@utils/browser";
22 import { debounce, randomStr } from "@utils/helpers";
23 import { isImage } from "@utils/media";
24 import { RouteDataResponse } from "@utils/types";
25 import autosize from "autosize";
26 import classNames from "classnames";
27 import { Component, RefObject, createRef, linkEvent } from "inferno";
31 AddModToCommunityResponse,
33 BanFromCommunityResponse,
64 MarkCommentReplyAsRead,
65 MarkPersonMentionAsRead,
78 } from "lemmy-js-client";
79 import { commentTreeMaxDepth } from "../../config";
84 } from "../../interfaces";
85 import { FirstLoadService, I18NextService, UserService } from "../../services";
86 import { HttpService, RequestState } from "../../services/HttpService";
87 import { setupTippy } from "../../tippy";
88 import { toast } from "../../toast";
89 import { CommentForm } from "../comment/comment-form";
90 import { CommentNodes } from "../comment/comment-nodes";
91 import { HtmlTags } from "../common/html-tags";
92 import { Icon, Spinner } from "../common/icon";
93 import { Sidebar } from "../community/sidebar";
94 import { PostListing } from "./post-listing";
96 const commentsShownInterval = 15;
98 type PostData = RouteDataResponse<{
99 postRes: GetPostResponse;
100 commentsRes: GetCommentsResponse;
103 interface PostState {
106 postRes: RequestState<GetPostResponse>;
107 commentsRes: RequestState<GetCommentsResponse>;
108 commentSort: CommentSortType;
109 commentViewType: CommentViewType;
111 siteRes: GetSiteResponse;
112 commentSectionRef?: RefObject<HTMLDivElement>;
113 showSidebarMobile: boolean;
114 maxCommentsShown: number;
115 finished: Map<CommentId, boolean | undefined>;
116 isIsomorphic: boolean;
119 export class Post extends Component<any, PostState> {
120 private isoData = setIsoData<PostData>(this.context);
121 private commentScrollDebounced: () => void;
123 postRes: { state: "empty" },
124 commentsRes: { state: "empty" },
125 postId: getIdFromProps(this.props),
126 commentId: getCommentIdFromProps(this.props),
128 commentViewType: CommentViewType.Tree,
130 siteRes: this.isoData.site_res,
131 showSidebarMobile: false,
132 maxCommentsShown: commentsShownInterval,
137 constructor(props: any, context: any) {
138 super(props, context);
140 this.handleDeleteCommunityClick =
141 this.handleDeleteCommunityClick.bind(this);
142 this.handleEditCommunity = this.handleEditCommunity.bind(this);
143 this.handleFollow = this.handleFollow.bind(this);
144 this.handleModRemoveCommunity = this.handleModRemoveCommunity.bind(this);
145 this.handleCreateComment = this.handleCreateComment.bind(this);
146 this.handleEditComment = this.handleEditComment.bind(this);
147 this.handleSaveComment = this.handleSaveComment.bind(this);
148 this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
149 this.handleBlockPerson = this.handleBlockPerson.bind(this);
150 this.handleDeleteComment = this.handleDeleteComment.bind(this);
151 this.handleRemoveComment = this.handleRemoveComment.bind(this);
152 this.handleCommentVote = this.handleCommentVote.bind(this);
153 this.handleAddModToCommunity = this.handleAddModToCommunity.bind(this);
154 this.handleAddAdmin = this.handleAddAdmin.bind(this);
155 this.handlePurgePerson = this.handlePurgePerson.bind(this);
156 this.handlePurgeComment = this.handlePurgeComment.bind(this);
157 this.handleCommentReport = this.handleCommentReport.bind(this);
158 this.handleDistinguishComment = this.handleDistinguishComment.bind(this);
159 this.handleTransferCommunity = this.handleTransferCommunity.bind(this);
160 this.handleFetchChildren = this.handleFetchChildren.bind(this);
161 this.handleCommentReplyRead = this.handleCommentReplyRead.bind(this);
162 this.handlePersonMentionRead = this.handlePersonMentionRead.bind(this);
163 this.handleBanFromCommunity = this.handleBanFromCommunity.bind(this);
164 this.handleBanPerson = this.handleBanPerson.bind(this);
165 this.handlePostEdit = this.handlePostEdit.bind(this);
166 this.handlePostVote = this.handlePostVote.bind(this);
167 this.handlePostReport = this.handlePostReport.bind(this);
168 this.handleLockPost = this.handleLockPost.bind(this);
169 this.handleDeletePost = this.handleDeletePost.bind(this);
170 this.handleRemovePost = this.handleRemovePost.bind(this);
171 this.handleSavePost = this.handleSavePost.bind(this);
172 this.handlePurgePost = this.handlePurgePost.bind(this);
173 this.handleFeaturePost = this.handleFeaturePost.bind(this);
175 this.state = { ...this.state, commentSectionRef: createRef() };
177 // Only fetch the data if coming from another route
178 if (FirstLoadService.isFirstLoad) {
179 const { commentsRes, postRes } = this.isoData.routeData;
189 if (this.checkScrollIntoCommentsParam) {
190 this.scrollIntoCommentSection();
198 postRes: { state: "loading" },
199 commentsRes: { state: "loading" },
202 const auth = myAuth();
205 postRes: await HttpService.client.getPost({
206 id: this.state.postId,
207 comment_id: this.state.commentId,
210 commentsRes: await HttpService.client.getComments({
211 post_id: this.state.postId,
212 parent_id: this.state.commentId,
213 max_depth: commentTreeMaxDepth,
214 sort: this.state.commentSort,
223 if (!this.state.commentId) restoreScrollPosition(this.context);
225 if (this.checkScrollIntoCommentsParam) {
226 this.scrollIntoCommentSection();
230 static async fetchInitialData({
234 }: InitialFetchRequest): Promise<PostData> {
235 const pathSplit = path.split("/");
237 const pathType = pathSplit.at(1);
238 const id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined;
240 const postForm: GetPost = {
244 const commentsForm: GetComments = {
245 max_depth: commentTreeMaxDepth,
252 // Set the correct id based on the path type
253 if (pathType === "post") {
255 commentsForm.post_id = id;
257 postForm.comment_id = id;
258 commentsForm.parent_id = id;
262 postRes: await client.getPost(postForm),
263 commentsRes: await client.getComments(commentsForm),
267 componentWillUnmount() {
268 document.removeEventListener("scroll", this.commentScrollDebounced);
270 saveScrollPosition(this.context);
273 async componentDidMount() {
274 if (!this.state.isIsomorphic) {
275 await this.fetchPost();
278 autosize(document.querySelectorAll("textarea"));
280 this.commentScrollDebounced = debounce(this.trackCommentsBoxScrolling, 100);
281 document.addEventListener("scroll", this.commentScrollDebounced);
284 async componentDidUpdate(_lastProps: any) {
285 // Necessary if you are on a post and you click another post (same route)
286 if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
287 await this.fetchPost();
291 get checkScrollIntoCommentsParam() {
293 new URLSearchParams(this.props.location.search).get("scrollToComments")
297 scrollIntoCommentSection() {
298 this.state.commentSectionRef?.current?.scrollIntoView();
301 isBottom(el: Element): boolean {
302 return el?.getBoundingClientRect().bottom <= window.innerHeight;
306 * Shows new comments when scrolling to the bottom of the comments div
308 trackCommentsBoxScrolling = () => {
309 const wrappedElement = document.getElementsByClassName("comments")[0];
310 if (wrappedElement && this.isBottom(wrappedElement)) {
312 this.state.commentsRes.state == "success"
313 ? this.state.commentsRes.data.comments.length
316 if (this.state.maxCommentsShown < commentCount) {
318 maxCommentsShown: this.state.maxCommentsShown + commentsShownInterval,
324 get documentTitle(): string {
325 const siteName = this.state.siteRes.site_view.site.name;
326 return this.state.postRes.state == "success"
327 ? `${this.state.postRes.data.post_view.post.name} - ${siteName}`
331 get imageTag(): string | undefined {
332 if (this.state.postRes.state == "success") {
333 const post = this.state.postRes.data.post_view.post;
334 const thumbnail = post.thumbnail_url;
335 const url = post.url;
336 return thumbnail || (url && isImage(url) ? url : undefined);
337 } else return undefined;
341 switch (this.state.postRes.state) {
349 const res = this.state.postRes.data;
351 <div className="row">
352 <main className="col-12 col-md-8 col-lg-9 mb-3">
354 title={this.documentTitle}
355 path={this.context.router.route.match.url}
356 image={this.imageTag}
357 description={res.post_view.post.body}
360 post_view={res.post_view}
361 crossPosts={res.cross_posts}
364 moderators={res.moderators}
365 admins={this.state.siteRes.admins}
366 enableDownvotes={enableDownvotes(this.state.siteRes)}
367 enableNsfw={enableNsfw(this.state.siteRes)}
368 allLanguages={this.state.siteRes.all_languages}
369 siteLanguages={this.state.siteRes.discussion_languages}
370 onBlockPerson={this.handleBlockPerson}
371 onPostEdit={this.handlePostEdit}
372 onPostVote={this.handlePostVote}
373 onPostReport={this.handlePostReport}
374 onLockPost={this.handleLockPost}
375 onDeletePost={this.handleDeletePost}
376 onRemovePost={this.handleRemovePost}
377 onSavePost={this.handleSavePost}
378 onPurgePerson={this.handlePurgePerson}
379 onPurgePost={this.handlePurgePost}
380 onBanPerson={this.handleBanPerson}
381 onBanPersonFromCommunity={this.handleBanFromCommunity}
382 onAddModToCommunity={this.handleAddModToCommunity}
383 onAddAdmin={this.handleAddAdmin}
384 onTransferCommunity={this.handleTransferCommunity}
385 onFeaturePost={this.handleFeaturePost}
387 <div ref={this.state.commentSectionRef} className="mb-2" />
389 node={res.post_view.post.id}
390 disabled={res.post_view.post.locked}
391 allLanguages={this.state.siteRes.all_languages}
392 siteLanguages={this.state.siteRes.discussion_languages}
393 containerClass="post-comment-container"
394 onUpsertComment={this.handleCreateComment}
395 finished={this.state.finished.get(0)}
397 <div className="d-block d-md-none">
399 className="btn btn-secondary d-inline-block mb-2 me-3"
400 onClick={linkEvent(this, this.handleShowSidebarMobile)}
402 {I18NextService.i18n.t("sidebar")}{" "}
405 this.state.showSidebarMobile
409 classes="icon-inline"
412 {this.state.showSidebarMobile && this.sidebar()}
415 {this.state.commentViewType == CommentViewType.Tree &&
417 {this.state.commentViewType == CommentViewType.Flat &&
420 <aside className="d-none d-md-block col-md-4 col-lg-3">
430 return <div className="post container-lg">{this.renderPostRes()}</div>;
435 this.state.postRes.state === "success"
436 ? this.state.postRes.data.post_view.post.id
442 className="btn-group btn-group-toggle flex-wrap me-3 mb-2"
446 id={`${radioId}-hot`}
448 className="btn-check"
450 checked={this.state.commentSort === "Hot"}
451 onChange={linkEvent(this, this.handleCommentSortChange)}
454 htmlFor={`${radioId}-hot`}
455 className={classNames("btn btn-outline-secondary pointer", {
456 active: this.state.commentSort === "Hot",
459 {I18NextService.i18n.t("hot")}
462 id={`${radioId}-top`}
464 className="btn-check"
466 checked={this.state.commentSort === "Top"}
467 onChange={linkEvent(this, this.handleCommentSortChange)}
470 htmlFor={`${radioId}-top`}
471 className={classNames("btn btn-outline-secondary pointer", {
472 active: this.state.commentSort === "Top",
475 {I18NextService.i18n.t("top")}
478 id={`${radioId}-new`}
480 className="btn-check"
482 checked={this.state.commentSort === "New"}
483 onChange={linkEvent(this, this.handleCommentSortChange)}
486 htmlFor={`${radioId}-new`}
487 className={classNames("btn btn-outline-secondary pointer", {
488 active: this.state.commentSort === "New",
491 {I18NextService.i18n.t("new")}
494 id={`${radioId}-old`}
496 className="btn-check"
498 checked={this.state.commentSort === "Old"}
499 onChange={linkEvent(this, this.handleCommentSortChange)}
502 htmlFor={`${radioId}-old`}
503 className={classNames("btn btn-outline-secondary pointer", {
504 active: this.state.commentSort === "Old",
507 {I18NextService.i18n.t("old")}
510 <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
512 id={`${radioId}-chat`}
514 className="btn-check"
515 value={CommentViewType.Flat}
516 checked={this.state.commentViewType === CommentViewType.Flat}
517 onChange={linkEvent(this, this.handleCommentViewTypeChange)}
520 htmlFor={`${radioId}-chat`}
521 className={classNames("btn btn-outline-secondary pointer", {
522 active: this.state.commentViewType === CommentViewType.Flat,
525 {I18NextService.i18n.t("chat")}
533 // These are already sorted by new
534 const commentsRes = this.state.commentsRes;
535 const postRes = this.state.postRes;
537 if (commentsRes.state == "success" && postRes.state == "success") {
541 nodes={commentsToFlatNodes(commentsRes.data.comments)}
542 viewType={this.state.commentViewType}
543 maxCommentsShown={this.state.maxCommentsShown}
545 locked={postRes.data.post_view.post.locked}
546 moderators={postRes.data.moderators}
547 admins={this.state.siteRes.admins}
548 enableDownvotes={enableDownvotes(this.state.siteRes)}
550 finished={this.state.finished}
551 allLanguages={this.state.siteRes.all_languages}
552 siteLanguages={this.state.siteRes.discussion_languages}
553 onSaveComment={this.handleSaveComment}
554 onBlockPerson={this.handleBlockPerson}
555 onDeleteComment={this.handleDeleteComment}
556 onRemoveComment={this.handleRemoveComment}
557 onCommentVote={this.handleCommentVote}
558 onCommentReport={this.handleCommentReport}
559 onDistinguishComment={this.handleDistinguishComment}
560 onAddModToCommunity={this.handleAddModToCommunity}
561 onAddAdmin={this.handleAddAdmin}
562 onTransferCommunity={this.handleTransferCommunity}
563 onFetchChildren={this.handleFetchChildren}
564 onPurgeComment={this.handlePurgeComment}
565 onPurgePerson={this.handlePurgePerson}
566 onCommentReplyRead={this.handleCommentReplyRead}
567 onPersonMentionRead={this.handlePersonMentionRead}
568 onBanPersonFromCommunity={this.handleBanFromCommunity}
569 onBanPerson={this.handleBanPerson}
570 onCreateComment={this.handleCreateComment}
571 onEditComment={this.handleEditComment}
579 const res = this.state.postRes;
580 if (res.state === "success") {
583 community_view={res.data.community_view}
584 moderators={res.data.moderators}
585 admins={this.state.siteRes.admins}
586 enableNsfw={enableNsfw(this.state.siteRes)}
588 allLanguages={this.state.siteRes.all_languages}
589 siteLanguages={this.state.siteRes.discussion_languages}
590 onDeleteCommunity={this.handleDeleteCommunityClick}
591 onLeaveModTeam={this.handleAddModToCommunity}
592 onFollowCommunity={this.handleFollow}
593 onRemoveCommunity={this.handleModRemoveCommunity}
594 onPurgeCommunity={this.handlePurgeCommunity}
595 onBlockCommunity={this.handleBlockCommunity}
596 onEditCommunity={this.handleEditCommunity}
603 const res = this.state.postRes;
604 const firstComment = this.commentTree().at(0)?.comment_view.comment;
605 const depth = getDepthFromComment(firstComment);
606 const showContextButton = depth ? depth > 0 : false;
609 res.state == "success" && (
611 {!!this.state.commentId && (
614 className="ps-0 d-block btn btn-link text-muted"
615 onClick={linkEvent(this, this.handleViewPost)}
617 {I18NextService.i18n.t("view_all_comments")} âž”
619 {showContextButton && (
621 className="ps-0 d-block btn btn-link text-muted"
622 onClick={linkEvent(this, this.handleViewContext)}
624 {I18NextService.i18n.t("show_context")} âž”
630 nodes={this.commentTree()}
631 viewType={this.state.commentViewType}
632 maxCommentsShown={this.state.maxCommentsShown}
633 locked={res.data.post_view.post.locked}
634 moderators={res.data.moderators}
635 admins={this.state.siteRes.admins}
636 enableDownvotes={enableDownvotes(this.state.siteRes)}
637 finished={this.state.finished}
638 allLanguages={this.state.siteRes.all_languages}
639 siteLanguages={this.state.siteRes.discussion_languages}
640 onSaveComment={this.handleSaveComment}
641 onBlockPerson={this.handleBlockPerson}
642 onDeleteComment={this.handleDeleteComment}
643 onRemoveComment={this.handleRemoveComment}
644 onCommentVote={this.handleCommentVote}
645 onCommentReport={this.handleCommentReport}
646 onDistinguishComment={this.handleDistinguishComment}
647 onAddModToCommunity={this.handleAddModToCommunity}
648 onAddAdmin={this.handleAddAdmin}
649 onTransferCommunity={this.handleTransferCommunity}
650 onFetchChildren={this.handleFetchChildren}
651 onPurgeComment={this.handlePurgeComment}
652 onPurgePerson={this.handlePurgePerson}
653 onCommentReplyRead={this.handleCommentReplyRead}
654 onPersonMentionRead={this.handlePersonMentionRead}
655 onBanPersonFromCommunity={this.handleBanFromCommunity}
656 onBanPerson={this.handleBanPerson}
657 onCreateComment={this.handleCreateComment}
658 onEditComment={this.handleEditComment}
665 commentTree(): CommentNodeI[] {
666 if (this.state.commentsRes.state == "success") {
667 return buildCommentsTree(
668 this.state.commentsRes.data.comments,
669 !!this.state.commentId
676 async handleCommentSortChange(i: Post, event: any) {
678 commentSort: event.target.value as CommentSortType,
679 commentViewType: CommentViewType.Tree,
680 commentsRes: { state: "loading" },
681 postRes: { state: "loading" },
686 handleCommentViewTypeChange(i: Post, event: any) {
688 commentViewType: Number(event.target.value),
693 handleShowSidebarMobile(i: Post) {
694 i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
697 handleViewPost(i: Post) {
698 if (i.state.postRes.state == "success") {
699 const id = i.state.postRes.data.post_view.post.id;
700 i.context.router.history.push(`/post/${id}`);
704 handleViewContext(i: Post) {
705 if (i.state.commentsRes.state == "success") {
706 const parentId = getCommentParentId(
707 i.state.commentsRes.data.comments.at(0)?.comment
710 i.context.router.history.push(`/comment/${parentId}`);
715 async handleDeleteCommunityClick(form: DeleteCommunity) {
716 const deleteCommunityRes = await HttpService.client.deleteCommunity(form);
717 this.updateCommunity(deleteCommunityRes);
720 async handleAddModToCommunity(form: AddModToCommunity) {
721 const addModRes = await HttpService.client.addModToCommunity(form);
722 this.updateModerators(addModRes);
725 async handleFollow(form: FollowCommunity) {
726 const followCommunityRes = await HttpService.client.followCommunity(form);
727 this.updateCommunity(followCommunityRes);
730 if (followCommunityRes.state === "success") {
731 const communityId = followCommunityRes.data.community_view.community.id;
732 const mui = UserService.Instance.myUserInfo;
734 mui.follows = mui.follows.filter(i => i.community.id != communityId);
739 async handlePurgeCommunity(form: PurgeCommunity) {
740 const purgeCommunityRes = await HttpService.client.purgeCommunity(form);
741 this.purgeItem(purgeCommunityRes);
744 async handlePurgePerson(form: PurgePerson) {
745 const purgePersonRes = await HttpService.client.purgePerson(form);
746 this.purgeItem(purgePersonRes);
749 async handlePurgeComment(form: PurgeComment) {
750 const purgeCommentRes = await HttpService.client.purgeComment(form);
751 this.purgeItem(purgeCommentRes);
754 async handlePurgePost(form: PurgePost) {
755 const purgeRes = await HttpService.client.purgePost(form);
756 this.purgeItem(purgeRes);
759 async handleBlockCommunity(form: BlockCommunity) {
760 const blockCommunityRes = await HttpService.client.blockCommunity(form);
761 if (blockCommunityRes.state == "success") {
762 updateCommunityBlock(blockCommunityRes.data);
764 if (s.postRes.state == "success") {
765 s.postRes.data.community_view.blocked =
766 blockCommunityRes.data.blocked;
772 async handleBlockPerson(form: BlockPerson) {
773 const blockPersonRes = await HttpService.client.blockPerson(form);
774 if (blockPersonRes.state == "success") {
775 updatePersonBlock(blockPersonRes.data);
779 async handleModRemoveCommunity(form: RemoveCommunity) {
780 const removeCommunityRes = await HttpService.client.removeCommunity(form);
781 this.updateCommunity(removeCommunityRes);
784 async handleEditCommunity(form: EditCommunity) {
785 const res = await HttpService.client.editCommunity(form);
786 this.updateCommunity(res);
791 async handleCreateComment(form: CreateComment) {
792 const createCommentRes = await HttpService.client.createComment(form);
793 this.createAndUpdateComments(createCommentRes);
795 return createCommentRes;
798 async handleEditComment(form: EditComment) {
799 const editCommentRes = await HttpService.client.editComment(form);
800 this.findAndUpdateComment(editCommentRes);
802 return editCommentRes;
805 async handleDeleteComment(form: DeleteComment) {
806 const deleteCommentRes = await HttpService.client.deleteComment(form);
807 this.findAndUpdateComment(deleteCommentRes);
810 async handleDeletePost(form: DeletePost) {
811 const deleteRes = await HttpService.client.deletePost(form);
812 this.updatePost(deleteRes);
815 async handleRemovePost(form: RemovePost) {
816 const removeRes = await HttpService.client.removePost(form);
817 this.updatePost(removeRes);
820 async handleRemoveComment(form: RemoveComment) {
821 const removeCommentRes = await HttpService.client.removeComment(form);
822 this.findAndUpdateComment(removeCommentRes);
825 async handleSaveComment(form: SaveComment) {
826 const saveCommentRes = await HttpService.client.saveComment(form);
827 this.findAndUpdateComment(saveCommentRes);
830 async handleSavePost(form: SavePost) {
831 const saveRes = await HttpService.client.savePost(form);
832 this.updatePost(saveRes);
835 async handleFeaturePost(form: FeaturePost) {
836 const featureRes = await HttpService.client.featurePost(form);
837 this.updatePost(featureRes);
840 async handleCommentVote(form: CreateCommentLike) {
841 const voteRes = await HttpService.client.likeComment(form);
842 this.findAndUpdateComment(voteRes);
845 async handlePostVote(form: CreatePostLike) {
846 const voteRes = await HttpService.client.likePost(form);
847 this.updatePost(voteRes);
850 async handlePostEdit(form: EditPost) {
851 const res = await HttpService.client.editPost(form);
852 this.updatePost(res);
855 async handleCommentReport(form: CreateCommentReport) {
856 const reportRes = await HttpService.client.createCommentReport(form);
857 if (reportRes.state == "success") {
858 toast(I18NextService.i18n.t("report_created"));
862 async handlePostReport(form: CreatePostReport) {
863 const reportRes = await HttpService.client.createPostReport(form);
864 if (reportRes.state == "success") {
865 toast(I18NextService.i18n.t("report_created"));
869 async handleLockPost(form: LockPost) {
870 const lockRes = await HttpService.client.lockPost(form);
871 this.updatePost(lockRes);
874 async handleDistinguishComment(form: DistinguishComment) {
875 const distinguishRes = await HttpService.client.distinguishComment(form);
876 this.findAndUpdateComment(distinguishRes);
879 async handleAddAdmin(form: AddAdmin) {
880 const addAdminRes = await HttpService.client.addAdmin(form);
882 if (addAdminRes.state === "success") {
883 this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
887 async handleTransferCommunity(form: TransferCommunity) {
888 const transferCommunityRes = await HttpService.client.transferCommunity(
891 this.updateCommunityFull(transferCommunityRes);
894 async handleFetchChildren(form: GetComments) {
895 const moreCommentsRes = await HttpService.client.getComments(form);
897 this.state.commentsRes.state == "success" &&
898 moreCommentsRes.state == "success"
900 const newComments = moreCommentsRes.data.comments;
901 // Remove the first comment, since it is the parent
903 const newRes = this.state.commentsRes;
904 newRes.data.comments.push(...newComments);
905 this.setState({ commentsRes: newRes });
909 async handleCommentReplyRead(form: MarkCommentReplyAsRead) {
910 const readRes = await HttpService.client.markCommentReplyAsRead(form);
911 this.findAndUpdateCommentReply(readRes);
914 async handlePersonMentionRead(form: MarkPersonMentionAsRead) {
915 // TODO not sure what to do here. Maybe it is actually optional, because post doesn't need it.
916 await HttpService.client.markPersonMentionAsRead(form);
919 async handleBanFromCommunity(form: BanFromCommunity) {
920 const banRes = await HttpService.client.banFromCommunity(form);
921 this.updateBan(banRes);
924 async handleBanPerson(form: BanPerson) {
925 const banRes = await HttpService.client.banPerson(form);
926 this.updateBan(banRes);
929 updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
930 // Maybe not necessary
931 if (banRes.state == "success") {
934 s.postRes.state == "success" &&
935 s.postRes.data.post_view.creator.id ==
936 banRes.data.person_view.person.id
938 s.postRes.data.post_view.creator_banned_from_community =
941 if (s.commentsRes.state == "success") {
942 s.commentsRes.data.comments
943 .filter(c => c.creator.id == banRes.data.person_view.person.id)
945 c => (c.creator_banned_from_community = banRes.data.banned)
953 updateBan(banRes: RequestState<BanPersonResponse>) {
954 // Maybe not necessary
955 if (banRes.state == "success") {
958 s.postRes.state == "success" &&
959 s.postRes.data.post_view.creator.id ==
960 banRes.data.person_view.person.id
962 s.postRes.data.post_view.creator.banned = banRes.data.banned;
964 if (s.commentsRes.state == "success") {
965 s.commentsRes.data.comments
966 .filter(c => c.creator.id == banRes.data.person_view.person.id)
967 .forEach(c => (c.creator.banned = banRes.data.banned));
974 updateCommunity(communityRes: RequestState<CommunityResponse>) {
976 if (s.postRes.state == "success" && communityRes.state == "success") {
977 s.postRes.data.community_view = communityRes.data.community_view;
983 updateCommunityFull(res: RequestState<GetCommunityResponse>) {
985 if (s.postRes.state == "success" && res.state == "success") {
986 s.postRes.data.community_view = res.data.community_view;
987 s.postRes.data.moderators = res.data.moderators;
993 updatePost(post: RequestState<PostResponse>) {
995 if (s.postRes.state == "success" && post.state == "success") {
996 s.postRes.data.post_view = post.data.post_view;
1002 purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
1003 if (purgeRes.state == "success") {
1004 toast(I18NextService.i18n.t("purge_success"));
1005 this.context.router.history.push(`/`);
1009 createAndUpdateComments(res: RequestState<CommentResponse>) {
1010 this.setState(s => {
1011 if (s.commentsRes.state === "success" && res.state === "success") {
1012 s.commentsRes.data.comments.unshift(res.data.comment_view);
1014 // Set finished for the parent
1016 getCommentParentId(res.data.comment_view.comment) ?? 0,
1024 findAndUpdateComment(res: RequestState<CommentResponse>) {
1025 this.setState(s => {
1026 if (s.commentsRes.state == "success" && res.state == "success") {
1027 s.commentsRes.data.comments = editComment(
1028 res.data.comment_view,
1029 s.commentsRes.data.comments
1031 s.finished.set(res.data.comment_view.comment.id, true);
1037 findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
1038 this.setState(s => {
1039 if (s.commentsRes.state == "success" && res.state == "success") {
1040 s.commentsRes.data.comments = editWith(
1041 res.data.comment_reply_view,
1042 s.commentsRes.data.comments
1049 updateModerators(res: RequestState<AddModToCommunityResponse>) {
1050 // Update the moderators
1051 this.setState(s => {
1052 if (s.postRes.state == "success" && res.state == "success") {
1053 s.postRes.data.moderators = res.data.moderators;