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

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