src/shared/components/post/post.tsx

   1 import autosize from "autosize";
   2 import { Component, createRef, linkEvent, RefObject } from "inferno";
   3 import {
   4   AddAdminResponse,
   5   AddModToCommunityResponse,
   6   BanFromCommunityResponse,
   7   BanPersonResponse,
   8   BlockPersonResponse,
   9   CommentReportResponse,
  10   CommentResponse,
  11   CommunityResponse,
  12   GetCommunityResponse,
  13   GetPost,
  14   GetPostResponse,
  15   GetSiteResponse,
  16   ListingType,
  17   MarkCommentAsRead,
  18   PostReportResponse,
  19   PostResponse,
  20   PostView,
  21   Search,
  22   SearchResponse,
  23   SearchType,
  24   SortType,
  25   UserOperation,
  26 } from "lemmy-js-client";
  27 import { Subscription } from "rxjs";
  28 import { i18n } from "../../i18next";
  29 import {
  30   CommentNode as CommentNodeI,
  31   CommentSortType,
  32   CommentViewType,
  33   InitialFetchRequest,
  34 } from "../../interfaces";
  35 import { UserService, WebSocketService } from "../../services";
  36 import {
  37   authField,
  38   buildCommentsTree,
  39   commentsToFlatNodes,
  40   createCommentLikeRes,
  41   createPostLikeRes,
  42   debounce,
  43   editCommentRes,
  44   getCommentIdFromProps,
  45   getIdFromProps,
  46   insertCommentIntoTree,
  47   isBrowser,
  48   isImage,
  49   previewLines,
  50   restoreScrollPosition,
  51   saveCommentRes,
  52   saveScrollPosition,
  53   setIsoData,
  54   setOptionalAuth,
  55   setupTippy,
  56   toast,
  57   updatePersonBlock,
  58   wsClient,
  59   wsJsonToRes,
  60   wsSubscribe,
  61   wsUserOp,
  62 } from "../../utils";
  63 import { CommentForm } from "../comment/comment-form";
  64 import { CommentNodes } from "../comment/comment-nodes";
  65 import { HtmlTags } from "../common/html-tags";
  66 import { Icon, Spinner } from "../common/icon";
  67 import { Sidebar } from "../community/sidebar";
  68 import { PostListing } from "./post-listing";
  69
  70 const commentsShownInterval = 15;
  71
  72 interface PostState {
  73   postRes: GetPostResponse;
  74   postId: number;
  75   commentTree: CommentNodeI[];
  76   commentId?: number;
  77   commentSort: CommentSortType;
  78   commentViewType: CommentViewType;
  79   scrolled?: boolean;
  80   loading: boolean;
  81   crossPosts: PostView[];
  82   siteRes: GetSiteResponse;
  83   commentSectionRef?: RefObject<HTMLDivElement>;
  84   showSidebarMobile: boolean;
  85   maxCommentsShown: number;
  86 }
  87
  88 export class Post extends Component<any, PostState> {
  89   private subscription: Subscription;
  90   private isoData = setIsoData(this.context);
  91   private commentScrollDebounced: () => void;
  92   private emptyState: PostState = {
  93     postRes: null,
  94     postId: getIdFromProps(this.props),
  95     commentTree: [],
  96     commentId: getCommentIdFromProps(this.props),
  97     commentSort: CommentSortType.Hot,
  98     commentViewType: CommentViewType.Tree,
  99     scrolled: false,
 100     loading: true,
 101     crossPosts: [],
 102     siteRes: this.isoData.site_res,
 103     commentSectionRef: null,
 104     showSidebarMobile: false,
 105     maxCommentsShown: commentsShownInterval,
 106   };
 107
 108   constructor(props: any, context: any) {
 109     super(props, context);
 110
 111     this.state = this.emptyState;
 112     this.state.commentSectionRef = createRef();
 113
 114     this.parseMessage = this.parseMessage.bind(this);
 115     this.subscription = wsSubscribe(this.parseMessage);
 116
 117     // Only fetch the data if coming from another route
 118     if (this.isoData.path == this.context.router.route.match.url) {
 119       this.state.postRes = this.isoData.routeData[0];
 120       this.state.commentTree = buildCommentsTree(
 121         this.state.postRes.comments,
 122         this.state.commentSort
 123       );
 124       this.state.loading = false;
 125
 126       if (isBrowser()) {
 127         this.fetchCrossPosts();
 128         if (this.state.commentId) {
 129           this.scrollCommentIntoView();
 130         }
 131
 132         if (this.checkScrollIntoCommentsParam) {
 133           this.scrollIntoCommentSection();
 134         }
 135       }
 136     } else {
 137       this.fetchPost();
 138     }
 139   }
 140
 141   fetchPost() {
 142     let form: GetPost = {
 143       id: this.state.postId,
 144       auth: authField(false),
 145     };
 146     WebSocketService.Instance.send(wsClient.getPost(form));
 147   }
 148
 149   fetchCrossPosts() {
 150     if (this.state.postRes.post_view.post.url) {
 151       let form: Search = {
 152         q: this.state.postRes.post_view.post.url,
 153         type_: SearchType.Url,
 154         sort: SortType.TopAll,
 155         listing_type: ListingType.All,
 156         page: 1,
 157         limit: 6,
 158         auth: authField(false),
 159       };
 160       WebSocketService.Instance.send(wsClient.search(form));
 161     }
 162   }
 163
 164   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 165     let pathSplit = req.path.split("/");
 166     let promises: Promise<any>[] = [];
 167
 168     let id = Number(pathSplit[2]);
 169
 170     let postForm: GetPost = {
 171       id,
 172     };
 173     setOptionalAuth(postForm, req.auth);
 174
 175     promises.push(req.client.getPost(postForm));
 176
 177     return promises;
 178   }
 179
 180   componentWillUnmount() {
 181     this.subscription.unsubscribe();
 182     document.removeEventListener("scroll", this.commentScrollDebounced);
 183
 184     window.isoData.path = undefined;
 185     saveScrollPosition(this.context);
 186   }
 187
 188   componentDidMount() {
 189     WebSocketService.Instance.send(
 190       wsClient.postJoin({ post_id: this.state.postId })
 191     );
 192     autosize(document.querySelectorAll("textarea"));
 193
 194     this.commentScrollDebounced = debounce(this.trackCommentsBoxScrolling, 100);
 195     document.addEventListener("scroll", this.commentScrollDebounced);
 196   }
 197
 198   componentDidUpdate(_lastProps: any) {
 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.
 202       location.reload();
 203
 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);
 208     }
 209   }
 210
 211   scrollCommentIntoView() {
 212     let commentElement = document.getElementById(
 213       `comment-${this.state.commentId}`
 214     );
 215     if (commentElement) {
 216       commentElement.scrollIntoView();
 217       commentElement.classList.add("mark");
 218       this.state.scrolled = true;
 219       this.markScrolledAsRead(this.state.commentId);
 220     }
 221   }
 222
 223   get checkScrollIntoCommentsParam() {
 224     return Boolean(
 225       new URLSearchParams(this.props.location.search).get("scrollToComments")
 226     );
 227   }
 228
 229   scrollIntoCommentSection() {
 230     this.state.commentSectionRef.current?.scrollIntoView();
 231   }
 232
 233   // TODO this needs some re-work
 234   markScrolledAsRead(commentId: number) {
 235     let found = this.state.postRes.comments.find(
 236       c => c.comment.id == commentId
 237     );
 238     let parent = this.state.postRes.comments.find(
 239       c => found.comment.parent_id == c.comment.id
 240     );
 241     let parent_person_id = parent
 242       ? parent.creator.id
 243       : this.state.postRes.post_view.creator.id;
 244
 245     if (
 246       UserService.Instance.myUserInfo &&
 247       UserService.Instance.myUserInfo.local_user_view.person.id ==
 248         parent_person_id
 249     ) {
 250       let form: MarkCommentAsRead = {
 251         comment_id: found.comment.id,
 252         read: true,
 253         auth: authField(),
 254       };
 255       WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
 256       UserService.Instance.unreadInboxCountSub.next(
 257         UserService.Instance.unreadInboxCountSub.value - 1
 258       );
 259     }
 260   }
 261
 262   isBottom(el: Element) {
 263     return el?.getBoundingClientRect().bottom <= window.innerHeight;
 264   }
 265
 266   /**
 267    * Shows new comments when scrolling to the bottom of the comments div
 268    */
 269   trackCommentsBoxScrolling = () => {
 270     const wrappedElement = document.getElementsByClassName("comments")[0];
 271     if (wrappedElement && this.isBottom(wrappedElement)) {
 272       this.state.maxCommentsShown += commentsShownInterval;
 273       this.setState(this.state);
 274     }
 275   };
 276
 277   get documentTitle(): string {
 278     return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
 279   }
 280
 281   get imageTag(): string {
 282     let post = this.state.postRes.post_view.post;
 283     return (
 284       post.thumbnail_url ||
 285       (post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
 286     );
 287   }
 288
 289   get descriptionTag(): string {
 290     let body = this.state.postRes.post_view.post.body;
 291     return body ? previewLines(body) : undefined;
 292   }
 293
 294   render() {
 295     let pv = this.state.postRes?.post_view;
 296     return (
 297       <div class="container">
 298         {this.state.loading ? (
 299           <h5>
 300             <Spinner large />
 301           </h5>
 302         ) : (
 303           <div class="row">
 304             <div class="col-12 col-md-8 mb-3">
 305               <HtmlTags
 306                 title={this.documentTitle}
 307                 path={this.context.router.route.match.url}
 308                 image={this.imageTag}
 309                 description={this.descriptionTag}
 310               />
 311               <PostListing
 312                 post_view={pv}
 313                 duplicates={this.state.crossPosts}
 314                 showBody
 315                 showCommunity
 316                 moderators={this.state.postRes.moderators}
 317                 admins={this.state.siteRes.admins}
 318                 enableDownvotes={
 319                   this.state.siteRes.site_view.site.enable_downvotes
 320                 }
 321                 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
 322               />
 323               <div ref={this.state.commentSectionRef} className="mb-2" />
 324               <CommentForm
 325                 postId={this.state.postId}
 326                 disabled={pv.post.locked}
 327               />
 328               <div class="d-block d-md-none">
 329                 <button
 330                   class="btn btn-secondary d-inline-block mb-2 mr-3"
 331                   onClick={linkEvent(this, this.handleShowSidebarMobile)}
 332                 >
 333                   {i18n.t("sidebar")}{" "}
 334                   <Icon
 335                     icon={
 336                       this.state.showSidebarMobile
 337                         ? `minus-square`
 338                         : `plus-square`
 339                     }
 340                     classes="icon-inline"
 341                   />
 342                 </button>
 343                 {this.state.showSidebarMobile && this.sidebar()}
 344               </div>
 345               {this.state.postRes.comments.length > 0 && this.sortRadios()}
 346               {this.state.commentViewType == CommentViewType.Tree &&
 347                 this.commentsTree()}
 348               {this.state.commentViewType == CommentViewType.Chat &&
 349                 this.commentsFlat()}
 350             </div>
 351             <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
 352           </div>
 353         )}
 354       </div>
 355     );
 356   }
 357
 358   sortRadios() {
 359     return (
 360       <>
 361         <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
 362           <label
 363             className={`btn btn-outline-secondary pointer ${
 364               this.state.commentSort === CommentSortType.Hot && "active"
 365             }`}
 366           >
 367             {i18n.t("hot")}
 368             <input
 369               type="radio"
 370               value={CommentSortType.Hot}
 371               checked={this.state.commentSort === CommentSortType.Hot}
 372               onChange={linkEvent(this, this.handleCommentSortChange)}
 373             />
 374           </label>
 375           <label
 376             className={`btn btn-outline-secondary pointer ${
 377               this.state.commentSort === CommentSortType.Top && "active"
 378             }`}
 379           >
 380             {i18n.t("top")}
 381             <input
 382               type="radio"
 383               value={CommentSortType.Top}
 384               checked={this.state.commentSort === CommentSortType.Top}
 385               onChange={linkEvent(this, this.handleCommentSortChange)}
 386             />
 387           </label>
 388           <label
 389             className={`btn btn-outline-secondary pointer ${
 390               this.state.commentSort === CommentSortType.New && "active"
 391             }`}
 392           >
 393             {i18n.t("new")}
 394             <input
 395               type="radio"
 396               value={CommentSortType.New}
 397               checked={this.state.commentSort === CommentSortType.New}
 398               onChange={linkEvent(this, this.handleCommentSortChange)}
 399             />
 400           </label>
 401           <label
 402             className={`btn btn-outline-secondary pointer ${
 403               this.state.commentSort === CommentSortType.Old && "active"
 404             }`}
 405           >
 406             {i18n.t("old")}
 407             <input
 408               type="radio"
 409               value={CommentSortType.Old}
 410               checked={this.state.commentSort === CommentSortType.Old}
 411               onChange={linkEvent(this, this.handleCommentSortChange)}
 412             />
 413           </label>
 414         </div>
 415         <div class="btn-group btn-group-toggle flex-wrap mb-2">
 416           <label
 417             className={`btn btn-outline-secondary pointer ${
 418               this.state.commentViewType === CommentViewType.Chat && "active"
 419             }`}
 420           >
 421             {i18n.t("chat")}
 422             <input
 423               type="radio"
 424               value={CommentViewType.Chat}
 425               checked={this.state.commentViewType === CommentViewType.Chat}
 426               onChange={linkEvent(this, this.handleCommentViewTypeChange)}
 427             />
 428           </label>
 429         </div>
 430       </>
 431     );
 432   }
 433
 434   commentsFlat() {
 435     // These are already sorted by new
 436     return (
 437       <div>
 438         <CommentNodes
 439           nodes={commentsToFlatNodes(this.state.postRes.comments)}
 440           maxCommentsShown={this.state.maxCommentsShown}
 441           noIndent
 442           locked={this.state.postRes.post_view.post.locked}
 443           moderators={this.state.postRes.moderators}
 444           admins={this.state.siteRes.admins}
 445           postCreatorId={this.state.postRes.post_view.creator.id}
 446           showContext
 447           enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
 448         />
 449       </div>
 450     );
 451   }
 452
 453   sidebar() {
 454     return (
 455       <div class="mb-3">
 456         <Sidebar
 457           community_view={this.state.postRes.community_view}
 458           moderators={this.state.postRes.moderators}
 459           admins={this.state.siteRes.admins}
 460           online={this.state.postRes.online}
 461           enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
 462           showIcon
 463         />
 464       </div>
 465     );
 466   }
 467
 468   handleCommentSortChange(i: Post, event: any) {
 469     i.state.commentSort = Number(event.target.value);
 470     i.state.commentViewType = CommentViewType.Tree;
 471     i.state.commentTree = buildCommentsTree(
 472       i.state.postRes.comments,
 473       i.state.commentSort
 474     );
 475     i.setState(i.state);
 476   }
 477
 478   handleCommentViewTypeChange(i: Post, event: any) {
 479     i.state.commentViewType = Number(event.target.value);
 480     i.state.commentSort = CommentSortType.New;
 481     i.state.commentTree = buildCommentsTree(
 482       i.state.postRes.comments,
 483       i.state.commentSort
 484     );
 485     i.setState(i.state);
 486   }
 487
 488   handleShowSidebarMobile(i: Post) {
 489     i.state.showSidebarMobile = !i.state.showSidebarMobile;
 490     i.setState(i.state);
 491   }
 492
 493   commentsTree() {
 494     return (
 495       <div>
 496         <CommentNodes
 497           nodes={this.state.commentTree}
 498           maxCommentsShown={this.state.maxCommentsShown}
 499           locked={this.state.postRes.post_view.post.locked}
 500           moderators={this.state.postRes.moderators}
 501           admins={this.state.siteRes.admins}
 502           postCreatorId={this.state.postRes.post_view.creator.id}
 503           enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
 504         />
 505       </div>
 506     );
 507   }
 508
 509   parseMessage(msg: any) {
 510     let op = wsUserOp(msg);
 511     console.log(msg);
 512     if (msg.error) {
 513       toast(i18n.t(msg.error), "danger");
 514       return;
 515     } else if (msg.reconnect) {
 516       let postId = Number(this.props.match.params.id);
 517       WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
 518       WebSocketService.Instance.send(
 519         wsClient.getPost({
 520           id: postId,
 521           auth: authField(false),
 522         })
 523       );
 524     } else if (op == UserOperation.GetPost) {
 525       let data = wsJsonToRes<GetPostResponse>(msg).data;
 526       this.state.postRes = data;
 527       this.state.commentTree = buildCommentsTree(
 528         this.state.postRes.comments,
 529         this.state.commentSort
 530       );
 531       this.state.loading = false;
 532
 533       // Get cross-posts
 534       this.fetchCrossPosts();
 535       this.setState(this.state);
 536       setupTippy();
 537       if (!this.state.commentId) restoreScrollPosition(this.context);
 538
 539       if (this.checkScrollIntoCommentsParam) {
 540         this.scrollIntoCommentSection();
 541       }
 542
 543       if (this.state.commentId && !this.state.scrolled) {
 544         this.scrollCommentIntoView();
 545       }
 546     } else if (op == UserOperation.CreateComment) {
 547       let data = wsJsonToRes<CommentResponse>(msg).data;
 548
 549       // Don't get comments from the post room, if the creator is blocked
 550       let creatorBlocked = UserService.Instance.myUserInfo?.person_blocks
 551         .map(pb => pb.target.id)
 552         .includes(data.comment_view.creator.id);
 553
 554       // Necessary since it might be a user reply, which has the recipients, to avoid double
 555       if (data.recipient_ids.length == 0 && !creatorBlocked) {
 556         this.state.postRes.comments.unshift(data.comment_view);
 557         insertCommentIntoTree(this.state.commentTree, data.comment_view);
 558         this.state.postRes.post_view.counts.comments++;
 559         this.setState(this.state);
 560         setupTippy();
 561       }
 562     } else if (
 563       op == UserOperation.EditComment ||
 564       op == UserOperation.DeleteComment ||
 565       op == UserOperation.RemoveComment
 566     ) {
 567       let data = wsJsonToRes<CommentResponse>(msg).data;
 568       editCommentRes(data.comment_view, this.state.postRes.comments);
 569       this.setState(this.state);
 570     } else if (op == UserOperation.SaveComment) {
 571       let data = wsJsonToRes<CommentResponse>(msg).data;
 572       saveCommentRes(data.comment_view, this.state.postRes.comments);
 573       this.setState(this.state);
 574       setupTippy();
 575     } else if (op == UserOperation.CreateCommentLike) {
 576       let data = wsJsonToRes<CommentResponse>(msg).data;
 577       createCommentLikeRes(data.comment_view, this.state.postRes.comments);
 578       this.setState(this.state);
 579     } else if (op == UserOperation.CreatePostLike) {
 580       let data = wsJsonToRes<PostResponse>(msg).data;
 581       createPostLikeRes(data.post_view, this.state.postRes.post_view);
 582       this.setState(this.state);
 583     } else if (
 584       op == UserOperation.EditPost ||
 585       op == UserOperation.DeletePost ||
 586       op == UserOperation.RemovePost ||
 587       op == UserOperation.LockPost ||
 588       op == UserOperation.StickyPost ||
 589       op == UserOperation.SavePost
 590     ) {
 591       let data = wsJsonToRes<PostResponse>(msg).data;
 592       this.state.postRes.post_view = data.post_view;
 593       this.setState(this.state);
 594       setupTippy();
 595     } else if (
 596       op == UserOperation.EditCommunity ||
 597       op == UserOperation.DeleteCommunity ||
 598       op == UserOperation.RemoveCommunity ||
 599       op == UserOperation.FollowCommunity
 600     ) {
 601       let data = wsJsonToRes<CommunityResponse>(msg).data;
 602       this.state.postRes.community_view = data.community_view;
 603       this.state.postRes.post_view.community = data.community_view.community;
 604       this.setState(this.state);
 605       this.setState(this.state);
 606     } else if (op == UserOperation.BanFromCommunity) {
 607       let data = wsJsonToRes<BanFromCommunityResponse>(msg).data;
 608       this.state.postRes.comments
 609         .filter(c => c.creator.id == data.person_view.person.id)
 610         .forEach(c => (c.creator_banned_from_community = data.banned));
 611       if (
 612         this.state.postRes.post_view.creator.id == data.person_view.person.id
 613       ) {
 614         this.state.postRes.post_view.creator_banned_from_community =
 615           data.banned;
 616       }
 617       this.setState(this.state);
 618     } else if (op == UserOperation.AddModToCommunity) {
 619       let data = wsJsonToRes<AddModToCommunityResponse>(msg).data;
 620       this.state.postRes.moderators = data.moderators;
 621       this.setState(this.state);
 622     } else if (op == UserOperation.BanPerson) {
 623       let data = wsJsonToRes<BanPersonResponse>(msg).data;
 624       this.state.postRes.comments
 625         .filter(c => c.creator.id == data.person_view.person.id)
 626         .forEach(c => (c.creator.banned = data.banned));
 627       if (
 628         this.state.postRes.post_view.creator.id == data.person_view.person.id
 629       ) {
 630         this.state.postRes.post_view.creator.banned = data.banned;
 631       }
 632       this.setState(this.state);
 633     } else if (op == UserOperation.AddAdmin) {
 634       let data = wsJsonToRes<AddAdminResponse>(msg).data;
 635       this.state.siteRes.admins = data.admins;
 636       this.setState(this.state);
 637     } else if (op == UserOperation.Search) {
 638       let data = wsJsonToRes<SearchResponse>(msg).data;
 639       this.state.crossPosts = data.posts.filter(
 640         p => p.post.id != Number(this.props.match.params.id)
 641       );
 642       this.setState(this.state);
 643     } else if (op == UserOperation.LeaveAdmin) {
 644       let data = wsJsonToRes<GetSiteResponse>(msg).data;
 645       this.state.siteRes = data;
 646       this.setState(this.state);
 647     } else if (op == UserOperation.TransferCommunity) {
 648       let data = wsJsonToRes<GetCommunityResponse>(msg).data;
 649       this.state.postRes.community_view = data.community_view;
 650       this.state.postRes.post_view.community = data.community_view.community;
 651       this.state.postRes.moderators = data.moderators;
 652       this.setState(this.state);
 653     } else if (op == UserOperation.BlockPerson) {
 654       let data = wsJsonToRes<BlockPersonResponse>(msg).data;
 655       updatePersonBlock(data);
 656     } else if (op == UserOperation.CreatePostReport) {
 657       let data = wsJsonToRes<PostReportResponse>(msg).data;
 658       if (data) {
 659         toast(i18n.t("report_created"));
 660       }
 661     } else if (op == UserOperation.CreateCommentReport) {
 662       let data = wsJsonToRes<CommentReportResponse>(msg).data;
 663       if (data) {
 664         toast(i18n.t("report_created"));
 665       }
 666     }
 667   }
 668 }