src/shared/components/post/post.tsx

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