ui/src/components/post.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import {
   5   UserOperation,
   6   Community,
   7   Post as PostI,
   8   GetPostResponse,
   9   PostResponse,
  10   Comment,
  11   MarkCommentAsReadForm,
  12   CommentResponse,
  13   CommentSortType,
  14   CommentViewType,
  15   CommunityUser,
  16   CommunityResponse,
  17   CommentNode as CommentNodeI,
  18   BanFromCommunityResponse,
  19   BanUserResponse,
  20   AddModToCommunityResponse,
  21   AddAdminResponse,
  22   SearchType,
  23   SortType,
  24   SearchForm,
  25   GetPostForm,
  26   SearchResponse,
  27   GetSiteResponse,
  28   GetCommunityResponse,
  29   WebSocketJsonResponse,
  30 } from '../interfaces';
  31 import { WebSocketService, UserService } from '../services';
  32 import {
  33   wsJsonToRes,
  34   toast,
  35   editCommentRes,
  36   saveCommentRes,
  37   createCommentLikeRes,
  38   createPostLikeRes,
  39   commentsToFlatNodes,
  40   setupTippy,
  41 } from '../utils';
  42 import { PostListing } from './post-listing';
  43 import { Sidebar } from './sidebar';
  44 import { CommentForm } from './comment-form';
  45 import { CommentNodes } from './comment-nodes';
  46 import autosize from 'autosize';
  47 import { i18n } from '../i18next';
  48
  49 interface PostState {
  50   post: PostI;
  51   comments: Array<Comment>;
  52   commentSort: CommentSortType;
  53   commentViewType: CommentViewType;
  54   community: Community;
  55   moderators: Array<CommunityUser>;
  56   online: number;
  57   scrolled?: boolean;
  58   scrolled_comment_id?: number;
  59   loading: boolean;
  60   crossPosts: Array<PostI>;
  61   siteRes: GetSiteResponse;
  62 }
  63
  64 export class Post extends Component<any, PostState> {
  65   private subscription: Subscription;
  66   private emptyState: PostState = {
  67     post: null,
  68     comments: [],
  69     commentSort: CommentSortType.Hot,
  70     commentViewType: CommentViewType.Tree,
  71     community: null,
  72     moderators: [],
  73     online: null,
  74     scrolled: false,
  75     loading: true,
  76     crossPosts: [],
  77     siteRes: {
  78       admins: [],
  79       banned: [],
  80       site: {
  81         id: undefined,
  82         name: undefined,
  83         creator_id: undefined,
  84         published: undefined,
  85         creator_name: undefined,
  86         number_of_users: undefined,
  87         number_of_posts: undefined,
  88         number_of_comments: undefined,
  89         number_of_communities: undefined,
  90         enable_downvotes: undefined,
  91         open_registration: undefined,
  92         enable_nsfw: undefined,
  93       },
  94       online: null,
  95     },
  96   };
  97
  98   constructor(props: any, context: any) {
  99     super(props, context);
 100
 101     this.state = this.emptyState;
 102
 103     let postId = Number(this.props.match.params.id);
 104     if (this.props.match.params.comment_id) {
 105       this.state.scrolled_comment_id = this.props.match.params.comment_id;
 106     }
 107
 108     this.subscription = WebSocketService.Instance.subject
 109       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 110       .subscribe(
 111         msg => this.parseMessage(msg),
 112         err => console.error(err),
 113         () => console.log('complete')
 114       );
 115
 116     let form: GetPostForm = {
 117       id: postId,
 118     };
 119     WebSocketService.Instance.getPost(form);
 120     WebSocketService.Instance.getSite();
 121   }
 122
 123   componentWillUnmount() {
 124     this.subscription.unsubscribe();
 125   }
 126
 127   componentDidMount() {
 128     autosize(document.querySelectorAll('textarea'));
 129   }
 130
 131   componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
 132     if (
 133       this.state.scrolled_comment_id &&
 134       !this.state.scrolled &&
 135       lastState.comments.length > 0
 136     ) {
 137       var elmnt = document.getElementById(
 138         `comment-${this.state.scrolled_comment_id}`
 139       );
 140       elmnt.scrollIntoView();
 141       elmnt.classList.add('mark');
 142       this.state.scrolled = true;
 143       this.markScrolledAsRead(this.state.scrolled_comment_id);
 144     }
 145
 146     // Necessary if you are on a post and you click another post (same route)
 147     if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
 148       // Couldnt get a refresh working. This does for now.
 149       location.reload();
 150
 151       // let currentId = this.props.match.params.id;
 152       // WebSocketService.Instance.getPost(currentId);
 153       // this.context.router.history.push('/sponsors');
 154       // this.context.refresh();
 155       // this.context.router.history.push(_lastProps.location.pathname);
 156     }
 157   }
 158
 159   markScrolledAsRead(commentId: number) {
 160     let found = this.state.comments.find(c => c.id == commentId);
 161     let parent = this.state.comments.find(c => found.parent_id == c.id);
 162     let parent_user_id = parent
 163       ? parent.creator_id
 164       : this.state.post.creator_id;
 165
 166     if (
 167       UserService.Instance.user &&
 168       UserService.Instance.user.id == parent_user_id
 169     ) {
 170       let form: MarkCommentAsReadForm = {
 171         edit_id: found.id,
 172         read: true,
 173         auth: null,
 174       };
 175       WebSocketService.Instance.markCommentAsRead(form);
 176       UserService.Instance.user.unreadCount--;
 177       UserService.Instance.sub.next({
 178         user: UserService.Instance.user,
 179       });
 180     }
 181   }
 182
 183   render() {
 184     return (
 185       <div class="container">
 186         {this.state.loading ? (
 187           <h5>
 188             <svg class="icon icon-spinner spin">
 189               <use xlinkHref="#icon-spinner"></use>
 190             </svg>
 191           </h5>
 192         ) : (
 193           <div class="row">
 194             <div class="col-12 col-md-8 mb-3">
 195               <PostListing
 196                 post={this.state.post}
 197                 showBody
 198                 showCommunity
 199                 moderators={this.state.moderators}
 200                 admins={this.state.siteRes.admins}
 201                 enableDownvotes={this.state.siteRes.site.enable_downvotes}
 202                 enableNsfw={this.state.siteRes.site.enable_nsfw}
 203               />
 204               <div className="mb-2" />
 205               <CommentForm
 206                 postId={this.state.post.id}
 207                 disabled={this.state.post.locked}
 208               />
 209               {this.state.comments.length > 0 && this.sortRadios()}
 210               {this.state.commentViewType == CommentViewType.Tree &&
 211                 this.commentsTree()}
 212               {this.state.commentViewType == CommentViewType.Chat &&
 213                 this.commentsFlat()}
 214             </div>
 215             <div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
 216           </div>
 217         )}
 218       </div>
 219     );
 220   }
 221
 222   sortRadios() {
 223     return (
 224       <>
 225         <div class="btn-group btn-group-toggle mr-3 mb-2">
 226           <label
 227             className={`btn btn-sm btn-secondary pointer ${
 228               this.state.commentSort === CommentSortType.Hot && 'active'
 229             }`}
 230           >
 231             {i18n.t('hot')}
 232             <input
 233               type="radio"
 234               value={CommentSortType.Hot}
 235               checked={this.state.commentSort === CommentSortType.Hot}
 236               onChange={linkEvent(this, this.handleCommentSortChange)}
 237             />
 238           </label>
 239           <label
 240             className={`btn btn-sm btn-secondary pointer ${
 241               this.state.commentSort === CommentSortType.Top && 'active'
 242             }`}
 243           >
 244             {i18n.t('top')}
 245             <input
 246               type="radio"
 247               value={CommentSortType.Top}
 248               checked={this.state.commentSort === CommentSortType.Top}
 249               onChange={linkEvent(this, this.handleCommentSortChange)}
 250             />
 251           </label>
 252           <label
 253             className={`btn btn-sm btn-secondary pointer ${
 254               this.state.commentSort === CommentSortType.New && 'active'
 255             }`}
 256           >
 257             {i18n.t('new')}
 258             <input
 259               type="radio"
 260               value={CommentSortType.New}
 261               checked={this.state.commentSort === CommentSortType.New}
 262               onChange={linkEvent(this, this.handleCommentSortChange)}
 263             />
 264           </label>
 265           <label
 266             className={`btn btn-sm btn-secondary pointer ${
 267               this.state.commentSort === CommentSortType.Old && 'active'
 268             }`}
 269           >
 270             {i18n.t('old')}
 271             <input
 272               type="radio"
 273               value={CommentSortType.Old}
 274               checked={this.state.commentSort === CommentSortType.Old}
 275               onChange={linkEvent(this, this.handleCommentSortChange)}
 276             />
 277           </label>
 278         </div>
 279         <div class="btn-group btn-group-toggle mb-2">
 280           <label
 281             className={`btn btn-sm btn-secondary pointer ${
 282               this.state.commentViewType === CommentViewType.Chat && 'active'
 283             }`}
 284           >
 285             {i18n.t('chat')}
 286             <input
 287               type="radio"
 288               value={CommentViewType.Chat}
 289               checked={this.state.commentViewType === CommentViewType.Chat}
 290               onChange={linkEvent(this, this.handleCommentViewTypeChange)}
 291             />
 292           </label>
 293         </div>
 294       </>
 295     );
 296   }
 297
 298   commentsFlat() {
 299     return (
 300       <div>
 301         <CommentNodes
 302           nodes={commentsToFlatNodes(this.state.comments)}
 303           noIndent
 304           locked={this.state.post.locked}
 305           moderators={this.state.moderators}
 306           admins={this.state.siteRes.admins}
 307           postCreatorId={this.state.post.creator_id}
 308           showContext
 309           enableDownvotes={this.state.siteRes.site.enable_downvotes}
 310           sort={this.state.commentSort}
 311         />
 312       </div>
 313     );
 314   }
 315
 316   sidebar() {
 317     return (
 318       <div class="mb-3">
 319         <Sidebar
 320           community={this.state.community}
 321           moderators={this.state.moderators}
 322           admins={this.state.siteRes.admins}
 323           online={this.state.online}
 324           enableNsfw={this.state.siteRes.site.enable_nsfw}
 325         />
 326       </div>
 327     );
 328   }
 329
 330   handleCommentSortChange(i: Post, event: any) {
 331     i.state.commentSort = Number(event.target.value);
 332     i.state.commentViewType = CommentViewType.Tree;
 333     i.setState(i.state);
 334   }
 335
 336   handleCommentViewTypeChange(i: Post, event: any) {
 337     i.state.commentViewType = Number(event.target.value);
 338     i.state.commentSort = CommentSortType.New;
 339     i.setState(i.state);
 340   }
 341
 342   buildCommentsTree(): Array<CommentNodeI> {
 343     let map = new Map<number, CommentNodeI>();
 344     for (let comment of this.state.comments) {
 345       let node: CommentNodeI = {
 346         comment: comment,
 347         children: [],
 348       };
 349       map.set(comment.id, { ...node });
 350     }
 351     let tree: Array<CommentNodeI> = [];
 352     for (let comment of this.state.comments) {
 353       let child = map.get(comment.id);
 354       if (comment.parent_id) {
 355         let parent_ = map.get(comment.parent_id);
 356         parent_.children.push(child);
 357       } else {
 358         tree.push(child);
 359       }
 360
 361       this.setDepth(child);
 362     }
 363
 364     return tree;
 365   }
 366
 367   setDepth(node: CommentNodeI, i: number = 0): void {
 368     for (let child of node.children) {
 369       child.comment.depth = i;
 370       this.setDepth(child, i + 1);
 371     }
 372   }
 373
 374   commentsTree() {
 375     let nodes = this.buildCommentsTree();
 376     return (
 377       <div>
 378         <CommentNodes
 379           nodes={nodes}
 380           locked={this.state.post.locked}
 381           moderators={this.state.moderators}
 382           admins={this.state.siteRes.admins}
 383           postCreatorId={this.state.post.creator_id}
 384           sort={this.state.commentSort}
 385           enableDownvotes={this.state.siteRes.site.enable_downvotes}
 386         />
 387       </div>
 388     );
 389   }
 390
 391   parseMessage(msg: WebSocketJsonResponse) {
 392     console.log(msg);
 393     let res = wsJsonToRes(msg);
 394     if (msg.error) {
 395       toast(i18n.t(msg.error), 'danger');
 396       return;
 397     } else if (msg.reconnect) {
 398       WebSocketService.Instance.getPost({
 399         id: Number(this.props.match.params.id),
 400       });
 401     } else if (res.op == UserOperation.GetPost) {
 402       let data = res.data as GetPostResponse;
 403       this.state.post = data.post;
 404       this.state.comments = data.comments;
 405       this.state.community = data.community;
 406       this.state.moderators = data.moderators;
 407       this.state.siteRes.admins = data.admins;
 408       this.state.online = data.online;
 409       this.state.loading = false;
 410       document.title = `${this.state.post.name} - ${this.state.siteRes.site.name}`;
 411
 412       // Get cross-posts
 413       if (this.state.post.url) {
 414         let form: SearchForm = {
 415           q: this.state.post.url,
 416           type_: SearchType[SearchType.Url],
 417           sort: SortType[SortType.TopAll],
 418           page: 1,
 419           limit: 6,
 420         };
 421         WebSocketService.Instance.search(form);
 422       }
 423
 424       this.setState(this.state);
 425       setupTippy();
 426     } else if (res.op == UserOperation.CreateComment) {
 427       let data = res.data as CommentResponse;
 428
 429       // Necessary since it might be a user reply
 430       if (data.recipient_ids.length == 0) {
 431         this.state.comments.unshift(data.comment);
 432         this.setState(this.state);
 433       }
 434     } else if (
 435       res.op == UserOperation.EditComment ||
 436       res.op == UserOperation.DeleteComment ||
 437       res.op == UserOperation.RemoveComment
 438     ) {
 439       let data = res.data as CommentResponse;
 440       editCommentRes(data, this.state.comments);
 441       this.setState(this.state);
 442     } else if (res.op == UserOperation.SaveComment) {
 443       let data = res.data as CommentResponse;
 444       saveCommentRes(data, this.state.comments);
 445       this.setState(this.state);
 446       setupTippy();
 447     } else if (res.op == UserOperation.CreateCommentLike) {
 448       let data = res.data as CommentResponse;
 449       createCommentLikeRes(data, this.state.comments);
 450       this.setState(this.state);
 451     } else if (res.op == UserOperation.CreatePostLike) {
 452       let data = res.data as PostResponse;
 453       createPostLikeRes(data, this.state.post);
 454       this.setState(this.state);
 455     } else if (
 456       res.op == UserOperation.EditPost ||
 457       res.op == UserOperation.DeletePost ||
 458       res.op == UserOperation.RemovePost ||
 459       res.op == UserOperation.LockPost ||
 460       res.op == UserOperation.StickyPost
 461     ) {
 462       let data = res.data as PostResponse;
 463       this.state.post = data.post;
 464       this.setState(this.state);
 465       setupTippy();
 466     } else if (res.op == UserOperation.SavePost) {
 467       let data = res.data as PostResponse;
 468       this.state.post = data.post;
 469       this.setState(this.state);
 470       setupTippy();
 471     } else if (
 472       res.op == UserOperation.EditCommunity ||
 473       res.op == UserOperation.DeleteCommunity ||
 474       res.op == UserOperation.RemoveCommunity
 475     ) {
 476       let data = res.data as CommunityResponse;
 477       this.state.community = data.community;
 478       this.state.post.community_id = data.community.id;
 479       this.state.post.community_name = data.community.name;
 480       this.setState(this.state);
 481     } else if (res.op == UserOperation.FollowCommunity) {
 482       let data = res.data as CommunityResponse;
 483       this.state.community.subscribed = data.community.subscribed;
 484       this.state.community.number_of_subscribers =
 485         data.community.number_of_subscribers;
 486       this.setState(this.state);
 487     } else if (res.op == UserOperation.BanFromCommunity) {
 488       let data = res.data as BanFromCommunityResponse;
 489       this.state.comments
 490         .filter(c => c.creator_id == data.user.id)
 491         .forEach(c => (c.banned_from_community = data.banned));
 492       if (this.state.post.creator_id == data.user.id) {
 493         this.state.post.banned_from_community = data.banned;
 494       }
 495       this.setState(this.state);
 496     } else if (res.op == UserOperation.AddModToCommunity) {
 497       let data = res.data as AddModToCommunityResponse;
 498       this.state.moderators = data.moderators;
 499       this.setState(this.state);
 500     } else if (res.op == UserOperation.BanUser) {
 501       let data = res.data as BanUserResponse;
 502       this.state.comments
 503         .filter(c => c.creator_id == data.user.id)
 504         .forEach(c => (c.banned = data.banned));
 505       if (this.state.post.creator_id == data.user.id) {
 506         this.state.post.banned = data.banned;
 507       }
 508       this.setState(this.state);
 509     } else if (res.op == UserOperation.AddAdmin) {
 510       let data = res.data as AddAdminResponse;
 511       this.state.siteRes.admins = data.admins;
 512       this.setState(this.state);
 513     } else if (res.op == UserOperation.Search) {
 514       let data = res.data as SearchResponse;
 515       this.state.crossPosts = data.posts.filter(
 516         p => p.id != Number(this.props.match.params.id)
 517       );
 518       if (this.state.crossPosts.length) {
 519         this.state.post.duplicates = this.state.crossPosts;
 520       }
 521       this.setState(this.state);
 522     } else if (
 523       res.op == UserOperation.TransferSite ||
 524       res.op == UserOperation.GetSite
 525     ) {
 526       let data = res.data as GetSiteResponse;
 527       this.state.siteRes = data;
 528       this.setState(this.state);
 529     } else if (res.op == UserOperation.TransferCommunity) {
 530       let data = res.data as GetCommunityResponse;
 531       this.state.community = data.community;
 532       this.state.moderators = data.moderators;
 533       this.state.siteRes.admins = data.admins;
 534       this.setState(this.state);
 535     }
 536   }
 537 }