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

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