src/shared/components/post/post-listing.tsx

   1 import classNames from "classnames";
   2 import { Component, linkEvent } from "inferno";
   3 import { Link } from "inferno-router";
   4 import {
   5   AddAdmin,
   6   AddModToCommunity,
   7   BanFromCommunity,
   8   BanPerson,
   9   BlockPerson,
  10   CommunityModeratorView,
  11   CreatePostLike,
  12   CreatePostReport,
  13   DeletePost,
  14   FeaturePost,
  15   Language,
  16   LockPost,
  17   PersonView,
  18   PostView,
  19   PurgePerson,
  20   PurgePost,
  21   RemovePost,
  22   SavePost,
  23   TransferCommunity,
  24 } from "lemmy-js-client";
  25 import { getExternalHost, getHttpBase } from "../../env";
  26 import { i18n } from "../../i18next";
  27 import { BanType, PostFormParams, PurgeType } from "../../interfaces";
  28 import { UserService, WebSocketService } from "../../services";
  29 import {
  30   amAdmin,
  31   amCommunityCreator,
  32   amMod,
  33   canAdmin,
  34   canMod,
  35   canShare,
  36   futureDaysToUnixTime,
  37   hostname,
  38   isAdmin,
  39   isBanned,
  40   isImage,
  41   isMod,
  42   isVideo,
  43   mdNoImages,
  44   mdToHtml,
  45   mdToHtmlInline,
  46   myAuth,
  47   numToSI,
  48   relTags,
  49   setupTippy,
  50   share,
  51   showScores,
  52   wsClient,
  53 } from "../../utils";
  54 import { Icon, PurgeWarning, Spinner } from "../common/icon";
  55 import { MomentTime } from "../common/moment-time";
  56 import { PictrsImage } from "../common/pictrs-image";
  57 import { CommunityLink } from "../community/community-link";
  58 import { PersonListing } from "../person/person-listing";
  59 import { MetadataCard } from "./metadata-card";
  60 import { PostForm } from "./post-form";
  61
  62 interface PostListingState {
  63   showEdit: boolean;
  64   showRemoveDialog: boolean;
  65   showPurgeDialog: boolean;
  66   purgeReason?: string;
  67   purgeType?: PurgeType;
  68   purgeLoading: boolean;
  69   removeReason?: string;
  70   showBanDialog: boolean;
  71   banReason?: string;
  72   banExpireDays?: number;
  73   banType?: BanType;
  74   removeData?: boolean;
  75   showConfirmTransferSite: boolean;
  76   showConfirmTransferCommunity: boolean;
  77   imageExpanded: boolean;
  78   viewSource: boolean;
  79   showAdvanced: boolean;
  80   showMoreMobile: boolean;
  81   showBody: boolean;
  82   showReportDialog: boolean;
  83   reportReason?: string;
  84   my_vote?: number;
  85   score: number;
  86   upvotes: number;
  87   downvotes: number;
  88 }
  89
  90 interface PostListingProps {
  91   post_view: PostView;
  92   duplicates?: PostView[];
  93   moderators?: CommunityModeratorView[];
  94   admins?: PersonView[];
  95   allLanguages: Language[];
  96   siteLanguages: number[];
  97   showCommunity?: boolean;
  98   showBody?: boolean;
  99   hideImage?: boolean;
 100   enableDownvotes?: boolean;
 101   enableNsfw?: boolean;
 102   viewOnly?: boolean;
 103 }
 104
 105 export class PostListing extends Component<PostListingProps, PostListingState> {
 106   state: PostListingState = {
 107     showEdit: false,
 108     showRemoveDialog: false,
 109     showPurgeDialog: false,
 110     purgeType: PurgeType.Person,
 111     purgeLoading: false,
 112     showBanDialog: false,
 113     banType: BanType.Community,
 114     removeData: false,
 115     showConfirmTransferSite: false,
 116     showConfirmTransferCommunity: false,
 117     imageExpanded: false,
 118     viewSource: false,
 119     showAdvanced: false,
 120     showMoreMobile: false,
 121     showBody: false,
 122     showReportDialog: false,
 123     my_vote: this.props.post_view.my_vote,
 124     score: this.props.post_view.counts.score,
 125     upvotes: this.props.post_view.counts.upvotes,
 126     downvotes: this.props.post_view.counts.downvotes,
 127   };
 128
 129   constructor(props: any, context: any) {
 130     super(props, context);
 131
 132     this.handlePostLike = this.handlePostLike.bind(this);
 133     this.handlePostDisLike = this.handlePostDisLike.bind(this);
 134     this.handleEditPost = this.handleEditPost.bind(this);
 135     this.handleEditCancel = this.handleEditCancel.bind(this);
 136   }
 137
 138   componentWillReceiveProps(nextProps: PostListingProps) {
 139     this.setState({
 140       my_vote: nextProps.post_view.my_vote,
 141       upvotes: nextProps.post_view.counts.upvotes,
 142       downvotes: nextProps.post_view.counts.downvotes,
 143       score: nextProps.post_view.counts.score,
 144     });
 145     if (this.props.post_view.post.id !== nextProps.post_view.post.id) {
 146       this.setState({ imageExpanded: false });
 147     }
 148   }
 149
 150   render() {
 151     const post = this.props.post_view.post;
 152
 153     return (
 154       <div className="post-listing">
 155         {!this.state.showEdit ? (
 156           <>
 157             {this.listing()}
 158             {this.state.imageExpanded && !this.props.hideImage && this.img}
 159             {post.url && this.showBody && post.embed_title && (
 160               <MetadataCard post={post} />
 161             )}
 162             {this.showBody && this.body()}
 163           </>
 164         ) : (
 165           <div className="col-12">
 166             <PostForm
 167               post_view={this.props.post_view}
 168               onEdit={this.handleEditPost}
 169               onCancel={this.handleEditCancel}
 170               enableNsfw={this.props.enableNsfw}
 171               enableDownvotes={this.props.enableDownvotes}
 172               allLanguages={this.props.allLanguages}
 173               siteLanguages={this.props.siteLanguages}
 174             />
 175           </div>
 176         )}
 177       </div>
 178     );
 179   }
 180
 181   body() {
 182     const body = this.props.post_view.post.body;
 183     return body ? (
 184       <div className="col-12 card my-2 p-2">
 185         {this.state.viewSource ? (
 186           <pre>{body}</pre>
 187         ) : (
 188           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
 189         )}
 190       </div>
 191     ) : (
 192       <></>
 193     );
 194   }
 195
 196   get img() {
 197     const src = this.imageSrc;
 198     return src ? (
 199       <>
 200         <div className="offset-sm-3 my-2 d-none d-sm-block">
 201           <a href={src} className="d-inline-block">
 202             <PictrsImage src={src} />
 203           </a>
 204         </div>
 205         <div className="my-2 d-block d-sm-none">
 206           <a
 207             className="d-inline-block"
 208             onClick={linkEvent(this, this.handleImageExpandClick)}
 209           >
 210             <PictrsImage src={src} />
 211           </a>
 212         </div>
 213       </>
 214     ) : (
 215       <></>
 216     );
 217   }
 218
 219   imgThumb(src: string) {
 220     const post_view = this.props.post_view;
 221     return (
 222       <PictrsImage
 223         src={src}
 224         thumbnail
 225         alt=""
 226         nsfw={post_view.post.nsfw || post_view.community.nsfw}
 227       />
 228     );
 229   }
 230
 231   get imageSrc(): string | undefined {
 232     const post = this.props.post_view.post;
 233     const url = post.url;
 234     const thumbnail = post.thumbnail_url;
 235
 236     if (url && isImage(url)) {
 237       if (url.includes("pictrs")) {
 238         return url;
 239       } else if (thumbnail) {
 240         return thumbnail;
 241       } else {
 242         return url;
 243       }
 244     } else if (thumbnail) {
 245       return thumbnail;
 246     } else {
 247       return undefined;
 248     }
 249   }
 250
 251   thumbnail() {
 252     const post = this.props.post_view.post;
 253     const url = post.url;
 254     const thumbnail = post.thumbnail_url;
 255
 256     if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
 257       return (
 258         <a
 259           href={this.imageSrc}
 260           className="text-body d-inline-block position-relative mb-2"
 261           data-tippy-content={i18n.t("expand_here")}
 262           onClick={linkEvent(this, this.handleImageExpandClick)}
 263           aria-label={i18n.t("expand_here")}
 264         >
 265           {this.imgThumb(this.imageSrc)}
 266           <Icon icon="image" classes="mini-overlay" />
 267         </a>
 268       );
 269     } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
 270       return (
 271         <a
 272           className="text-body d-inline-block position-relative mb-2"
 273           href={url}
 274           rel={relTags}
 275           title={url}
 276         >
 277           {this.imgThumb(this.imageSrc)}
 278           <Icon icon="external-link" classes="mini-overlay" />
 279         </a>
 280       );
 281     } else if (url) {
 282       if (!this.props.hideImage && isVideo(url)) {
 283         return (
 284           <div className="embed-responsive embed-responsive-16by9">
 285             <video
 286               playsInline
 287               muted
 288               loop
 289               controls
 290               className="embed-responsive-item"
 291             >
 292               <source src={url} type="video/mp4" />
 293             </video>
 294           </div>
 295         );
 296       } else {
 297         return (
 298           <a className="text-body" href={url} title={url} rel={relTags}>
 299             <div className="thumbnail rounded bg-light d-flex justify-content-center">
 300               <Icon icon="external-link" classes="d-flex align-items-center" />
 301             </div>
 302           </a>
 303         );
 304       }
 305     } else {
 306       return (
 307         <Link
 308           className="text-body"
 309           to={`/post/${post.id}`}
 310           title={i18n.t("comments")}
 311         >
 312           <div className="thumbnail rounded bg-light d-flex justify-content-center">
 313             <Icon icon="message-square" classes="d-flex align-items-center" />
 314           </div>
 315         </Link>
 316       );
 317     }
 318   }
 319
 320   createdLine() {
 321     const post_view = this.props.post_view;
 322     const url = post_view.post.url;
 323     const body = post_view.post.body;
 324     return (
 325       <ul className="list-inline mb-1 text-muted small">
 326         <li className="list-inline-item">
 327           <PersonListing person={post_view.creator} />
 328
 329           {this.creatorIsMod_ && (
 330             <span className="mx-1 badge">{i18n.t("mod")}</span>
 331           )}
 332           {this.creatorIsAdmin_ && (
 333             <span className="mx-1 badge">{i18n.t("admin")}</span>
 334           )}
 335           {post_view.creator.bot_account && (
 336             <span className="mx-1 badge">
 337               {i18n.t("bot_account").toLowerCase()}
 338             </span>
 339           )}
 340           {this.props.showCommunity && (
 341             <span>
 342               <span className="mx-1"> {i18n.t("to")} </span>
 343               <CommunityLink community={post_view.community} />
 344             </span>
 345           )}
 346         </li>
 347         {post_view.post.language_id !== 0 && (
 348           <span className="mx-1 badge">
 349             {
 350               this.props.allLanguages.find(
 351                 lang => lang.id === post_view.post.language_id
 352               )?.name
 353             }
 354           </span>
 355         )}
 356         <li className="list-inline-item">•</li>
 357         {url && !(hostname(url) === getExternalHost()) && (
 358           <>
 359             <li className="list-inline-item">
 360               <a
 361                 className="text-muted font-italic"
 362                 href={url}
 363                 title={url}
 364                 rel={relTags}
 365               >
 366                 {hostname(url)}
 367               </a>
 368             </li>
 369             <li className="list-inline-item">•</li>
 370           </>
 371         )}
 372         <li className="list-inline-item">
 373           <span>
 374             <MomentTime
 375               published={post_view.post.published}
 376               updated={post_view.post.updated}
 377             />
 378           </span>
 379         </li>
 380         {body && (
 381           <>
 382             <li className="list-inline-item">•</li>
 383             <li className="list-inline-item">
 384               <button
 385                 className="text-muted btn btn-sm btn-link p-0"
 386                 data-tippy-content={mdNoImages.render(body)}
 387                 data-tippy-allowHtml={true}
 388                 onClick={linkEvent(this, this.handleShowBody)}
 389               >
 390                 <Icon icon="book-open" classes="icon-inline mr-1" />
 391               </button>
 392             </li>
 393           </>
 394         )}
 395       </ul>
 396     );
 397   }
 398
 399   voteBar() {
 400     return (
 401       <div className={`vote-bar col-1 pr-0 small text-center`}>
 402         <button
 403           className={`btn-animate btn btn-link p-0 ${
 404             this.state.my_vote === 1 ? "text-info" : "text-muted"
 405           }`}
 406           onClick={this.handlePostLike}
 407           data-tippy-content={i18n.t("upvote")}
 408           aria-label={i18n.t("upvote")}
 409           aria-pressed={this.state.my_vote === 1}
 410         >
 411           <Icon icon="arrow-up1" classes="upvote" />
 412         </button>
 413         {showScores() ? (
 414           <div
 415             className={`unselectable pointer font-weight-bold text-muted px-1`}
 416             data-tippy-content={this.pointsTippy}
 417           >
 418             {numToSI(this.state.score)}
 419           </div>
 420         ) : (
 421           <div className="p-1"></div>
 422         )}
 423         {this.props.enableDownvotes && (
 424           <button
 425             className={`btn-animate btn btn-link p-0 ${
 426               this.state.my_vote === -1 ? "text-danger" : "text-muted"
 427             }`}
 428             onClick={this.handlePostDisLike}
 429             data-tippy-content={i18n.t("downvote")}
 430             aria-label={i18n.t("downvote")}
 431             aria-pressed={this.state.my_vote === -1}
 432           >
 433             <Icon icon="arrow-down1" classes="downvote" />
 434           </button>
 435         )}
 436       </div>
 437     );
 438   }
 439
 440   get postLink() {
 441     const post = this.props.post_view.post;
 442     return (
 443       <Link
 444         className={`d-inline-block ${
 445           !post.featured_community && !post.featured_local
 446             ? "text-body"
 447             : "text-primary"
 448         }`}
 449         to={`/post/${post.id}`}
 450         title={i18n.t("comments")}
 451       >
 452         <div
 453           className="d-inline-block"
 454           dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
 455         />
 456       </Link>
 457     );
 458   }
 459
 460   postTitleLine() {
 461     const post = this.props.post_view.post;
 462     const url = post.url;
 463
 464     return (
 465       <div className="post-title overflow-hidden">
 466         <h5>
 467           {url ? (
 468             this.props.showBody ? (
 469               <a
 470                 className={`d-inline-block ${
 471                   !post.featured_community && !post.featured_local
 472                     ? "text-body"
 473                     : "text-primary"
 474                 }`}
 475                 href={url}
 476                 title={url}
 477                 rel={relTags}
 478               >
 479                 <div
 480                   className="d-inline-block"
 481                   dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
 482                 />
 483               </a>
 484             ) : (
 485               this.postLink
 486             )
 487           ) : (
 488             this.postLink
 489           )}
 490           {(url && isImage(url)) ||
 491             (post.thumbnail_url && (
 492               <button
 493                 className="btn btn-link text-monospace text-muted small d-inline-block"
 494                 data-tippy-content={i18n.t("expand_here")}
 495                 onClick={linkEvent(this, this.handleImageExpandClick)}
 496               >
 497                 <Icon
 498                   icon={
 499                     !this.state.imageExpanded ? "plus-square" : "minus-square"
 500                   }
 501                   classes="icon-inline"
 502                 />
 503               </button>
 504             ))}
 505           {post.removed && (
 506             <small className="ml-2 text-muted font-italic">
 507               {i18n.t("removed")}
 508             </small>
 509           )}
 510           {post.deleted && (
 511             <small
 512               className="unselectable pointer ml-2 text-muted font-italic"
 513               data-tippy-content={i18n.t("deleted")}
 514             >
 515               <Icon icon="trash" classes="icon-inline text-danger" />
 516             </small>
 517           )}
 518           {post.locked && (
 519             <small
 520               className="unselectable pointer ml-2 text-muted font-italic"
 521               data-tippy-content={i18n.t("locked")}
 522             >
 523               <Icon icon="lock" classes="icon-inline text-danger" />
 524             </small>
 525           )}
 526           {post.featured_community && (
 527             <small
 528               className="unselectable pointer ml-2 text-muted font-italic"
 529               data-tippy-content={i18n.t("featured")}
 530             >
 531               <Icon icon="pin" classes="icon-inline text-primary" />
 532             </small>
 533           )}
 534           {post.featured_local && (
 535             <small
 536               className="unselectable pointer ml-2 text-muted font-italic"
 537               data-tippy-content={i18n.t("featured")}
 538             >
 539               <Icon icon="pin" classes="icon-inline text-secondary" />
 540             </small>
 541           )}
 542           {post.nsfw && (
 543             <small className="ml-2 text-muted font-italic">
 544               {i18n.t("nsfw")}
 545             </small>
 546           )}
 547         </h5>
 548       </div>
 549     );
 550   }
 551
 552   duplicatesLine() {
 553     const dupes = this.props.duplicates;
 554     return dupes && dupes.length > 0 ? (
 555       <ul className="list-inline mb-1 small text-muted">
 556         <>
 557           <li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
 558           {dupes.map(pv => (
 559             <li key={pv.post.id} className="list-inline-item mr-2">
 560               <Link to={`/post/${pv.post.id}`}>
 561                 {pv.community.local
 562                   ? pv.community.name
 563                   : `${pv.community.name}@${hostname(pv.community.actor_id)}`}
 564               </Link>
 565             </li>
 566           ))}
 567         </>
 568       </ul>
 569     ) : (
 570       <></>
 571     );
 572   }
 573
 574   commentsLine(mobile = false) {
 575     const post = this.props.post_view.post;
 576
 577     return (
 578       <div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
 579         {this.commentsButton}
 580         {canShare() && (
 581           <button
 582             className="btn btn-link"
 583             onClick={linkEvent(this, this.handleShare)}
 584             type="button"
 585           >
 586             <Icon icon="share" inline />
 587           </button>
 588         )}
 589         {!post.local && (
 590           <a
 591             className="btn btn-link btn-animate text-muted py-0"
 592             title={i18n.t("link")}
 593             href={post.ap_id}
 594           >
 595             <Icon icon="fedilink" inline />
 596           </a>
 597         )}
 598         {mobile && !this.props.viewOnly && this.mobileVotes}
 599         {UserService.Instance.myUserInfo &&
 600           !this.props.viewOnly &&
 601           this.postActions(mobile)}
 602       </div>
 603     );
 604   }
 605
 606   postActions(mobile = false) {
 607     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
 608     // Possible enhancement: Make each button a component.
 609     const post_view = this.props.post_view;
 610     return (
 611       <>
 612         {this.saveButton}
 613         {this.crossPostButton}
 614         {mobile && this.showMoreButton}
 615         {(!mobile || this.state.showAdvanced) && (
 616           <>
 617             {!this.myPost && (
 618               <>
 619                 {this.reportButton}
 620                 {this.blockButton}
 621               </>
 622             )}
 623             {this.myPost && (this.showBody || this.state.showAdvanced) && (
 624               <>
 625                 {this.editButton}
 626                 {this.deleteButton}
 627               </>
 628             )}
 629           </>
 630         )}
 631         {this.state.showAdvanced && (
 632           <>
 633             {this.showBody && post_view.post.body && this.viewSourceButton}
 634             {/* Any mod can do these, not limited to hierarchy*/}
 635             {(amMod(this.props.moderators) || amAdmin()) && (
 636               <>
 637                 {this.lockButton}
 638                 {this.featureButton}
 639               </>
 640             )}
 641             {(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
 642           </>
 643         )}
 644         {!mobile && this.showMoreButton}
 645       </>
 646     );
 647   }
 648
 649   get commentsButton() {
 650     const post_view = this.props.post_view;
 651     return (
 652       <Link
 653         className="btn btn-link text-muted py-0 pl-0 text-muted"
 654         title={i18n.t("number_of_comments", {
 655           count: Number(post_view.counts.comments),
 656           formattedCount: Number(post_view.counts.comments),
 657         })}
 658         to={`/post/${post_view.post.id}?scrollToComments=true`}
 659       >
 660         <Icon icon="message-square" classes="mr-1" inline />
 661         <span className="mr-2">
 662           {i18n.t("number_of_comments", {
 663             count: Number(post_view.counts.comments),
 664             formattedCount: numToSI(post_view.counts.comments),
 665           })}
 666         </span>
 667         {this.unreadCount && (
 668           <span className="small text-warning">
 669             ({this.unreadCount} {i18n.t("new")})
 670           </span>
 671         )}
 672       </Link>
 673     );
 674   }
 675
 676   get unreadCount(): number | undefined {
 677     const pv = this.props.post_view;
 678     return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0
 679       ? undefined
 680       : pv.unread_comments;
 681   }
 682
 683   get mobileVotes() {
 684     // TODO: make nicer
 685     const tippy = showScores()
 686       ? { "data-tippy-content": this.pointsTippy }
 687       : {};
 688     return (
 689       <>
 690         <div>
 691           <button
 692             className={`btn-animate btn py-0 px-1 ${
 693               this.state.my_vote === 1 ? "text-info" : "text-muted"
 694             }`}
 695             {...tippy}
 696             onClick={this.handlePostLike}
 697             aria-label={i18n.t("upvote")}
 698             aria-pressed={this.state.my_vote === 1}
 699           >
 700             <Icon icon="arrow-up1" classes="icon-inline small" />
 701             {showScores() && (
 702               <span className="ml-2">{numToSI(this.state.upvotes)}</span>
 703             )}
 704           </button>
 705           {this.props.enableDownvotes && (
 706             <button
 707               className={`ml-2 btn-animate btn py-0 px-1 ${
 708                 this.state.my_vote === -1 ? "text-danger" : "text-muted"
 709               }`}
 710               onClick={this.handlePostDisLike}
 711               {...tippy}
 712               aria-label={i18n.t("downvote")}
 713               aria-pressed={this.state.my_vote === -1}
 714             >
 715               <Icon icon="arrow-down1" classes="icon-inline small" />
 716               {showScores() && (
 717                 <span
 718                   className={classNames("ml-2", {
 719                     invisible: this.state.downvotes === 0,
 720                   })}
 721                 >
 722                   {numToSI(this.state.downvotes)}
 723                 </span>
 724               )}
 725             </button>
 726           )}
 727         </div>
 728       </>
 729     );
 730   }
 731
 732   get saveButton() {
 733     const saved = this.props.post_view.saved;
 734     const label = saved ? i18n.t("unsave") : i18n.t("save");
 735     return (
 736       <button
 737         className="btn btn-link btn-animate text-muted py-0"
 738         onClick={linkEvent(this, this.handleSavePostClick)}
 739         data-tippy-content={label}
 740         aria-label={label}
 741       >
 742         <Icon
 743           icon="star"
 744           classes={classNames({ "text-warning": saved })}
 745           inline
 746         />
 747       </button>
 748     );
 749   }
 750
 751   get crossPostButton() {
 752     return (
 753       <Link
 754         className="btn btn-link btn-animate text-muted py-0"
 755         to={{
 756           /* Empty string properties are required to satisfy type*/
 757           pathname: "/create_post",
 758           state: { ...this.crossPostParams },
 759           hash: "",
 760           key: "",
 761           search: "",
 762         }}
 763         title={i18n.t("cross_post")}
 764       >
 765         <Icon icon="copy" inline />
 766       </Link>
 767     );
 768   }
 769
 770   get reportButton() {
 771     return (
 772       <button
 773         className="btn btn-link btn-animate text-muted py-0"
 774         onClick={linkEvent(this, this.handleShowReportDialog)}
 775         data-tippy-content={i18n.t("show_report_dialog")}
 776         aria-label={i18n.t("show_report_dialog")}
 777       >
 778         <Icon icon="flag" inline />
 779       </button>
 780     );
 781   }
 782
 783   get blockButton() {
 784     return (
 785       <button
 786         className="btn btn-link btn-animate text-muted py-0"
 787         onClick={linkEvent(this, this.handleBlockUserClick)}
 788         data-tippy-content={i18n.t("block_user")}
 789         aria-label={i18n.t("block_user")}
 790       >
 791         <Icon icon="slash" inline />
 792       </button>
 793     );
 794   }
 795
 796   get editButton() {
 797     return (
 798       <button
 799         className="btn btn-link btn-animate text-muted py-0"
 800         onClick={linkEvent(this, this.handleEditClick)}
 801         data-tippy-content={i18n.t("edit")}
 802         aria-label={i18n.t("edit")}
 803       >
 804         <Icon icon="edit" inline />
 805       </button>
 806     );
 807   }
 808
 809   get deleteButton() {
 810     const deleted = this.props.post_view.post.deleted;
 811     const label = !deleted ? i18n.t("delete") : i18n.t("restore");
 812     return (
 813       <button
 814         className="btn btn-link btn-animate text-muted py-0"
 815         onClick={linkEvent(this, this.handleDeleteClick)}
 816         data-tippy-content={label}
 817         aria-label={label}
 818       >
 819         <Icon
 820           icon="trash"
 821           classes={classNames({ "text-danger": deleted })}
 822           inline
 823         />
 824       </button>
 825     );
 826   }
 827
 828   get showMoreButton() {
 829     return (
 830       <button
 831         className="btn btn-link btn-animate text-muted py-0"
 832         onClick={linkEvent(this, this.handleShowAdvanced)}
 833         data-tippy-content={i18n.t("more")}
 834         aria-label={i18n.t("more")}
 835       >
 836         <Icon icon="more-vertical" inline />
 837       </button>
 838     );
 839   }
 840
 841   get viewSourceButton() {
 842     return (
 843       <button
 844         className="btn btn-link btn-animate text-muted py-0"
 845         onClick={linkEvent(this, this.handleViewSource)}
 846         data-tippy-content={i18n.t("view_source")}
 847         aria-label={i18n.t("view_source")}
 848       >
 849         <Icon
 850           icon="file-text"
 851           classes={classNames({ "text-success": this.state.viewSource })}
 852           inline
 853         />
 854       </button>
 855     );
 856   }
 857
 858   get lockButton() {
 859     const locked = this.props.post_view.post.locked;
 860     const label = locked ? i18n.t("unlock") : i18n.t("lock");
 861     return (
 862       <button
 863         className="btn btn-link btn-animate text-muted py-0"
 864         onClick={linkEvent(this, this.handleModLock)}
 865         data-tippy-content={label}
 866         aria-label={label}
 867       >
 868         <Icon
 869           icon="lock"
 870           classes={classNames({ "text-danger": locked })}
 871           inline
 872         />
 873       </button>
 874     );
 875   }
 876
 877   get featureButton() {
 878     const featuredCommunity = this.props.post_view.post.featured_community;
 879     const labelCommunity = featuredCommunity
 880       ? i18n.t("unfeature_from_community")
 881       : i18n.t("feature_in_community");
 882
 883     const featuredLocal = this.props.post_view.post.featured_local;
 884     const labelLocal = featuredLocal
 885       ? i18n.t("unfeature_from_local")
 886       : i18n.t("feature_in_local");
 887     return (
 888       <span>
 889         <button
 890           className="btn btn-link btn-animate text-muted py-0 pl-0"
 891           onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
 892           data-tippy-content={labelCommunity}
 893           aria-label={labelCommunity}
 894         >
 895           <Icon
 896             icon="pin"
 897             classes={classNames({ "text-success": featuredCommunity })}
 898             inline
 899           />{" "}
 900           Community
 901         </button>
 902         {amAdmin() && (
 903           <button
 904             className="btn btn-link btn-animate text-muted py-0"
 905             onClick={linkEvent(this, this.handleModFeaturePostLocal)}
 906             data-tippy-content={labelLocal}
 907             aria-label={labelLocal}
 908           >
 909             <Icon
 910               icon="pin"
 911               classes={classNames({ "text-success": featuredLocal })}
 912               inline
 913             />{" "}
 914             Local
 915           </button>
 916         )}
 917       </span>
 918     );
 919   }
 920
 921   get modRemoveButton() {
 922     const removed = this.props.post_view.post.removed;
 923     return (
 924       <button
 925         className="btn btn-link btn-animate text-muted py-0"
 926         onClick={linkEvent(
 927           this,
 928           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
 929         )}
 930       >
 931         {/* TODO: Find an icon for this. */}
 932         {!removed ? i18n.t("remove") : i18n.t("restore")}
 933       </button>
 934     );
 935   }
 936
 937   /**
 938    * Mod/Admin actions to be taken against the author.
 939    */
 940   userActionsLine() {
 941     // TODO: make nicer
 942     const post_view = this.props.post_view;
 943     return (
 944       this.state.showAdvanced && (
 945         <>
 946           {this.canMod_ && (
 947             <>
 948               {!this.creatorIsMod_ &&
 949                 (!post_view.creator_banned_from_community ? (
 950                   <button
 951                     className="btn btn-link btn-animate text-muted py-0"
 952                     onClick={linkEvent(
 953                       this,
 954                       this.handleModBanFromCommunityShow
 955                     )}
 956                     aria-label={i18n.t("ban_from_community")}
 957                   >
 958                     {i18n.t("ban_from_community")}
 959                   </button>
 960                 ) : (
 961                   <button
 962                     className="btn btn-link btn-animate text-muted py-0"
 963                     onClick={linkEvent(
 964                       this,
 965                       this.handleModBanFromCommunitySubmit
 966                     )}
 967                     aria-label={i18n.t("unban")}
 968                   >
 969                     {i18n.t("unban")}
 970                   </button>
 971                 ))}
 972               {!post_view.creator_banned_from_community && (
 973                 <button
 974                   className="btn btn-link btn-animate text-muted py-0"
 975                   onClick={linkEvent(this, this.handleAddModToCommunity)}
 976                   aria-label={
 977                     this.creatorIsMod_
 978                       ? i18n.t("remove_as_mod")
 979                       : i18n.t("appoint_as_mod")
 980                   }
 981                 >
 982                   {this.creatorIsMod_
 983                     ? i18n.t("remove_as_mod")
 984                     : i18n.t("appoint_as_mod")}
 985                 </button>
 986               )}
 987             </>
 988           )}
 989           {/* Community creators and admins can transfer community to another mod */}
 990           {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
 991             this.canAdmin_) &&
 992             this.creatorIsMod_ &&
 993             (!this.state.showConfirmTransferCommunity ? (
 994               <button
 995                 className="btn btn-link btn-animate text-muted py-0"
 996                 onClick={linkEvent(
 997                   this,
 998                   this.handleShowConfirmTransferCommunity
 999                 )}
1000                 aria-label={i18n.t("transfer_community")}
1001               >
1002                 {i18n.t("transfer_community")}
1003               </button>
1004             ) : (
1005               <>
1006                 <button
1007                   className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
1008                   aria-label={i18n.t("are_you_sure")}
1009                 >
1010                   {i18n.t("are_you_sure")}
1011                 </button>
1012                 <button
1013                   className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
1014                   aria-label={i18n.t("yes")}
1015                   onClick={linkEvent(this, this.handleTransferCommunity)}
1016                 >
1017                   {i18n.t("yes")}
1018                 </button>
1019                 <button
1020                   className="btn btn-link btn-animate text-muted py-0 d-inline-block"
1021                   onClick={linkEvent(
1022                     this,
1023                     this.handleCancelShowConfirmTransferCommunity
1024                   )}
1025                   aria-label={i18n.t("no")}
1026                 >
1027                   {i18n.t("no")}
1028                 </button>
1029               </>
1030             ))}
1031           {/* Admins can ban from all, and appoint other admins */}
1032           {this.canAdmin_ && (
1033             <>
1034               {!this.creatorIsAdmin_ && (
1035                 <>
1036                   {!isBanned(post_view.creator) ? (
1037                     <button
1038                       className="btn btn-link btn-animate text-muted py-0"
1039                       onClick={linkEvent(this, this.handleModBanShow)}
1040                       aria-label={i18n.t("ban_from_site")}
1041                     >
1042                       {i18n.t("ban_from_site")}
1043                     </button>
1044                   ) : (
1045                     <button
1046                       className="btn btn-link btn-animate text-muted py-0"
1047                       onClick={linkEvent(this, this.handleModBanSubmit)}
1048                       aria-label={i18n.t("unban_from_site")}
1049                     >
1050                       {i18n.t("unban_from_site")}
1051                     </button>
1052                   )}
1053                   <button
1054                     className="btn btn-link btn-animate text-muted py-0"
1055                     onClick={linkEvent(this, this.handlePurgePersonShow)}
1056                     aria-label={i18n.t("purge_user")}
1057                   >
1058                     {i18n.t("purge_user")}
1059                   </button>
1060                   <button
1061                     className="btn btn-link btn-animate text-muted py-0"
1062                     onClick={linkEvent(this, this.handlePurgePostShow)}
1063                     aria-label={i18n.t("purge_post")}
1064                   >
1065                     {i18n.t("purge_post")}
1066                   </button>
1067                 </>
1068               )}
1069               {!isBanned(post_view.creator) && post_view.creator.local && (
1070                 <button
1071                   className="btn btn-link btn-animate text-muted py-0"
1072                   onClick={linkEvent(this, this.handleAddAdmin)}
1073                   aria-label={
1074                     this.creatorIsAdmin_
1075                       ? i18n.t("remove_as_admin")
1076                       : i18n.t("appoint_as_admin")
1077                   }
1078                 >
1079                   {this.creatorIsAdmin_
1080                     ? i18n.t("remove_as_admin")
1081                     : i18n.t("appoint_as_admin")}
1082                 </button>
1083               )}
1084             </>
1085           )}
1086         </>
1087       )
1088     );
1089   }
1090
1091   removeAndBanDialogs() {
1092     const post = this.props.post_view;
1093     const purgeTypeText =
1094       this.state.purgeType == PurgeType.Post
1095         ? i18n.t("purge_post")
1096         : `${i18n.t("purge")} ${post.creator.name}`;
1097     return (
1098       <>
1099         {this.state.showRemoveDialog && (
1100           <form
1101             className="form-inline"
1102             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
1103           >
1104             <label className="sr-only" htmlFor="post-listing-remove-reason">
1105               {i18n.t("reason")}
1106             </label>
1107             <input
1108               type="text"
1109               id="post-listing-remove-reason"
1110               className="form-control mr-2"
1111               placeholder={i18n.t("reason")}
1112               value={this.state.removeReason}
1113               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
1114             />
1115             <button
1116               type="submit"
1117               className="btn btn-secondary"
1118               aria-label={i18n.t("remove_post")}
1119             >
1120               {i18n.t("remove_post")}
1121             </button>
1122           </form>
1123         )}
1124         {this.state.showBanDialog && (
1125           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
1126             <div className="form-group row col-12">
1127               <label
1128                 className="col-form-label"
1129                 htmlFor="post-listing-ban-reason"
1130               >
1131                 {i18n.t("reason")}
1132               </label>
1133               <input
1134                 type="text"
1135                 id="post-listing-ban-reason"
1136                 className="form-control mr-2"
1137                 placeholder={i18n.t("reason")}
1138                 value={this.state.banReason}
1139                 onInput={linkEvent(this, this.handleModBanReasonChange)}
1140               />
1141               <label className="col-form-label" htmlFor={`mod-ban-expires`}>
1142                 {i18n.t("expires")}
1143               </label>
1144               <input
1145                 type="number"
1146                 id={`mod-ban-expires`}
1147                 className="form-control mr-2"
1148                 placeholder={i18n.t("number_of_days")}
1149                 value={this.state.banExpireDays}
1150                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
1151               />
1152               <div className="form-group">
1153                 <div className="form-check">
1154                   <input
1155                     className="form-check-input"
1156                     id="mod-ban-remove-data"
1157                     type="checkbox"
1158                     checked={this.state.removeData}
1159                     onChange={linkEvent(this, this.handleModRemoveDataChange)}
1160                   />
1161                   <label
1162                     className="form-check-label"
1163                     htmlFor="mod-ban-remove-data"
1164                     title={i18n.t("remove_content_more")}
1165                   >
1166                     {i18n.t("remove_content")}
1167                   </label>
1168                 </div>
1169               </div>
1170             </div>
1171             {/* TODO hold off on expires until later */}
1172             {/* <div class="form-group row"> */}
1173             {/*   <label class="col-form-label">Expires</label> */}
1174             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
1175             {/* </div> */}
1176             <div className="form-group row">
1177               <button
1178                 type="submit"
1179                 className="btn btn-secondary"
1180                 aria-label={i18n.t("ban")}
1181               >
1182                 {i18n.t("ban")} {post.creator.name}
1183               </button>
1184             </div>
1185           </form>
1186         )}
1187         {this.state.showReportDialog && (
1188           <form
1189             className="form-inline"
1190             onSubmit={linkEvent(this, this.handleReportSubmit)}
1191           >
1192             <label className="sr-only" htmlFor="post-report-reason">
1193               {i18n.t("reason")}
1194             </label>
1195             <input
1196               type="text"
1197               id="post-report-reason"
1198               className="form-control mr-2"
1199               placeholder={i18n.t("reason")}
1200               required
1201               value={this.state.reportReason}
1202               onInput={linkEvent(this, this.handleReportReasonChange)}
1203             />
1204             <button
1205               type="submit"
1206               className="btn btn-secondary"
1207               aria-label={i18n.t("create_report")}
1208             >
1209               {i18n.t("create_report")}
1210             </button>
1211           </form>
1212         )}
1213         {this.state.showPurgeDialog && (
1214           <form
1215             className="form-inline"
1216             onSubmit={linkEvent(this, this.handlePurgeSubmit)}
1217           >
1218             <PurgeWarning />
1219             <label className="sr-only" htmlFor="purge-reason">
1220               {i18n.t("reason")}
1221             </label>
1222             <input
1223               type="text"
1224               id="purge-reason"
1225               className="form-control mr-2"
1226               placeholder={i18n.t("reason")}
1227               value={this.state.purgeReason}
1228               onInput={linkEvent(this, this.handlePurgeReasonChange)}
1229             />
1230             {this.state.purgeLoading ? (
1231               <Spinner />
1232             ) : (
1233               <button
1234                 type="submit"
1235                 className="btn btn-secondary"
1236                 aria-label={purgeTypeText}
1237               >
1238                 {purgeTypeText}
1239               </button>
1240             )}
1241           </form>
1242         )}
1243       </>
1244     );
1245   }
1246
1247   mobileThumbnail() {
1248     const post = this.props.post_view.post;
1249     return post.thumbnail_url || (post.url && isImage(post.url)) ? (
1250       <div className="row">
1251         <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
1252           {this.postTitleLine()}
1253         </div>
1254         <div className="col-4">
1255           {/* Post body prev or thumbnail */}
1256           {!this.state.imageExpanded && this.thumbnail()}
1257         </div>
1258       </div>
1259     ) : (
1260       this.postTitleLine()
1261     );
1262   }
1263
1264   showMobilePreview() {
1265     const body = this.props.post_view.post.body;
1266     return !this.showBody && body ? (
1267       <div className="md-div mb-1 preview-lines">{body}</div>
1268     ) : (
1269       <></>
1270     );
1271   }
1272
1273   listing() {
1274     return (
1275       <>
1276         {/* The mobile view*/}
1277         <div className="d-block d-sm-none">
1278           <div className="row">
1279             <div className="col-12">
1280               {this.createdLine()}
1281
1282               {/* If it has a thumbnail, do a right aligned thumbnail */}
1283               {this.mobileThumbnail()}
1284
1285               {/* Show a preview of the post body */}
1286               {this.showMobilePreview()}
1287
1288               {this.commentsLine(true)}
1289               {this.userActionsLine()}
1290               {this.duplicatesLine()}
1291               {this.removeAndBanDialogs()}
1292             </div>
1293           </div>
1294         </div>
1295
1296         {/* The larger view*/}
1297         <div className="d-none d-sm-block">
1298           <div className="row">
1299             {!this.props.viewOnly && this.voteBar()}
1300             <div className="col-sm-2 pr-0">
1301               <div className="">{this.thumbnail()}</div>
1302             </div>
1303             <div className="col-12 col-sm-9">
1304               <div className="row">
1305                 <div className="col-12">
1306                   {this.postTitleLine()}
1307                   {this.createdLine()}
1308                   {this.commentsLine()}
1309                   {this.duplicatesLine()}
1310                   {this.userActionsLine()}
1311                   {this.removeAndBanDialogs()}
1312                 </div>
1313               </div>
1314             </div>
1315           </div>
1316         </div>
1317       </>
1318     );
1319   }
1320
1321   private get myPost(): boolean {
1322     return (
1323       this.props.post_view.creator.id ==
1324       UserService.Instance.myUserInfo?.local_user_view.person.id
1325     );
1326   }
1327
1328   handlePostLike(event: any) {
1329     event.preventDefault();
1330     if (!UserService.Instance.myUserInfo) {
1331       this.context.router.history.push(`/login`);
1332     }
1333
1334     const myVote = this.state.my_vote;
1335     const newVote = myVote == 1 ? 0 : 1;
1336
1337     if (myVote == 1) {
1338       this.setState({
1339         score: this.state.score - 1,
1340         upvotes: this.state.upvotes - 1,
1341       });
1342     } else if (myVote == -1) {
1343       this.setState({
1344         score: this.state.score + 2,
1345         upvotes: this.state.upvotes + 1,
1346         downvotes: this.state.downvotes - 1,
1347       });
1348     } else {
1349       this.setState({
1350         score: this.state.score + 1,
1351         upvotes: this.state.upvotes + 1,
1352       });
1353     }
1354
1355     this.setState({ my_vote: newVote });
1356
1357     const auth = myAuth();
1358     if (auth) {
1359       const form: CreatePostLike = {
1360         post_id: this.props.post_view.post.id,
1361         score: newVote,
1362         auth,
1363       };
1364
1365       WebSocketService.Instance.send(wsClient.likePost(form));
1366       this.setState(this.state);
1367     }
1368     setupTippy();
1369   }
1370
1371   handlePostDisLike(event: any) {
1372     event.preventDefault();
1373     if (!UserService.Instance.myUserInfo) {
1374       this.context.router.history.push(`/login`);
1375     }
1376
1377     const myVote = this.state.my_vote;
1378     const newVote = myVote == -1 ? 0 : -1;
1379
1380     if (myVote == 1) {
1381       this.setState({
1382         score: this.state.score - 2,
1383         upvotes: this.state.upvotes - 1,
1384         downvotes: this.state.downvotes + 1,
1385       });
1386     } else if (myVote == -1) {
1387       this.setState({
1388         score: this.state.score + 1,
1389         downvotes: this.state.downvotes - 1,
1390       });
1391     } else {
1392       this.setState({
1393         score: this.state.score - 1,
1394         downvotes: this.state.downvotes + 1,
1395       });
1396     }
1397
1398     this.setState({ my_vote: newVote });
1399
1400     const auth = myAuth();
1401     if (auth) {
1402       const form: CreatePostLike = {
1403         post_id: this.props.post_view.post.id,
1404         score: newVote,
1405         auth,
1406       };
1407
1408       WebSocketService.Instance.send(wsClient.likePost(form));
1409       this.setState(this.state);
1410     }
1411     setupTippy();
1412   }
1413
1414   handleEditClick(i: PostListing) {
1415     i.setState({ showEdit: true });
1416   }
1417
1418   handleEditCancel() {
1419     this.setState({ showEdit: false });
1420   }
1421
1422   // The actual editing is done in the receive for post
1423   handleEditPost() {
1424     this.setState({ showEdit: false });
1425   }
1426
1427   handleShare(i: PostListing) {
1428     const { name, body, id } = i.props.post_view.post;
1429     share({
1430       title: name,
1431       text: body?.slice(0, 50),
1432       url: `${getHttpBase()}/post/${id}`,
1433     });
1434   }
1435
1436   handleShowReportDialog(i: PostListing) {
1437     i.setState({ showReportDialog: !i.state.showReportDialog });
1438   }
1439
1440   handleReportReasonChange(i: PostListing, event: any) {
1441     i.setState({ reportReason: event.target.value });
1442   }
1443
1444   handleReportSubmit(i: PostListing, event: any) {
1445     event.preventDefault();
1446     const auth = myAuth();
1447     const reason = i.state.reportReason;
1448     if (auth && reason) {
1449       const form: CreatePostReport = {
1450         post_id: i.props.post_view.post.id,
1451         reason,
1452         auth,
1453       };
1454       WebSocketService.Instance.send(wsClient.createPostReport(form));
1455
1456       i.setState({ showReportDialog: false });
1457     }
1458   }
1459
1460   handleBlockUserClick(i: PostListing) {
1461     const auth = myAuth();
1462     if (auth) {
1463       const blockUserForm: BlockPerson = {
1464         person_id: i.props.post_view.creator.id,
1465         block: true,
1466         auth,
1467       };
1468       WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
1469     }
1470   }
1471
1472   handleDeleteClick(i: PostListing) {
1473     const auth = myAuth();
1474     if (auth) {
1475       const deleteForm: DeletePost = {
1476         post_id: i.props.post_view.post.id,
1477         deleted: !i.props.post_view.post.deleted,
1478         auth,
1479       };
1480       WebSocketService.Instance.send(wsClient.deletePost(deleteForm));
1481     }
1482   }
1483
1484   handleSavePostClick(i: PostListing) {
1485     const auth = myAuth();
1486     if (auth) {
1487       const saved =
1488         i.props.post_view.saved == undefined ? true : !i.props.post_view.saved;
1489       const form: SavePost = {
1490         post_id: i.props.post_view.post.id,
1491         save: saved,
1492         auth,
1493       };
1494       WebSocketService.Instance.send(wsClient.savePost(form));
1495     }
1496   }
1497
1498   get crossPostParams(): PostFormParams {
1499     const queryParams: PostFormParams = {};
1500     const { name, url } = this.props.post_view.post;
1501
1502     queryParams.name = name;
1503
1504     if (url) {
1505       queryParams.url = url;
1506     }
1507
1508     const crossPostBody = this.crossPostBody();
1509     if (crossPostBody) {
1510       queryParams.body = crossPostBody;
1511     }
1512
1513     return queryParams;
1514   }
1515
1516   crossPostBody(): string | undefined {
1517     const post = this.props.post_view.post;
1518     const body = post.body;
1519
1520     return body
1521       ? `${i18n.t("cross_posted_from")} ${post.ap_id}\n\n${body.replace(
1522           /^/gm,
1523           "> "
1524         )}`
1525       : undefined;
1526   }
1527
1528   get showBody(): boolean {
1529     return this.props.showBody || this.state.showBody;
1530   }
1531
1532   handleModRemoveShow(i: PostListing) {
1533     i.setState({
1534       showRemoveDialog: !i.state.showRemoveDialog,
1535       showBanDialog: false,
1536     });
1537   }
1538
1539   handleModRemoveReasonChange(i: PostListing, event: any) {
1540     i.setState({ removeReason: event.target.value });
1541   }
1542
1543   handleModRemoveDataChange(i: PostListing, event: any) {
1544     i.setState({ removeData: event.target.checked });
1545   }
1546
1547   handleModRemoveSubmit(i: PostListing, event: any) {
1548     event.preventDefault();
1549
1550     const auth = myAuth();
1551     if (auth) {
1552       const form: RemovePost = {
1553         post_id: i.props.post_view.post.id,
1554         removed: !i.props.post_view.post.removed,
1555         reason: i.state.removeReason,
1556         auth,
1557       };
1558       WebSocketService.Instance.send(wsClient.removePost(form));
1559       i.setState({ showRemoveDialog: false });
1560     }
1561   }
1562
1563   handleModLock(i: PostListing) {
1564     const auth = myAuth();
1565     if (auth) {
1566       const form: LockPost = {
1567         post_id: i.props.post_view.post.id,
1568         locked: !i.props.post_view.post.locked,
1569         auth,
1570       };
1571       WebSocketService.Instance.send(wsClient.lockPost(form));
1572     }
1573   }
1574
1575   handleModFeaturePostLocal(i: PostListing) {
1576     const auth = myAuth();
1577     if (auth) {
1578       const form: FeaturePost = {
1579         post_id: i.props.post_view.post.id,
1580         feature_type: "Local",
1581         featured: !i.props.post_view.post.featured_local,
1582         auth,
1583       };
1584       WebSocketService.Instance.send(wsClient.featurePost(form));
1585     }
1586   }
1587
1588   handleModFeaturePostCommunity(i: PostListing) {
1589     const auth = myAuth();
1590     if (auth) {
1591       const form: FeaturePost = {
1592         post_id: i.props.post_view.post.id,
1593         feature_type: "Community",
1594         featured: !i.props.post_view.post.featured_community,
1595         auth,
1596       };
1597       WebSocketService.Instance.send(wsClient.featurePost(form));
1598     }
1599   }
1600
1601   handleModBanFromCommunityShow(i: PostListing) {
1602     i.setState({
1603       showBanDialog: true,
1604       banType: BanType.Community,
1605       showRemoveDialog: false,
1606     });
1607   }
1608
1609   handleModBanShow(i: PostListing) {
1610     i.setState({
1611       showBanDialog: true,
1612       banType: BanType.Site,
1613       showRemoveDialog: false,
1614     });
1615   }
1616
1617   handlePurgePersonShow(i: PostListing) {
1618     i.setState({
1619       showPurgeDialog: true,
1620       purgeType: PurgeType.Person,
1621       showRemoveDialog: false,
1622     });
1623   }
1624
1625   handlePurgePostShow(i: PostListing) {
1626     i.setState({
1627       showPurgeDialog: true,
1628       purgeType: PurgeType.Post,
1629       showRemoveDialog: false,
1630     });
1631   }
1632
1633   handlePurgeReasonChange(i: PostListing, event: any) {
1634     i.setState({ purgeReason: event.target.value });
1635   }
1636
1637   handlePurgeSubmit(i: PostListing, event: any) {
1638     event.preventDefault();
1639
1640     const auth = myAuth();
1641     if (auth) {
1642       if (i.state.purgeType == PurgeType.Person) {
1643         const form: PurgePerson = {
1644           person_id: i.props.post_view.creator.id,
1645           reason: i.state.purgeReason,
1646           auth,
1647         };
1648         WebSocketService.Instance.send(wsClient.purgePerson(form));
1649       } else if (i.state.purgeType == PurgeType.Post) {
1650         const form: PurgePost = {
1651           post_id: i.props.post_view.post.id,
1652           reason: i.state.purgeReason,
1653           auth,
1654         };
1655         WebSocketService.Instance.send(wsClient.purgePost(form));
1656       }
1657
1658       i.setState({ purgeLoading: true });
1659     }
1660   }
1661
1662   handleModBanReasonChange(i: PostListing, event: any) {
1663     i.setState({ banReason: event.target.value });
1664   }
1665
1666   handleModBanExpireDaysChange(i: PostListing, event: any) {
1667     i.setState({ banExpireDays: event.target.value });
1668   }
1669
1670   handleModBanFromCommunitySubmit(i: PostListing) {
1671     i.setState({ banType: BanType.Community });
1672     i.handleModBanBothSubmit(i);
1673   }
1674
1675   handleModBanSubmit(i: PostListing) {
1676     i.setState({ banType: BanType.Site });
1677     i.handleModBanBothSubmit(i);
1678   }
1679
1680   handleModBanBothSubmit(i: PostListing, event?: any) {
1681     if (event) event.preventDefault();
1682     const auth = myAuth();
1683     if (auth) {
1684       const ban = !i.props.post_view.creator_banned_from_community;
1685       const person_id = i.props.post_view.creator.id;
1686       const remove_data = i.state.removeData;
1687       const reason = i.state.banReason;
1688       const expires = futureDaysToUnixTime(i.state.banExpireDays);
1689
1690       if (i.state.banType == BanType.Community) {
1691         // If its an unban, restore all their data
1692         if (ban == false) {
1693           i.setState({ removeData: false });
1694         }
1695
1696         const form: BanFromCommunity = {
1697           person_id,
1698           community_id: i.props.post_view.community.id,
1699           ban,
1700           remove_data,
1701           reason,
1702           expires,
1703           auth,
1704         };
1705         WebSocketService.Instance.send(wsClient.banFromCommunity(form));
1706       } else {
1707         // If its an unban, restore all their data
1708         const ban = !i.props.post_view.creator.banned;
1709         if (ban == false) {
1710           i.setState({ removeData: false });
1711         }
1712         const form: BanPerson = {
1713           person_id,
1714           ban,
1715           remove_data,
1716           reason,
1717           expires,
1718           auth,
1719         };
1720         WebSocketService.Instance.send(wsClient.banPerson(form));
1721       }
1722
1723       i.setState({ showBanDialog: false });
1724     }
1725   }
1726
1727   handleAddModToCommunity(i: PostListing) {
1728     const auth = myAuth();
1729     if (auth) {
1730       const form: AddModToCommunity = {
1731         person_id: i.props.post_view.creator.id,
1732         community_id: i.props.post_view.community.id,
1733         added: !i.creatorIsMod_,
1734         auth,
1735       };
1736       WebSocketService.Instance.send(wsClient.addModToCommunity(form));
1737       i.setState(i.state);
1738     }
1739   }
1740
1741   handleAddAdmin(i: PostListing) {
1742     const auth = myAuth();
1743     if (auth) {
1744       const form: AddAdmin = {
1745         person_id: i.props.post_view.creator.id,
1746         added: !i.creatorIsAdmin_,
1747         auth,
1748       };
1749       WebSocketService.Instance.send(wsClient.addAdmin(form));
1750       i.setState(i.state);
1751     }
1752   }
1753
1754   handleShowConfirmTransferCommunity(i: PostListing) {
1755     i.setState({ showConfirmTransferCommunity: true });
1756   }
1757
1758   handleCancelShowConfirmTransferCommunity(i: PostListing) {
1759     i.setState({ showConfirmTransferCommunity: false });
1760   }
1761
1762   handleTransferCommunity(i: PostListing) {
1763     const auth = myAuth();
1764     if (auth) {
1765       const form: TransferCommunity = {
1766         community_id: i.props.post_view.community.id,
1767         person_id: i.props.post_view.creator.id,
1768         auth,
1769       };
1770       WebSocketService.Instance.send(wsClient.transferCommunity(form));
1771       i.setState({ showConfirmTransferCommunity: false });
1772     }
1773   }
1774
1775   handleShowConfirmTransferSite(i: PostListing) {
1776     i.setState({ showConfirmTransferSite: true });
1777   }
1778
1779   handleCancelShowConfirmTransferSite(i: PostListing) {
1780     i.setState({ showConfirmTransferSite: false });
1781   }
1782
1783   handleImageExpandClick(i: PostListing, event: any) {
1784     event.preventDefault();
1785     i.setState({ imageExpanded: !i.state.imageExpanded });
1786     setupTippy();
1787   }
1788
1789   handleViewSource(i: PostListing) {
1790     i.setState({ viewSource: !i.state.viewSource });
1791   }
1792
1793   handleShowAdvanced(i: PostListing) {
1794     i.setState({ showAdvanced: !i.state.showAdvanced });
1795     setupTippy();
1796   }
1797
1798   handleShowMoreMobile(i: PostListing) {
1799     i.setState({
1800       showMoreMobile: !i.state.showMoreMobile,
1801       showAdvanced: !i.state.showAdvanced,
1802     });
1803     setupTippy();
1804   }
1805
1806   handleShowBody(i: PostListing) {
1807     i.setState({ showBody: !i.state.showBody });
1808     setupTippy();
1809   }
1810
1811   get pointsTippy(): string {
1812     const points = i18n.t("number_of_points", {
1813       count: Number(this.state.score),
1814       formattedCount: Number(this.state.score),
1815     });
1816
1817     const upvotes = i18n.t("number_of_upvotes", {
1818       count: Number(this.state.upvotes),
1819       formattedCount: Number(this.state.upvotes),
1820     });
1821
1822     const downvotes = i18n.t("number_of_downvotes", {
1823       count: Number(this.state.downvotes),
1824       formattedCount: Number(this.state.downvotes),
1825     });
1826
1827     return `${points} • ${upvotes} • ${downvotes}`;
1828   }
1829
1830   get canModOnSelf_(): boolean {
1831     return canMod(
1832       this.props.post_view.creator.id,
1833       this.props.moderators,
1834       this.props.admins,
1835       undefined,
1836       true
1837     );
1838   }
1839
1840   get canMod_(): boolean {
1841     return canMod(
1842       this.props.post_view.creator.id,
1843       this.props.moderators,
1844       this.props.admins
1845     );
1846   }
1847
1848   get canAdmin_(): boolean {
1849     return canAdmin(this.props.post_view.creator.id, this.props.admins);
1850   }
1851
1852   get creatorIsMod_(): boolean {
1853     return isMod(this.props.post_view.creator.id, this.props.moderators);
1854   }
1855
1856   get creatorIsAdmin_(): boolean {
1857     return isAdmin(this.props.post_view.creator.id, this.props.admins);
1858   }
1859 }