src/shared/components/comment/comment-node.tsx

   1 import {
   2   colorList,
   3   getCommentParentId,
   4   getRoleLabelPill,
   5   myAuth,
   6   myAuthRequired,
   7   showScores,
   8 } from "@utils/app";
   9 import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
  10 import {
  11   amCommunityCreator,
  12   canAdmin,
  13   canMod,
  14   isAdmin,
  15   isBanned,
  16   isMod,
  17 } from "@utils/roles";
  18 import classNames from "classnames";
  19 import isBefore from "date-fns/isBefore";
  20 import parseISO from "date-fns/parseISO";
  21 import subMinutes from "date-fns/subMinutes";
  22 import { Component, InfernoNode, linkEvent } from "inferno";
  23 import { Link } from "inferno-router";
  24 import {
  25   AddAdmin,
  26   AddModToCommunity,
  27   BanFromCommunity,
  28   BanPerson,
  29   BlockPerson,
  30   CommentId,
  31   CommentReplyView,
  32   CommentView,
  33   CommunityModeratorView,
  34   CreateComment,
  35   CreateCommentLike,
  36   CreateCommentReport,
  37   DeleteComment,
  38   DistinguishComment,
  39   EditComment,
  40   GetComments,
  41   Language,
  42   MarkCommentReplyAsRead,
  43   MarkPersonMentionAsRead,
  44   PersonMentionView,
  45   PersonView,
  46   PurgeComment,
  47   PurgePerson,
  48   RemoveComment,
  49   SaveComment,
  50   TransferCommunity,
  51 } from "lemmy-js-client";
  52 import deepEqual from "lodash.isequal";
  53 import { commentTreeMaxDepth } from "../../config";
  54 import {
  55   BanType,
  56   CommentNodeI,
  57   CommentViewType,
  58   PurgeType,
  59   VoteContentType,
  60 } from "../../interfaces";
  61 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
  62 import { I18NextService, UserService } from "../../services";
  63 import { setupTippy } from "../../tippy";
  64 import { Icon, PurgeWarning, Spinner } from "../common/icon";
  65 import { MomentTime } from "../common/moment-time";
  66 import { VoteButtonsCompact } from "../common/vote-buttons";
  67 import { CommunityLink } from "../community/community-link";
  68 import { PersonListing } from "../person/person-listing";
  69 import { CommentForm } from "./comment-form";
  70 import { CommentNodes } from "./comment-nodes";
  71
  72 interface CommentNodeState {
  73   showReply: boolean;
  74   showEdit: boolean;
  75   showRemoveDialog: boolean;
  76   removeReason?: string;
  77   showBanDialog: boolean;
  78   removeData: boolean;
  79   banReason?: string;
  80   banExpireDays?: number;
  81   banType: BanType;
  82   showPurgeDialog: boolean;
  83   purgeReason?: string;
  84   purgeType: PurgeType;
  85   showConfirmTransferSite: boolean;
  86   showConfirmTransferCommunity: boolean;
  87   showConfirmAppointAsMod: boolean;
  88   showConfirmAppointAsAdmin: boolean;
  89   collapsed: boolean;
  90   viewSource: boolean;
  91   showAdvanced: boolean;
  92   showReportDialog: boolean;
  93   reportReason?: string;
  94   createOrEditCommentLoading: boolean;
  95   upvoteLoading: boolean;
  96   downvoteLoading: boolean;
  97   saveLoading: boolean;
  98   readLoading: boolean;
  99   blockPersonLoading: boolean;
 100   deleteLoading: boolean;
 101   removeLoading: boolean;
 102   distinguishLoading: boolean;
 103   banLoading: boolean;
 104   addModLoading: boolean;
 105   addAdminLoading: boolean;
 106   transferCommunityLoading: boolean;
 107   fetchChildrenLoading: boolean;
 108   reportLoading: boolean;
 109   purgeLoading: boolean;
 110 }
 111
 112 interface CommentNodeProps {
 113   node: CommentNodeI;
 114   moderators?: CommunityModeratorView[];
 115   admins?: PersonView[];
 116   noBorder?: boolean;
 117   noIndent?: boolean;
 118   viewOnly?: boolean;
 119   locked?: boolean;
 120   markable?: boolean;
 121   showContext?: boolean;
 122   showCommunity?: boolean;
 123   enableDownvotes?: boolean;
 124   viewType: CommentViewType;
 125   allLanguages: Language[];
 126   siteLanguages: number[];
 127   hideImages?: boolean;
 128   finished: Map<CommentId, boolean | undefined>;
 129   onSaveComment(form: SaveComment): void;
 130   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
 131   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
 132   onCreateComment(form: EditComment | CreateComment): void;
 133   onEditComment(form: EditComment | CreateComment): void;
 134   onCommentVote(form: CreateCommentLike): void;
 135   onBlockPerson(form: BlockPerson): void;
 136   onDeleteComment(form: DeleteComment): void;
 137   onRemoveComment(form: RemoveComment): void;
 138   onDistinguishComment(form: DistinguishComment): void;
 139   onAddModToCommunity(form: AddModToCommunity): void;
 140   onAddAdmin(form: AddAdmin): void;
 141   onBanPersonFromCommunity(form: BanFromCommunity): void;
 142   onBanPerson(form: BanPerson): void;
 143   onTransferCommunity(form: TransferCommunity): void;
 144   onFetchChildren?(form: GetComments): void;
 145   onCommentReport(form: CreateCommentReport): void;
 146   onPurgePerson(form: PurgePerson): void;
 147   onPurgeComment(form: PurgeComment): void;
 148 }
 149
 150 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 151   state: CommentNodeState = {
 152     showReply: false,
 153     showEdit: false,
 154     showRemoveDialog: false,
 155     showBanDialog: false,
 156     removeData: false,
 157     banType: BanType.Community,
 158     showPurgeDialog: false,
 159     purgeType: PurgeType.Person,
 160     collapsed: false,
 161     viewSource: false,
 162     showAdvanced: false,
 163     showConfirmTransferSite: false,
 164     showConfirmTransferCommunity: false,
 165     showConfirmAppointAsMod: false,
 166     showConfirmAppointAsAdmin: false,
 167     showReportDialog: false,
 168     createOrEditCommentLoading: false,
 169     upvoteLoading: false,
 170     downvoteLoading: false,
 171     saveLoading: false,
 172     readLoading: false,
 173     blockPersonLoading: false,
 174     deleteLoading: false,
 175     removeLoading: false,
 176     distinguishLoading: false,
 177     banLoading: false,
 178     addModLoading: false,
 179     addAdminLoading: false,
 180     transferCommunityLoading: false,
 181     fetchChildrenLoading: false,
 182     reportLoading: false,
 183     purgeLoading: false,
 184   };
 185
 186   constructor(props: any, context: any) {
 187     super(props, context);
 188
 189     this.handleReplyCancel = this.handleReplyCancel.bind(this);
 190   }
 191
 192   get commentView(): CommentView {
 193     return this.props.node.comment_view;
 194   }
 195
 196   get commentId(): CommentId {
 197     return this.commentView.comment.id;
 198   }
 199
 200   componentWillReceiveProps(
 201     nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
 202   ): void {
 203     if (!deepEqual(this.props, nextProps)) {
 204       this.setState({
 205         showReply: false,
 206         showEdit: false,
 207         showRemoveDialog: false,
 208         showBanDialog: false,
 209         removeData: false,
 210         banType: BanType.Community,
 211         showPurgeDialog: false,
 212         purgeType: PurgeType.Person,
 213         collapsed: false,
 214         viewSource: false,
 215         showAdvanced: false,
 216         showConfirmTransferSite: false,
 217         showConfirmTransferCommunity: false,
 218         showConfirmAppointAsMod: false,
 219         showConfirmAppointAsAdmin: false,
 220         showReportDialog: false,
 221         createOrEditCommentLoading: false,
 222         upvoteLoading: false,
 223         downvoteLoading: false,
 224         saveLoading: false,
 225         readLoading: false,
 226         blockPersonLoading: false,
 227         deleteLoading: false,
 228         removeLoading: false,
 229         distinguishLoading: false,
 230         banLoading: false,
 231         addModLoading: false,
 232         addAdminLoading: false,
 233         transferCommunityLoading: false,
 234         fetchChildrenLoading: false,
 235         reportLoading: false,
 236         purgeLoading: false,
 237       });
 238     }
 239   }
 240
 241   render() {
 242     const node = this.props.node;
 243     const cv = this.commentView;
 244
 245     const purgeTypeText =
 246       this.state.purgeType == PurgeType.Comment
 247         ? I18NextService.i18n.t("purge_comment")
 248         : `${I18NextService.i18n.t("purge")} ${cv.creator.name}`;
 249
 250     const canMod_ = canMod(
 251       cv.creator.id,
 252       this.props.moderators,
 253       this.props.admins
 254     );
 255     const canModOnSelf = canMod(
 256       cv.creator.id,
 257       this.props.moderators,
 258       this.props.admins,
 259       UserService.Instance.myUserInfo,
 260       true
 261     );
 262     const canAdmin_ = canAdmin(cv.creator.id, this.props.admins);
 263     const canAdminOnSelf = canAdmin(
 264       cv.creator.id,
 265       this.props.admins,
 266       UserService.Instance.myUserInfo,
 267       true
 268     );
 269     const isMod_ = isMod(cv.creator.id, this.props.moderators);
 270     const isAdmin_ = isAdmin(cv.creator.id, this.props.admins);
 271     const amCommunityCreator_ = amCommunityCreator(
 272       cv.creator.id,
 273       this.props.moderators
 274     );
 275
 276     const moreRepliesBorderColor = this.props.node.depth
 277       ? colorList[this.props.node.depth % colorList.length]
 278       : colorList[0];
 279
 280     const showMoreChildren =
 281       this.props.viewType == CommentViewType.Tree &&
 282       !this.state.collapsed &&
 283       node.children.length == 0 &&
 284       node.comment_view.counts.child_count > 0;
 285
 286     return (
 287       <li className="comment">
 288         <article
 289           id={`comment-${cv.comment.id}`}
 290           className={classNames(`details comment-node py-2`, {
 291             "border-top border-light": !this.props.noBorder,
 292             mark: this.isCommentNew || this.commentView.comment.distinguished,
 293           })}
 294         >
 295           <div
 296             className={classNames({
 297               "ms-2": !this.props.noIndent,
 298             })}
 299           >
 300             <div className="d-flex flex-wrap align-items-center text-muted small">
 301               <button
 302                 className="btn btn-sm text-muted me-2"
 303                 onClick={linkEvent(this, this.handleCommentCollapse)}
 304                 aria-label={this.expandText}
 305                 data-tippy-content={this.expandText}
 306               >
 307                 <Icon
 308                   icon={`${this.state.collapsed ? "plus" : "minus"}-square`}
 309                   classes="icon-inline"
 310                 />
 311               </button>
 312
 313               <span className="me-2">
 314                 <PersonListing person={cv.creator} />
 315               </span>
 316
 317               {cv.comment.distinguished && (
 318                 <Icon icon="shield" inline classes="text-danger me-2" />
 319               )}
 320
 321               {this.isPostCreator &&
 322                 getRoleLabelPill({
 323                   label: I18NextService.i18n.t("op").toUpperCase(),
 324                   tooltip: I18NextService.i18n.t("creator"),
 325                   classes: "text-bg-info",
 326                   shrink: false,
 327                 })}
 328
 329               {isMod_ &&
 330                 getRoleLabelPill({
 331                   label: I18NextService.i18n.t("mod"),
 332                   tooltip: I18NextService.i18n.t("mod"),
 333                   classes: "text-bg-primary",
 334                 })}
 335
 336               {isAdmin_ &&
 337                 getRoleLabelPill({
 338                   label: I18NextService.i18n.t("admin"),
 339                   tooltip: I18NextService.i18n.t("admin"),
 340                   classes: "text-bg-danger",
 341                 })}
 342
 343               {cv.creator.bot_account &&
 344                 getRoleLabelPill({
 345                   label: I18NextService.i18n.t("bot_account").toLowerCase(),
 346                   tooltip: I18NextService.i18n.t("bot_account"),
 347                 })}
 348
 349               {this.props.showCommunity && (
 350                 <>
 351                   <span className="mx-1">{I18NextService.i18n.t("to")}</span>
 352                   <CommunityLink community={cv.community} />
 353                   <span className="mx-2">•</span>
 354                   <Link className="me-2" to={`/post/${cv.post.id}`}>
 355                     {cv.post.name}
 356                   </Link>
 357                 </>
 358               )}
 359
 360               {this.getLinkButton(true)}
 361
 362               {cv.comment.language_id !== 0 && (
 363                 <span className="badge text-bg-light d-none d-sm-inline me-2">
 364                   {
 365                     this.props.allLanguages.find(
 366                       lang => lang.id === cv.comment.language_id
 367                     )?.name
 368                   }
 369                 </span>
 370               )}
 371               {/* This is an expanding spacer for mobile */}
 372               <div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
 373
 374               {showScores() && (
 375                 <>
 376                   <span
 377                     className="me-1 fw-bold"
 378                     aria-label={I18NextService.i18n.t("number_of_points", {
 379                       count: Number(this.commentView.counts.score),
 380                       formattedCount: numToSI(this.commentView.counts.score),
 381                     })}
 382                   >
 383                     {numToSI(this.commentView.counts.score)}
 384                   </span>
 385                   <span className="me-1">•</span>
 386                 </>
 387               )}
 388               <span>
 389                 <MomentTime
 390                   published={cv.comment.published}
 391                   updated={cv.comment.updated}
 392                 />
 393               </span>
 394             </div>
 395             {/* end of user row */}
 396             {this.state.showEdit && (
 397               <CommentForm
 398                 node={node}
 399                 edit
 400                 onReplyCancel={this.handleReplyCancel}
 401                 disabled={this.props.locked}
 402                 finished={this.props.finished.get(
 403                   this.props.node.comment_view.comment.id
 404                 )}
 405                 focus
 406                 allLanguages={this.props.allLanguages}
 407                 siteLanguages={this.props.siteLanguages}
 408                 containerClass="comment-comment-container"
 409                 onUpsertComment={this.props.onEditComment}
 410               />
 411             )}
 412             {!this.state.showEdit && !this.state.collapsed && (
 413               <div>
 414                 {this.state.viewSource ? (
 415                   <pre>{this.commentUnlessRemoved}</pre>
 416                 ) : (
 417                   <div
 418                     className="md-div"
 419                     dangerouslySetInnerHTML={
 420                       this.props.hideImages
 421                         ? mdToHtmlNoImages(this.commentUnlessRemoved)
 422                         : mdToHtml(this.commentUnlessRemoved)
 423                     }
 424                   />
 425                 )}
 426                 <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
 427                   {this.props.showContext && this.getLinkButton()}
 428                   {this.props.markable && (
 429                     <button
 430                       className="btn btn-link btn-animate text-muted"
 431                       onClick={linkEvent(this, this.handleMarkAsRead)}
 432                       data-tippy-content={
 433                         this.commentReplyOrMentionRead
 434                           ? I18NextService.i18n.t("mark_as_unread")
 435                           : I18NextService.i18n.t("mark_as_read")
 436                       }
 437                       aria-label={
 438                         this.commentReplyOrMentionRead
 439                           ? I18NextService.i18n.t("mark_as_unread")
 440                           : I18NextService.i18n.t("mark_as_read")
 441                       }
 442                     >
 443                       {this.state.readLoading ? (
 444                         <Spinner />
 445                       ) : (
 446                         <Icon
 447                           icon="check"
 448                           classes={`icon-inline ${
 449                             this.commentReplyOrMentionRead && "text-success"
 450                           }`}
 451                         />
 452                       )}
 453                     </button>
 454                   )}
 455                   {UserService.Instance.myUserInfo && !this.props.viewOnly && (
 456                     <>
 457                       <VoteButtonsCompact
 458                         voteContentType={VoteContentType.Comment}
 459                         id={this.commentView.comment.id}
 460                         onVote={this.props.onCommentVote}
 461                         enableDownvotes={this.props.enableDownvotes}
 462                         counts={this.commentView.counts}
 463                         my_vote={this.commentView.my_vote}
 464                       />
 465                       <button
 466                         className="btn btn-link btn-animate text-muted"
 467                         onClick={linkEvent(this, this.handleReplyClick)}
 468                         data-tippy-content={I18NextService.i18n.t("reply")}
 469                         aria-label={I18NextService.i18n.t("reply")}
 470                       >
 471                         <Icon icon="reply1" classes="icon-inline" />
 472                       </button>
 473                       {!this.state.showAdvanced ? (
 474                         <button
 475                           className="btn btn-link btn-animate text-muted btn-more"
 476                           onClick={linkEvent(this, this.handleShowAdvanced)}
 477                           data-tippy-content={I18NextService.i18n.t("more")}
 478                           aria-label={I18NextService.i18n.t("more")}
 479                         >
 480                           <Icon icon="more-vertical" classes="icon-inline" />
 481                         </button>
 482                       ) : (
 483                         <>
 484                           {!this.myComment && (
 485                             <>
 486                               <Link
 487                                 className="btn btn-link btn-animate text-muted"
 488                                 to={`/create_private_message/${cv.creator.id}`}
 489                                 title={I18NextService.i18n
 490                                   .t("message")
 491                                   .toLowerCase()}
 492                               >
 493                                 <Icon icon="mail" />
 494                               </Link>
 495                               <button
 496                                 className="btn btn-link btn-animate text-muted"
 497                                 onClick={linkEvent(
 498                                   this,
 499                                   this.handleShowReportDialog
 500                                 )}
 501                                 data-tippy-content={I18NextService.i18n.t(
 502                                   "show_report_dialog"
 503                                 )}
 504                                 aria-label={I18NextService.i18n.t(
 505                                   "show_report_dialog"
 506                                 )}
 507                               >
 508                                 <Icon icon="flag" />
 509                               </button>
 510                               <button
 511                                 className="btn btn-link btn-animate text-muted"
 512                                 onClick={linkEvent(
 513                                   this,
 514                                   this.handleBlockPerson
 515                                 )}
 516                                 data-tippy-content={I18NextService.i18n.t(
 517                                   "block_user"
 518                                 )}
 519                                 aria-label={I18NextService.i18n.t("block_user")}
 520                               >
 521                                 {this.state.blockPersonLoading ? (
 522                                   <Spinner />
 523                                 ) : (
 524                                   <Icon icon="slash" />
 525                                 )}
 526                               </button>
 527                             </>
 528                           )}
 529                           <button
 530                             className="btn btn-link btn-animate text-muted"
 531                             onClick={linkEvent(this, this.handleSaveComment)}
 532                             data-tippy-content={
 533                               cv.saved
 534                                 ? I18NextService.i18n.t("unsave")
 535                                 : I18NextService.i18n.t("save")
 536                             }
 537                             aria-label={
 538                               cv.saved
 539                                 ? I18NextService.i18n.t("unsave")
 540                                 : I18NextService.i18n.t("save")
 541                             }
 542                           >
 543                             {this.state.saveLoading ? (
 544                               <Spinner />
 545                             ) : (
 546                               <Icon
 547                                 icon="star"
 548                                 classes={`icon-inline ${
 549                                   cv.saved && "text-warning"
 550                                 }`}
 551                               />
 552                             )}
 553                           </button>
 554                           <button
 555                             className="btn btn-link btn-animate text-muted"
 556                             onClick={linkEvent(this, this.handleViewSource)}
 557                             data-tippy-content={I18NextService.i18n.t(
 558                               "view_source"
 559                             )}
 560                             aria-label={I18NextService.i18n.t("view_source")}
 561                           >
 562                             <Icon
 563                               icon="file-text"
 564                               classes={`icon-inline ${
 565                                 this.state.viewSource && "text-success"
 566                               }`}
 567                             />
 568                           </button>
 569                           {this.myComment && (
 570                             <>
 571                               <button
 572                                 className="btn btn-link btn-animate text-muted"
 573                                 onClick={linkEvent(this, this.handleEditClick)}
 574                                 data-tippy-content={I18NextService.i18n.t(
 575                                   "edit"
 576                                 )}
 577                                 aria-label={I18NextService.i18n.t("edit")}
 578                               >
 579                                 <Icon icon="edit" classes="icon-inline" />
 580                               </button>
 581                               <button
 582                                 className="btn btn-link btn-animate text-muted"
 583                                 onClick={linkEvent(
 584                                   this,
 585                                   this.handleDeleteComment
 586                                 )}
 587                                 data-tippy-content={
 588                                   !cv.comment.deleted
 589                                     ? I18NextService.i18n.t("delete")
 590                                     : I18NextService.i18n.t("restore")
 591                                 }
 592                                 aria-label={
 593                                   !cv.comment.deleted
 594                                     ? I18NextService.i18n.t("delete")
 595                                     : I18NextService.i18n.t("restore")
 596                                 }
 597                               >
 598                                 {this.state.deleteLoading ? (
 599                                   <Spinner />
 600                                 ) : (
 601                                   <Icon
 602                                     icon="trash"
 603                                     classes={`icon-inline ${
 604                                       cv.comment.deleted && "text-danger"
 605                                     }`}
 606                                   />
 607                                 )}
 608                               </button>
 609
 610                               {(canModOnSelf || canAdminOnSelf) && (
 611                                 <button
 612                                   className="btn btn-link btn-animate text-muted"
 613                                   onClick={linkEvent(
 614                                     this,
 615                                     this.handleDistinguishComment
 616                                   )}
 617                                   data-tippy-content={
 618                                     !cv.comment.distinguished
 619                                       ? I18NextService.i18n.t("distinguish")
 620                                       : I18NextService.i18n.t("undistinguish")
 621                                   }
 622                                   aria-label={
 623                                     !cv.comment.distinguished
 624                                       ? I18NextService.i18n.t("distinguish")
 625                                       : I18NextService.i18n.t("undistinguish")
 626                                   }
 627                                 >
 628                                   <Icon
 629                                     icon="shield"
 630                                     classes={`icon-inline ${
 631                                       cv.comment.distinguished && "text-danger"
 632                                     }`}
 633                                   />
 634                                 </button>
 635                               )}
 636                             </>
 637                           )}
 638                           {/* Admins and mods can remove comments */}
 639                           {(canMod_ || canAdmin_) && (
 640                             <>
 641                               {!cv.comment.removed ? (
 642                                 <button
 643                                   className="btn btn-link btn-animate text-muted"
 644                                   onClick={linkEvent(
 645                                     this,
 646                                     this.handleModRemoveShow
 647                                   )}
 648                                   aria-label={I18NextService.i18n.t("remove")}
 649                                 >
 650                                   {I18NextService.i18n.t("remove")}
 651                                 </button>
 652                               ) : (
 653                                 <button
 654                                   className="btn btn-link btn-animate text-muted"
 655                                   onClick={linkEvent(
 656                                     this,
 657                                     this.handleRemoveComment
 658                                   )}
 659                                   aria-label={I18NextService.i18n.t("restore")}
 660                                 >
 661                                   {this.state.removeLoading ? (
 662                                     <Spinner />
 663                                   ) : (
 664                                     I18NextService.i18n.t("restore")
 665                                   )}
 666                                 </button>
 667                               )}
 668                             </>
 669                           )}
 670                           {/* Mods can ban from community, and appoint as mods to community */}
 671                           {canMod_ && (
 672                             <>
 673                               {!isMod_ &&
 674                                 (!cv.creator_banned_from_community ? (
 675                                   <button
 676                                     className="btn btn-link btn-animate text-muted"
 677                                     onClick={linkEvent(
 678                                       this,
 679                                       this.handleModBanFromCommunityShow
 680                                     )}
 681                                     aria-label={I18NextService.i18n.t(
 682                                       "ban_from_community"
 683                                     )}
 684                                   >
 685                                     {I18NextService.i18n.t(
 686                                       "ban_from_community"
 687                                     )}
 688                                   </button>
 689                                 ) : (
 690                                   <button
 691                                     className="btn btn-link btn-animate text-muted"
 692                                     onClick={linkEvent(
 693                                       this,
 694                                       this.handleBanPersonFromCommunity
 695                                     )}
 696                                     aria-label={I18NextService.i18n.t("unban")}
 697                                   >
 698                                     {this.state.banLoading ? (
 699                                       <Spinner />
 700                                     ) : (
 701                                       I18NextService.i18n.t("unban")
 702                                     )}
 703                                   </button>
 704                                 ))}
 705                               {!cv.creator_banned_from_community &&
 706                                 (!this.state.showConfirmAppointAsMod ? (
 707                                   <button
 708                                     className="btn btn-link btn-animate text-muted"
 709                                     onClick={linkEvent(
 710                                       this,
 711                                       this.handleShowConfirmAppointAsMod
 712                                     )}
 713                                     aria-label={
 714                                       isMod_
 715                                         ? I18NextService.i18n.t("remove_as_mod")
 716                                         : I18NextService.i18n.t(
 717                                             "appoint_as_mod"
 718                                           )
 719                                     }
 720                                   >
 721                                     {isMod_
 722                                       ? I18NextService.i18n.t("remove_as_mod")
 723                                       : I18NextService.i18n.t("appoint_as_mod")}
 724                                   </button>
 725                                 ) : (
 726                                   <>
 727                                     <button
 728                                       className="btn btn-link btn-animate text-muted"
 729                                       aria-label={I18NextService.i18n.t(
 730                                         "are_you_sure"
 731                                       )}
 732                                     >
 733                                       {I18NextService.i18n.t("are_you_sure")}
 734                                     </button>
 735                                     <button
 736                                       className="btn btn-link btn-animate text-muted"
 737                                       onClick={linkEvent(
 738                                         this,
 739                                         this.handleAddModToCommunity
 740                                       )}
 741                                       aria-label={I18NextService.i18n.t("yes")}
 742                                     >
 743                                       {this.state.addModLoading ? (
 744                                         <Spinner />
 745                                       ) : (
 746                                         I18NextService.i18n.t("yes")
 747                                       )}
 748                                     </button>
 749                                     <button
 750                                       className="btn btn-link btn-animate text-muted"
 751                                       onClick={linkEvent(
 752                                         this,
 753                                         this.handleCancelConfirmAppointAsMod
 754                                       )}
 755                                       aria-label={I18NextService.i18n.t("no")}
 756                                     >
 757                                       {I18NextService.i18n.t("no")}
 758                                     </button>
 759                                   </>
 760                                 ))}
 761                             </>
 762                           )}
 763                           {/* Community creators and admins can transfer community to another mod */}
 764                           {(amCommunityCreator_ || canAdmin_) &&
 765                             isMod_ &&
 766                             cv.creator.local &&
 767                             (!this.state.showConfirmTransferCommunity ? (
 768                               <button
 769                                 className="btn btn-link btn-animate text-muted"
 770                                 onClick={linkEvent(
 771                                   this,
 772                                   this.handleShowConfirmTransferCommunity
 773                                 )}
 774                                 aria-label={I18NextService.i18n.t(
 775                                   "transfer_community"
 776                                 )}
 777                               >
 778                                 {I18NextService.i18n.t("transfer_community")}
 779                               </button>
 780                             ) : (
 781                               <>
 782                                 <button
 783                                   className="btn btn-link btn-animate text-muted"
 784                                   aria-label={I18NextService.i18n.t(
 785                                     "are_you_sure"
 786                                   )}
 787                                 >
 788                                   {I18NextService.i18n.t("are_you_sure")}
 789                                 </button>
 790                                 <button
 791                                   className="btn btn-link btn-animate text-muted"
 792                                   onClick={linkEvent(
 793                                     this,
 794                                     this.handleTransferCommunity
 795                                   )}
 796                                   aria-label={I18NextService.i18n.t("yes")}
 797                                 >
 798                                   {this.state.transferCommunityLoading ? (
 799                                     <Spinner />
 800                                   ) : (
 801                                     I18NextService.i18n.t("yes")
 802                                   )}
 803                                 </button>
 804                                 <button
 805                                   className="btn btn-link btn-animate text-muted"
 806                                   onClick={linkEvent(
 807                                     this,
 808                                     this
 809                                       .handleCancelShowConfirmTransferCommunity
 810                                   )}
 811                                   aria-label={I18NextService.i18n.t("no")}
 812                                 >
 813                                   {I18NextService.i18n.t("no")}
 814                                 </button>
 815                               </>
 816                             ))}
 817                           {/* Admins can ban from all, and appoint other admins */}
 818                           {canAdmin_ && (
 819                             <>
 820                               {!isAdmin_ && (
 821                                 <>
 822                                   <button
 823                                     className="btn btn-link btn-animate text-muted"
 824                                     onClick={linkEvent(
 825                                       this,
 826                                       this.handlePurgePersonShow
 827                                     )}
 828                                     aria-label={I18NextService.i18n.t(
 829                                       "purge_user"
 830                                     )}
 831                                   >
 832                                     {I18NextService.i18n.t("purge_user")}
 833                                   </button>
 834                                   <button
 835                                     className="btn btn-link btn-animate text-muted"
 836                                     onClick={linkEvent(
 837                                       this,
 838                                       this.handlePurgeCommentShow
 839                                     )}
 840                                     aria-label={I18NextService.i18n.t(
 841                                       "purge_comment"
 842                                     )}
 843                                   >
 844                                     {I18NextService.i18n.t("purge_comment")}
 845                                   </button>
 846
 847                                   {!isBanned(cv.creator) ? (
 848                                     <button
 849                                       className="btn btn-link btn-animate text-muted"
 850                                       onClick={linkEvent(
 851                                         this,
 852                                         this.handleModBanShow
 853                                       )}
 854                                       aria-label={I18NextService.i18n.t(
 855                                         "ban_from_site"
 856                                       )}
 857                                     >
 858                                       {I18NextService.i18n.t("ban_from_site")}
 859                                     </button>
 860                                   ) : (
 861                                     <button
 862                                       className="btn btn-link btn-animate text-muted"
 863                                       onClick={linkEvent(
 864                                         this,
 865                                         this.handleBanPerson
 866                                       )}
 867                                       aria-label={I18NextService.i18n.t(
 868                                         "unban_from_site"
 869                                       )}
 870                                     >
 871                                       {this.state.banLoading ? (
 872                                         <Spinner />
 873                                       ) : (
 874                                         I18NextService.i18n.t("unban_from_site")
 875                                       )}
 876                                     </button>
 877                                   )}
 878                                 </>
 879                               )}
 880                               {!isBanned(cv.creator) &&
 881                                 cv.creator.local &&
 882                                 (!this.state.showConfirmAppointAsAdmin ? (
 883                                   <button
 884                                     className="btn btn-link btn-animate text-muted"
 885                                     onClick={linkEvent(
 886                                       this,
 887                                       this.handleShowConfirmAppointAsAdmin
 888                                     )}
 889                                     aria-label={
 890                                       isAdmin_
 891                                         ? I18NextService.i18n.t(
 892                                             "remove_as_admin"
 893                                           )
 894                                         : I18NextService.i18n.t(
 895                                             "appoint_as_admin"
 896                                           )
 897                                     }
 898                                   >
 899                                     {isAdmin_
 900                                       ? I18NextService.i18n.t("remove_as_admin")
 901                                       : I18NextService.i18n.t(
 902                                           "appoint_as_admin"
 903                                         )}
 904                                   </button>
 905                                 ) : (
 906                                   <>
 907                                     <button className="btn btn-link btn-animate text-muted">
 908                                       {I18NextService.i18n.t("are_you_sure")}
 909                                     </button>
 910                                     <button
 911                                       className="btn btn-link btn-animate text-muted"
 912                                       onClick={linkEvent(
 913                                         this,
 914                                         this.handleAddAdmin
 915                                       )}
 916                                       aria-label={I18NextService.i18n.t("yes")}
 917                                     >
 918                                       {this.state.addAdminLoading ? (
 919                                         <Spinner />
 920                                       ) : (
 921                                         I18NextService.i18n.t("yes")
 922                                       )}
 923                                     </button>
 924                                     <button
 925                                       className="btn btn-link btn-animate text-muted"
 926                                       onClick={linkEvent(
 927                                         this,
 928                                         this.handleCancelConfirmAppointAsAdmin
 929                                       )}
 930                                       aria-label={I18NextService.i18n.t("no")}
 931                                     >
 932                                       {I18NextService.i18n.t("no")}
 933                                     </button>
 934                                   </>
 935                                 ))}
 936                             </>
 937                           )}
 938                         </>
 939                       )}
 940                     </>
 941                   )}
 942                 </div>
 943                 {/* end of button group */}
 944               </div>
 945             )}
 946           </div>
 947         </article>
 948         {showMoreChildren && (
 949           <div
 950             className={classNames("details ms-1 comment-node py-2", {
 951               "border-top border-light": !this.props.noBorder,
 952             })}
 953             style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
 954           >
 955             <button
 956               className="btn btn-link text-muted"
 957               onClick={linkEvent(this, this.handleFetchChildren)}
 958             >
 959               {this.state.fetchChildrenLoading ? (
 960                 <Spinner />
 961               ) : (
 962                 <>
 963                   {I18NextService.i18n.t("x_more_replies", {
 964                     count: node.comment_view.counts.child_count,
 965                     formattedCount: numToSI(
 966                       node.comment_view.counts.child_count
 967                     ),
 968                   })}{" "}
 969                   ➔
 970                 </>
 971               )}
 972             </button>
 973           </div>
 974         )}
 975         {/* end of details */}
 976         {this.state.showRemoveDialog && (
 977           <form
 978             className="form-inline"
 979             onSubmit={linkEvent(this, this.handleRemoveComment)}
 980           >
 981             <label
 982               className="visually-hidden"
 983               htmlFor={`mod-remove-reason-${cv.comment.id}`}
 984             >
 985               {I18NextService.i18n.t("reason")}
 986             </label>
 987             <input
 988               type="text"
 989               id={`mod-remove-reason-${cv.comment.id}`}
 990               className="form-control me-2"
 991               placeholder={I18NextService.i18n.t("reason")}
 992               value={this.state.removeReason}
 993               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
 994             />
 995             <button
 996               type="submit"
 997               className="btn btn-secondary"
 998               aria-label={I18NextService.i18n.t("remove_comment")}
 999             >
1000               {I18NextService.i18n.t("remove_comment")}
1001             </button>
1002           </form>
1003         )}
1004         {this.state.showReportDialog && (
1005           <form
1006             className="form-inline"
1007             onSubmit={linkEvent(this, this.handleReportComment)}
1008           >
1009             <label
1010               className="visually-hidden"
1011               htmlFor={`report-reason-${cv.comment.id}`}
1012             >
1013               {I18NextService.i18n.t("reason")}
1014             </label>
1015             <input
1016               type="text"
1017               required
1018               id={`report-reason-${cv.comment.id}`}
1019               className="form-control me-2"
1020               placeholder={I18NextService.i18n.t("reason")}
1021               value={this.state.reportReason}
1022               onInput={linkEvent(this, this.handleReportReasonChange)}
1023             />
1024             <button
1025               type="submit"
1026               className="btn btn-secondary"
1027               aria-label={I18NextService.i18n.t("create_report")}
1028             >
1029               {I18NextService.i18n.t("create_report")}
1030             </button>
1031           </form>
1032         )}
1033         {this.state.showBanDialog && (
1034           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
1035             <div className="mb-3 row col-12">
1036               <label
1037                 className="col-form-label"
1038                 htmlFor={`mod-ban-reason-${cv.comment.id}`}
1039               >
1040                 {I18NextService.i18n.t("reason")}
1041               </label>
1042               <input
1043                 type="text"
1044                 id={`mod-ban-reason-${cv.comment.id}`}
1045                 className="form-control me-2"
1046                 placeholder={I18NextService.i18n.t("reason")}
1047                 value={this.state.banReason}
1048                 onInput={linkEvent(this, this.handleModBanReasonChange)}
1049               />
1050               <label
1051                 className="col-form-label"
1052                 htmlFor={`mod-ban-expires-${cv.comment.id}`}
1053               >
1054                 {I18NextService.i18n.t("expires")}
1055               </label>
1056               <input
1057                 type="number"
1058                 id={`mod-ban-expires-${cv.comment.id}`}
1059                 className="form-control me-2"
1060                 placeholder={I18NextService.i18n.t("number_of_days")}
1061                 value={this.state.banExpireDays}
1062                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
1063               />
1064               <div className="input-group mb-3">
1065                 <div className="form-check">
1066                   <input
1067                     className="form-check-input"
1068                     id="mod-ban-remove-data"
1069                     type="checkbox"
1070                     checked={this.state.removeData}
1071                     onChange={linkEvent(this, this.handleModRemoveDataChange)}
1072                   />
1073                   <label
1074                     className="form-check-label"
1075                     htmlFor="mod-ban-remove-data"
1076                     title={I18NextService.i18n.t("remove_content_more")}
1077                   >
1078                     {I18NextService.i18n.t("remove_content")}
1079                   </label>
1080                 </div>
1081               </div>
1082             </div>
1083             {/* TODO hold off on expires until later */}
1084             {/* <div class="mb-3 row"> */}
1085             {/*   <label class="col-form-label">Expires</label> */}
1086             {/*   <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
1087             {/* </div> */}
1088             <div className="mb-3 row">
1089               <button
1090                 type="submit"
1091                 className="btn btn-secondary"
1092                 aria-label={I18NextService.i18n.t("ban")}
1093               >
1094                 {this.state.banLoading ? (
1095                   <Spinner />
1096                 ) : (
1097                   <span>
1098                     {I18NextService.i18n.t("ban")} {cv.creator.name}
1099                   </span>
1100                 )}
1101               </button>
1102             </div>
1103           </form>
1104         )}
1105
1106         {this.state.showPurgeDialog && (
1107           <form onSubmit={linkEvent(this, this.handlePurgeBothSubmit)}>
1108             <PurgeWarning />
1109             <label className="visually-hidden" htmlFor="purge-reason">
1110               {I18NextService.i18n.t("reason")}
1111             </label>
1112             <input
1113               type="text"
1114               id="purge-reason"
1115               className="form-control my-3"
1116               placeholder={I18NextService.i18n.t("reason")}
1117               value={this.state.purgeReason}
1118               onInput={linkEvent(this, this.handlePurgeReasonChange)}
1119             />
1120             <div className="mb-3 row col-12">
1121               {this.state.purgeLoading ? (
1122                 <Spinner />
1123               ) : (
1124                 <button
1125                   type="submit"
1126                   className="btn btn-secondary"
1127                   aria-label={purgeTypeText}
1128                 >
1129                   {purgeTypeText}
1130                 </button>
1131               )}
1132             </div>
1133           </form>
1134         )}
1135         {this.state.showReply && (
1136           <CommentForm
1137             node={node}
1138             onReplyCancel={this.handleReplyCancel}
1139             disabled={this.props.locked}
1140             finished={this.props.finished.get(
1141               this.props.node.comment_view.comment.id
1142             )}
1143             focus
1144             allLanguages={this.props.allLanguages}
1145             siteLanguages={this.props.siteLanguages}
1146             containerClass="comment-comment-container"
1147             onUpsertComment={this.props.onCreateComment}
1148           />
1149         )}
1150         {!this.state.collapsed && node.children.length > 0 && (
1151           <CommentNodes
1152             nodes={node.children}
1153             locked={this.props.locked}
1154             moderators={this.props.moderators}
1155             admins={this.props.admins}
1156             enableDownvotes={this.props.enableDownvotes}
1157             viewType={this.props.viewType}
1158             allLanguages={this.props.allLanguages}
1159             siteLanguages={this.props.siteLanguages}
1160             hideImages={this.props.hideImages}
1161             isChild={!this.props.noIndent}
1162             depth={this.props.node.depth + 1}
1163             finished={this.props.finished}
1164             onCommentReplyRead={this.props.onCommentReplyRead}
1165             onPersonMentionRead={this.props.onPersonMentionRead}
1166             onCreateComment={this.props.onCreateComment}
1167             onEditComment={this.props.onEditComment}
1168             onCommentVote={this.props.onCommentVote}
1169             onBlockPerson={this.props.onBlockPerson}
1170             onSaveComment={this.props.onSaveComment}
1171             onDeleteComment={this.props.onDeleteComment}
1172             onRemoveComment={this.props.onRemoveComment}
1173             onDistinguishComment={this.props.onDistinguishComment}
1174             onAddModToCommunity={this.props.onAddModToCommunity}
1175             onAddAdmin={this.props.onAddAdmin}
1176             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
1177             onBanPerson={this.props.onBanPerson}
1178             onTransferCommunity={this.props.onTransferCommunity}
1179             onFetchChildren={this.props.onFetchChildren}
1180             onCommentReport={this.props.onCommentReport}
1181             onPurgePerson={this.props.onPurgePerson}
1182             onPurgeComment={this.props.onPurgeComment}
1183           />
1184         )}
1185         {/* A collapsed clearfix */}
1186         {this.state.collapsed && <div className="row col-12" />}
1187       </li>
1188     );
1189   }
1190
1191   get commentReplyOrMentionRead(): boolean {
1192     const cv = this.commentView;
1193
1194     if (this.isPersonMentionType(cv)) {
1195       return cv.person_mention.read;
1196     } else if (this.isCommentReplyType(cv)) {
1197       return cv.comment_reply.read;
1198     } else {
1199       return false;
1200     }
1201   }
1202
1203   getLinkButton(small = false) {
1204     const cv = this.commentView;
1205
1206     const classnames = classNames("btn btn-link btn-animate text-muted", {
1207       "btn-sm": small,
1208     });
1209
1210     const title = this.props.showContext
1211       ? I18NextService.i18n.t("show_context")
1212       : I18NextService.i18n.t("link");
1213
1214     // The context button should show the parent comment by default
1215     const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id;
1216
1217     return (
1218       <>
1219         <Link
1220           className={classnames}
1221           to={`/comment/${parentCommentId}`}
1222           title={title}
1223         >
1224           <Icon icon="link" classes="icon-inline" />
1225         </Link>
1226         {
1227           <a className={classnames} title={title} href={cv.comment.ap_id}>
1228             <Icon icon="fedilink" classes="icon-inline" />
1229           </a>
1230         }
1231       </>
1232     );
1233   }
1234
1235   get myComment(): boolean {
1236     return (
1237       UserService.Instance.myUserInfo?.local_user_view.person.id ==
1238       this.commentView.creator.id
1239     );
1240   }
1241
1242   get isPostCreator(): boolean {
1243     return this.commentView.creator.id == this.commentView.post.creator_id;
1244   }
1245
1246   get scoreColor() {
1247     if (this.commentView.my_vote == 1) {
1248       return "text-info";
1249     } else if (this.commentView.my_vote == -1) {
1250       return "text-danger";
1251     } else {
1252       return "text-muted";
1253     }
1254   }
1255
1256   get pointsTippy(): string {
1257     const points = I18NextService.i18n.t("number_of_points", {
1258       count: Number(this.commentView.counts.score),
1259       formattedCount: numToSI(this.commentView.counts.score),
1260     });
1261
1262     const upvotes = I18NextService.i18n.t("number_of_upvotes", {
1263       count: Number(this.commentView.counts.upvotes),
1264       formattedCount: numToSI(this.commentView.counts.upvotes),
1265     });
1266
1267     const downvotes = I18NextService.i18n.t("number_of_downvotes", {
1268       count: Number(this.commentView.counts.downvotes),
1269       formattedCount: numToSI(this.commentView.counts.downvotes),
1270     });
1271
1272     return `${points} • ${upvotes} • ${downvotes}`;
1273   }
1274
1275   get expandText(): string {
1276     return this.state.collapsed
1277       ? I18NextService.i18n.t("expand")
1278       : I18NextService.i18n.t("collapse");
1279   }
1280
1281   get commentUnlessRemoved(): string {
1282     const comment = this.commentView.comment;
1283     return comment.removed
1284       ? `*${I18NextService.i18n.t("removed")}*`
1285       : comment.deleted
1286       ? `*${I18NextService.i18n.t("deleted")}*`
1287       : comment.content;
1288   }
1289
1290   handleReplyClick(i: CommentNode) {
1291     i.setState({ showReply: true });
1292   }
1293
1294   handleEditClick(i: CommentNode) {
1295     i.setState({ showEdit: true });
1296   }
1297
1298   handleReplyCancel() {
1299     this.setState({ showReply: false, showEdit: false });
1300   }
1301
1302   handleShowReportDialog(i: CommentNode) {
1303     i.setState({ showReportDialog: !i.state.showReportDialog });
1304   }
1305
1306   handleReportReasonChange(i: CommentNode, event: any) {
1307     i.setState({ reportReason: event.target.value });
1308   }
1309
1310   handleModRemoveShow(i: CommentNode) {
1311     i.setState({
1312       showRemoveDialog: !i.state.showRemoveDialog,
1313       showBanDialog: false,
1314     });
1315   }
1316
1317   handleModRemoveReasonChange(i: CommentNode, event: any) {
1318     i.setState({ removeReason: event.target.value });
1319   }
1320
1321   handleModRemoveDataChange(i: CommentNode, event: any) {
1322     i.setState({ removeData: event.target.checked });
1323   }
1324
1325   isPersonMentionType(
1326     item: CommentView | PersonMentionView | CommentReplyView
1327   ): item is PersonMentionView {
1328     return (item as PersonMentionView).person_mention?.id !== undefined;
1329   }
1330
1331   isCommentReplyType(
1332     item: CommentView | PersonMentionView | CommentReplyView
1333   ): item is CommentReplyView {
1334     return (item as CommentReplyView).comment_reply?.id !== undefined;
1335   }
1336
1337   handleModBanFromCommunityShow(i: CommentNode) {
1338     i.setState({
1339       showBanDialog: true,
1340       banType: BanType.Community,
1341       showRemoveDialog: false,
1342     });
1343   }
1344
1345   handleModBanShow(i: CommentNode) {
1346     i.setState({
1347       showBanDialog: true,
1348       banType: BanType.Site,
1349       showRemoveDialog: false,
1350     });
1351   }
1352
1353   handleModBanReasonChange(i: CommentNode, event: any) {
1354     i.setState({ banReason: event.target.value });
1355   }
1356
1357   handleModBanExpireDaysChange(i: CommentNode, event: any) {
1358     i.setState({ banExpireDays: event.target.value });
1359   }
1360
1361   handlePurgePersonShow(i: CommentNode) {
1362     i.setState({
1363       showPurgeDialog: true,
1364       purgeType: PurgeType.Person,
1365       showRemoveDialog: false,
1366     });
1367   }
1368
1369   handlePurgeCommentShow(i: CommentNode) {
1370     i.setState({
1371       showPurgeDialog: true,
1372       purgeType: PurgeType.Comment,
1373       showRemoveDialog: false,
1374     });
1375   }
1376
1377   handlePurgeReasonChange(i: CommentNode, event: any) {
1378     i.setState({ purgeReason: event.target.value });
1379   }
1380
1381   handleShowConfirmAppointAsMod(i: CommentNode) {
1382     i.setState({ showConfirmAppointAsMod: true });
1383   }
1384
1385   handleCancelConfirmAppointAsMod(i: CommentNode) {
1386     i.setState({ showConfirmAppointAsMod: false });
1387   }
1388
1389   handleShowConfirmAppointAsAdmin(i: CommentNode) {
1390     i.setState({ showConfirmAppointAsAdmin: true });
1391   }
1392
1393   handleCancelConfirmAppointAsAdmin(i: CommentNode) {
1394     i.setState({ showConfirmAppointAsAdmin: false });
1395   }
1396
1397   handleShowConfirmTransferCommunity(i: CommentNode) {
1398     i.setState({ showConfirmTransferCommunity: true });
1399   }
1400
1401   handleCancelShowConfirmTransferCommunity(i: CommentNode) {
1402     i.setState({ showConfirmTransferCommunity: false });
1403   }
1404
1405   handleShowConfirmTransferSite(i: CommentNode) {
1406     i.setState({ showConfirmTransferSite: true });
1407   }
1408
1409   handleCancelShowConfirmTransferSite(i: CommentNode) {
1410     i.setState({ showConfirmTransferSite: false });
1411   }
1412
1413   get isCommentNew(): boolean {
1414     const now = subMinutes(new Date(), 10);
1415     const then = parseISO(this.commentView.comment.published);
1416     return isBefore(now, then);
1417   }
1418
1419   handleCommentCollapse(i: CommentNode) {
1420     i.setState({ collapsed: !i.state.collapsed });
1421     setupTippy();
1422   }
1423
1424   handleViewSource(i: CommentNode) {
1425     i.setState({ viewSource: !i.state.viewSource });
1426   }
1427
1428   handleShowAdvanced(i: CommentNode) {
1429     i.setState({ showAdvanced: !i.state.showAdvanced });
1430     setupTippy();
1431   }
1432
1433   handleSaveComment(i: CommentNode) {
1434     i.setState({ saveLoading: true });
1435
1436     i.props.onSaveComment({
1437       comment_id: i.commentView.comment.id,
1438       save: !i.commentView.saved,
1439       auth: myAuthRequired(),
1440     });
1441   }
1442
1443   handleBlockPerson(i: CommentNode) {
1444     i.setState({ blockPersonLoading: true });
1445     i.props.onBlockPerson({
1446       person_id: i.commentView.creator.id,
1447       block: true,
1448       auth: myAuthRequired(),
1449     });
1450   }
1451
1452   handleMarkAsRead(i: CommentNode) {
1453     i.setState({ readLoading: true });
1454     const cv = i.commentView;
1455     if (i.isPersonMentionType(cv)) {
1456       i.props.onPersonMentionRead({
1457         person_mention_id: cv.person_mention.id,
1458         read: !cv.person_mention.read,
1459         auth: myAuthRequired(),
1460       });
1461     } else if (i.isCommentReplyType(cv)) {
1462       i.props.onCommentReplyRead({
1463         comment_reply_id: cv.comment_reply.id,
1464         read: !cv.comment_reply.read,
1465         auth: myAuthRequired(),
1466       });
1467     }
1468   }
1469
1470   handleDeleteComment(i: CommentNode) {
1471     i.setState({ deleteLoading: true });
1472     i.props.onDeleteComment({
1473       comment_id: i.commentId,
1474       deleted: !i.commentView.comment.deleted,
1475       auth: myAuthRequired(),
1476     });
1477   }
1478
1479   handleRemoveComment(i: CommentNode, event: any) {
1480     event.preventDefault();
1481     i.setState({ removeLoading: true });
1482     i.props.onRemoveComment({
1483       comment_id: i.commentId,
1484       removed: !i.commentView.comment.removed,
1485       auth: myAuthRequired(),
1486     });
1487   }
1488
1489   handleDistinguishComment(i: CommentNode) {
1490     i.setState({ distinguishLoading: true });
1491     i.props.onDistinguishComment({
1492       comment_id: i.commentId,
1493       distinguished: !i.commentView.comment.distinguished,
1494       auth: myAuthRequired(),
1495     });
1496   }
1497
1498   handleBanPersonFromCommunity(i: CommentNode) {
1499     i.setState({ banLoading: true });
1500     i.props.onBanPersonFromCommunity({
1501       community_id: i.commentView.community.id,
1502       person_id: i.commentView.creator.id,
1503       ban: !i.commentView.creator_banned_from_community,
1504       reason: i.state.banReason,
1505       remove_data: i.state.removeData,
1506       expires: futureDaysToUnixTime(i.state.banExpireDays),
1507       auth: myAuthRequired(),
1508     });
1509   }
1510
1511   handleBanPerson(i: CommentNode) {
1512     i.setState({ banLoading: true });
1513     i.props.onBanPerson({
1514       person_id: i.commentView.creator.id,
1515       ban: !i.commentView.creator_banned_from_community,
1516       reason: i.state.banReason,
1517       remove_data: i.state.removeData,
1518       expires: futureDaysToUnixTime(i.state.banExpireDays),
1519       auth: myAuthRequired(),
1520     });
1521   }
1522
1523   handleModBanBothSubmit(i: CommentNode, event: any) {
1524     event.preventDefault();
1525     if (i.state.banType == BanType.Community) {
1526       i.handleBanPersonFromCommunity(i);
1527     } else {
1528       i.handleBanPerson(i);
1529     }
1530   }
1531
1532   handleAddModToCommunity(i: CommentNode) {
1533     i.setState({ addModLoading: true });
1534
1535     const added = !isMod(i.commentView.comment.creator_id, i.props.moderators);
1536     i.props.onAddModToCommunity({
1537       community_id: i.commentView.community.id,
1538       person_id: i.commentView.creator.id,
1539       added,
1540       auth: myAuthRequired(),
1541     });
1542   }
1543
1544   handleAddAdmin(i: CommentNode) {
1545     i.setState({ addAdminLoading: true });
1546
1547     const added = !isAdmin(i.commentView.comment.creator_id, i.props.admins);
1548     i.props.onAddAdmin({
1549       person_id: i.commentView.creator.id,
1550       added,
1551       auth: myAuthRequired(),
1552     });
1553   }
1554
1555   handleTransferCommunity(i: CommentNode) {
1556     i.setState({ transferCommunityLoading: true });
1557     i.props.onTransferCommunity({
1558       community_id: i.commentView.community.id,
1559       person_id: i.commentView.creator.id,
1560       auth: myAuthRequired(),
1561     });
1562   }
1563
1564   handleReportComment(i: CommentNode, event: any) {
1565     event.preventDefault();
1566     i.setState({ reportLoading: true });
1567     i.props.onCommentReport({
1568       comment_id: i.commentId,
1569       reason: i.state.reportReason ?? "",
1570       auth: myAuthRequired(),
1571     });
1572   }
1573
1574   handlePurgeBothSubmit(i: CommentNode, event: any) {
1575     event.preventDefault();
1576     i.setState({ purgeLoading: true });
1577
1578     if (i.state.purgeType == PurgeType.Person) {
1579       i.props.onPurgePerson({
1580         person_id: i.commentView.creator.id,
1581         reason: i.state.purgeReason,
1582         auth: myAuthRequired(),
1583       });
1584     } else {
1585       i.props.onPurgeComment({
1586         comment_id: i.commentId,
1587         reason: i.state.purgeReason,
1588         auth: myAuthRequired(),
1589       });
1590     }
1591   }
1592
1593   handleFetchChildren(i: CommentNode) {
1594     i.setState({ fetchChildrenLoading: true });
1595     i.props.onFetchChildren?.({
1596       parent_id: i.commentId,
1597       max_depth: commentTreeMaxDepth,
1598       limit: 999, // TODO
1599       type_: "All",
1600       saved_only: false,
1601       auth: myAuth(),
1602     });
1603   }
1604 }