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 {
   5   Post,
   6   CreatePostLikeForm,
   7   DeletePostForm,
   8   RemovePostForm,
   9   LockPostForm,
  10   StickyPostForm,
  11   SavePostForm,
  12   CommunityUser,
  13   UserView,
  14   BanFromCommunityForm,
  15   BanUserForm,
  16   AddModToCommunityForm,
  17   AddAdminForm,
  18   TransferSiteForm,
  19   TransferCommunityForm,
  20 } from 'lemmy-js-client';
  21 import { BanType } from '../interfaces';
  22 import { MomentTime } from './moment-time';
  23 import { PostForm } from './post-form';
  24 import { IFramelyCard } from './iframely-card';
  25 import { UserListing } from './user-listing';
  26 import { CommunityLink } from './community-link';
  27 import {
  28   md,
  29   mdToHtml,
  30   canMod,
  31   isMod,
  32   isImage,
  33   isVideo,
  34   getUnixTime,
  35   pictrsImage,
  36   setupTippy,
  37   hostname,
  38   previewLines,
  39 } from '../utils';
  40 import { i18n } from '../i18next';
  41
  42 interface PostListingState {
  43   showEdit: boolean;
  44   showRemoveDialog: boolean;
  45   removeReason: string;
  46   showBanDialog: boolean;
  47   removeData: boolean;
  48   banReason: string;
  49   banExpires: string;
  50   banType: BanType;
  51   showConfirmTransferSite: boolean;
  52   showConfirmTransferCommunity: boolean;
  53   imageExpanded: boolean;
  54   viewSource: boolean;
  55   showAdvanced: boolean;
  56   my_vote: number;
  57   score: number;
  58   upvotes: number;
  59   downvotes: number;
  60 }
  61
  62 interface PostListingProps {
  63   post: Post;
  64   showCommunity?: boolean;
  65   showBody?: boolean;
  66   moderators?: Array<CommunityUser>;
  67   admins?: Array<UserView>;
  68   enableDownvotes: boolean;
  69   enableNsfw: boolean;
  70 }
  71
  72 export class PostListing extends Component<PostListingProps, PostListingState> {
  73   private emptyState: PostListingState = {
  74     showEdit: false,
  75     showRemoveDialog: false,
  76     removeReason: null,
  77     showBanDialog: false,
  78     removeData: null,
  79     banReason: null,
  80     banExpires: null,
  81     banType: BanType.Community,
  82     showConfirmTransferSite: false,
  83     showConfirmTransferCommunity: false,
  84     imageExpanded: false,
  85     viewSource: false,
  86     showAdvanced: false,
  87     my_vote: this.props.post.my_vote,
  88     score: this.props.post.score,
  89     upvotes: this.props.post.upvotes,
  90     downvotes: this.props.post.downvotes,
  91   };
  92
  93   constructor(props: any, context: any) {
  94     super(props, context);
  95
  96     this.state = this.emptyState;
  97     this.handlePostLike = this.handlePostLike.bind(this);
  98     this.handlePostDisLike = this.handlePostDisLike.bind(this);
  99     this.handleEditPost = this.handleEditPost.bind(this);
 100     this.handleEditCancel = this.handleEditCancel.bind(this);
 101   }
 102
 103   componentWillReceiveProps(nextProps: PostListingProps) {
 104     this.state.my_vote = nextProps.post.my_vote;
 105     this.state.upvotes = nextProps.post.upvotes;
 106     this.state.downvotes = nextProps.post.downvotes;
 107     this.state.score = nextProps.post.score;
 108     if (this.props.post.id !== nextProps.post.id) {
 109       this.state.imageExpanded = false;
 110     }
 111     this.setState(this.state);
 112   }
 113
 114   render() {
 115     return (
 116       <div class="">
 117         {!this.state.showEdit ? (
 118           <>
 119             {this.listing()}
 120             {this.body()}
 121           </>
 122         ) : (
 123           <div class="col-12">
 124             <PostForm
 125               post={this.props.post}
 126               onEdit={this.handleEditPost}
 127               onCancel={this.handleEditCancel}
 128               enableNsfw={this.props.enableNsfw}
 129               enableDownvotes={this.props.enableDownvotes}
 130             />
 131           </div>
 132         )}
 133       </div>
 134     );
 135   }
 136
 137   body() {
 138     return (
 139       <div class="row">
 140         <div class="col-12">
 141           {this.props.post.url &&
 142             this.props.showBody &&
 143             this.props.post.embed_title && (
 144               <IFramelyCard post={this.props.post} />
 145             )}
 146           {this.props.showBody && this.props.post.body && (
 147             <>
 148               {this.state.viewSource ? (
 149                 <pre>{this.props.post.body}</pre>
 150               ) : (
 151                 <div
 152                   className="md-div"
 153                   dangerouslySetInnerHTML={mdToHtml(this.props.post.body)}
 154                 />
 155               )}
 156             </>
 157           )}
 158         </div>
 159       </div>
 160     );
 161   }
 162
 163   imgThumb(src: string) {
 164     let post = this.props.post;
 165     return (
 166       <img
 167         className={`img-fluid thumbnail rounded ${
 168           post.nsfw || post.community_nsfw ? 'img-blur' : ''
 169         }`}
 170         src={src}
 171       />
 172     );
 173   }
 174
 175   getImage(thumbnail: boolean = false) {
 176     let post = this.props.post;
 177     if (isImage(post.url)) {
 178       if (post.url.includes('pictrs')) {
 179         return pictrsImage(post.url, thumbnail);
 180       } else if (post.thumbnail_url) {
 181         return pictrsImage(post.thumbnail_url, thumbnail);
 182       } else {
 183         return post.url;
 184       }
 185     } else if (post.thumbnail_url) {
 186       return pictrsImage(post.thumbnail_url, thumbnail);
 187     }
 188   }
 189
 190   thumbnail() {
 191     let post = this.props.post;
 192
 193     if (isImage(post.url)) {
 194       return (
 195         <div
 196           class="float-right text-body pointer d-inline-block position-relative"
 197           data-tippy-content={i18n.t('expand_here')}
 198           onClick={linkEvent(this, this.handleImageExpandClick)}
 199         >
 200           {this.imgThumb(this.getImage(true))}
 201           <svg class="icon mini-overlay">
 202             <use xlinkHref="#icon-image"></use>
 203           </svg>
 204         </div>
 205       );
 206     } else if (post.thumbnail_url) {
 207       return (
 208         <a
 209           class="float-right text-body d-inline-block position-relative"
 210           href={post.url}
 211           target="_blank"
 212           rel="noopener"
 213           title={post.url}
 214         >
 215           {this.imgThumb(this.getImage(true))}
 216           <svg class="icon mini-overlay">
 217             <use xlinkHref="#icon-external-link"></use>
 218           </svg>
 219         </a>
 220       );
 221     } else if (post.url) {
 222       if (isVideo(post.url)) {
 223         return (
 224           <div class="embed-responsive embed-responsive-16by9">
 225             <video
 226               playsinline
 227               muted
 228               loop
 229               controls
 230               class="embed-responsive-item"
 231             >
 232               <source src={post.url} type="video/mp4" />
 233             </video>
 234           </div>
 235         );
 236       } else {
 237         return (
 238           <a
 239             className="text-body"
 240             href={post.url}
 241             target="_blank"
 242             title={post.url}
 243             rel="noopener"
 244           >
 245             <div class="thumbnail rounded bg-light d-flex justify-content-center">
 246               <svg class="icon d-flex align-items-center">
 247                 <use xlinkHref="#icon-external-link"></use>
 248               </svg>
 249             </div>
 250           </a>
 251         );
 252       }
 253     } else {
 254       return (
 255         <Link
 256           className="text-body"
 257           to={`/post/${post.id}`}
 258           title={i18n.t('comments')}
 259         >
 260           <div class="thumbnail rounded bg-light d-flex justify-content-center">
 261             <svg class="icon d-flex align-items-center">
 262               <use xlinkHref="#icon-message-square"></use>
 263             </svg>
 264           </div>
 265         </Link>
 266       );
 267     }
 268   }
 269
 270   createdLine() {
 271     let post = this.props.post;
 272     return (
 273       <ul class="list-inline mb-1 text-muted small">
 274         <li className="list-inline-item">
 275           <UserListing
 276             user={{
 277               name: post.creator_name,
 278               preferred_username: post.creator_preferred_username,
 279               avatar: post.creator_avatar,
 280               id: post.creator_id,
 281               local: post.creator_local,
 282               actor_id: post.creator_actor_id,
 283               published: post.creator_published,
 284             }}
 285           />
 286
 287           {this.isMod && (
 288             <span className="mx-1 badge badge-light">{i18n.t('mod')}</span>
 289           )}
 290           {this.isAdmin && (
 291             <span className="mx-1 badge badge-light">{i18n.t('admin')}</span>
 292           )}
 293           {(post.banned_from_community || post.banned) && (
 294             <span className="mx-1 badge badge-danger">{i18n.t('banned')}</span>
 295           )}
 296           {this.props.showCommunity && (
 297             <span>
 298               <span class="mx-1"> {i18n.t('to')} </span>
 299               <CommunityLink
 300                 community={{
 301                   name: post.community_name,
 302                   id: post.community_id,
 303                   local: post.community_local,
 304                   actor_id: post.community_actor_id,
 305                   icon: post.community_icon,
 306                 }}
 307               />
 308             </span>
 309           )}
 310         </li>
 311         <li className="list-inline-item">•</li>
 312         {post.url && !(hostname(post.url) == window.location.hostname) && (
 313           <>
 314             <li className="list-inline-item">
 315               <a
 316                 className="text-muted font-italic"
 317                 href={post.url}
 318                 target="_blank"
 319                 title={post.url}
 320                 rel="noopener"
 321               >
 322                 {hostname(post.url)}
 323               </a>
 324             </li>
 325             <li className="list-inline-item">•</li>
 326           </>
 327         )}
 328         <li className="list-inline-item">
 329           <span>
 330             <MomentTime data={post} />
 331           </span>
 332         </li>
 333         {post.body && (
 334           <>
 335             <li className="list-inline-item">•</li>
 336             <li className="list-inline-item">
 337               {/* Using a link with tippy doesn't work on touch devices unfortunately */}
 338               <Link
 339                 className="text-muted"
 340                 data-tippy-content={md.render(previewLines(post.body))}
 341                 data-tippy-allowHtml={true}
 342                 to={`/post/${post.id}`}
 343               >
 344                 <svg class="mr-1 icon icon-inline">
 345                   <use xlinkHref="#icon-book-open"></use>
 346                 </svg>
 347               </Link>
 348             </li>
 349           </>
 350         )}
 351       </ul>
 352     );
 353   }
 354
 355   voteBar() {
 356     return (
 357       <div className={`vote-bar col-1 pr-0 small text-center`}>
 358         <button
 359           className={`btn-animate btn btn-link p-0 ${
 360             this.state.my_vote == 1 ? 'text-info' : 'text-muted'
 361           }`}
 362           onClick={linkEvent(this, this.handlePostLike)}
 363           data-tippy-content={i18n.t('upvote')}
 364         >
 365           <svg class="icon upvote">
 366             <use xlinkHref="#icon-arrow-up1"></use>
 367           </svg>
 368         </button>
 369         <div
 370           class={`unselectable pointer font-weight-bold text-muted px-1`}
 371           data-tippy-content={this.pointsTippy}
 372         >
 373           {this.state.score}
 374         </div>
 375         {this.props.enableDownvotes && (
 376           <button
 377             className={`btn-animate btn btn-link p-0 ${
 378               this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
 379             }`}
 380             onClick={linkEvent(this, this.handlePostDisLike)}
 381             data-tippy-content={i18n.t('downvote')}
 382           >
 383             <svg class="icon downvote">
 384               <use xlinkHref="#icon-arrow-down1"></use>
 385             </svg>
 386           </button>
 387         )}
 388       </div>
 389     );
 390   }
 391
 392   postTitleLine() {
 393     let post = this.props.post;
 394     return (
 395       <div className="post-title overflow-hidden">
 396         <h5>
 397           {this.props.showBody && post.url ? (
 398             <a
 399               className={!post.stickied ? 'text-body' : 'text-primary'}
 400               href={post.url}
 401               target="_blank"
 402               title={post.url}
 403               rel="noopener"
 404             >
 405               {post.name}
 406             </a>
 407           ) : (
 408             <Link
 409               className={!post.stickied ? 'text-body' : 'text-primary'}
 410               to={`/post/${post.id}`}
 411               title={i18n.t('comments')}
 412             >
 413               {post.name}
 414             </Link>
 415           )}
 416           {(isImage(post.url) || this.props.post.thumbnail_url) && (
 417             <>
 418               {!this.state.imageExpanded ? (
 419                 <span
 420                   class="text-monospace unselectable pointer ml-2 text-muted small"
 421                   data-tippy-content={i18n.t('expand_here')}
 422                   onClick={linkEvent(this, this.handleImageExpandClick)}
 423                 >
 424                   <svg class="icon icon-inline">
 425                     <use xlinkHref="#icon-plus-square"></use>
 426                   </svg>
 427                 </span>
 428               ) : (
 429                 <span>
 430                   <span
 431                     class="text-monospace unselectable pointer ml-2 text-muted small"
 432                     onClick={linkEvent(this, this.handleImageExpandClick)}
 433                   >
 434                     <svg class="icon icon-inline">
 435                       <use xlinkHref="#icon-minus-square"></use>
 436                     </svg>
 437                   </span>
 438                   <div>
 439                     <span
 440                       class="pointer"
 441                       onClick={linkEvent(this, this.handleImageExpandClick)}
 442                     >
 443                       <img
 444                         class="img-fluid img-expanded"
 445                         src={this.getImage()}
 446                       />
 447                     </span>
 448                   </div>
 449                 </span>
 450               )}
 451             </>
 452           )}
 453           {post.removed && (
 454             <small className="ml-2 text-muted font-italic">
 455               {i18n.t('removed')}
 456             </small>
 457           )}
 458           {post.deleted && (
 459             <small
 460               className="unselectable pointer ml-2 text-muted font-italic"
 461               data-tippy-content={i18n.t('deleted')}
 462             >
 463               <svg class={`icon icon-inline text-danger`}>
 464                 <use xlinkHref="#icon-trash"></use>
 465               </svg>
 466             </small>
 467           )}
 468           {post.locked && (
 469             <small
 470               className="unselectable pointer ml-2 text-muted font-italic"
 471               data-tippy-content={i18n.t('locked')}
 472             >
 473               <svg class={`icon icon-inline text-danger`}>
 474                 <use xlinkHref="#icon-lock"></use>
 475               </svg>
 476             </small>
 477           )}
 478           {post.stickied && (
 479             <small
 480               className="unselectable pointer ml-2 text-muted font-italic"
 481               data-tippy-content={i18n.t('stickied')}
 482             >
 483               <svg class={`icon icon-inline text-primary`}>
 484                 <use xlinkHref="#icon-pin"></use>
 485               </svg>
 486             </small>
 487           )}
 488           {post.nsfw && (
 489             <small className="ml-2 text-muted font-italic">
 490               {i18n.t('nsfw')}
 491             </small>
 492           )}
 493         </h5>
 494       </div>
 495     );
 496   }
 497
 498   commentsLine(showVotes: boolean = false) {
 499     let post = this.props.post;
 500     return (
 501       <ul class="d-flex align-items-center list-inline mb-1 text-muted small">
 502         <li className="list-inline-item">
 503           <Link
 504             className="text-muted"
 505             title={i18n.t('number_of_comments', {
 506               count: post.number_of_comments,
 507             })}
 508             to={`/post/${post.id}`}
 509           >
 510             <svg class="mr-1 icon icon-inline">
 511               <use xlinkHref="#icon-message-square"></use>
 512             </svg>
 513             {i18n.t('number_of_comments', {
 514               count: post.number_of_comments,
 515             })}
 516           </Link>
 517         </li>
 518         {(showVotes || this.state.upvotes !== this.state.score) && (
 519           <>
 520             <span
 521               class="unselectable pointer ml-3"
 522               data-tippy-content={this.pointsTippy}
 523             >
 524               <li className="list-inline-item">
 525                 <a
 526                   className={`btn-animate btn btn-link p-0 ${
 527                     this.state.my_vote == 1 ? 'text-info' : 'text-muted'
 528                   }`}
 529                   onClick={linkEvent(this, this.handlePostLike)}
 530                 >
 531                   <svg class="small icon icon-inline mx-1">
 532                     <use xlinkHref="#icon-arrow-up1"></use>
 533                   </svg>
 534                   {this.state.upvotes}
 535                 </a>
 536               </li>
 537               <li className="list-inline-item">
 538                 <a
 539                   className={`btn-animate btn btn-link p-0 ${
 540                     this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
 541                   }`}
 542                   onClick={linkEvent(this, this.handlePostDisLike)}
 543                 >
 544                   <svg class="small icon icon-inline mx-1">
 545                     <use xlinkHref="#icon-arrow-down1"></use>
 546                   </svg>
 547                   {this.state.downvotes}
 548                 </a>
 549               </li>
 550             </span>
 551           </>
 552         )}
 553       </ul>
 554     );
 555   }
 556
 557   duplicatesLine() {
 558     return (
 559       this.props.post.duplicates && (
 560         <ul class="list-inline mb-1 small text-muted">
 561           <>
 562             <li className="list-inline-item mr-2">
 563               {i18n.t('cross_posted_to')}
 564             </li>
 565             {this.props.post.duplicates.map(post => (
 566               <li className="list-inline-item mr-2">
 567                 <Link to={`/post/${post.id}`}>{post.community_name}</Link>
 568               </li>
 569             ))}
 570           </>
 571         </ul>
 572       )
 573     );
 574   }
 575
 576   postActions() {
 577     let post = this.props.post;
 578     return (
 579       <ul class="list-inline mb-1 text-muted font-weight-bold">
 580         {UserService.Instance.user && (
 581           <>
 582             {this.props.showBody && (
 583               <>
 584                 <li className="list-inline-item">
 585                   <button
 586                     class="btn btn-link btn-animate text-muted"
 587                     onClick={linkEvent(this, this.handleSavePostClick)}
 588                     data-tippy-content={
 589                       post.saved ? i18n.t('unsave') : i18n.t('save')
 590                     }
 591                   >
 592                     <svg
 593                       class={`icon icon-inline ${post.saved && 'text-warning'}`}
 594                     >
 595                       <use xlinkHref="#icon-star"></use>
 596                     </svg>
 597                   </button>
 598                 </li>
 599                 <li className="list-inline-item">
 600                   <Link
 601                     class="btn btn-link btn-animate text-muted"
 602                     to={`/create_post${this.crossPostParams}`}
 603                     title={i18n.t('cross_post')}
 604                   >
 605                     <svg class="icon icon-inline">
 606                       <use xlinkHref="#icon-copy"></use>
 607                     </svg>
 608                   </Link>
 609                 </li>
 610               </>
 611             )}
 612             {this.myPost && this.props.showBody && (
 613               <>
 614                 <li className="list-inline-item">
 615                   <button
 616                     class="btn btn-link btn-animate text-muted"
 617                     onClick={linkEvent(this, this.handleEditClick)}
 618                     data-tippy-content={i18n.t('edit')}
 619                   >
 620                     <svg class="icon icon-inline">
 621                       <use xlinkHref="#icon-edit"></use>
 622                     </svg>
 623                   </button>
 624                 </li>
 625                 <li className="list-inline-item">
 626                   <button
 627                     class="btn btn-link btn-animate text-muted"
 628                     onClick={linkEvent(this, this.handleDeleteClick)}
 629                     data-tippy-content={
 630                       !post.deleted ? i18n.t('delete') : i18n.t('restore')
 631                     }
 632                   >
 633                     <svg
 634                       class={`icon icon-inline ${
 635                         post.deleted && 'text-danger'
 636                       }`}
 637                     >
 638                       <use xlinkHref="#icon-trash"></use>
 639                     </svg>
 640                   </button>
 641                 </li>
 642               </>
 643             )}
 644
 645             {!this.state.showAdvanced && this.props.showBody ? (
 646               <li className="list-inline-item">
 647                 <button
 648                   class="btn btn-link btn-animate text-muted"
 649                   onClick={linkEvent(this, this.handleShowAdvanced)}
 650                   data-tippy-content={i18n.t('more')}
 651                 >
 652                   <svg class="icon icon-inline">
 653                     <use xlinkHref="#icon-more-vertical"></use>
 654                   </svg>
 655                 </button>
 656               </li>
 657             ) : (
 658               <>
 659                 {this.props.showBody && post.body && (
 660                   <li className="list-inline-item">
 661                     <button
 662                       class="btn btn-link btn-animate text-muted"
 663                       onClick={linkEvent(this, this.handleViewSource)}
 664                       data-tippy-content={i18n.t('view_source')}
 665                     >
 666                       <svg
 667                         class={`icon icon-inline ${
 668                           this.state.viewSource && 'text-success'
 669                         }`}
 670                       >
 671                         <use xlinkHref="#icon-file-text"></use>
 672                       </svg>
 673                     </button>
 674                   </li>
 675                 )}
 676                 {this.canModOnSelf && (
 677                   <>
 678                     <li className="list-inline-item">
 679                       <button
 680                         class="btn btn-link btn-animate text-muted"
 681                         onClick={linkEvent(this, this.handleModLock)}
 682                         data-tippy-content={
 683                           post.locked ? i18n.t('unlock') : i18n.t('lock')
 684                         }
 685                       >
 686                         <svg
 687                           class={`icon icon-inline ${
 688                             post.locked && 'text-danger'
 689                           }`}
 690                         >
 691                           <use xlinkHref="#icon-lock"></use>
 692                         </svg>
 693                       </button>
 694                     </li>
 695                     <li className="list-inline-item">
 696                       <button
 697                         class="btn btn-link btn-animate text-muted"
 698                         onClick={linkEvent(this, this.handleModSticky)}
 699                         data-tippy-content={
 700                           post.stickied ? i18n.t('unsticky') : i18n.t('sticky')
 701                         }
 702                       >
 703                         <svg
 704                           class={`icon icon-inline ${
 705                             post.stickied && 'text-success'
 706                           }`}
 707                         >
 708                           <use xlinkHref="#icon-pin"></use>
 709                         </svg>
 710                       </button>
 711                     </li>
 712                   </>
 713                 )}
 714                 {/* Mods can ban from community, and appoint as mods to community */}
 715                 {(this.canMod || this.canAdmin) && (
 716                   <li className="list-inline-item">
 717                     {!post.removed ? (
 718                       <span
 719                         class="pointer"
 720                         onClick={linkEvent(this, this.handleModRemoveShow)}
 721                       >
 722                         {i18n.t('remove')}
 723                       </span>
 724                     ) : (
 725                       <span
 726                         class="pointer"
 727                         onClick={linkEvent(this, this.handleModRemoveSubmit)}
 728                       >
 729                         {i18n.t('restore')}
 730                       </span>
 731                     )}
 732                   </li>
 733                 )}
 734                 {this.canMod && (
 735                   <>
 736                     {!this.isMod && (
 737                       <li className="list-inline-item">
 738                         {!post.banned_from_community ? (
 739                           <span
 740                             class="pointer"
 741                             onClick={linkEvent(
 742                               this,
 743                               this.handleModBanFromCommunityShow
 744                             )}
 745                           >
 746                             {i18n.t('ban')}
 747                           </span>
 748                         ) : (
 749                           <span
 750                             class="pointer"
 751                             onClick={linkEvent(
 752                               this,
 753                               this.handleModBanFromCommunitySubmit
 754                             )}
 755                           >
 756                             {i18n.t('unban')}
 757                           </span>
 758                         )}
 759                       </li>
 760                     )}
 761                     {!post.banned_from_community && post.creator_local && (
 762                       <li className="list-inline-item">
 763                         <span
 764                           class="pointer"
 765                           onClick={linkEvent(
 766                             this,
 767                             this.handleAddModToCommunity
 768                           )}
 769                         >
 770                           {this.isMod
 771                             ? i18n.t('remove_as_mod')
 772                             : i18n.t('appoint_as_mod')}
 773                         </span>
 774                       </li>
 775                     )}
 776                   </>
 777                 )}
 778                 {/* Community creators and admins can transfer community to another mod */}
 779                 {(this.amCommunityCreator || this.canAdmin) &&
 780                   this.isMod &&
 781                   post.creator_local && (
 782                     <li className="list-inline-item">
 783                       {!this.state.showConfirmTransferCommunity ? (
 784                         <span
 785                           class="pointer"
 786                           onClick={linkEvent(
 787                             this,
 788                             this.handleShowConfirmTransferCommunity
 789                           )}
 790                         >
 791                           {i18n.t('transfer_community')}
 792                         </span>
 793                       ) : (
 794                         <>
 795                           <span class="d-inline-block mr-1">
 796                             {i18n.t('are_you_sure')}
 797                           </span>
 798                           <span
 799                             class="pointer d-inline-block mr-1"
 800                             onClick={linkEvent(
 801                               this,
 802                               this.handleTransferCommunity
 803                             )}
 804                           >
 805                             {i18n.t('yes')}
 806                           </span>
 807                           <span
 808                             class="pointer d-inline-block"
 809                             onClick={linkEvent(
 810                               this,
 811                               this.handleCancelShowConfirmTransferCommunity
 812                             )}
 813                           >
 814                             {i18n.t('no')}
 815                           </span>
 816                         </>
 817                       )}
 818                     </li>
 819                   )}
 820                 {/* Admins can ban from all, and appoint other admins */}
 821                 {this.canAdmin && (
 822                   <>
 823                     {!this.isAdmin && (
 824                       <li className="list-inline-item">
 825                         {!post.banned ? (
 826                           <span
 827                             class="pointer"
 828                             onClick={linkEvent(this, this.handleModBanShow)}
 829                           >
 830                             {i18n.t('ban_from_site')}
 831                           </span>
 832                         ) : (
 833                           <span
 834                             class="pointer"
 835                             onClick={linkEvent(this, this.handleModBanSubmit)}
 836                           >
 837                             {i18n.t('unban_from_site')}
 838                           </span>
 839                         )}
 840                       </li>
 841                     )}
 842                     {!post.banned && post.creator_local && (
 843                       <li className="list-inline-item">
 844                         <span
 845                           class="pointer"
 846                           onClick={linkEvent(this, this.handleAddAdmin)}
 847                         >
 848                           {this.isAdmin
 849                             ? i18n.t('remove_as_admin')
 850                             : i18n.t('appoint_as_admin')}
 851                         </span>
 852                       </li>
 853                     )}
 854                   </>
 855                 )}
 856                 {/* Site Creator can transfer to another admin */}
 857                 {this.amSiteCreator && this.isAdmin && (
 858                   <li className="list-inline-item">
 859                     {!this.state.showConfirmTransferSite ? (
 860                       <span
 861                         class="pointer"
 862                         onClick={linkEvent(
 863                           this,
 864                           this.handleShowConfirmTransferSite
 865                         )}
 866                       >
 867                         {i18n.t('transfer_site')}
 868                       </span>
 869                     ) : (
 870                       <>
 871                         <span class="d-inline-block mr-1">
 872                           {i18n.t('are_you_sure')}
 873                         </span>
 874                         <span
 875                           class="pointer d-inline-block mr-1"
 876                           onClick={linkEvent(this, this.handleTransferSite)}
 877                         >
 878                           {i18n.t('yes')}
 879                         </span>
 880                         <span
 881                           class="pointer d-inline-block"
 882                           onClick={linkEvent(
 883                             this,
 884                             this.handleCancelShowConfirmTransferSite
 885                           )}
 886                         >
 887                           {i18n.t('no')}
 888                         </span>
 889                       </>
 890                     )}
 891                   </li>
 892                 )}
 893               </>
 894             )}
 895           </>
 896         )}
 897       </ul>
 898     );
 899   }
 900
 901   removeAndBanDialogs() {
 902     let post = this.props.post;
 903     return (
 904       <>
 905         {this.state.showRemoveDialog && (
 906           <form
 907             class="form-inline"
 908             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
 909           >
 910             <input
 911               type="text"
 912               class="form-control mr-2"
 913               placeholder={i18n.t('reason')}
 914               value={this.state.removeReason}
 915               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
 916             />
 917             <button type="submit" class="btn btn-secondary">
 918               {i18n.t('remove_post')}
 919             </button>
 920           </form>
 921         )}
 922         {this.state.showBanDialog && (
 923           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
 924             <div class="form-group row">
 925               <label class="col-form-label" htmlFor="post-listing-reason">
 926                 {i18n.t('reason')}
 927               </label>
 928               <input
 929                 type="text"
 930                 id="post-listing-reason"
 931                 class="form-control mr-2"
 932                 placeholder={i18n.t('reason')}
 933                 value={this.state.banReason}
 934                 onInput={linkEvent(this, this.handleModBanReasonChange)}
 935               />
 936               <div class="form-group">
 937                 <div class="form-check">
 938                   <input
 939                     class="form-check-input"
 940                     id="mod-ban-remove-data"
 941                     type="checkbox"
 942                     checked={this.state.removeData}
 943                     onChange={linkEvent(this, this.handleModRemoveDataChange)}
 944                   />
 945                   <label class="form-check-label" htmlFor="mod-ban-remove-data">
 946                     {i18n.t('remove_posts_comments')}
 947                   </label>
 948                 </div>
 949               </div>
 950             </div>
 951             {/* TODO hold off on expires until later */}
 952             {/* <div class="form-group row"> */}
 953             {/*   <label class="col-form-label">Expires</label> */}
 954             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
 955             {/* </div> */}
 956             <div class="form-group row">
 957               <button type="submit" class="btn btn-secondary">
 958                 {i18n.t('ban')} {post.creator_name}
 959               </button>
 960             </div>
 961           </form>
 962         )}
 963       </>
 964     );
 965   }
 966
 967   mobileThumbnail() {
 968     return this.props.post.thumbnail_url || isImage(this.props.post.url) ? (
 969       <div class="row">
 970         <div className={`${this.state.imageExpanded ? 'col-12' : 'col-8'}`}>
 971           {this.postTitleLine()}
 972         </div>
 973         <div class="col-4">
 974           {/* Post body prev or thumbnail */}
 975           {!this.state.imageExpanded && this.thumbnail()}
 976         </div>
 977       </div>
 978     ) : (
 979       this.postTitleLine()
 980     );
 981   }
 982
 983   showMobilePreview() {
 984     return (
 985       this.props.post.body &&
 986       !this.props.showBody && (
 987         <div
 988           className="md-div mb-1"
 989           dangerouslySetInnerHTML={{
 990             __html: md.render(previewLines(this.props.post.body)),
 991           }}
 992         />
 993       )
 994     );
 995   }
 996
 997   listing() {
 998     return (
 999       <>
1000         {/* The mobile view*/}
1001         <div class="d-block d-sm-none">
1002           <div class="row">
1003             <div class="col-12">
1004               {this.createdLine()}
1005
1006               {/* If it has a thumbnail, do a right aligned thumbnail */}
1007               {this.mobileThumbnail()}
1008
1009               {/* Show a preview of the post body */}
1010               {this.showMobilePreview()}
1011
1012               {this.commentsLine(true)}
1013               {this.duplicatesLine()}
1014               {this.postActions()}
1015               {this.removeAndBanDialogs()}
1016             </div>
1017           </div>
1018         </div>
1019
1020         {/* The larger view*/}
1021         <div class="d-none d-sm-block">
1022           <div class="row">
1023             {this.voteBar()}
1024             {!this.state.imageExpanded && (
1025               <div class="col-sm-2 pr-0">
1026                 <div class="">{this.thumbnail()}</div>
1027               </div>
1028             )}
1029             <div
1030               class={`${
1031                 this.state.imageExpanded ? 'col-12' : 'col-12 col-sm-9'
1032               }`}
1033             >
1034               <div class="row">
1035                 <div className="col-12">
1036                   {this.postTitleLine()}
1037                   {this.createdLine()}
1038                   {this.commentsLine()}
1039                   {this.duplicatesLine()}
1040                   {this.postActions()}
1041                   {this.removeAndBanDialogs()}
1042                 </div>
1043               </div>
1044             </div>
1045           </div>
1046         </div>
1047       </>
1048     );
1049   }
1050
1051   private get myPost(): boolean {
1052     return (
1053       UserService.Instance.user &&
1054       this.props.post.creator_id == UserService.Instance.user.id
1055     );
1056   }
1057
1058   get isMod(): boolean {
1059     return (
1060       this.props.moderators &&
1061       isMod(
1062         this.props.moderators.map(m => m.user_id),
1063         this.props.post.creator_id
1064       )
1065     );
1066   }
1067
1068   get isAdmin(): boolean {
1069     return (
1070       this.props.admins &&
1071       isMod(
1072         this.props.admins.map(a => a.id),
1073         this.props.post.creator_id
1074       )
1075     );
1076   }
1077
1078   get canMod(): boolean {
1079     if (this.props.admins && this.props.moderators) {
1080       let adminsThenMods = this.props.admins
1081         .map(a => a.id)
1082         .concat(this.props.moderators.map(m => m.user_id));
1083
1084       return canMod(
1085         UserService.Instance.user,
1086         adminsThenMods,
1087         this.props.post.creator_id
1088       );
1089     } else {
1090       return false;
1091     }
1092   }
1093
1094   get canModOnSelf(): boolean {
1095     if (this.props.admins && this.props.moderators) {
1096       let adminsThenMods = this.props.admins
1097         .map(a => a.id)
1098         .concat(this.props.moderators.map(m => m.user_id));
1099
1100       return canMod(
1101         UserService.Instance.user,
1102         adminsThenMods,
1103         this.props.post.creator_id,
1104         true
1105       );
1106     } else {
1107       return false;
1108     }
1109   }
1110
1111   get canAdmin(): boolean {
1112     return (
1113       this.props.admins &&
1114       canMod(
1115         UserService.Instance.user,
1116         this.props.admins.map(a => a.id),
1117         this.props.post.creator_id
1118       )
1119     );
1120   }
1121
1122   get amCommunityCreator(): boolean {
1123     return (
1124       this.props.moderators &&
1125       UserService.Instance.user &&
1126       this.props.post.creator_id != UserService.Instance.user.id &&
1127       UserService.Instance.user.id == this.props.moderators[0].user_id
1128     );
1129   }
1130
1131   get amSiteCreator(): boolean {
1132     return (
1133       this.props.admins &&
1134       UserService.Instance.user &&
1135       this.props.post.creator_id != UserService.Instance.user.id &&
1136       UserService.Instance.user.id == this.props.admins[0].id
1137     );
1138   }
1139
1140   handlePostLike(i: PostListing) {
1141     if (!UserService.Instance.user) {
1142       this.context.router.history.push(`/login`);
1143     }
1144
1145     let new_vote = i.state.my_vote == 1 ? 0 : 1;
1146
1147     if (i.state.my_vote == 1) {
1148       i.state.score--;
1149       i.state.upvotes--;
1150     } else if (i.state.my_vote == -1) {
1151       i.state.downvotes--;
1152       i.state.upvotes++;
1153       i.state.score += 2;
1154     } else {
1155       i.state.upvotes++;
1156       i.state.score++;
1157     }
1158
1159     i.state.my_vote = new_vote;
1160
1161     let form: CreatePostLikeForm = {
1162       post_id: i.props.post.id,
1163       score: i.state.my_vote,
1164     };
1165
1166     WebSocketService.Instance.likePost(form);
1167     i.setState(i.state);
1168     setupTippy();
1169   }
1170
1171   handlePostDisLike(i: PostListing) {
1172     if (!UserService.Instance.user) {
1173       this.context.router.history.push(`/login`);
1174     }
1175
1176     let new_vote = i.state.my_vote == -1 ? 0 : -1;
1177
1178     if (i.state.my_vote == 1) {
1179       i.state.score -= 2;
1180       i.state.upvotes--;
1181       i.state.downvotes++;
1182     } else if (i.state.my_vote == -1) {
1183       i.state.downvotes--;
1184       i.state.score++;
1185     } else {
1186       i.state.downvotes++;
1187       i.state.score--;
1188     }
1189
1190     i.state.my_vote = new_vote;
1191
1192     let form: CreatePostLikeForm = {
1193       post_id: i.props.post.id,
1194       score: i.state.my_vote,
1195     };
1196
1197     WebSocketService.Instance.likePost(form);
1198     i.setState(i.state);
1199     setupTippy();
1200   }
1201
1202   handleEditClick(i: PostListing) {
1203     i.state.showEdit = true;
1204     i.setState(i.state);
1205   }
1206
1207   handleEditCancel() {
1208     this.state.showEdit = false;
1209     this.setState(this.state);
1210   }
1211
1212   // The actual editing is done in the recieve for post
1213   handleEditPost() {
1214     this.state.showEdit = false;
1215     this.setState(this.state);
1216   }
1217
1218   handleDeleteClick(i: PostListing) {
1219     let deleteForm: DeletePostForm = {
1220       edit_id: i.props.post.id,
1221       deleted: !i.props.post.deleted,
1222       auth: null,
1223     };
1224     WebSocketService.Instance.deletePost(deleteForm);
1225   }
1226
1227   handleSavePostClick(i: PostListing) {
1228     let saved = i.props.post.saved == undefined ? true : !i.props.post.saved;
1229     let form: SavePostForm = {
1230       post_id: i.props.post.id,
1231       save: saved,
1232     };
1233
1234     WebSocketService.Instance.savePost(form);
1235   }
1236
1237   get crossPostParams(): string {
1238     let params = `?title=${this.props.post.name}`;
1239     let post = this.props.post;
1240
1241     if (post.url) {
1242       params += `&url=${encodeURIComponent(post.url)}`;
1243     }
1244     if (this.props.post.body) {
1245       params += `&body=${this.props.post.body}`;
1246     }
1247     return params;
1248   }
1249
1250   handleModRemoveShow(i: PostListing) {
1251     i.state.showRemoveDialog = true;
1252     i.setState(i.state);
1253   }
1254
1255   handleModRemoveReasonChange(i: PostListing, event: any) {
1256     i.state.removeReason = event.target.value;
1257     i.setState(i.state);
1258   }
1259
1260   handleModRemoveDataChange(i: PostListing, event: any) {
1261     i.state.removeData = event.target.checked;
1262     i.setState(i.state);
1263   }
1264
1265   handleModRemoveSubmit(i: PostListing) {
1266     event.preventDefault();
1267     let form: RemovePostForm = {
1268       edit_id: i.props.post.id,
1269       removed: !i.props.post.removed,
1270       reason: i.state.removeReason,
1271       auth: null,
1272     };
1273     WebSocketService.Instance.removePost(form);
1274
1275     i.state.showRemoveDialog = false;
1276     i.setState(i.state);
1277   }
1278
1279   handleModLock(i: PostListing) {
1280     let form: LockPostForm = {
1281       edit_id: i.props.post.id,
1282       locked: !i.props.post.locked,
1283       auth: null,
1284     };
1285     WebSocketService.Instance.lockPost(form);
1286   }
1287
1288   handleModSticky(i: PostListing) {
1289     let form: StickyPostForm = {
1290       edit_id: i.props.post.id,
1291       stickied: !i.props.post.stickied,
1292       auth: null,
1293     };
1294     WebSocketService.Instance.stickyPost(form);
1295   }
1296
1297   handleModBanFromCommunityShow(i: PostListing) {
1298     i.state.showBanDialog = true;
1299     i.state.banType = BanType.Community;
1300     i.setState(i.state);
1301   }
1302
1303   handleModBanShow(i: PostListing) {
1304     i.state.showBanDialog = true;
1305     i.state.banType = BanType.Site;
1306     i.setState(i.state);
1307   }
1308
1309   handleModBanReasonChange(i: PostListing, event: any) {
1310     i.state.banReason = event.target.value;
1311     i.setState(i.state);
1312   }
1313
1314   handleModBanExpiresChange(i: PostListing, event: any) {
1315     i.state.banExpires = event.target.value;
1316     i.setState(i.state);
1317   }
1318
1319   handleModBanFromCommunitySubmit(i: PostListing) {
1320     i.state.banType = BanType.Community;
1321     i.setState(i.state);
1322     i.handleModBanBothSubmit(i);
1323   }
1324
1325   handleModBanSubmit(i: PostListing) {
1326     i.state.banType = BanType.Site;
1327     i.setState(i.state);
1328     i.handleModBanBothSubmit(i);
1329   }
1330
1331   handleModBanBothSubmit(i: PostListing) {
1332     event.preventDefault();
1333
1334     if (i.state.banType == BanType.Community) {
1335       // If its an unban, restore all their data
1336       let ban = !i.props.post.banned_from_community;
1337       if (ban == false) {
1338         i.state.removeData = false;
1339       }
1340       let form: BanFromCommunityForm = {
1341         user_id: i.props.post.creator_id,
1342         community_id: i.props.post.community_id,
1343         ban,
1344         remove_data: i.state.removeData,
1345         reason: i.state.banReason,
1346         expires: getUnixTime(i.state.banExpires),
1347       };
1348       WebSocketService.Instance.banFromCommunity(form);
1349     } else {
1350       // If its an unban, restore all their data
1351       let ban = !i.props.post.banned;
1352       if (ban == false) {
1353         i.state.removeData = false;
1354       }
1355       let form: BanUserForm = {
1356         user_id: i.props.post.creator_id,
1357         ban,
1358         remove_data: i.state.removeData,
1359         reason: i.state.banReason,
1360         expires: getUnixTime(i.state.banExpires),
1361       };
1362       WebSocketService.Instance.banUser(form);
1363     }
1364
1365     i.state.showBanDialog = false;
1366     i.setState(i.state);
1367   }
1368
1369   handleAddModToCommunity(i: PostListing) {
1370     let form: AddModToCommunityForm = {
1371       user_id: i.props.post.creator_id,
1372       community_id: i.props.post.community_id,
1373       added: !i.isMod,
1374     };
1375     WebSocketService.Instance.addModToCommunity(form);
1376     i.setState(i.state);
1377   }
1378
1379   handleAddAdmin(i: PostListing) {
1380     let form: AddAdminForm = {
1381       user_id: i.props.post.creator_id,
1382       added: !i.isAdmin,
1383     };
1384     WebSocketService.Instance.addAdmin(form);
1385     i.setState(i.state);
1386   }
1387
1388   handleShowConfirmTransferCommunity(i: PostListing) {
1389     i.state.showConfirmTransferCommunity = true;
1390     i.setState(i.state);
1391   }
1392
1393   handleCancelShowConfirmTransferCommunity(i: PostListing) {
1394     i.state.showConfirmTransferCommunity = false;
1395     i.setState(i.state);
1396   }
1397
1398   handleTransferCommunity(i: PostListing) {
1399     let form: TransferCommunityForm = {
1400       community_id: i.props.post.community_id,
1401       user_id: i.props.post.creator_id,
1402     };
1403     WebSocketService.Instance.transferCommunity(form);
1404     i.state.showConfirmTransferCommunity = false;
1405     i.setState(i.state);
1406   }
1407
1408   handleShowConfirmTransferSite(i: PostListing) {
1409     i.state.showConfirmTransferSite = true;
1410     i.setState(i.state);
1411   }
1412
1413   handleCancelShowConfirmTransferSite(i: PostListing) {
1414     i.state.showConfirmTransferSite = false;
1415     i.setState(i.state);
1416   }
1417
1418   handleTransferSite(i: PostListing) {
1419     let form: TransferSiteForm = {
1420       user_id: i.props.post.creator_id,
1421     };
1422     WebSocketService.Instance.transferSite(form);
1423     i.state.showConfirmTransferSite = false;
1424     i.setState(i.state);
1425   }
1426
1427   handleImageExpandClick(i: PostListing) {
1428     i.state.imageExpanded = !i.state.imageExpanded;
1429     i.setState(i.state);
1430   }
1431
1432   handleViewSource(i: PostListing) {
1433     i.state.viewSource = !i.state.viewSource;
1434     i.setState(i.state);
1435   }
1436
1437   handleShowAdvanced(i: PostListing) {
1438     i.state.showAdvanced = !i.state.showAdvanced;
1439     i.setState(i.state);
1440     setupTippy();
1441   }
1442
1443   get pointsTippy(): string {
1444     let points = i18n.t('number_of_points', {
1445       count: this.state.score,
1446     });
1447
1448     let upvotes = i18n.t('number_of_upvotes', {
1449       count: this.state.upvotes,
1450     });
1451
1452     let downvotes = i18n.t('number_of_downvotes', {
1453       count: this.state.downvotes,
1454     });
1455
1456     return `${points} • ${upvotes} • ${downvotes}`;
1457   }
1458 }