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 { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView, SearchType, SortType, SearchForm, SearchResponse, GetSiteResponse, GetCommunityResponse } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp, hotRank } from '../utils';
   7 import { PostListing } from './post-listing';
   8 import { PostListings } from './post-listings';
   9 import { Sidebar } from './sidebar';
  10 import { CommentForm } from './comment-form';
  11 import { CommentNodes } from './comment-nodes';
  12 import * as autosize from 'autosize';
  13 import { i18n } from '../i18next';
  14 import { T } from 'inferno-i18next';
  15
  16 interface PostState {
  17   post: PostI;
  18   comments: Array<Comment>;
  19   commentSort: CommentSortType;
  20   community: Community;
  21   moderators: Array<CommunityUser>;
  22   admins: Array<UserView>;
  23   scrolled?: boolean;
  24   scrolled_comment_id?: number;
  25   loading: boolean;
  26   crossPosts: Array<PostI>;
  27 }
  28
  29 export class Post extends Component<any, PostState> {
  30
  31   private subscription: Subscription;
  32   private emptyState: PostState = {
  33     post: null,
  34     comments: [],
  35     commentSort: CommentSortType.Hot,
  36     community: null,
  37     moderators: [],
  38     admins: [],
  39     scrolled: false,
  40     loading: true,
  41     crossPosts: [],
  42   }
  43
  44   constructor(props: any, context: any) {
  45     super(props, context);
  46
  47     this.state = this.emptyState;
  48
  49     let postId = Number(this.props.match.params.id);
  50     if (this.props.match.params.comment_id) {
  51       this.state.scrolled_comment_id = this.props.match.params.comment_id;
  52     }
  53
  54     this.subscription = WebSocketService.Instance.subject
  55       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  56       .subscribe(
  57         (msg) => this.parseMessage(msg),
  58         (err) => console.error(err),
  59         () => console.log('complete')
  60       );
  61
  62     WebSocketService.Instance.getPost(postId);
  63   }
  64
  65   componentWillUnmount() {
  66     this.subscription.unsubscribe();
  67   }
  68
  69   componentDidMount() {
  70     autosize(document.querySelectorAll('textarea'));
  71   }
  72
  73   componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
  74     if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
  75       var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
  76       elmnt.scrollIntoView();
  77       elmnt.classList.add("mark");
  78       this.state.scrolled = true;
  79       this.markScrolledAsRead(this.state.scrolled_comment_id);
  80     }
  81
  82     // Necessary if you are on a post and you click another post (same route)
  83     if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
  84       // Couldnt get a refresh working. This does for now.
  85       location.reload();
  86
  87       // let currentId = this.props.match.params.id;
  88       // WebSocketService.Instance.getPost(currentId);
  89       // this.context.router.history.push('/sponsors');
  90       // this.context.refresh();
  91       // this.context.router.history.push(_lastProps.location.pathname);
  92
  93     }
  94   }
  95
  96   markScrolledAsRead(commentId: number) {
  97     let found = this.state.comments.find(c => c.id == commentId);
  98     let parent = this.state.comments.find(c => found.parent_id == c.id);
  99     let parent_user_id = parent ? parent.creator_id : this.state.post.creator_id;
 100
 101     if (UserService.Instance.user && UserService.Instance.user.id == parent_user_id) {
 102
 103       let form: CommentFormI = {
 104         content: found.content,
 105         edit_id: found.id,
 106         creator_id: found.creator_id,
 107         post_id: found.post_id,
 108         parent_id: found.parent_id,
 109         read: true,
 110         auth: null
 111       };
 112       WebSocketService.Instance.editComment(form);
 113     }
 114   }
 115
 116   render() {
 117     return (
 118       <div class="container">
 119         {this.state.loading ?
 120         <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
 121         <div class="row">
 122             <div class="col-12 col-md-8 mb-3">
 123               <PostListing
 124                 post={this.state.post}
 125                 showBody
 126                 showCommunity
 127                 editable
 128                 moderators={this.state.moderators}
 129                 admins={this.state.admins}
 130               />
 131               {this.state.crossPosts.length > 0 &&
 132                 <>
 133                   <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div>
 134                   <PostListings showCommunity posts={this.state.crossPosts} />
 135                 </>
 136               }
 137               <div className="mb-2" />
 138               <CommentForm postId={this.state.post.id} disabled={this.state.post.locked} />
 139               {this.sortRadios()}
 140               {this.commentsTree()}
 141             </div>
 142             <div class="col-12 col-sm-12 col-md-4">
 143               {this.state.comments.length > 0 && this.newComments()}
 144               {this.sidebar()}
 145             </div>
 146           </div>
 147         }
 148       </div>
 149     )
 150   }
 151
 152   sortRadios() {
 153     return (
 154       <div class="btn-group btn-group-toggle mb-3">
 155         <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>{i18n.t('hot')}
 156           <input type="radio" value={CommentSortType.Hot}
 157           checked={this.state.commentSort === CommentSortType.Hot}
 158           onChange={linkEvent(this, this.handleCommentSortChange)}  />
 159         </label>
 160         <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Top && 'active'}`}>{i18n.t('top')}
 161           <input type="radio" value={CommentSortType.Top}
 162           checked={this.state.commentSort === CommentSortType.Top}
 163           onChange={linkEvent(this, this.handleCommentSortChange)}  />
 164         </label>
 165         <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.New && 'active'}`}>{i18n.t('new')}
 166           <input type="radio" value={CommentSortType.New}
 167           checked={this.state.commentSort === CommentSortType.New}
 168           onChange={linkEvent(this, this.handleCommentSortChange)}  />
 169         </label>
 170       </div>
 171     )
 172   }
 173
 174   newComments() {
 175     return (
 176       <div class="d-none d-md-block new-comments mb-3 card border-secondary">
 177         <div class="card-body small">
 178           <h6><T i18nKey="recent_comments">#</T></h6>
 179           {this.state.comments.map(comment =>
 180             <CommentNodes
 181               nodes={[{comment: comment}]}
 182               noIndent
 183               locked={this.state.post.locked}
 184               moderators={this.state.moderators}
 185               admins={this.state.admins}
 186               postCreatorId={this.state.post.creator_id}
 187             />
 188           )}
 189         </div>
 190       </div>
 191     )
 192   }
 193
 194   sidebar() {
 195     return (
 196       <div class="mb-3">
 197         <Sidebar
 198           community={this.state.community}
 199           moderators={this.state.moderators}
 200           admins={this.state.admins}
 201         />
 202       </div>
 203     );
 204   }
 205
 206   handleCommentSortChange(i: Post, event: any) {
 207     i.state.commentSort = Number(event.target.value);
 208     i.setState(i.state);
 209   }
 210
 211   private buildCommentsTree(): Array<CommentNodeI> {
 212     let map = new Map<number, CommentNodeI>();
 213     for (let comment of this.state.comments) {
 214       let node: CommentNodeI = {
 215         comment: comment,
 216         children: []
 217       };
 218       map.set(comment.id, { ...node });
 219     }
 220     let tree: Array<CommentNodeI> = [];
 221     for (let comment of this.state.comments) {
 222       if( comment.parent_id ) {
 223         map.get(comment.parent_id).children.push(map.get(comment.id));
 224       }
 225       else {
 226         tree.push(map.get(comment.id));
 227       }
 228     }
 229
 230     this.sortTree(tree);
 231
 232     return tree;
 233   }
 234
 235   sortTree(tree: Array<CommentNodeI>) {
 236
 237     // First, put removed and deleted comments at the bottom, then do your other sorts
 238     if (this.state.commentSort == CommentSortType.Top) {
 239       tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
 240                 (+a.comment.deleted - +b.comment.deleted ) ||
 241                 (b.comment.score - a.comment.score));
 242     } else if (this.state.commentSort == CommentSortType.New) {
 243       tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
 244                 (+a.comment.deleted - +b.comment.deleted ) ||
 245                 (b.comment.published.localeCompare(a.comment.published)));
 246     } else if (this.state.commentSort == CommentSortType.Hot) {
 247       tree.sort((a, b) => (+a.comment.removed - +b.comment.removed) ||
 248                 (+a.comment.deleted - +b.comment.deleted ) ||
 249                 (hotRank(b.comment) - hotRank(a.comment)));
 250     }
 251
 252     for (let node of tree) {
 253       this.sortTree(node.children);
 254     }
 255
 256   }
 257
 258   commentsTree() {
 259     let nodes = this.buildCommentsTree();
 260     return (
 261       <div>
 262         <CommentNodes
 263           nodes={nodes}
 264           locked={this.state.post.locked}
 265           moderators={this.state.moderators}
 266           admins={this.state.admins}
 267           postCreatorId={this.state.post.creator_id}
 268         />
 269       </div>
 270     );
 271   }
 272
 273   parseMessage(msg: any) {
 274     console.log(msg);
 275     let op: UserOperation = msgOp(msg);
 276     if (msg.error) {
 277       alert(i18n.t(msg.error));
 278       return;
 279     } else if (op == UserOperation.GetPost) {
 280       let res: GetPostResponse = msg;
 281       this.state.post = res.post;
 282       this.state.comments = res.comments;
 283       this.state.community = res.community;
 284       this.state.moderators = res.moderators;
 285       this.state.admins = res.admins;
 286       this.state.loading = false;
 287       document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
 288
 289       // Get cross-posts
 290       if (this.state.post.url) {
 291         let form: SearchForm = {
 292           q: this.state.post.url,
 293           type_: SearchType[SearchType.Url],
 294           sort: SortType[SortType.TopAll],
 295           page: 1,
 296           limit: 6,
 297         };
 298         WebSocketService.Instance.search(form);
 299       }
 300
 301       this.setState(this.state);
 302     } else if (op == UserOperation.CreateComment) {
 303       let res: CommentResponse = msg;
 304       this.state.comments.unshift(res.comment);
 305       this.setState(this.state);
 306     } else if (op == UserOperation.EditComment) {
 307       let res: CommentResponse = msg;
 308       let found = this.state.comments.find(c => c.id == res.comment.id);
 309       found.content = res.comment.content;
 310       found.updated = res.comment.updated;
 311       found.removed = res.comment.removed;
 312       found.deleted = res.comment.deleted;
 313       found.upvotes = res.comment.upvotes;
 314       found.downvotes = res.comment.downvotes;
 315       found.score = res.comment.score;
 316       found.read = res.comment.read;
 317
 318       this.setState(this.state);
 319     } else if (op == UserOperation.SaveComment) {
 320       let res: CommentResponse = msg;
 321       let found = this.state.comments.find(c => c.id == res.comment.id);
 322       found.saved = res.comment.saved;
 323       this.setState(this.state);
 324     } else if (op == UserOperation.CreateCommentLike) {
 325       let res: CommentResponse = msg;
 326       let found: Comment = this.state.comments.find(c => c.id === res.comment.id);
 327       found.score = res.comment.score;
 328       found.upvotes = res.comment.upvotes;
 329       found.downvotes = res.comment.downvotes;
 330       if (res.comment.my_vote !== null)
 331         found.my_vote = res.comment.my_vote;
 332       this.setState(this.state);
 333     } else if (op == UserOperation.CreatePostLike) {
 334       let res: CreatePostLikeResponse = msg;
 335       this.state.post.my_vote = res.post.my_vote;
 336       this.state.post.score = res.post.score;
 337       this.state.post.upvotes = res.post.upvotes;
 338       this.state.post.downvotes = res.post.downvotes;
 339       this.setState(this.state);
 340     } else if (op == UserOperation.EditPost) {
 341       let res: PostResponse = msg;
 342       this.state.post = res.post;
 343       this.setState(this.state);
 344     } else if (op == UserOperation.SavePost) {
 345       let res: PostResponse = msg;
 346       this.state.post = res.post;
 347       this.setState(this.state);
 348     } else if (op == UserOperation.EditCommunity) {
 349       let res: CommunityResponse = msg;
 350       this.state.community = res.community;
 351       this.state.post.community_id = res.community.id;
 352       this.state.post.community_name = res.community.name;
 353       this.setState(this.state);
 354     } else if (op == UserOperation.FollowCommunity) {
 355       let res: CommunityResponse = msg;
 356       this.state.community.subscribed = res.community.subscribed;
 357       this.state.community.number_of_subscribers = res.community.number_of_subscribers;
 358       this.setState(this.state);
 359     } else if (op == UserOperation.BanFromCommunity) {
 360       let res: BanFromCommunityResponse = msg;
 361       this.state.comments.filter(c => c.creator_id == res.user.id)
 362       .forEach(c => c.banned_from_community = res.banned);
 363       if (this.state.post.creator_id == res.user.id) {
 364         this.state.post.banned_from_community = res.banned;
 365       }
 366       this.setState(this.state);
 367     } else if (op == UserOperation.AddModToCommunity) {
 368       let res: AddModToCommunityResponse = msg;
 369       this.state.moderators = res.moderators;
 370       this.setState(this.state);
 371     } else if (op == UserOperation.BanUser) {
 372       let res: BanUserResponse = msg;
 373       this.state.comments.filter(c => c.creator_id == res.user.id)
 374       .forEach(c => c.banned = res.banned);
 375       if (this.state.post.creator_id == res.user.id) {
 376         this.state.post.banned = res.banned;
 377       }
 378       this.setState(this.state);
 379     } else if (op == UserOperation.AddAdmin) {
 380       let res: AddAdminResponse = msg;
 381       this.state.admins = res.admins;
 382       this.setState(this.state);
 383     } else if (op == UserOperation.Search) {
 384       let res: SearchResponse = msg;
 385       this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
 386       this.setState(this.state);
 387     } else if (op == UserOperation.TransferSite) {
 388       let res: GetSiteResponse = msg;
 389
 390       this.state.admins = res.admins;
 391       this.setState(this.state);
 392     } else if (op == UserOperation.TransferCommunity) {
 393       let res: GetCommunityResponse = msg;
 394       this.state.community = res.community;
 395       this.state.moderators = res.moderators;
 396       this.state.admins = res.admins;
 397       this.setState(this.state);
 398     }
 399
 400   }
 401 }
 402
 403
 404