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

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