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-two");
  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.sidebar()}
 144               {this.state.comments.length > 0 && this.newComments()}
 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 sticky-top new-comments 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             />
 187           )}
 188         </div>
 189       </div>
 190     )
 191   }
 192
 193   sidebar() {
 194     return (
 195       <div class="mb-3">
 196         <Sidebar
 197           community={this.state.community}
 198           moderators={this.state.moderators}
 199           admins={this.state.admins}
 200         />
 201       </div>
 202     );
 203   }
 204
 205   handleCommentSortChange(i: Post, event: any) {
 206     i.state.commentSort = Number(event.target.value);
 207     i.setState(i.state);
 208   }
 209
 210   private buildCommentsTree(): Array<CommentNodeI> {
 211     let map = new Map<number, CommentNodeI>();
 212     for (let comment of this.state.comments) {
 213       let node: CommentNodeI = {
 214         comment: comment,
 215         children: []
 216       };
 217       map.set(comment.id, { ...node });
 218     }
 219     let tree: Array<CommentNodeI> = [];
 220     for (let comment of this.state.comments) {
 221       if( comment.parent_id ) {
 222         map.get(comment.parent_id).children.push(map.get(comment.id));
 223       }
 224       else {
 225         tree.push(map.get(comment.id));
 226       }
 227     }
 228
 229     this.sortTree(tree);
 230
 231     return tree;
 232   }
 233
 234   sortTree(tree: Array<CommentNodeI>) {
 235
 236     if (this.state.commentSort == CommentSortType.Top) {
 237       tree.sort((a, b) => b.comment.score - a.comment.score);
 238     } else if (this.state.commentSort == CommentSortType.New) {
 239       tree.sort((a, b) => b.comment.published.localeCompare(a.comment.published));
 240     } else if (this.state.commentSort == CommentSortType.Hot) {
 241       tree.sort((a, b) => hotRank(b.comment) - hotRank(a.comment));
 242     }
 243
 244     for (let node of tree) {
 245       this.sortTree(node.children);
 246     }
 247
 248   }
 249
 250   commentsTree() {
 251     let nodes = this.buildCommentsTree();
 252     return (
 253       <div>
 254         <CommentNodes
 255           nodes={nodes}
 256           locked={this.state.post.locked}
 257           moderators={this.state.moderators}
 258           admins={this.state.admins}
 259         />
 260       </div>
 261     );
 262   }
 263
 264   parseMessage(msg: any) {
 265     console.log(msg);
 266     let op: UserOperation = msgOp(msg);
 267     if (msg.error) {
 268       alert(i18n.t(msg.error));
 269       return;
 270     } else if (op == UserOperation.GetPost) {
 271       let res: GetPostResponse = msg;
 272       this.state.post = res.post;
 273       this.state.comments = res.comments;
 274       this.state.community = res.community;
 275       this.state.moderators = res.moderators;
 276       this.state.admins = res.admins;
 277       this.state.loading = false;
 278       document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
 279
 280       // Get cross-posts
 281       if (this.state.post.url) {
 282         let form: SearchForm = {
 283           q: this.state.post.url,
 284           type_: SearchType[SearchType.Url],
 285           sort: SortType[SortType.TopAll],
 286           page: 1,
 287           limit: 6,
 288         };
 289         WebSocketService.Instance.search(form);
 290       }
 291
 292       this.setState(this.state);
 293     } else if (op == UserOperation.CreateComment) {
 294       let res: CommentResponse = msg;
 295       this.state.comments.unshift(res.comment);
 296       this.setState(this.state);
 297     } else if (op == UserOperation.EditComment) {
 298       let res: CommentResponse = msg;
 299       let found = this.state.comments.find(c => c.id == res.comment.id);
 300       found.content = res.comment.content;
 301       found.updated = res.comment.updated;
 302       found.removed = res.comment.removed;
 303       found.deleted = res.comment.deleted;
 304       found.upvotes = res.comment.upvotes;
 305       found.downvotes = res.comment.downvotes;
 306       found.score = res.comment.score;
 307       found.read = res.comment.read;
 308
 309       this.setState(this.state);
 310     } else if (op == UserOperation.SaveComment) {
 311       let res: CommentResponse = msg;
 312       let found = this.state.comments.find(c => c.id == res.comment.id);
 313       found.saved = res.comment.saved;
 314       this.setState(this.state);
 315     } else if (op == UserOperation.CreateCommentLike) {
 316       let res: CommentResponse = msg;
 317       let found: Comment = this.state.comments.find(c => c.id === res.comment.id);
 318       found.score = res.comment.score;
 319       found.upvotes = res.comment.upvotes;
 320       found.downvotes = res.comment.downvotes;
 321       if (res.comment.my_vote !== null)
 322         found.my_vote = res.comment.my_vote;
 323       this.setState(this.state);
 324     } else if (op == UserOperation.CreatePostLike) {
 325       let res: CreatePostLikeResponse = msg;
 326       this.state.post.my_vote = res.post.my_vote;
 327       this.state.post.score = res.post.score;
 328       this.state.post.upvotes = res.post.upvotes;
 329       this.state.post.downvotes = res.post.downvotes;
 330       this.setState(this.state);
 331     } else if (op == UserOperation.EditPost) {
 332       let res: PostResponse = msg;
 333       this.state.post = res.post;
 334       this.setState(this.state);
 335     } else if (op == UserOperation.SavePost) {
 336       let res: PostResponse = msg;
 337       this.state.post = res.post;
 338       this.setState(this.state);
 339     } else if (op == UserOperation.EditCommunity) {
 340       let res: CommunityResponse = msg;
 341       this.state.community = res.community;
 342       this.state.post.community_id = res.community.id;
 343       this.state.post.community_name = res.community.name;
 344       this.setState(this.state);
 345     } else if (op == UserOperation.FollowCommunity) {
 346       let res: CommunityResponse = msg;
 347       this.state.community.subscribed = res.community.subscribed;
 348       this.state.community.number_of_subscribers = res.community.number_of_subscribers;
 349       this.setState(this.state);
 350     } else if (op == UserOperation.BanFromCommunity) {
 351       let res: BanFromCommunityResponse = msg;
 352       this.state.comments.filter(c => c.creator_id == res.user.id)
 353       .forEach(c => c.banned_from_community = res.banned);
 354       this.setState(this.state);
 355     } else if (op == UserOperation.AddModToCommunity) {
 356       let res: AddModToCommunityResponse = msg;
 357       this.state.moderators = res.moderators;
 358       this.setState(this.state);
 359     } else if (op == UserOperation.BanUser) {
 360       let res: BanUserResponse = msg;
 361       this.state.comments.filter(c => c.creator_id == res.user.id)
 362       .forEach(c => c.banned = res.banned);
 363       this.setState(this.state);
 364     } else if (op == UserOperation.AddAdmin) {
 365       let res: AddAdminResponse = msg;
 366       this.state.admins = res.admins;
 367       this.setState(this.state);
 368     } else if (op == UserOperation.Search) {
 369       let res: SearchResponse = msg;
 370       this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
 371       this.setState(this.state);
 372     } else if (op == UserOperation.TransferSite) {
 373       let res: GetSiteResponse = msg;
 374
 375       this.state.admins = res.admins;
 376       this.setState(this.state);
 377     } else if (op == UserOperation.TransferCommunity) {
 378       let res: GetCommunityResponse = msg;
 379       this.state.community = res.community;
 380       this.state.moderators = res.moderators;
 381       this.state.admins = res.admins;
 382       this.setState(this.state);
 383     }
 384
 385   }
 386 }
 387
 388
 389