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, lastState: PostState) {
 199     if (
 200       this.state.commentId &&
 201       !this.state.scrolled &&
 202       lastState.postRes &&
 203       lastState.postRes.comments.length > 0
 204     ) {
 205       this.scrollCommentIntoView();
 206     }
 207
 208     // Necessary if you are on a post and you click another post (same route)
 209     if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
 210       // TODO Couldnt get a refresh working. This does for now.
 211       location.reload();
 212
 213       // let currentId = this.props.match.params.id;
 214       // WebSocketService.Instance.getPost(currentId);
 215       // this.context.refresh();
 216       // this.context.router.history.push(_lastProps.location.pathname);
 217     }
 218   }
 219
 220   scrollCommentIntoView() {
 221     let commentElement = document.getElementById(
 222       `comment-${this.state.commentId}`
 223     );
 224     if (commentElement) {
 225       commentElement.scrollIntoView();
 226       commentElement.classList.add("mark");
 227       this.state.scrolled = true;
 228       this.markScrolledAsRead(this.state.commentId);
 229     }
 230   }
 231
 232   get checkScrollIntoCommentsParam() {
 233     return Boolean(
 234       new URLSearchParams(this.props.location.search).get("scrollToComments")
 235     );
 236   }
 237
 238   scrollIntoCommentSection() {
 239     this.state.commentSectionRef.current?.scrollIntoView();
 240   }
 241
 242   // TODO this needs some re-work
 243   markScrolledAsRead(commentId: number) {
 244     let found = this.state.postRes.comments.find(
 245       c => c.comment.id == commentId
 246     );
 247     let parent = this.state.postRes.comments.find(
 248       c => found.comment.parent_id == c.comment.id
 249     );
 250     let parent_person_id = parent
 251       ? parent.creator.id
 252       : this.state.postRes.post_view.creator.id;
 253
 254     if (
 255       UserService.Instance.myUserInfo &&
 256       UserService.Instance.myUserInfo.local_user_view.person.id ==
 257         parent_person_id
 258     ) {
 259       let form: MarkCommentAsRead = {
 260         comment_id: found.comment.id,
 261         read: true,
 262         auth: authField(),
 263       };
 264       WebSocketService.Instance.send(wsClient.markCommentAsRead(form));
 265       UserService.Instance.unreadInboxCountSub.next(
 266         UserService.Instance.unreadInboxCountSub.value - 1
 267       );
 268     }
 269   }
 270
 271   isBottom(el: Element) {
 272     return el.getBoundingClientRect().bottom <= window.innerHeight;
 273   }
 274
 275   /**
 276    * Shows new comments when scrolling to the bottom of the comments div
 277    */
 278   trackCommentsBoxScrolling = () => {
 279     const wrappedElement = document.getElementsByClassName("comments")[0];
 280     if (this.isBottom(wrappedElement)) {
 281       this.state.maxCommentsShown += commentsShownInterval;
 282       this.setState(this.state);
 283     }
 284   };
 285
 286   get documentTitle(): string {
 287     return `${this.state.postRes.post_view.post.name} - ${this.state.siteRes.site_view.site.name}`;
 288   }
 289
 290   get imageTag(): string {
 291     let post = this.state.postRes.post_view.post;
 292     return (
 293       post.thumbnail_url ||
 294       (post.url ? (isImage(post.url) ? post.url : undefined) : undefined)
 295     );
 296   }
 297
 298   get descriptionTag(): string {
 299     let body = this.state.postRes.post_view.post.body;
 300     return body ? previewLines(body) : undefined;
 301   }
 302
 303   render() {
 304     let pv = this.state.postRes?.post_view;
 305     return (
 306       <div class="container">
 307         {this.state.loading ? (
 308           <h5>
 309             <Spinner large />
 310           </h5>
 311         ) : (
 312           <div class="row">
 313             <div class="col-12 col-md-8 mb-3">
 314               <HtmlTags
 315                 title={this.documentTitle}
 316                 path={this.context.router.route.match.url}
 317                 image={this.imageTag}
 318                 description={this.descriptionTag}
 319               />
 320               <PostListing
 321                 post_view={pv}
 322                 duplicates={this.state.crossPosts}
 323                 showBody
 324                 showCommunity
 325                 moderators={this.state.postRes.moderators}
 326                 admins={this.state.siteRes.admins}
 327                 enableDownvotes={
 328                   this.state.siteRes.site_view.site.enable_downvotes
 329                 }
 330                 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
 331               />
 332               <div ref={this.state.commentSectionRef} className="mb-2" />
 333               <CommentForm
 334                 postId={this.state.postId}
 335                 disabled={pv.post.locked}
 336               />
 337               <div class="d-block d-md-none">
 338                 <button
 339                   class="btn btn-secondary d-inline-block mb-2 mr-3"
 340                   onClick={linkEvent(this, this.handleShowSidebarMobile)}
 341                 >
 342                   {i18n.t("sidebar")}{" "}
 343                   <Icon
 344                     icon={
 345                       this.state.showSidebarMobile
 346                         ? `minus-square`
 347                         : `plus-square`
 348                     }
 349                     classes="icon-inline"
 350                   />
 351                 </button>
 352                 {this.state.showSidebarMobile && this.sidebar()}
 353               </div>
 354               {this.state.postRes.comments.length > 0 && this.sortRadios()}
 355               {this.state.commentViewType == CommentViewType.Tree &&
 356                 this.commentsTree()}
 357               {this.state.commentViewType == CommentViewType.Chat &&
 358                 this.commentsFlat()}
 359             </div>
 360             <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
 361           </div>
 362         )}
 363       </div>
 364     );
 365   }
 366
 367   sortRadios() {
 368     return (
 369       <>
 370         <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
 371           <label
 372             className={`btn btn-outline-secondary pointer ${
 373               this.state.commentSort === CommentSortType.Hot && "active"
 374             }`}
 375           >
 376             {i18n.t("hot")}
 377             <input
 378               type="radio"
 379               value={CommentSortType.Hot}
 380               checked={this.state.commentSort === CommentSortType.Hot}
 381               onChange={linkEvent(this, this.handleCommentSortChange)}
 382             />
 383           </label>
 384           <label
 385             className={`btn btn-outline-secondary pointer ${
 386               this.state.commentSort === CommentSortType.Top && "active"
 387             }`}
 388           >
 389             {i18n.t("top")}
 390             <input
 391               type="radio"
 392               value={CommentSortType.Top}
 393               checked={this.state.commentSort === CommentSortType.Top}
 394               onChange={linkEvent(this, this.handleCommentSortChange)}
 395             />
 396           </label>
 397           <label
 398             className={`btn btn-outline-secondary pointer ${
 399               this.state.commentSort === CommentSortType.New && "active"
 400             }`}
 401           >
 402             {i18n.t("new")}
 403             <input
 404               type="radio"
 405               value={CommentSortType.New}
 406               checked={this.state.commentSort === CommentSortType.New}
 407               onChange={linkEvent(this, this.handleCommentSortChange)}
 408             />
 409           </label>
 410           <label
 411             className={`btn btn-outline-secondary pointer ${
 412               this.state.commentSort === CommentSortType.Old && "active"
 413             }`}
 414           >
 415             {i18n.t("old")}
 416             <input
 417               type="radio"
 418               value={CommentSortType.Old}
 419               checked={this.state.commentSort === CommentSortType.Old}
 420               onChange={linkEvent(this, this.handleCommentSortChange)}
 421             />
 422           </label>
 423         </div>
 424         <div class="btn-group btn-group-toggle flex-wrap mb-2">
 425           <label
 426             className={`btn btn-outline-secondary pointer ${
 427               this.state.commentViewType === CommentViewType.Chat && "active"
 428             }`}
 429           >
 430             {i18n.t("chat")}
 431             <input
 432               type="radio"
 433               value={CommentViewType.Chat}
 434               checked={this.state.commentViewType === CommentViewType.Chat}
 435               onChange={linkEvent(this, this.handleCommentViewTypeChange)}
 436             />
 437           </label>
 438         </div>
 439       </>
 440     );
 441   }
 442
 443   commentsFlat() {
 444     // These are already sorted by new
 445     return (
 446       <div>
 447         <CommentNodes
 448           nodes={commentsToFlatNodes(this.state.postRes.comments)}
 449           maxCommentsShown={this.state.maxCommentsShown}
 450           noIndent
 451           locked={this.state.postRes.post_view.post.locked}
 452           moderators={this.state.postRes.moderators}
 453           admins={this.state.siteRes.admins}
 454           postCreatorId={this.state.postRes.post_view.creator.id}
 455           showContext
 456           enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
 457         />
 458       </div>
 459     );
 460   }
 461
 462   sidebar() {
 463     return (
 464       <div class="mb-3">
 465         <Sidebar
 466           community_view={this.state.postRes.community_view}
 467           moderators={this.state.postRes.moderators}
 468           admins={this.state.siteRes.admins}
 469           online={this.state.postRes.online}
 470           enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
 471           showIcon
 472         />
 473       </div>
 474     );
 475   }
 476
 477   handleCommentSortChange(i: Post, event: any) {
 478     i.state.commentSort = Number(event.target.value);
 479     i.state.commentViewType = CommentViewType.Tree;
 480     i.state.commentTree = buildCommentsTree(
 481       i.state.postRes.comments,
 482       i.state.commentSort
 483     );
 484     i.setState(i.state);
 485   }
 486
 487   handleCommentViewTypeChange(i: Post, event: any) {
 488     i.state.commentViewType = Number(event.target.value);
 489     i.state.commentSort = CommentSortType.New;
 490     i.state.commentTree = buildCommentsTree(
 491       i.state.postRes.comments,
 492       i.state.commentSort
 493     );
 494     i.setState(i.state);
 495   }
 496
 497   handleShowSidebarMobile(i: Post) {
 498     i.state.showSidebarMobile = !i.state.showSidebarMobile;
 499     i.setState(i.state);
 500   }
 501
 502   commentsTree() {
 503     return (
 504       <div>
 505         <CommentNodes
 506           nodes={this.state.commentTree}
 507           maxCommentsShown={this.state.maxCommentsShown}
 508           locked={this.state.postRes.post_view.post.locked}
 509           moderators={this.state.postRes.moderators}
 510           admins={this.state.siteRes.admins}
 511           postCreatorId={this.state.postRes.post_view.creator.id}
 512           enableDownvotes={this.state.siteRes.site_view.site.enable_downvotes}
 513         />
 514       </div>
 515     );
 516   }
 517
 518   parseMessage(msg: any) {
 519     let op = wsUserOp(msg);
 520     console.log(msg);
 521     if (msg.error) {
 522       toast(i18n.t(msg.error), "danger");
 523       return;
 524     } else if (msg.reconnect) {
 525       let postId = Number(this.props.match.params.id);
 526       WebSocketService.Instance.send(wsClient.postJoin({ post_id: postId }));
 527       WebSocketService.Instance.send(
 528         wsClient.getPost({
 529           id: postId,
 530           auth: authField(false),
 531         })
 532       );
 533     } else if (op == UserOperation.GetPost) {
 534       let data = wsJsonToRes<GetPostResponse>(msg).data;
 535       this.state.postRes = data;
 536       this.state.commentTree = buildCommentsTree(
 537         this.state.postRes.comments,
 538         this.state.commentSort
 539       );
 540       this.state.loading = false;
 541
 542       // Get cross-posts
 543       this.fetchCrossPosts();
 544       this.setState(this.state);
 545       setupTippy();
 546       if (!this.state.commentId) restoreScrollPosition(this.context);
 547
 548       if (this.checkScrollIntoCommentsParam) {
 549         this.scrollIntoCommentSection();
 550       }
 551     } else if (op == UserOperation.CreateComment) {
 552       let data = wsJsonToRes<CommentResponse>(msg).data;
 553
 554       // Necessary since it might be a user reply, which has the recipients, to avoid double
 555       if (data.recipient_ids.length == 0) {
 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.TransferSite) {
 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 }