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