ui/src/components/post-listing.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { WebSocketService, UserService } from '../services';
   4 import { Post, CreatePostLikeForm, PostForm as PostFormI, SavePostForm, CommunityUser, UserView } from '../interfaces';
   5 import { MomentTime } from './moment-time';
   6 import { PostForm } from './post-form';
   7 import { mdToHtml, canMod, isMod, isImage } from '../utils';
   8 import { i18n } from '../i18next';
   9 import { T } from 'inferno-i18next';
  10
  11 interface PostListingState {
  12   showEdit: boolean;
  13   showRemoveDialog: boolean;
  14   removeReason: string;
  15   imageExpanded: boolean;
  16 }
  17
  18 interface PostListingProps {
  19   post: Post;
  20   editable?: boolean;
  21   showCommunity?: boolean;
  22   showBody?: boolean;
  23   viewOnly?: boolean;
  24   moderators?: Array<CommunityUser>;
  25   admins?: Array<UserView>;
  26 }
  27
  28 export class PostListing extends Component<PostListingProps, PostListingState> {
  29
  30   private emptyState: PostListingState = {
  31     showEdit: false,
  32     showRemoveDialog: false,
  33     removeReason: null,
  34     imageExpanded: false
  35   }
  36
  37   constructor(props: any, context: any) {
  38     super(props, context);
  39
  40     this.state = this.emptyState;
  41     this.handlePostLike = this.handlePostLike.bind(this);
  42     this.handlePostDisLike = this.handlePostDisLike.bind(this);
  43     this.handleEditPost = this.handleEditPost.bind(this);
  44     this.handleEditCancel = this.handleEditCancel.bind(this);
  45   }
  46
  47   render() {
  48     return (
  49       <div class="row">
  50         {!this.state.showEdit
  51           ? this.listing()
  52           : <PostForm post={this.props.post} onEdit={this.handleEditPost} onCancel={this.handleEditCancel}/>
  53         }
  54       </div>
  55     )
  56   }
  57
  58   listing() {
  59     let post = this.props.post;
  60     return (
  61       <div class="listing col-12">
  62         <div className={`vote-bar mr-2 float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
  63           <button className={`btn p-0 ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>
  64             <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
  65           </button>
  66           <div class={`font-weight-bold text-muted`}>{post.score}</div>
  67           <button className={`btn p-0 ${post.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostDisLike)}>
  68             <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
  69           </button>
  70         </div>
  71         {post.url && isImage(post.url) &&
  72           <span title={i18n.t('expand_here')} class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)}><img class="mx-2 mt-1 float-left img-fluid thumbnail rounded" src={post.url} /></span>
  73         }
  74         <div className="ml-4">
  75           <div className="post-title">
  76             <h5 className="mb-0 d-inline">
  77               {post.url ?
  78               <a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> :
  79               <Link className="text-white" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
  80               }
  81             </h5>
  82             {post.url &&
  83               <small>
  84                 <a className="ml-2 text-muted font-italic" href={post.url} target="_blank" title={post.url}>{(new URL(post.url)).hostname}</a>
  85               </small>
  86             }
  87             { post.url && isImage(post.url) &&
  88               <>
  89                 { !this.state.imageExpanded
  90                   ? <span class="text-monospace pointer ml-2 text-muted small" title={i18n.t('expand_here')} onClick={linkEvent(this, this.handleImageExpandClick)}>[+]</span>
  91                   :
  92                   <span>
  93                     <span class="text-monospace pointer ml-2 text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>[-]</span>
  94                     <div>
  95                       <span class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)}><img class="img-fluid" src={post.url} /></span>
  96                     </div>
  97                   </span>
  98                 }
  99               </>
 100             }
 101             {post.removed &&
 102               <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
 103             }
 104             {post.deleted &&
 105               <small className="ml-2 text-muted font-italic"><T i18nKey="deleted">#</T></small>
 106             }
 107             {post.locked &&
 108               <small className="ml-2 text-muted font-italic"><T i18nKey="locked">#</T></small>
 109             }
 110             {post.nsfw &&
 111               <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small>
 112             }
 113           </div>
 114         </div>
 115         <div className="details ml-4">
 116           <ul class="list-inline mb-0 text-muted small">
 117             <li className="list-inline-item">
 118               <span>{i18n.t('by')} </span>
 119               <Link className="text-info" to={`/u/${post.creator_name}`}>{post.creator_name}</Link>
 120               {this.isMod &&
 121                 <span className="mx-1 badge badge-light"><T i18nKey="mod">#</T></span>
 122               }
 123               {this.isAdmin &&
 124                 <span className="mx-1 badge badge-light"><T i18nKey="admin">#</T></span>
 125               }
 126               {this.props.showCommunity &&
 127                 <span>
 128                   <span> {i18n.t('to')} </span>
 129                   <Link to={`/c/${post.community_name}`}>{post.community_name}</Link>
 130                 </span>
 131               }
 132             </li>
 133             <li className="list-inline-item">
 134               <span><MomentTime data={post} /></span>
 135             </li>
 136             <li className="list-inline-item">
 137               <span>(
 138                 <span className="text-info">+{post.upvotes}</span>
 139                 <span> | </span>
 140                 <span className="text-danger">-{post.downvotes}</span>
 141                 <span>) </span>
 142               </span>
 143             </li>
 144             <li className="list-inline-item">
 145               <Link className="text-muted" to={`/post/${post.id}`}><T i18nKey="number_of_comments" interpolation={{count: post.number_of_comments}}>#</T></Link>
 146             </li>
 147           </ul>
 148           {UserService.Instance.user && this.props.editable &&
 149             <ul class="list-inline mb-1 text-muted small font-weight-bold">
 150               <li className="list-inline-item mr-2">
 151                 <span class="pointer" onClick={linkEvent(this, this.handleSavePostClick)}>{post.saved ? i18n.t('unsave') : i18n.t('save')}</span>
 152               </li>
 153               <li className="list-inline-item mr-2">
 154                 <Link className="text-muted" to={`/create_post${this.crossPostParams}`}><T i18nKey="cross_post">#</T></Link>
 155               </li>
 156               {this.myPost &&
 157                 <>
 158                   <li className="list-inline-item">
 159                     <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span>
 160                   </li>
 161                   <li className="list-inline-item mr-2">
 162                     <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>
 163                       {!post.deleted ? i18n.t('delete') : i18n.t('restore')}
 164                     </span>
 165                   </li>
 166                 </>
 167               }
 168               {this.canMod &&
 169                 <span>
 170                   <li className="list-inline-item">
 171                     {!this.props.post.removed ?
 172                     <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> :
 173                     <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span>
 174                     }
 175                   </li>
 176                   <li className="list-inline-item">
 177                     <span class="pointer" onClick={linkEvent(this, this.handleModLock)}>{this.props.post.locked ? i18n.t('unlock') : i18n.t('lock')}</span>
 178                   </li>
 179                 </span>
 180               }
 181             </ul>
 182           }
 183           {this.state.showRemoveDialog &&
 184             <form class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
 185               <input type="text" class="form-control mr-2" placeholder={i18n.t('reason')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
 186               <button type="submit" class="btn btn-secondary"><T i18nKey="remove_post">#</T></button>
 187             </form>
 188           }
 189           {this.props.showBody && this.props.post.body && <div className="md-div" dangerouslySetInnerHTML={mdToHtml(post.body)} />}
 190         </div>
 191       </div>
 192     )
 193   }
 194
 195   private get myPost(): boolean {
 196     return UserService.Instance.user && this.props.post.creator_id == UserService.Instance.user.id;
 197   }
 198
 199   get isMod(): boolean {
 200     return this.props.moderators && isMod(this.props.moderators.map(m => m.user_id), this.props.post.creator_id);
 201   }
 202
 203   get isAdmin(): boolean {
 204     return this.props.admins && isMod(this.props.admins.map(a => a.id), this.props.post.creator_id);
 205   }
 206
 207   get canMod(): boolean {
 208
 209     if (this.props.editable) {
 210       let adminsThenMods = this.props.admins.map(a => a.id)
 211       .concat(this.props.moderators.map(m => m.user_id));
 212
 213       return canMod(UserService.Instance.user, adminsThenMods, this.props.post.creator_id);
 214
 215     } else return false;
 216   }
 217
 218   handlePostLike(i: PostListing) {
 219
 220     let form: CreatePostLikeForm = {
 221       post_id: i.props.post.id,
 222       score: (i.props.post.my_vote == 1) ? 0 : 1
 223     };
 224     WebSocketService.Instance.likePost(form);
 225   }
 226
 227   handlePostDisLike(i: PostListing) {
 228     let form: CreatePostLikeForm = {
 229       post_id: i.props.post.id,
 230       score: (i.props.post.my_vote == -1) ? 0 : -1
 231     };
 232     WebSocketService.Instance.likePost(form);
 233   }
 234
 235   handleEditClick(i: PostListing) {
 236     i.state.showEdit = true;
 237     i.setState(i.state);
 238   }
 239
 240   handleEditCancel() {
 241     this.state.showEdit = false;
 242     this.setState(this.state);
 243   }
 244
 245   // The actual editing is done in the recieve for post
 246   handleEditPost() {
 247     this.state.showEdit = false;
 248     this.setState(this.state);
 249   }
 250
 251   handleDeleteClick(i: PostListing) {
 252     let deleteForm: PostFormI = {
 253       body: i.props.post.body,
 254       community_id: i.props.post.community_id,
 255       name: i.props.post.name,
 256       url: i.props.post.url,
 257       edit_id: i.props.post.id,
 258       creator_id: i.props.post.creator_id,
 259       deleted: !i.props.post.deleted,
 260       nsfw: i.props.post.nsfw,
 261       auth: null
 262     };
 263     WebSocketService.Instance.editPost(deleteForm);
 264   }
 265
 266   handleSavePostClick(i: PostListing) {
 267     let saved = (i.props.post.saved == undefined) ? true : !i.props.post.saved;
 268     let form: SavePostForm = {
 269       post_id: i.props.post.id,
 270       save: saved
 271     };
 272
 273     WebSocketService.Instance.savePost(form);
 274   }
 275
 276   get crossPostParams(): string {
 277     let params = `?name=${this.props.post.name}`;
 278     if (this.props.post.url) {
 279       params += `&url=${this.props.post.url}`;
 280     }
 281     if (this.props.post.body) {
 282       params += `&body=${this.props.post.body}`;
 283     }
 284     return params;
 285   }
 286
 287   handleModRemoveShow(i: PostListing) {
 288     i.state.showRemoveDialog = true;
 289     i.setState(i.state);
 290   }
 291
 292   handleModRemoveReasonChange(i: PostListing, event: any) {
 293     i.state.removeReason = event.target.value;
 294     i.setState(i.state);
 295   }
 296
 297   handleModRemoveSubmit(i: PostListing) {
 298     event.preventDefault();
 299     let form: PostFormI = {
 300       name: i.props.post.name,
 301       community_id: i.props.post.community_id,
 302       edit_id: i.props.post.id,
 303       creator_id: i.props.post.creator_id,
 304       removed: !i.props.post.removed,
 305       reason: i.state.removeReason,
 306       nsfw: i.props.post.nsfw,
 307       auth: null,
 308     };
 309     WebSocketService.Instance.editPost(form);
 310
 311     i.state.showRemoveDialog = false;
 312     i.setState(i.state);
 313   }
 314
 315   handleModLock(i: PostListing) {
 316     let form: PostFormI = {
 317       name: i.props.post.name,
 318       community_id: i.props.post.community_id,
 319       edit_id: i.props.post.id,
 320       creator_id: i.props.post.creator_id,
 321       nsfw: i.props.post.nsfw,
 322       locked: !i.props.post.locked,
 323       auth: null,
 324     };
 325     WebSocketService.Instance.editPost(form);
 326   }
 327
 328   handleImageExpandClick(i: PostListing) {
 329     i.state.imageExpanded = !i.state.imageExpanded;
 330     i.setState(i.state);
 331   }
 332 }
 333