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 fst-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 fst-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 fst-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 fst-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 fst-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${post.id}`}
 711             aria-label={I18NextService.i18n.t("more")}
 712           >
 713             <Icon icon="more-vertical" inline />
 714           </button>
 715
 716           <ul
 717             className="dropdown-menu"
 718             id={`advancedButtonsDropdown${post.id}`}
 719           >
 720             {!this.myPost ? (
 721               <>
 722                 <li>{this.reportButton}</li>
 723                 <li>{this.blockButton}</li>
 724               </>
 725             ) : (
 726               <>
 727                 <li>{this.editButton}</li>
 728                 <li>{this.deleteButton}</li>
 729               </>
 730             )}
 731
 732             {/* Any mod can do these, not limited to hierarchy*/}
 733             {(amMod(this.props.moderators) || amAdmin()) && (
 734               <>
 735                 <li>
 736                   <hr className="dropdown-divider" />
 737                 </li>
 738                 <li>{this.lockButton}</li>
 739                 {this.featureButtons}
 740               </>
 741             )}
 742
 743             {(this.canMod_ || this.canAdmin_) && (
 744               <li>{this.modRemoveButton}</li>
 745             )}
 746           </ul>
 747         </div>
 748       </>
 749     );
 750   }
 751
 752   get commentsButton() {
 753     const post_view = this.postView;
 754     const title = I18NextService.i18n.t("number_of_comments", {
 755       count: Number(post_view.counts.comments),
 756       formattedCount: Number(post_view.counts.comments),
 757     });
 758
 759     return (
 760       <Link
 761         className="btn btn-link btn-sm text-muted ps-0"
 762         title={title}
 763         to={`/post/${post_view.post.id}?scrollToComments=true`}
 764         data-tippy-content={title}
 765       >
 766         <Icon icon="message-square" classes="me-1" inline />
 767         {post_view.counts.comments}
 768         {this.unreadCount && (
 769           <span className="text-muted fst-italic">
 770             ({this.unreadCount} {I18NextService.i18n.t("new")})
 771           </span>
 772         )}
 773       </Link>
 774     );
 775   }
 776
 777   get unreadCount(): number | undefined {
 778     const pv = this.postView;
 779     return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0
 780       ? undefined
 781       : pv.unread_comments;
 782   }
 783
 784   get mobileVotes() {
 785     // TODO: make nicer
 786     const tippy = showScores()
 787       ? { "data-tippy-content": this.pointsTippy }
 788       : {};
 789     return (
 790       <>
 791         <div>
 792           <button
 793             className={`btn-animate btn py-0 px-1 ${
 794               this.postView.my_vote === 1 ? "text-info" : "text-muted"
 795             }`}
 796             {...tippy}
 797             onClick={linkEvent(this, this.handleUpvote)}
 798             aria-label={I18NextService.i18n.t("upvote")}
 799             aria-pressed={this.postView.my_vote === 1}
 800           >
 801             {this.state.upvoteLoading ? (
 802               <Spinner />
 803             ) : (
 804               <>
 805                 <Icon icon="arrow-up1" classes="icon-inline small" />
 806                 {showScores() && (
 807                   <span className="ms-2">
 808                     {numToSI(this.postView.counts.upvotes)}
 809                   </span>
 810                 )}
 811               </>
 812             )}
 813           </button>
 814           {this.props.enableDownvotes && (
 815             <button
 816               className={`ms-2 btn-animate btn py-0 px-1 ${
 817                 this.postView.my_vote === -1 ? "text-danger" : "text-muted"
 818               }`}
 819               onClick={linkEvent(this, this.handleDownvote)}
 820               {...tippy}
 821               aria-label={I18NextService.i18n.t("downvote")}
 822               aria-pressed={this.postView.my_vote === -1}
 823             >
 824               {this.state.downvoteLoading ? (
 825                 <Spinner />
 826               ) : (
 827                 <>
 828                   <Icon icon="arrow-down1" classes="icon-inline small" />
 829                   {showScores() && (
 830                     <span
 831                       className={classNames("ms-2", {
 832                         invisible: this.postView.counts.downvotes === 0,
 833                       })}
 834                     >
 835                       {numToSI(this.postView.counts.downvotes)}
 836                     </span>
 837                   )}
 838                 </>
 839               )}
 840             </button>
 841           )}
 842         </div>
 843       </>
 844     );
 845   }
 846
 847   get saveButton() {
 848     const saved = this.postView.saved;
 849     const label = saved
 850       ? I18NextService.i18n.t("unsave")
 851       : I18NextService.i18n.t("save");
 852     return (
 853       <button
 854         className="btn btn-sm btn-animate text-muted py-0"
 855         onClick={linkEvent(this, this.handleSavePostClick)}
 856         data-tippy-content={label}
 857         aria-label={label}
 858       >
 859         {this.state.saveLoading ? (
 860           <Spinner />
 861         ) : (
 862           <Icon
 863             icon="star"
 864             classes={classNames({ "text-warning": saved })}
 865             inline
 866           />
 867         )}
 868       </button>
 869     );
 870   }
 871
 872   get crossPostButton() {
 873     return (
 874       <Link
 875         className="btn btn-sm btn-animate text-muted py-0"
 876         to={{
 877           /* Empty string properties are required to satisfy type*/
 878           pathname: "/create_post",
 879           state: { ...this.crossPostParams },
 880           hash: "",
 881           key: "",
 882           search: "",
 883         }}
 884         title={I18NextService.i18n.t("cross_post")}
 885         data-tippy-content={I18NextService.i18n.t("cross_post")}
 886         aria-label={I18NextService.i18n.t("cross_post")}
 887       >
 888         <Icon icon="copy" inline />
 889       </Link>
 890     );
 891   }
 892
 893   get reportButton() {
 894     return (
 895       <button
 896         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
 897         onClick={linkEvent(this, this.handleShowReportDialog)}
 898         aria-label={I18NextService.i18n.t("show_report_dialog")}
 899       >
 900         <Icon classes="me-1" icon="flag" inline />
 901         {I18NextService.i18n.t("create_report")}
 902       </button>
 903     );
 904   }
 905
 906   get blockButton() {
 907     return (
 908       <button
 909         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
 910         onClick={linkEvent(this, this.handleBlockPersonClick)}
 911         aria-label={I18NextService.i18n.t("block_user")}
 912       >
 913         {this.state.blockLoading ? (
 914           <Spinner />
 915         ) : (
 916           <Icon classes="me-1" icon="slash" inline />
 917         )}
 918         {I18NextService.i18n.t("block_user")}
 919       </button>
 920     );
 921   }
 922
 923   get editButton() {
 924     return (
 925       <button
 926         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
 927         onClick={linkEvent(this, this.handleEditClick)}
 928         aria-label={I18NextService.i18n.t("edit")}
 929       >
 930         <Icon classes="me-1" icon="edit" inline />
 931         {I18NextService.i18n.t("edit")}
 932       </button>
 933     );
 934   }
 935
 936   get deleteButton() {
 937     const deleted = this.postView.post.deleted;
 938     const label = !deleted
 939       ? I18NextService.i18n.t("delete")
 940       : I18NextService.i18n.t("restore");
 941     return (
 942       <button
 943         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
 944         onClick={linkEvent(this, this.handleDeleteClick)}
 945         aria-label={label}
 946       >
 947         {this.state.deleteLoading ? (
 948           <Spinner />
 949         ) : (
 950           <>
 951             <Icon
 952               icon="trash"
 953               classes={classNames("me-1", { "text-danger": deleted })}
 954               inline
 955             />
 956             {label}
 957           </>
 958         )}
 959       </button>
 960     );
 961   }
 962
 963   get viewSourceButton() {
 964     return (
 965       <button
 966         className="btn btn-sm btn-animate text-muted py-0"
 967         onClick={linkEvent(this, this.handleViewSource)}
 968         data-tippy-content={I18NextService.i18n.t("view_source")}
 969         aria-label={I18NextService.i18n.t("view_source")}
 970       >
 971         <Icon
 972           icon="file-text"
 973           classes={classNames({ "text-success": this.state.viewSource })}
 974           inline
 975         />
 976       </button>
 977     );
 978   }
 979
 980   get lockButton() {
 981     const locked = this.postView.post.locked;
 982     const label = locked
 983       ? I18NextService.i18n.t("unlock")
 984       : I18NextService.i18n.t("lock");
 985     return (
 986       <button
 987         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
 988         onClick={linkEvent(this, this.handleModLock)}
 989         aria-label={label}
 990       >
 991         {this.state.lockLoading ? (
 992           <Spinner />
 993         ) : (
 994           <>
 995             <Icon
 996               icon="lock"
 997               classes={classNames("me-1", { "text-danger": locked })}
 998               inline
 999             />
1000             {capitalizeFirstLetter(label)}
1001           </>
1002         )}
1003       </button>
1004     );
1005   }
1006
1007   get featureButtons() {
1008     const featuredCommunity = this.postView.post.featured_community;
1009     const labelCommunity = featuredCommunity
1010       ? I18NextService.i18n.t("unfeature_from_community")
1011       : I18NextService.i18n.t("feature_in_community");
1012
1013     const featuredLocal = this.postView.post.featured_local;
1014     const labelLocal = featuredLocal
1015       ? I18NextService.i18n.t("unfeature_from_local")
1016       : I18NextService.i18n.t("feature_in_local");
1017     return (
1018       <>
1019         <li>
1020           <button
1021             className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
1022             onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
1023             data-tippy-content={labelCommunity}
1024             aria-label={labelCommunity}
1025           >
1026             {this.state.featureCommunityLoading ? (
1027               <Spinner />
1028             ) : (
1029               <>
1030                 <Icon
1031                   icon="pin"
1032                   classes={classNames("me-1", {
1033                     "text-success": featuredCommunity,
1034                   })}
1035                   inline
1036                 />
1037                 {I18NextService.i18n.t("community")}
1038               </>
1039             )}
1040           </button>
1041         </li>
1042         <li>
1043           {amAdmin() && (
1044             <button
1045               className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
1046               onClick={linkEvent(this, this.handleModFeaturePostLocal)}
1047               data-tippy-content={labelLocal}
1048               aria-label={labelLocal}
1049             >
1050               {this.state.featureLocalLoading ? (
1051                 <Spinner />
1052               ) : (
1053                 <>
1054                   <Icon
1055                     icon="pin"
1056                     classes={classNames("me-1", {
1057                       "text-success": featuredLocal,
1058                     })}
1059                     inline
1060                   />
1061                   {I18NextService.i18n.t("local")}
1062                 </>
1063               )}
1064             </button>
1065           )}
1066         </li>
1067       </>
1068     );
1069   }
1070
1071   get modRemoveButton() {
1072     const removed = this.postView.post.removed;
1073     return (
1074       <button
1075         className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
1076         onClick={linkEvent(
1077           this,
1078           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
1079         )}
1080       >
1081         {/* TODO: Find an icon for this. */}
1082         {this.state.removeLoading ? (
1083           <Spinner />
1084         ) : !removed ? (
1085           I18NextService.i18n.t("remove")
1086         ) : (
1087           I18NextService.i18n.t("restore")
1088         )}
1089       </button>
1090     );
1091   }
1092
1093   /**
1094    * Mod/Admin actions to be taken against the author.
1095    */
1096   userActionsLine() {
1097     // TODO: make nicer
1098     const post_view = this.postView;
1099     return (
1100       this.state.showAdvanced && (
1101         <div className="mt-3">
1102           {this.canMod_ && (
1103             <>
1104               {!this.creatorIsMod_ &&
1105                 (!post_view.creator_banned_from_community ? (
1106                   <button
1107                     className="btn btn-link btn-animate text-muted py-0"
1108                     onClick={linkEvent(
1109                       this,
1110                       this.handleModBanFromCommunityShow
1111                     )}
1112                     aria-label={I18NextService.i18n.t("ban_from_community")}
1113                   >
1114                     {I18NextService.i18n.t("ban_from_community")}
1115                   </button>
1116                 ) : (
1117                   <button
1118                     className="btn btn-link btn-animate text-muted py-0"
1119                     onClick={linkEvent(
1120                       this,
1121                       this.handleModBanFromCommunitySubmit
1122                     )}
1123                     aria-label={I18NextService.i18n.t("unban")}
1124                   >
1125                     {this.state.banLoading ? (
1126                       <Spinner />
1127                     ) : (
1128                       I18NextService.i18n.t("unban")
1129                     )}
1130                   </button>
1131                 ))}
1132               {!post_view.creator_banned_from_community && (
1133                 <button
1134                   className="btn btn-link btn-animate text-muted py-0"
1135                   onClick={linkEvent(this, this.handleAddModToCommunity)}
1136                   aria-label={
1137                     this.creatorIsMod_
1138                       ? I18NextService.i18n.t("remove_as_mod")
1139                       : I18NextService.i18n.t("appoint_as_mod")
1140                   }
1141                 >
1142                   {this.state.addModLoading ? (
1143                     <Spinner />
1144                   ) : this.creatorIsMod_ ? (
1145                     I18NextService.i18n.t("remove_as_mod")
1146                   ) : (
1147                     I18NextService.i18n.t("appoint_as_mod")
1148                   )}
1149                 </button>
1150               )}
1151             </>
1152           )}
1153           {/* Community creators and admins can transfer community to another mod */}
1154           {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
1155             this.canAdmin_) &&
1156             this.creatorIsMod_ &&
1157             (!this.state.showConfirmTransferCommunity ? (
1158               <button
1159                 className="btn btn-link btn-animate text-muted py-0"
1160                 onClick={linkEvent(
1161                   this,
1162                   this.handleShowConfirmTransferCommunity
1163                 )}
1164                 aria-label={I18NextService.i18n.t("transfer_community")}
1165               >
1166                 {I18NextService.i18n.t("transfer_community")}
1167               </button>
1168             ) : (
1169               <>
1170                 <button
1171                   className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
1172                   aria-label={I18NextService.i18n.t("are_you_sure")}
1173                 >
1174                   {I18NextService.i18n.t("are_you_sure")}
1175                 </button>
1176                 <button
1177                   className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
1178                   aria-label={I18NextService.i18n.t("yes")}
1179                   onClick={linkEvent(this, this.handleTransferCommunity)}
1180                 >
1181                   {this.state.transferLoading ? (
1182                     <Spinner />
1183                   ) : (
1184                     I18NextService.i18n.t("yes")
1185                   )}
1186                 </button>
1187                 <button
1188                   className="btn btn-link btn-animate text-muted py-0 d-inline-block"
1189                   onClick={linkEvent(
1190                     this,
1191                     this.handleCancelShowConfirmTransferCommunity
1192                   )}
1193                   aria-label={I18NextService.i18n.t("no")}
1194                 >
1195                   {I18NextService.i18n.t("no")}
1196                 </button>
1197               </>
1198             ))}
1199           {/* Admins can ban from all, and appoint other admins */}
1200           {this.canAdmin_ && (
1201             <>
1202               {!this.creatorIsAdmin_ && (
1203                 <>
1204                   {!isBanned(post_view.creator) ? (
1205                     <button
1206                       className="btn btn-link btn-animate text-muted py-0"
1207                       onClick={linkEvent(this, this.handleModBanShow)}
1208                       aria-label={I18NextService.i18n.t("ban_from_site")}
1209                     >
1210                       {I18NextService.i18n.t("ban_from_site")}
1211                     </button>
1212                   ) : (
1213                     <button
1214                       className="btn btn-link btn-animate text-muted py-0"
1215                       onClick={linkEvent(this, this.handleModBanSubmit)}
1216                       aria-label={I18NextService.i18n.t("unban_from_site")}
1217                     >
1218                       {this.state.banLoading ? (
1219                         <Spinner />
1220                       ) : (
1221                         I18NextService.i18n.t("unban_from_site")
1222                       )}
1223                     </button>
1224                   )}
1225                   <button
1226                     className="btn btn-link btn-animate text-muted py-0"
1227                     onClick={linkEvent(this, this.handlePurgePersonShow)}
1228                     aria-label={I18NextService.i18n.t("purge_user")}
1229                   >
1230                     {I18NextService.i18n.t("purge_user")}
1231                   </button>
1232                   <button
1233                     className="btn btn-link btn-animate text-muted py-0"
1234                     onClick={linkEvent(this, this.handlePurgePostShow)}
1235                     aria-label={I18NextService.i18n.t("purge_post")}
1236                   >
1237                     {I18NextService.i18n.t("purge_post")}
1238                   </button>
1239                 </>
1240               )}
1241               {!isBanned(post_view.creator) && post_view.creator.local && (
1242                 <button
1243                   className="btn btn-link btn-animate text-muted py-0"
1244                   onClick={linkEvent(this, this.handleAddAdmin)}
1245                   aria-label={
1246                     this.creatorIsAdmin_
1247                       ? I18NextService.i18n.t("remove_as_admin")
1248                       : I18NextService.i18n.t("appoint_as_admin")
1249                   }
1250                 >
1251                   {this.state.addAdminLoading ? (
1252                     <Spinner />
1253                   ) : this.creatorIsAdmin_ ? (
1254                     I18NextService.i18n.t("remove_as_admin")
1255                   ) : (
1256                     I18NextService.i18n.t("appoint_as_admin")
1257                   )}
1258                 </button>
1259               )}
1260             </>
1261           )}
1262         </div>
1263       )
1264     );
1265   }
1266
1267   removeAndBanDialogs() {
1268     const post = this.postView;
1269     const purgeTypeText =
1270       this.state.purgeType == PurgeType.Post
1271         ? I18NextService.i18n.t("purge_post")
1272         : `${I18NextService.i18n.t("purge")} ${post.creator.name}`;
1273     return (
1274       <>
1275         {this.state.showRemoveDialog && (
1276           <form
1277             className="form-inline"
1278             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
1279           >
1280             <label
1281               className="visually-hidden"
1282               htmlFor="post-listing-remove-reason"
1283             >
1284               {I18NextService.i18n.t("reason")}
1285             </label>
1286             <input
1287               type="text"
1288               id="post-listing-remove-reason"
1289               className="form-control me-2"
1290               placeholder={I18NextService.i18n.t("reason")}
1291               value={this.state.removeReason}
1292               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
1293             />
1294             <button
1295               type="submit"
1296               className="btn btn-secondary"
1297               aria-label={I18NextService.i18n.t("remove_post")}
1298             >
1299               {this.state.removeLoading ? (
1300                 <Spinner />
1301               ) : (
1302                 I18NextService.i18n.t("remove_post")
1303               )}
1304             </button>
1305           </form>
1306         )}
1307         {this.state.showBanDialog && (
1308           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
1309             <div className="mb-3 row col-12">
1310               <label
1311                 className="col-form-label"
1312                 htmlFor="post-listing-ban-reason"
1313               >
1314                 {I18NextService.i18n.t("reason")}
1315               </label>
1316               <input
1317                 type="text"
1318                 id="post-listing-ban-reason"
1319                 className="form-control me-2"
1320                 placeholder={I18NextService.i18n.t("reason")}
1321                 value={this.state.banReason}
1322                 onInput={linkEvent(this, this.handleModBanReasonChange)}
1323               />
1324               <label className="col-form-label" htmlFor={`mod-ban-expires`}>
1325                 {I18NextService.i18n.t("expires")}
1326               </label>
1327               <input
1328                 type="number"
1329                 id={`mod-ban-expires`}
1330                 className="form-control me-2"
1331                 placeholder={I18NextService.i18n.t("number_of_days")}
1332                 value={this.state.banExpireDays}
1333                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
1334               />
1335               <div className="input-group mb-3">
1336                 <div className="form-check">
1337                   <input
1338                     className="form-check-input"
1339                     id="mod-ban-remove-data"
1340                     type="checkbox"
1341                     checked={this.state.removeData}
1342                     onChange={linkEvent(this, this.handleModRemoveDataChange)}
1343                   />
1344                   <label
1345                     className="form-check-label"
1346                     htmlFor="mod-ban-remove-data"
1347                     title={I18NextService.i18n.t("remove_content_more")}
1348                   >
1349                     {I18NextService.i18n.t("remove_content")}
1350                   </label>
1351                 </div>
1352               </div>
1353             </div>
1354             {/* TODO hold off on expires until later */}
1355             {/* <div class="mb-3 row"> */}
1356             {/*   <label class="col-form-label">Expires</label> */}
1357             {/*   <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
1358             {/* </div> */}
1359             <div className="mb-3 row">
1360               <button
1361                 type="submit"
1362                 className="btn btn-secondary"
1363                 aria-label={I18NextService.i18n.t("ban")}
1364               >
1365                 {this.state.banLoading ? (
1366                   <Spinner />
1367                 ) : (
1368                   <span>
1369                     {I18NextService.i18n.t("ban")} {post.creator.name}
1370                   </span>
1371                 )}
1372               </button>
1373             </div>
1374           </form>
1375         )}
1376         {this.state.showReportDialog && (
1377           <form
1378             className="form-inline"
1379             onSubmit={linkEvent(this, this.handleReportSubmit)}
1380           >
1381             <label className="visually-hidden" htmlFor="post-report-reason">
1382               {I18NextService.i18n.t("reason")}
1383             </label>
1384             <input
1385               type="text"
1386               id="post-report-reason"
1387               className="form-control me-2"
1388               placeholder={I18NextService.i18n.t("reason")}
1389               required
1390               value={this.state.reportReason}
1391               onInput={linkEvent(this, this.handleReportReasonChange)}
1392             />
1393             <button
1394               type="submit"
1395               className="btn btn-secondary"
1396               aria-label={I18NextService.i18n.t("create_report")}
1397             >
1398               {this.state.reportLoading ? (
1399                 <Spinner />
1400               ) : (
1401                 I18NextService.i18n.t("create_report")
1402               )}
1403             </button>
1404           </form>
1405         )}
1406         {this.state.showPurgeDialog && (
1407           <form
1408             className="form-inline"
1409             onSubmit={linkEvent(this, this.handlePurgeSubmit)}
1410           >
1411             <PurgeWarning />
1412             <label className="visually-hidden" htmlFor="purge-reason">
1413               {I18NextService.i18n.t("reason")}
1414             </label>
1415             <input
1416               type="text"
1417               id="purge-reason"
1418               className="form-control me-2"
1419               placeholder={I18NextService.i18n.t("reason")}
1420               value={this.state.purgeReason}
1421               onInput={linkEvent(this, this.handlePurgeReasonChange)}
1422             />
1423             {this.state.purgeLoading ? (
1424               <Spinner />
1425             ) : (
1426               <button
1427                 type="submit"
1428                 className="btn btn-secondary"
1429                 aria-label={purgeTypeText}
1430               >
1431                 {this.state.purgeLoading ? <Spinner /> : { purgeTypeText }}
1432               </button>
1433             )}
1434           </form>
1435         )}
1436       </>
1437     );
1438   }
1439
1440   mobileThumbnail() {
1441     const post = this.postView.post;
1442     return post.thumbnail_url || (post.url && isImage(post.url)) ? (
1443       <div className="row">
1444         <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
1445           {this.postTitleLine()}
1446         </div>
1447         <div className="col-4">
1448           {/* Post body prev or thumbnail */}
1449           {!this.state.imageExpanded && this.thumbnail()}
1450         </div>
1451       </div>
1452     ) : (
1453       this.postTitleLine()
1454     );
1455   }
1456
1457   showBodyPreview() {
1458     const { body, id } = this.postView.post;
1459
1460     return !this.showBody && body ? (
1461       <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
1462         <div className="md-div mb-1 preview-lines">{body}</div>
1463       </Link>
1464     ) : (
1465       <></>
1466     );
1467   }
1468
1469   listing() {
1470     return (
1471       <>
1472         {/* The mobile view*/}
1473         <div className="d-block d-sm-none">
1474           <article className="row post-container">
1475             <div className="col-12">
1476               {this.createdLine()}
1477
1478               {/* If it has a thumbnail, do a right aligned thumbnail */}
1479               {this.mobileThumbnail()}
1480
1481               {/* Show a preview of the post body */}
1482               {this.showBodyPreview()}
1483
1484               {this.commentsLine(true)}
1485               {this.userActionsLine()}
1486               {this.duplicatesLine()}
1487               {this.removeAndBanDialogs()}
1488             </div>
1489           </article>
1490         </div>
1491
1492         {/* The larger view*/}
1493         <div className="d-none d-sm-block">
1494           <article className="row post-container">
1495             {!this.props.viewOnly && this.voteBar()}
1496             <div className="col-sm-2 pe-0 post-media">
1497               <div className="">{this.thumbnail()}</div>
1498             </div>
1499             <div className="col-12 col-sm-9">
1500               <div className="row">
1501                 <div className="col-12">
1502                   {this.postTitleLine()}
1503                   {this.createdLine()}
1504                   {this.showBodyPreview()}
1505                   {this.commentsLine()}
1506                   {this.duplicatesLine()}
1507                   {this.userActionsLine()}
1508                   {this.removeAndBanDialogs()}
1509                 </div>
1510               </div>
1511             </div>
1512           </article>
1513         </div>
1514       </>
1515     );
1516   }
1517
1518   private get myPost(): boolean {
1519     return (
1520       this.postView.creator.id ==
1521       UserService.Instance.myUserInfo?.local_user_view.person.id
1522     );
1523   }
1524   handleEditClick(i: PostListing) {
1525     i.setState({ showEdit: true });
1526   }
1527
1528   handleEditCancel() {
1529     this.setState({ showEdit: false });
1530   }
1531
1532   // The actual editing is done in the receive for post
1533   handleEditPost(form: EditPost) {
1534     this.setState({ showEdit: false });
1535     this.props.onPostEdit(form);
1536   }
1537
1538   handleShare(i: PostListing) {
1539     const { name, body, id } = i.props.post_view.post;
1540     share({
1541       title: name,
1542       text: body?.slice(0, 50),
1543       url: `${getHttpBase()}/post/${id}`,
1544     });
1545   }
1546
1547   handleShowReportDialog(i: PostListing) {
1548     i.setState({ showReportDialog: !i.state.showReportDialog });
1549   }
1550
1551   handleReportReasonChange(i: PostListing, event: any) {
1552     i.setState({ reportReason: event.target.value });
1553   }
1554
1555   handleReportSubmit(i: PostListing, event: any) {
1556     event.preventDefault();
1557     i.setState({ reportLoading: true });
1558     i.props.onPostReport({
1559       post_id: i.postView.post.id,
1560       reason: i.state.reportReason ?? "",
1561       auth: myAuthRequired(),
1562     });
1563   }
1564
1565   handleBlockPersonClick(i: PostListing) {
1566     i.setState({ blockLoading: true });
1567     i.props.onBlockPerson({
1568       person_id: i.postView.creator.id,
1569       block: true,
1570       auth: myAuthRequired(),
1571     });
1572   }
1573
1574   handleDeleteClick(i: PostListing) {
1575     i.setState({ deleteLoading: true });
1576     i.props.onDeletePost({
1577       post_id: i.postView.post.id,
1578       deleted: !i.postView.post.deleted,
1579       auth: myAuthRequired(),
1580     });
1581   }
1582
1583   handleSavePostClick(i: PostListing) {
1584     i.setState({ saveLoading: true });
1585     i.props.onSavePost({
1586       post_id: i.postView.post.id,
1587       save: !i.postView.saved,
1588       auth: myAuthRequired(),
1589     });
1590   }
1591
1592   get crossPostParams(): PostFormParams {
1593     const queryParams: PostFormParams = {};
1594     const { name, url } = this.postView.post;
1595
1596     queryParams.name = name;
1597
1598     if (url) {
1599       queryParams.url = url;
1600     }
1601
1602     const crossPostBody = this.crossPostBody();
1603     if (crossPostBody) {
1604       queryParams.body = crossPostBody;
1605     }
1606
1607     return queryParams;
1608   }
1609
1610   crossPostBody(): string | undefined {
1611     const post = this.postView.post;
1612     const body = post.body;
1613
1614     return body
1615       ? `${I18NextService.i18n.t("cross_posted_from")} ${
1616           post.ap_id
1617         }\n\n${body.replace(/^/gm, "> ")}`
1618       : undefined;
1619   }
1620
1621   get showBody(): boolean {
1622     return this.props.showBody || this.state.showBody;
1623   }
1624
1625   handleModRemoveShow(i: PostListing) {
1626     i.setState({
1627       showRemoveDialog: !i.state.showRemoveDialog,
1628       showBanDialog: false,
1629     });
1630   }
1631
1632   handleModRemoveReasonChange(i: PostListing, event: any) {
1633     i.setState({ removeReason: event.target.value });
1634   }
1635
1636   handleModRemoveDataChange(i: PostListing, event: any) {
1637     i.setState({ removeData: event.target.checked });
1638   }
1639
1640   handleModRemoveSubmit(i: PostListing, event: any) {
1641     event.preventDefault();
1642     i.setState({ removeLoading: true });
1643     i.props.onRemovePost({
1644       post_id: i.postView.post.id,
1645       removed: !i.postView.post.removed,
1646       auth: myAuthRequired(),
1647     });
1648   }
1649
1650   handleModLock(i: PostListing) {
1651     i.setState({ lockLoading: true });
1652     i.props.onLockPost({
1653       post_id: i.postView.post.id,
1654       locked: !i.postView.post.locked,
1655       auth: myAuthRequired(),
1656     });
1657   }
1658
1659   handleModFeaturePostLocal(i: PostListing) {
1660     i.setState({ featureLocalLoading: true });
1661     i.props.onFeaturePost({
1662       post_id: i.postView.post.id,
1663       featured: !i.postView.post.featured_local,
1664       feature_type: "Local",
1665       auth: myAuthRequired(),
1666     });
1667   }
1668
1669   handleModFeaturePostCommunity(i: PostListing) {
1670     i.setState({ featureCommunityLoading: true });
1671     i.props.onFeaturePost({
1672       post_id: i.postView.post.id,
1673       featured: !i.postView.post.featured_community,
1674       feature_type: "Community",
1675       auth: myAuthRequired(),
1676     });
1677   }
1678
1679   handleModBanFromCommunityShow(i: PostListing) {
1680     i.setState({
1681       showBanDialog: true,
1682       banType: BanType.Community,
1683       showRemoveDialog: false,
1684     });
1685   }
1686
1687   handleModBanShow(i: PostListing) {
1688     i.setState({
1689       showBanDialog: true,
1690       banType: BanType.Site,
1691       showRemoveDialog: false,
1692     });
1693   }
1694
1695   handlePurgePersonShow(i: PostListing) {
1696     i.setState({
1697       showPurgeDialog: true,
1698       purgeType: PurgeType.Person,
1699       showRemoveDialog: false,
1700     });
1701   }
1702
1703   handlePurgePostShow(i: PostListing) {
1704     i.setState({
1705       showPurgeDialog: true,
1706       purgeType: PurgeType.Post,
1707       showRemoveDialog: false,
1708     });
1709   }
1710
1711   handlePurgeReasonChange(i: PostListing, event: any) {
1712     i.setState({ purgeReason: event.target.value });
1713   }
1714
1715   handlePurgeSubmit(i: PostListing, event: any) {
1716     event.preventDefault();
1717     i.setState({ purgeLoading: true });
1718     if (i.state.purgeType == PurgeType.Person) {
1719       i.props.onPurgePerson({
1720         person_id: i.postView.creator.id,
1721         reason: i.state.purgeReason,
1722         auth: myAuthRequired(),
1723       });
1724     } else if (i.state.purgeType == PurgeType.Post) {
1725       i.props.onPurgePost({
1726         post_id: i.postView.post.id,
1727         reason: i.state.purgeReason,
1728         auth: myAuthRequired(),
1729       });
1730     }
1731   }
1732
1733   handleModBanReasonChange(i: PostListing, event: any) {
1734     i.setState({ banReason: event.target.value });
1735   }
1736
1737   handleModBanExpireDaysChange(i: PostListing, event: any) {
1738     i.setState({ banExpireDays: event.target.value });
1739   }
1740
1741   handleModBanFromCommunitySubmit(i: PostListing, event: any) {
1742     i.setState({ banType: BanType.Community });
1743     i.handleModBanBothSubmit(i, event);
1744   }
1745
1746   handleModBanSubmit(i: PostListing, event: any) {
1747     i.setState({ banType: BanType.Site });
1748     i.handleModBanBothSubmit(i, event);
1749   }
1750
1751   handleModBanBothSubmit(i: PostListing, event: any) {
1752     event.preventDefault();
1753     i.setState({ banLoading: true });
1754
1755     const ban = !i.props.post_view.creator_banned_from_community;
1756     // If its an unban, restore all their data
1757     if (ban == false) {
1758       i.setState({ removeData: false });
1759     }
1760     const person_id = i.props.post_view.creator.id;
1761     const remove_data = i.state.removeData;
1762     const reason = i.state.banReason;
1763     const expires = futureDaysToUnixTime(i.state.banExpireDays);
1764
1765     if (i.state.banType == BanType.Community) {
1766       const community_id = i.postView.community.id;
1767       i.props.onBanPersonFromCommunity({
1768         community_id,
1769         person_id,
1770         ban,
1771         remove_data,
1772         reason,
1773         expires,
1774         auth: myAuthRequired(),
1775       });
1776     } else {
1777       i.props.onBanPerson({
1778         person_id,
1779         ban,
1780         remove_data,
1781         reason,
1782         expires,
1783         auth: myAuthRequired(),
1784       });
1785     }
1786   }
1787
1788   handleAddModToCommunity(i: PostListing) {
1789     i.setState({ addModLoading: true });
1790     i.props.onAddModToCommunity({
1791       community_id: i.postView.community.id,
1792       person_id: i.postView.creator.id,
1793       added: !i.creatorIsMod_,
1794       auth: myAuthRequired(),
1795     });
1796   }
1797
1798   handleAddAdmin(i: PostListing) {
1799     i.setState({ addAdminLoading: true });
1800     i.props.onAddAdmin({
1801       person_id: i.postView.creator.id,
1802       added: !i.creatorIsAdmin_,
1803       auth: myAuthRequired(),
1804     });
1805   }
1806
1807   handleShowConfirmTransferCommunity(i: PostListing) {
1808     i.setState({ showConfirmTransferCommunity: true });
1809   }
1810
1811   handleCancelShowConfirmTransferCommunity(i: PostListing) {
1812     i.setState({ showConfirmTransferCommunity: false });
1813   }
1814
1815   handleTransferCommunity(i: PostListing) {
1816     i.setState({ transferLoading: true });
1817     i.props.onTransferCommunity({
1818       community_id: i.postView.community.id,
1819       person_id: i.postView.creator.id,
1820       auth: myAuthRequired(),
1821     });
1822   }
1823
1824   handleShowConfirmTransferSite(i: PostListing) {
1825     i.setState({ showConfirmTransferSite: true });
1826   }
1827
1828   handleCancelShowConfirmTransferSite(i: PostListing) {
1829     i.setState({ showConfirmTransferSite: false });
1830   }
1831
1832   handleImageExpandClick(i: PostListing, event: any) {
1833     event.preventDefault();
1834     i.setState({ imageExpanded: !i.state.imageExpanded });
1835     setupTippy();
1836   }
1837
1838   handleViewSource(i: PostListing) {
1839     i.setState({ viewSource: !i.state.viewSource });
1840   }
1841
1842   handleShowAdvanced(i: PostListing) {
1843     i.setState({ showAdvanced: !i.state.showAdvanced });
1844     setupTippy();
1845   }
1846
1847   handleShowMoreMobile(i: PostListing) {
1848     i.setState({
1849       showMoreMobile: !i.state.showMoreMobile,
1850       showAdvanced: !i.state.showAdvanced,
1851     });
1852     setupTippy();
1853   }
1854
1855   handleShowBody(i: PostListing) {
1856     i.setState({ showBody: !i.state.showBody });
1857     setupTippy();
1858   }
1859
1860   handleUpvote(i: PostListing) {
1861     i.setState({ upvoteLoading: true });
1862     i.props.onPostVote({
1863       post_id: i.postView.post.id,
1864       score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
1865       auth: myAuthRequired(),
1866     });
1867   }
1868
1869   handleDownvote(i: PostListing) {
1870     i.setState({ downvoteLoading: true });
1871     i.props.onPostVote({
1872       post_id: i.postView.post.id,
1873       score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
1874       auth: myAuthRequired(),
1875     });
1876   }
1877
1878   get pointsTippy(): string {
1879     const points = I18NextService.i18n.t("number_of_points", {
1880       count: Number(this.postView.counts.score),
1881       formattedCount: Number(this.postView.counts.score),
1882     });
1883
1884     const upvotes = I18NextService.i18n.t("number_of_upvotes", {
1885       count: Number(this.postView.counts.upvotes),
1886       formattedCount: Number(this.postView.counts.upvotes),
1887     });
1888
1889     const downvotes = I18NextService.i18n.t("number_of_downvotes", {
1890       count: Number(this.postView.counts.downvotes),
1891       formattedCount: Number(this.postView.counts.downvotes),
1892     });
1893
1894     return `${points} • ${upvotes} • ${downvotes}`;
1895   }
1896
1897   get canModOnSelf_(): boolean {
1898     return canMod(
1899       this.postView.creator.id,
1900       this.props.moderators,
1901       this.props.admins,
1902       undefined,
1903       true
1904     );
1905   }
1906
1907   get canMod_(): boolean {
1908     return canMod(
1909       this.postView.creator.id,
1910       this.props.moderators,
1911       this.props.admins
1912     );
1913   }
1914
1915   get canAdmin_(): boolean {
1916     return canAdmin(this.postView.creator.id, this.props.admins);
1917   }
1918
1919   get creatorIsMod_(): boolean {
1920     return isMod(this.postView.creator.id, this.props.moderators);
1921   }
1922
1923   get creatorIsAdmin_(): boolean {
1924     return isAdmin(this.postView.creator.id, this.props.admins);
1925   }
1926 }