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

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