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