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 } from "lemmy-js-client";
  22 import { externalHost } from "../../env";
  23 import { i18n } from "../../i18next";
  24 import { BanType } from "../../interfaces";
  25 import { UserService, WebSocketService } from "../../services";
  26 import {
  27   authField,
  28   canMod,
  29   futureDaysToUnixTime,
  30   hostname,
  31   isBanned,
  32   isImage,
  33   isMod,
  34   isVideo,
  35   md,
  36   mdToHtml,
  37   numToSI,
  38   previewLines,
  39   relTags,
  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={relTags}
 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={relTags}
 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={relTags}
 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={relTags}
 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     let post = this.props.post_view.post;
 515     return (
 516       <div class="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
 517         {this.commentsButton}
 518         {!post.local && (
 519           <a
 520             className="btn btn-link btn-animate text-muted py-0"
 521             title={i18n.t("link")}
 522             href={post.ap_id}
 523           >
 524             <Icon icon="fedilink" inline />
 525           </a>
 526         )}
 527         {mobile && !this.props.viewOnly && this.mobileVotes}
 528         {UserService.Instance.myUserInfo &&
 529           !this.props.viewOnly &&
 530           this.postActions(mobile)}
 531       </div>
 532     );
 533   }
 534
 535   postActions(mobile = false) {
 536     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
 537     // Possible enhancement: Make each button a component.
 538     let post_view = this.props.post_view;
 539     return (
 540       <>
 541         {this.saveButton}
 542         {this.crossPostButton}
 543         {mobile && this.showMoreButton}
 544         {(!mobile || this.state.showAdvanced) && (
 545           <>
 546             {!this.myPost && (
 547               <>
 548                 {this.reportButton}
 549                 {this.blockButton}
 550               </>
 551             )}
 552             {this.myPost && (this.showBody || this.state.showAdvanced) && (
 553               <>
 554                 {this.editButton}
 555                 {this.deleteButton}
 556               </>
 557             )}
 558           </>
 559         )}
 560         {this.state.showAdvanced && (
 561           <>
 562             {this.showBody && post_view.post.body && this.viewSourceButton}
 563             {this.canModOnSelf && (
 564               <>
 565                 {this.lockButton}
 566                 {this.stickyButton}
 567               </>
 568             )}
 569             {(this.canMod || this.canAdmin || true) && (
 570               <>{this.modRemoveButton}</>
 571             )}
 572           </>
 573         )}
 574         {!mobile && this.showMoreButton}
 575       </>
 576     );
 577   }
 578
 579   get commentsButton() {
 580     let post_view = this.props.post_view;
 581     return (
 582       <button class="btn btn-link text-muted py-0 pl-0">
 583         <Link
 584           className="text-muted"
 585           title={i18n.t("number_of_comments", {
 586             count: post_view.counts.comments,
 587             formattedCount: post_view.counts.comments,
 588           })}
 589           to={`/post/${post_view.post.id}?scrollToComments=true`}
 590         >
 591           <Icon icon="message-square" classes="mr-1" inline />
 592           {i18n.t("number_of_comments", {
 593             count: post_view.counts.comments,
 594             formattedCount: numToSI(post_view.counts.comments),
 595           })}
 596         </Link>
 597       </button>
 598     );
 599   }
 600
 601   get mobileVotes() {
 602     // TODO: make nicer
 603     let tippy = showScores() ? { "data-tippy-content": this.pointsTippy } : {};
 604     return (
 605       <>
 606         <div>
 607           <button
 608             className={`btn-animate btn py-0 px-1 ${
 609               this.state.my_vote == 1 ? "text-info" : "text-muted"
 610             }`}
 611             {...tippy}
 612             onClick={linkEvent(this, this.handlePostLike)}
 613             aria-label={i18n.t("upvote")}
 614           >
 615             <Icon icon="arrow-up1" classes="icon-inline small" />
 616             {showScores() && (
 617               <span class="ml-2">{numToSI(this.state.upvotes)}</span>
 618             )}
 619           </button>
 620           {this.props.enableDownvotes && (
 621             <button
 622               className={`ml-2 btn-animate btn py-0 px-1 ${
 623                 this.state.my_vote == -1 ? "text-danger" : "text-muted"
 624               }`}
 625               onClick={linkEvent(this, this.handlePostDisLike)}
 626               {...tippy}
 627               aria-label={i18n.t("downvote")}
 628             >
 629               <Icon icon="arrow-down1" classes="icon-inline small" />
 630               {showScores() && (
 631                 <span
 632                   class={classNames("ml-2", {
 633                     invisible: this.state.downvotes === 0,
 634                   })}
 635                 >
 636                   {numToSI(this.state.downvotes)}
 637                 </span>
 638               )}
 639             </button>
 640           )}
 641         </div>
 642       </>
 643     );
 644   }
 645
 646   get saveButton() {
 647     let saved = this.props.post_view.saved;
 648     let label = saved ? i18n.t("unsave") : i18n.t("save");
 649     return (
 650       <button
 651         class="btn btn-link btn-animate text-muted py-0"
 652         onClick={linkEvent(this, this.handleSavePostClick)}
 653         data-tippy-content={label}
 654         aria-label={label}
 655       >
 656         <Icon
 657           icon="star"
 658           classes={classNames({ "text-warning": saved })}
 659           inline
 660         />
 661       </button>
 662     );
 663   }
 664
 665   get crossPostButton() {
 666     return (
 667       <Link
 668         className="btn btn-link btn-animate text-muted py-0"
 669         to={`/create_post${this.crossPostParams}`}
 670         title={i18n.t("cross_post")}
 671       >
 672         <Icon icon="copy" inline />
 673       </Link>
 674     );
 675   }
 676
 677   get reportButton() {
 678     return (
 679       <button
 680         class="btn btn-link btn-animate text-muted py-0"
 681         onClick={linkEvent(this, this.handleShowReportDialog)}
 682         data-tippy-content={i18n.t("show_report_dialog")}
 683         aria-label={i18n.t("show_report_dialog")}
 684       >
 685         <Icon icon="flag" inline />
 686       </button>
 687     );
 688   }
 689
 690   get blockButton() {
 691     return (
 692       <button
 693         class="btn btn-link btn-animate text-muted py-0"
 694         onClick={linkEvent(this, this.handleBlockUserClick)}
 695         data-tippy-content={i18n.t("block_user")}
 696         aria-label={i18n.t("block_user")}
 697       >
 698         <Icon icon="slash" inline />
 699       </button>
 700     );
 701   }
 702
 703   get editButton() {
 704     return (
 705       <button
 706         class="btn btn-link btn-animate text-muted py-0"
 707         onClick={linkEvent(this, this.handleEditClick)}
 708         data-tippy-content={i18n.t("edit")}
 709         aria-label={i18n.t("edit")}
 710       >
 711         <Icon icon="edit" inline />
 712       </button>
 713     );
 714   }
 715
 716   get deleteButton() {
 717     let deleted = this.props.post_view.post.deleted;
 718     let label = !deleted ? i18n.t("delete") : i18n.t("restore");
 719     return (
 720       <button
 721         class="btn btn-link btn-animate text-muted py-0"
 722         onClick={linkEvent(this, this.handleDeleteClick)}
 723         data-tippy-content={label}
 724         aria-label={label}
 725       >
 726         <Icon
 727           icon="trash"
 728           classes={classNames({ "text-danger": deleted })}
 729           inline
 730         />
 731       </button>
 732     );
 733   }
 734
 735   get showMoreButton() {
 736     return (
 737       <button
 738         class="btn btn-link btn-animate text-muted py-0"
 739         onClick={linkEvent(this, this.handleShowAdvanced)}
 740         data-tippy-content={i18n.t("more")}
 741         aria-label={i18n.t("more")}
 742       >
 743         <Icon icon="more-vertical" inline />
 744       </button>
 745     );
 746   }
 747
 748   get viewSourceButton() {
 749     return (
 750       <button
 751         class="btn btn-link btn-animate text-muted py-0"
 752         onClick={linkEvent(this, this.handleViewSource)}
 753         data-tippy-content={i18n.t("view_source")}
 754         aria-label={i18n.t("view_source")}
 755       >
 756         <Icon
 757           icon="file-text"
 758           classes={classNames({ "text-success": this.state.viewSource })}
 759           inline
 760         />
 761       </button>
 762     );
 763   }
 764
 765   get lockButton() {
 766     let locked = this.props.post_view.post.locked;
 767     let label = locked ? i18n.t("unlock") : i18n.t("lock");
 768     return (
 769       <button
 770         class="btn btn-link btn-animate text-muted py-0"
 771         onClick={linkEvent(this, this.handleModLock)}
 772         data-tippy-content={label}
 773         aria-label={label}
 774       >
 775         <Icon
 776           icon="lock"
 777           classes={classNames({ "text-danger": locked })}
 778           inline
 779         />
 780       </button>
 781     );
 782   }
 783
 784   get stickyButton() {
 785     let stickied = this.props.post_view.post.stickied;
 786     let label = stickied ? i18n.t("unsticky") : i18n.t("sticky");
 787     return (
 788       <button
 789         class="btn btn-link btn-animate text-muted py-0"
 790         onClick={linkEvent(this, this.handleModSticky)}
 791         data-tippy-content={label}
 792         aria-label={label}
 793       >
 794         <Icon
 795           icon="pin"
 796           classes={classNames({ "text-success": stickied })}
 797           inline
 798         />
 799       </button>
 800     );
 801   }
 802
 803   get modRemoveButton() {
 804     let removed = this.props.post_view.post.removed;
 805     return (
 806       <button
 807         class="btn btn-link btn-animate text-muted py-0"
 808         onClick={linkEvent(
 809           this,
 810           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
 811         )}
 812       >
 813         {/* TODO: Find an icon for this. */}
 814         {!removed ? i18n.t("remove") : i18n.t("restore")}
 815       </button>
 816     );
 817   }
 818
 819   /**
 820    * Mod/Admin actions to be taken against the author.
 821    */
 822   userActionsLine() {
 823     // TODO: make nicer
 824     let post_view = this.props.post_view;
 825     return (
 826       this.state.showAdvanced && (
 827         <>
 828           {this.canMod && (
 829             <>
 830               {!this.creatorIsMod &&
 831                 (!post_view.creator_banned_from_community ? (
 832                   <button
 833                     class="btn btn-link btn-animate text-muted py-0"
 834                     onClick={linkEvent(
 835                       this,
 836                       this.handleModBanFromCommunityShow
 837                     )}
 838                     aria-label={i18n.t("ban")}
 839                   >
 840                     {i18n.t("ban")}
 841                   </button>
 842                 ) : (
 843                   <button
 844                     class="btn btn-link btn-animate text-muted py-0"
 845                     onClick={linkEvent(
 846                       this,
 847                       this.handleModBanFromCommunitySubmit
 848                     )}
 849                     aria-label={i18n.t("unban")}
 850                   >
 851                     {i18n.t("unban")}
 852                   </button>
 853                 ))}
 854               {!post_view.creator_banned_from_community && (
 855                 <button
 856                   class="btn btn-link btn-animate text-muted py-0"
 857                   onClick={linkEvent(this, this.handleAddModToCommunity)}
 858                   aria-label={
 859                     this.creatorIsMod
 860                       ? i18n.t("remove_as_mod")
 861                       : i18n.t("appoint_as_mod")
 862                   }
 863                 >
 864                   {this.creatorIsMod
 865                     ? i18n.t("remove_as_mod")
 866                     : i18n.t("appoint_as_mod")}
 867                 </button>
 868               )}
 869             </>
 870           )}
 871           {/* Community creators and admins can transfer community to another mod */}
 872           {(this.amCommunityCreator || this.canAdmin) &&
 873             this.creatorIsMod &&
 874             (!this.state.showConfirmTransferCommunity ? (
 875               <button
 876                 class="btn btn-link btn-animate text-muted py-0"
 877                 onClick={linkEvent(
 878                   this,
 879                   this.handleShowConfirmTransferCommunity
 880                 )}
 881                 aria-label={i18n.t("transfer_community")}
 882               >
 883                 {i18n.t("transfer_community")}
 884               </button>
 885             ) : (
 886               <>
 887                 <button
 888                   class="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
 889                   aria-label={i18n.t("are_you_sure")}
 890                 >
 891                   {i18n.t("are_you_sure")}
 892                 </button>
 893                 <button
 894                   class="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
 895                   aria-label={i18n.t("yes")}
 896                   onClick={linkEvent(this, this.handleTransferCommunity)}
 897                 >
 898                   {i18n.t("yes")}
 899                 </button>
 900                 <button
 901                   class="btn btn-link btn-animate text-muted py-0 d-inline-block"
 902                   onClick={linkEvent(
 903                     this,
 904                     this.handleCancelShowConfirmTransferCommunity
 905                   )}
 906                   aria-label={i18n.t("no")}
 907                 >
 908                   {i18n.t("no")}
 909                 </button>
 910               </>
 911             ))}
 912           {/* Admins can ban from all, and appoint other admins */}
 913           {this.canAdmin && (
 914             <>
 915               {!this.creatorIsAdmin &&
 916                 (!isBanned(post_view.creator) ? (
 917                   <button
 918                     class="btn btn-link btn-animate text-muted py-0"
 919                     onClick={linkEvent(this, this.handleModBanShow)}
 920                     aria-label={i18n.t("ban_from_site")}
 921                   >
 922                     {i18n.t("ban_from_site")}
 923                   </button>
 924                 ) : (
 925                   <button
 926                     class="btn btn-link btn-animate text-muted py-0"
 927                     onClick={linkEvent(this, this.handleModBanSubmit)}
 928                     aria-label={i18n.t("unban_from_site")}
 929                   >
 930                     {i18n.t("unban_from_site")}
 931                   </button>
 932                 ))}
 933               {!isBanned(post_view.creator) && post_view.creator.local && (
 934                 <button
 935                   class="btn btn-link btn-animate text-muted py-0"
 936                   onClick={linkEvent(this, this.handleAddAdmin)}
 937                   aria-label={
 938                     this.creatorIsAdmin
 939                       ? i18n.t("remove_as_admin")
 940                       : i18n.t("appoint_as_admin")
 941                   }
 942                 >
 943                   {this.creatorIsAdmin
 944                     ? i18n.t("remove_as_admin")
 945                     : i18n.t("appoint_as_admin")}
 946                 </button>
 947               )}
 948             </>
 949           )}
 950         </>
 951       )
 952     );
 953   }
 954
 955   removeAndBanDialogs() {
 956     let post = this.props.post_view;
 957     return (
 958       <>
 959         {this.state.showRemoveDialog && (
 960           <form
 961             class="form-inline"
 962             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
 963           >
 964             <label class="sr-only" htmlFor="post-listing-remove-reason">
 965               {i18n.t("reason")}
 966             </label>
 967             <input
 968               type="text"
 969               id="post-listing-remove-reason"
 970               class="form-control mr-2"
 971               placeholder={i18n.t("reason")}
 972               value={this.state.removeReason}
 973               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
 974             />
 975             <button
 976               type="submit"
 977               class="btn btn-secondary"
 978               aria-label={i18n.t("remove_post")}
 979             >
 980               {i18n.t("remove_post")}
 981             </button>
 982           </form>
 983         )}
 984         {this.state.showBanDialog && (
 985           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
 986             <div class="form-group row col-12">
 987               <label class="col-form-label" htmlFor="post-listing-ban-reason">
 988                 {i18n.t("reason")}
 989               </label>
 990               <input
 991                 type="text"
 992                 id="post-listing-ban-reason"
 993                 class="form-control mr-2"
 994                 placeholder={i18n.t("reason")}
 995                 value={this.state.banReason}
 996                 onInput={linkEvent(this, this.handleModBanReasonChange)}
 997               />
 998               <label class="col-form-label" htmlFor={`mod-ban-expires`}>
 999                 {i18n.t("expires")}
1000               </label>
1001               <input
1002                 type="number"
1003                 id={`mod-ban-expires`}
1004                 class="form-control mr-2"
1005                 placeholder={i18n.t("number_of_days")}
1006                 value={this.state.banExpireDays}
1007                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
1008               />
1009               <div class="form-group">
1010                 <div class="form-check">
1011                   <input
1012                     class="form-check-input"
1013                     id="mod-ban-remove-data"
1014                     type="checkbox"
1015                     checked={this.state.removeData}
1016                     onChange={linkEvent(this, this.handleModRemoveDataChange)}
1017                   />
1018                   <label
1019                     class="form-check-label"
1020                     htmlFor="mod-ban-remove-data"
1021                     title={i18n.t("remove_content_more")}
1022                   >
1023                     {i18n.t("remove_content")}
1024                   </label>
1025                 </div>
1026               </div>
1027             </div>
1028             {/* TODO hold off on expires until later */}
1029             {/* <div class="form-group row"> */}
1030             {/*   <label class="col-form-label">Expires</label> */}
1031             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
1032             {/* </div> */}
1033             <div class="form-group row">
1034               <button
1035                 type="submit"
1036                 class="btn btn-secondary"
1037                 aria-label={i18n.t("ban")}
1038               >
1039                 {i18n.t("ban")} {post.creator.name}
1040               </button>
1041             </div>
1042           </form>
1043         )}
1044         {this.state.showReportDialog && (
1045           <form
1046             class="form-inline"
1047             onSubmit={linkEvent(this, this.handleReportSubmit)}
1048           >
1049             <label class="sr-only" htmlFor="post-report-reason">
1050               {i18n.t("reason")}
1051             </label>
1052             <input
1053               type="text"
1054               id="post-report-reason"
1055               class="form-control mr-2"
1056               placeholder={i18n.t("reason")}
1057               required
1058               value={this.state.reportReason}
1059               onInput={linkEvent(this, this.handleReportReasonChange)}
1060             />
1061             <button
1062               type="submit"
1063               class="btn btn-secondary"
1064               aria-label={i18n.t("create_report")}
1065             >
1066               {i18n.t("create_report")}
1067             </button>
1068           </form>
1069         )}
1070       </>
1071     );
1072   }
1073
1074   mobileThumbnail() {
1075     let post = this.props.post_view.post;
1076     return post.thumbnail_url || isImage(post.url) ? (
1077       <div class="row">
1078         <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
1079           {this.postTitleLine()}
1080         </div>
1081         <div class="col-4">
1082           {/* Post body prev or thumbnail */}
1083           {!this.state.imageExpanded && this.thumbnail()}
1084         </div>
1085       </div>
1086     ) : (
1087       this.postTitleLine()
1088     );
1089   }
1090
1091   showMobilePreview() {
1092     let post = this.props.post_view.post;
1093     return (
1094       post.body &&
1095       !this.showBody && (
1096         <div
1097           className="md-div mb-1"
1098           dangerouslySetInnerHTML={{
1099             __html: md.render(previewLines(post.body)),
1100           }}
1101         />
1102       )
1103     );
1104   }
1105
1106   listing() {
1107     return (
1108       <>
1109         {/* The mobile view*/}
1110         <div class="d-block d-sm-none">
1111           <div class="row">
1112             <div class="col-12">
1113               {this.createdLine()}
1114
1115               {/* If it has a thumbnail, do a right aligned thumbnail */}
1116               {this.mobileThumbnail()}
1117
1118               {/* Show a preview of the post body */}
1119               {this.showMobilePreview()}
1120
1121               {this.commentsLine(true)}
1122               {this.userActionsLine()}
1123               {this.duplicatesLine()}
1124               {this.removeAndBanDialogs()}
1125             </div>
1126           </div>
1127         </div>
1128
1129         {/* The larger view*/}
1130         <div class="d-none d-sm-block">
1131           <div class="row">
1132             {!this.props.viewOnly && this.voteBar()}
1133             <div class="col-sm-2 pr-0">
1134               <div class="">{this.thumbnail()}</div>
1135             </div>
1136             <div class="col-12 col-sm-9">
1137               <div class="row">
1138                 <div className="col-12">
1139                   {this.postTitleLine()}
1140                   {this.createdLine()}
1141                   {this.commentsLine()}
1142                   {this.duplicatesLine()}
1143                   {this.userActionsLine()}
1144                   {this.removeAndBanDialogs()}
1145                 </div>
1146               </div>
1147             </div>
1148           </div>
1149         </div>
1150       </>
1151     );
1152   }
1153
1154   private get myPost(): boolean {
1155     return (
1156       UserService.Instance.myUserInfo &&
1157       this.props.post_view.creator.id ==
1158         UserService.Instance.myUserInfo.local_user_view.person.id
1159     );
1160   }
1161
1162   get creatorIsMod(): boolean {
1163     return (
1164       this.props.moderators &&
1165       isMod(
1166         this.props.moderators.map(m => m.moderator.id),
1167         this.props.post_view.creator.id
1168       )
1169     );
1170   }
1171
1172   get creatorIsAdmin(): boolean {
1173     return (
1174       this.props.admins &&
1175       isMod(
1176         this.props.admins.map(a => a.person.id),
1177         this.props.post_view.creator.id
1178       )
1179     );
1180   }
1181
1182   /**
1183    * If the current user is allowed to mod this post.
1184    * The creator of this post is not allowed even if they are a mod.
1185    */
1186   get canMod(): boolean {
1187     if (this.props.admins && this.props.moderators) {
1188       let adminsThenMods = this.props.admins
1189         .map(a => a.person.id)
1190         .concat(this.props.moderators.map(m => m.moderator.id));
1191
1192       return canMod(
1193         UserService.Instance.myUserInfo,
1194         adminsThenMods,
1195         this.props.post_view.creator.id
1196       );
1197     } else {
1198       return false;
1199     }
1200   }
1201
1202   /**
1203    * If the current user is allowed to mod this post.
1204    * The creator of this post is allowed if they are a mod.
1205    */
1206   get canModOnSelf(): boolean {
1207     if (this.props.admins && this.props.moderators) {
1208       let adminsThenMods = this.props.admins
1209         .map(a => a.person.id)
1210         .concat(this.props.moderators.map(m => m.moderator.id));
1211
1212       return canMod(
1213         UserService.Instance.myUserInfo,
1214         adminsThenMods,
1215         this.props.post_view.creator.id,
1216         true
1217       );
1218     } else {
1219       return false;
1220     }
1221   }
1222
1223   get canAdmin(): boolean {
1224     return (
1225       this.props.admins &&
1226       canMod(
1227         UserService.Instance.myUserInfo,
1228         this.props.admins.map(a => a.person.id),
1229         this.props.post_view.creator.id
1230       )
1231     );
1232   }
1233
1234   get amCommunityCreator(): boolean {
1235     return (
1236       this.props.moderators &&
1237       UserService.Instance.myUserInfo &&
1238       this.props.post_view.creator.id !=
1239         UserService.Instance.myUserInfo.local_user_view.person.id &&
1240       UserService.Instance.myUserInfo.local_user_view.person.id ==
1241         this.props.moderators[0].moderator.id
1242     );
1243   }
1244
1245   get amSiteCreator(): boolean {
1246     return (
1247       this.props.admins &&
1248       UserService.Instance.myUserInfo &&
1249       this.props.post_view.creator.id !=
1250         UserService.Instance.myUserInfo.local_user_view.person.id &&
1251       UserService.Instance.myUserInfo.local_user_view.person.id ==
1252         this.props.admins[0].person.id
1253     );
1254   }
1255
1256   handlePostLike(i: PostListing, event: any) {
1257     event.preventDefault();
1258     if (!UserService.Instance.myUserInfo) {
1259       this.context.router.history.push(`/login`);
1260     }
1261
1262     let new_vote = i.state.my_vote == 1 ? 0 : 1;
1263
1264     if (i.state.my_vote == 1) {
1265       i.state.score--;
1266       i.state.upvotes--;
1267     } else if (i.state.my_vote == -1) {
1268       i.state.downvotes--;
1269       i.state.upvotes++;
1270       i.state.score += 2;
1271     } else {
1272       i.state.upvotes++;
1273       i.state.score++;
1274     }
1275
1276     i.state.my_vote = new_vote;
1277
1278     let form: CreatePostLike = {
1279       post_id: i.props.post_view.post.id,
1280       score: i.state.my_vote,
1281       auth: authField(),
1282     };
1283
1284     WebSocketService.Instance.send(wsClient.likePost(form));
1285     i.setState(i.state);
1286     setupTippy();
1287   }
1288
1289   handlePostDisLike(i: PostListing, event: any) {
1290     event.preventDefault();
1291     if (!UserService.Instance.myUserInfo) {
1292       this.context.router.history.push(`/login`);
1293     }
1294
1295     let new_vote = i.state.my_vote == -1 ? 0 : -1;
1296
1297     if (i.state.my_vote == 1) {
1298       i.state.score -= 2;
1299       i.state.upvotes--;
1300       i.state.downvotes++;
1301     } else if (i.state.my_vote == -1) {
1302       i.state.downvotes--;
1303       i.state.score++;
1304     } else {
1305       i.state.downvotes++;
1306       i.state.score--;
1307     }
1308
1309     i.state.my_vote = new_vote;
1310
1311     let form: CreatePostLike = {
1312       post_id: i.props.post_view.post.id,
1313       score: i.state.my_vote,
1314       auth: authField(),
1315     };
1316
1317     WebSocketService.Instance.send(wsClient.likePost(form));
1318     i.setState(i.state);
1319     setupTippy();
1320   }
1321
1322   handleEditClick(i: PostListing) {
1323     i.state.showEdit = true;
1324     i.setState(i.state);
1325   }
1326
1327   handleEditCancel() {
1328     this.state.showEdit = false;
1329     this.setState(this.state);
1330   }
1331
1332   // The actual editing is done in the recieve for post
1333   handleEditPost() {
1334     this.state.showEdit = false;
1335     this.setState(this.state);
1336   }
1337
1338   handleShowReportDialog(i: PostListing) {
1339     i.state.showReportDialog = !i.state.showReportDialog;
1340     i.setState(this.state);
1341   }
1342
1343   handleReportReasonChange(i: PostListing, event: any) {
1344     i.state.reportReason = event.target.value;
1345     i.setState(i.state);
1346   }
1347
1348   handleReportSubmit(i: PostListing, event: any) {
1349     event.preventDefault();
1350     let form: CreatePostReport = {
1351       post_id: i.props.post_view.post.id,
1352       reason: i.state.reportReason,
1353       auth: authField(),
1354     };
1355     WebSocketService.Instance.send(wsClient.createPostReport(form));
1356
1357     i.state.showReportDialog = false;
1358     i.setState(i.state);
1359   }
1360
1361   handleBlockUserClick(i: PostListing) {
1362     let blockUserForm: BlockPerson = {
1363       person_id: i.props.post_view.creator.id,
1364       block: true,
1365       auth: authField(),
1366     };
1367     WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
1368   }
1369
1370   handleDeleteClick(i: PostListing) {
1371     let deleteForm: DeletePost = {
1372       post_id: i.props.post_view.post.id,
1373       deleted: !i.props.post_view.post.deleted,
1374       auth: authField(),
1375     };
1376     WebSocketService.Instance.send(wsClient.deletePost(deleteForm));
1377   }
1378
1379   handleSavePostClick(i: PostListing) {
1380     let saved =
1381       i.props.post_view.saved == undefined ? true : !i.props.post_view.saved;
1382     let form: SavePost = {
1383       post_id: i.props.post_view.post.id,
1384       save: saved,
1385       auth: authField(),
1386     };
1387
1388     WebSocketService.Instance.send(wsClient.savePost(form));
1389   }
1390
1391   get crossPostParams(): string {
1392     let post = this.props.post_view.post;
1393     let params = `?title=${encodeURIComponent(post.name)}`;
1394
1395     if (post.url) {
1396       params += `&url=${encodeURIComponent(post.url)}`;
1397     }
1398     if (post.body) {
1399       params += `&body=${encodeURIComponent(this.crossPostBody())}`;
1400     }
1401     return params;
1402   }
1403
1404   crossPostBody(): string {
1405     let post = this.props.post_view.post;
1406     let body = `${i18n.t("cross_posted_from")} ${
1407       post.ap_id
1408     }\n\n${post.body.replace(/^/gm, "> ")}`;
1409     return body;
1410   }
1411
1412   get showBody(): boolean {
1413     return this.props.showBody || this.state.showBody;
1414   }
1415
1416   handleModRemoveShow(i: PostListing) {
1417     i.state.showRemoveDialog = !i.state.showRemoveDialog;
1418     i.state.showBanDialog = false;
1419     i.setState(i.state);
1420   }
1421
1422   handleModRemoveReasonChange(i: PostListing, event: any) {
1423     i.state.removeReason = event.target.value;
1424     i.setState(i.state);
1425   }
1426
1427   handleModRemoveDataChange(i: PostListing, event: any) {
1428     i.state.removeData = event.target.checked;
1429     i.setState(i.state);
1430   }
1431
1432   handleModRemoveSubmit(i: PostListing, event: any) {
1433     event.preventDefault();
1434     let form: RemovePost = {
1435       post_id: i.props.post_view.post.id,
1436       removed: !i.props.post_view.post.removed,
1437       reason: i.state.removeReason,
1438       auth: authField(),
1439     };
1440     WebSocketService.Instance.send(wsClient.removePost(form));
1441
1442     i.state.showRemoveDialog = false;
1443     i.setState(i.state);
1444   }
1445
1446   handleModLock(i: PostListing) {
1447     let form: LockPost = {
1448       post_id: i.props.post_view.post.id,
1449       locked: !i.props.post_view.post.locked,
1450       auth: authField(),
1451     };
1452     WebSocketService.Instance.send(wsClient.lockPost(form));
1453   }
1454
1455   handleModSticky(i: PostListing) {
1456     let form: StickyPost = {
1457       post_id: i.props.post_view.post.id,
1458       stickied: !i.props.post_view.post.stickied,
1459       auth: authField(),
1460     };
1461     WebSocketService.Instance.send(wsClient.stickyPost(form));
1462   }
1463
1464   handleModBanFromCommunityShow(i: PostListing) {
1465     i.state.showBanDialog = true;
1466     i.state.banType = BanType.Community;
1467     i.state.showRemoveDialog = false;
1468     i.setState(i.state);
1469   }
1470
1471   handleModBanShow(i: PostListing) {
1472     i.state.showBanDialog = true;
1473     i.state.banType = BanType.Site;
1474     i.state.showRemoveDialog = false;
1475     i.setState(i.state);
1476   }
1477
1478   handleModBanReasonChange(i: PostListing, event: any) {
1479     i.state.banReason = event.target.value;
1480     i.setState(i.state);
1481   }
1482
1483   handleModBanExpireDaysChange(i: PostListing, event: any) {
1484     i.state.banExpireDays = event.target.value;
1485     i.setState(i.state);
1486   }
1487
1488   handleModBanFromCommunitySubmit(i: PostListing) {
1489     i.state.banType = BanType.Community;
1490     i.setState(i.state);
1491     i.handleModBanBothSubmit(i);
1492   }
1493
1494   handleModBanSubmit(i: PostListing) {
1495     i.state.banType = BanType.Site;
1496     i.setState(i.state);
1497     i.handleModBanBothSubmit(i);
1498   }
1499
1500   handleModBanBothSubmit(i: PostListing, event?: any) {
1501     if (event) event.preventDefault();
1502
1503     if (i.state.banType == BanType.Community) {
1504       // If its an unban, restore all their data
1505       let ban = !i.props.post_view.creator_banned_from_community;
1506       if (ban == false) {
1507         i.state.removeData = false;
1508       }
1509       let form: BanFromCommunity = {
1510         person_id: i.props.post_view.creator.id,
1511         community_id: i.props.post_view.community.id,
1512         ban,
1513         remove_data: i.state.removeData,
1514         reason: i.state.banReason,
1515         expires: futureDaysToUnixTime(i.state.banExpireDays),
1516         auth: authField(),
1517       };
1518       WebSocketService.Instance.send(wsClient.banFromCommunity(form));
1519     } else {
1520       // If its an unban, restore all their data
1521       let ban = !i.props.post_view.creator.banned;
1522       if (ban == false) {
1523         i.state.removeData = false;
1524       }
1525       let form: BanPerson = {
1526         person_id: i.props.post_view.creator.id,
1527         ban,
1528         remove_data: i.state.removeData,
1529         reason: i.state.banReason,
1530         expires: futureDaysToUnixTime(i.state.banExpireDays),
1531         auth: authField(),
1532       };
1533       WebSocketService.Instance.send(wsClient.banPerson(form));
1534     }
1535
1536     i.state.showBanDialog = false;
1537     i.setState(i.state);
1538   }
1539
1540   handleAddModToCommunity(i: PostListing) {
1541     let form: AddModToCommunity = {
1542       person_id: i.props.post_view.creator.id,
1543       community_id: i.props.post_view.community.id,
1544       added: !i.creatorIsMod,
1545       auth: authField(),
1546     };
1547     WebSocketService.Instance.send(wsClient.addModToCommunity(form));
1548     i.setState(i.state);
1549   }
1550
1551   handleAddAdmin(i: PostListing) {
1552     let form: AddAdmin = {
1553       person_id: i.props.post_view.creator.id,
1554       added: !i.creatorIsAdmin,
1555       auth: authField(),
1556     };
1557     WebSocketService.Instance.send(wsClient.addAdmin(form));
1558     i.setState(i.state);
1559   }
1560
1561   handleShowConfirmTransferCommunity(i: PostListing) {
1562     i.state.showConfirmTransferCommunity = true;
1563     i.setState(i.state);
1564   }
1565
1566   handleCancelShowConfirmTransferCommunity(i: PostListing) {
1567     i.state.showConfirmTransferCommunity = false;
1568     i.setState(i.state);
1569   }
1570
1571   handleTransferCommunity(i: PostListing) {
1572     let form: TransferCommunity = {
1573       community_id: i.props.post_view.community.id,
1574       person_id: i.props.post_view.creator.id,
1575       auth: authField(),
1576     };
1577     WebSocketService.Instance.send(wsClient.transferCommunity(form));
1578     i.state.showConfirmTransferCommunity = false;
1579     i.setState(i.state);
1580   }
1581
1582   handleShowConfirmTransferSite(i: PostListing) {
1583     i.state.showConfirmTransferSite = true;
1584     i.setState(i.state);
1585   }
1586
1587   handleCancelShowConfirmTransferSite(i: PostListing) {
1588     i.state.showConfirmTransferSite = false;
1589     i.setState(i.state);
1590   }
1591
1592   handleImageExpandClick(i: PostListing, event: any) {
1593     event.preventDefault();
1594     i.state.imageExpanded = !i.state.imageExpanded;
1595     i.setState(i.state);
1596     setupTippy();
1597   }
1598
1599   handleViewSource(i: PostListing) {
1600     i.state.viewSource = !i.state.viewSource;
1601     i.setState(i.state);
1602   }
1603
1604   handleShowAdvanced(i: PostListing) {
1605     i.state.showAdvanced = !i.state.showAdvanced;
1606     i.setState(i.state);
1607     setupTippy();
1608   }
1609
1610   handleShowMoreMobile(i: PostListing) {
1611     i.state.showMoreMobile = !i.state.showMoreMobile;
1612     i.state.showAdvanced = !i.state.showAdvanced;
1613     i.setState(i.state);
1614     setupTippy();
1615   }
1616
1617   handleShowBody(i: PostListing) {
1618     i.state.showBody = !i.state.showBody;
1619     i.setState(i.state);
1620     setupTippy();
1621   }
1622
1623   get pointsTippy(): string {
1624     let points = i18n.t("number_of_points", {
1625       count: this.state.score,
1626       formattedCount: this.state.score,
1627     });
1628
1629     let upvotes = i18n.t("number_of_upvotes", {
1630       count: this.state.upvotes,
1631       formattedCount: this.state.upvotes,
1632     });
1633
1634     let downvotes = i18n.t("number_of_downvotes", {
1635       count: this.state.downvotes,
1636       formattedCount: this.state.downvotes,
1637     });
1638
1639     return `${points} • ${upvotes} • ${downvotes}`;
1640   }
1641 }