ui/src/components/comment-node.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import {
   4   CommentNode as CommentNodeI,
   5   CommentLikeForm,
   6   DeleteCommentForm,
   7   RemoveCommentForm,
   8   MarkCommentAsReadForm,
   9   MarkUserMentionAsReadForm,
  10   SaveCommentForm,
  11   BanFromCommunityForm,
  12   BanUserForm,
  13   CommunityUser,
  14   UserView,
  15   AddModToCommunityForm,
  16   AddAdminForm,
  17   TransferCommunityForm,
  18   TransferSiteForm,
  19   BanType,
  20   CommentSortType,
  21   SortType,
  22 } from '../interfaces';
  23 import { WebSocketService, UserService } from '../services';
  24 import {
  25   mdToHtml,
  26   getUnixTime,
  27   canMod,
  28   isMod,
  29   setupTippy,
  30   colorList,
  31 } from '../utils';
  32 import moment from 'moment';
  33 import { MomentTime } from './moment-time';
  34 import { CommentForm } from './comment-form';
  35 import { CommentNodes } from './comment-nodes';
  36 import { UserListing } from './user-listing';
  37 import { CommunityLink } from './community-link';
  38 import { i18n } from '../i18next';
  39
  40 interface CommentNodeState {
  41   showReply: boolean;
  42   showEdit: boolean;
  43   showRemoveDialog: boolean;
  44   removeReason: string;
  45   showBanDialog: boolean;
  46   banReason: string;
  47   banExpires: string;
  48   banType: BanType;
  49   showConfirmTransferSite: boolean;
  50   showConfirmTransferCommunity: boolean;
  51   showConfirmAppointAsMod: boolean;
  52   showConfirmAppointAsAdmin: boolean;
  53   collapsed: boolean;
  54   viewSource: boolean;
  55   showAdvanced: boolean;
  56   my_vote: number;
  57   score: number;
  58   upvotes: number;
  59   downvotes: number;
  60   borderColor: string;
  61   readLoading: boolean;
  62   saveLoading: boolean;
  63 }
  64
  65 interface CommentNodeProps {
  66   node: CommentNodeI;
  67   noBorder?: boolean;
  68   noIndent?: boolean;
  69   viewOnly?: boolean;
  70   locked?: boolean;
  71   markable?: boolean;
  72   showContext?: boolean;
  73   moderators: Array<CommunityUser>;
  74   admins: Array<UserView>;
  75   // TODO is this necessary, can't I get it from the node itself?
  76   postCreatorId?: number;
  77   showCommunity?: boolean;
  78   sort?: CommentSortType;
  79   sortType?: SortType;
  80   enableDownvotes: boolean;
  81 }
  82
  83 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
  84   private emptyState: CommentNodeState = {
  85     showReply: false,
  86     showEdit: false,
  87     showRemoveDialog: false,
  88     removeReason: null,
  89     showBanDialog: false,
  90     banReason: null,
  91     banExpires: null,
  92     banType: BanType.Community,
  93     collapsed: false,
  94     viewSource: false,
  95     showAdvanced: false,
  96     showConfirmTransferSite: false,
  97     showConfirmTransferCommunity: false,
  98     showConfirmAppointAsMod: false,
  99     showConfirmAppointAsAdmin: false,
 100     my_vote: this.props.node.comment.my_vote,
 101     score: this.props.node.comment.score,
 102     upvotes: this.props.node.comment.upvotes,
 103     downvotes: this.props.node.comment.downvotes,
 104     borderColor: this.props.node.comment.depth
 105       ? colorList[this.props.node.comment.depth % colorList.length]
 106       : colorList[0],
 107     readLoading: false,
 108     saveLoading: false,
 109   };
 110
 111   constructor(props: any, context: any) {
 112     super(props, context);
 113
 114     this.state = this.emptyState;
 115     this.handleReplyCancel = this.handleReplyCancel.bind(this);
 116     this.handleCommentUpvote = this.handleCommentUpvote.bind(this);
 117     this.handleCommentDownvote = this.handleCommentDownvote.bind(this);
 118   }
 119
 120   componentWillReceiveProps(nextProps: CommentNodeProps) {
 121     this.state.my_vote = nextProps.node.comment.my_vote;
 122     this.state.upvotes = nextProps.node.comment.upvotes;
 123     this.state.downvotes = nextProps.node.comment.downvotes;
 124     this.state.score = nextProps.node.comment.score;
 125     this.state.readLoading = false;
 126     this.state.saveLoading = false;
 127     this.setState(this.state);
 128   }
 129
 130   render() {
 131     let node = this.props.node;
 132     return (
 133       <div
 134         className={`comment ${
 135           node.comment.parent_id && !this.props.noIndent ? 'ml-1' : ''
 136         }`}
 137       >
 138         <div
 139           id={`comment-${node.comment.id}`}
 140           className={`details comment-node py-2 ${
 141             !this.props.noBorder ? 'border-top border-light' : ''
 142           } ${this.isCommentNew ? 'mark' : ''}`}
 143           style={
 144             !this.props.noIndent &&
 145             this.props.node.comment.parent_id &&
 146             `border-left: 2px ${this.state.borderColor} solid !important`
 147           }
 148         >
 149           <div
 150             class={`${
 151               !this.props.noIndent &&
 152               this.props.node.comment.parent_id &&
 153               'ml-2'
 154             }`}
 155           >
 156             <div class="d-flex flex-wrap align-items-center text-muted small">
 157               <span class="mr-2">
 158                 <UserListing
 159                   user={{
 160                     name: node.comment.creator_name,
 161                     preferred_username: node.comment.creator_preferred_username,
 162                     avatar: node.comment.creator_avatar,
 163                     id: node.comment.creator_id,
 164                     local: node.comment.creator_local,
 165                     actor_id: node.comment.creator_actor_id,
 166                     published: node.comment.creator_published,
 167                   }}
 168                 />
 169               </span>
 170
 171               {this.isMod && (
 172                 <div className="badge badge-light d-none d-sm-inline mr-2">
 173                   {i18n.t('mod')}
 174                 </div>
 175               )}
 176               {this.isAdmin && (
 177                 <div className="badge badge-light d-none d-sm-inline mr-2">
 178                   {i18n.t('admin')}
 179                 </div>
 180               )}
 181               {this.isPostCreator && (
 182                 <div className="badge badge-light d-none d-sm-inline mr-2">
 183                   {i18n.t('creator')}
 184                 </div>
 185               )}
 186               {(node.comment.banned_from_community || node.comment.banned) && (
 187                 <div className="badge badge-danger mr-2">
 188                   {i18n.t('banned')}
 189                 </div>
 190               )}
 191               {this.props.showCommunity && (
 192                 <>
 193                   <span class="mx-1">{i18n.t('to')}</span>
 194                   <CommunityLink
 195                     community={{
 196                       name: node.comment.community_name,
 197                       id: node.comment.community_id,
 198                       local: node.comment.community_local,
 199                       actor_id: node.comment.community_actor_id,
 200                       icon: node.comment.community_icon,
 201                     }}
 202                   />
 203                   <span class="mx-2">•</span>
 204                   <Link class="mr-2" to={`/post/${node.comment.post_id}`}>
 205                     {node.comment.post_name}
 206                   </Link>
 207                 </>
 208               )}
 209               <button
 210                 class="btn text-muted"
 211                 onClick={linkEvent(this, this.handleCommentCollapse)}
 212               >
 213                 {this.state.collapsed ? (
 214                   <svg class="icon icon-inline">
 215                     <use xlinkHref="#icon-plus-square"></use>
 216                   </svg>
 217                 ) : (
 218                   <svg class="icon icon-inline">
 219                     <use xlinkHref="#icon-minus-square"></use>
 220                   </svg>
 221                 )}
 222               </button>
 223               {/* This is an expanding spacer for mobile */}
 224               <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
 225               <button
 226                 className={`btn p-0 unselectable pointer ${this.scoreColor}`}
 227                 onClick={linkEvent(node, this.handleCommentUpvote)}
 228                 data-tippy-content={this.pointsTippy}
 229               >
 230                 <svg class="icon icon-inline mr-1">
 231                   <use xlinkHref="#icon-zap"></use>
 232                 </svg>
 233                 <span class="mr-1">{this.state.score}</span>
 234               </button>
 235               <span className="mr-1">•</span>
 236               <span>
 237                 <MomentTime data={node.comment} />
 238               </span>
 239             </div>
 240             {/* end of user row */}
 241             {this.state.showEdit && (
 242               <CommentForm
 243                 node={node}
 244                 edit
 245                 onReplyCancel={this.handleReplyCancel}
 246                 disabled={this.props.locked}
 247                 focus
 248               />
 249             )}
 250             {!this.state.showEdit && !this.state.collapsed && (
 251               <div>
 252                 {this.state.viewSource ? (
 253                   <pre>{this.commentUnlessRemoved}</pre>
 254                 ) : (
 255                   <div
 256                     className="md-div"
 257                     dangerouslySetInnerHTML={mdToHtml(
 258                       this.commentUnlessRemoved
 259                     )}
 260                   />
 261                 )}
 262                 <div class="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
 263                   {this.props.showContext && this.linkBtn}
 264                   {this.props.markable && (
 265                     <button
 266                       class="btn btn-link btn-animate text-muted"
 267                       onClick={linkEvent(this, this.handleMarkRead)}
 268                       data-tippy-content={
 269                         node.comment.read
 270                           ? i18n.t('mark_as_unread')
 271                           : i18n.t('mark_as_read')
 272                       }
 273                     >
 274                       {this.state.readLoading ? (
 275                         this.loadingIcon
 276                       ) : (
 277                         <svg
 278                           class={`icon icon-inline ${
 279                             node.comment.read && 'text-success'
 280                           }`}
 281                         >
 282                           <use xlinkHref="#icon-check"></use>
 283                         </svg>
 284                       )}
 285                     </button>
 286                   )}
 287                   {UserService.Instance.user && !this.props.viewOnly && (
 288                     <>
 289                       <button
 290                         className={`btn btn-link btn-animate ${
 291                           this.state.my_vote == 1 ? 'text-info' : 'text-muted'
 292                         }`}
 293                         onClick={linkEvent(node, this.handleCommentUpvote)}
 294                         data-tippy-content={i18n.t('upvote')}
 295                       >
 296                         <svg class="icon icon-inline">
 297                           <use xlinkHref="#icon-arrow-up"></use>
 298                         </svg>
 299                         {this.state.upvotes !== this.state.score && (
 300                           <span class="ml-1">{this.state.upvotes}</span>
 301                         )}
 302                       </button>
 303                       {this.props.enableDownvotes && (
 304                         <button
 305                           className={`btn btn-link btn-animate ${
 306                             this.state.my_vote == -1
 307                               ? 'text-danger'
 308                               : 'text-muted'
 309                           }`}
 310                           onClick={linkEvent(node, this.handleCommentDownvote)}
 311                           data-tippy-content={i18n.t('downvote')}
 312                         >
 313                           <svg class="icon icon-inline">
 314                             <use xlinkHref="#icon-arrow-down"></use>
 315                           </svg>
 316                           {this.state.upvotes !== this.state.score && (
 317                             <span class="ml-1">{this.state.downvotes}</span>
 318                           )}
 319                         </button>
 320                       )}
 321                       <button
 322                         class="btn btn-link btn-animate text-muted"
 323                         onClick={linkEvent(this, this.handleReplyClick)}
 324                         data-tippy-content={i18n.t('reply')}
 325                       >
 326                         <svg class="icon icon-inline">
 327                           <use xlinkHref="#icon-reply1"></use>
 328                         </svg>
 329                       </button>
 330                       {!this.state.showAdvanced ? (
 331                         <button
 332                           className="btn btn-link btn-animate text-muted"
 333                           onClick={linkEvent(this, this.handleShowAdvanced)}
 334                           data-tippy-content={i18n.t('more')}
 335                         >
 336                           <svg class="icon icon-inline">
 337                             <use xlinkHref="#icon-more-vertical"></use>
 338                           </svg>
 339                         </button>
 340                       ) : (
 341                         <>
 342                           {!this.myComment && (
 343                             <button class="btn btn-link btn-animate">
 344                               <Link
 345                                 class="text-muted"
 346                                 to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
 347                                 title={i18n.t('message').toLowerCase()}
 348                               >
 349                                 <svg class="icon">
 350                                   <use xlinkHref="#icon-mail"></use>
 351                                 </svg>
 352                               </Link>
 353                             </button>
 354                           )}
 355                           {!this.props.showContext && this.linkBtn}
 356                           <button
 357                             class="btn btn-link btn-animate text-muted"
 358                             onClick={linkEvent(
 359                               this,
 360                               this.handleSaveCommentClick
 361                             )}
 362                             data-tippy-content={
 363                               node.comment.saved
 364                                 ? i18n.t('unsave')
 365                                 : i18n.t('save')
 366                             }
 367                           >
 368                             {this.state.saveLoading ? (
 369                               this.loadingIcon
 370                             ) : (
 371                               <svg
 372                                 class={`icon icon-inline ${
 373                                   node.comment.saved && 'text-warning'
 374                                 }`}
 375                               >
 376                                 <use xlinkHref="#icon-star"></use>
 377                               </svg>
 378                             )}
 379                           </button>
 380                           <button
 381                             className="btn btn-link btn-animate text-muted"
 382                             onClick={linkEvent(this, this.handleViewSource)}
 383                             data-tippy-content={i18n.t('view_source')}
 384                           >
 385                             <svg
 386                               class={`icon icon-inline ${
 387                                 this.state.viewSource && 'text-success'
 388                               }`}
 389                             >
 390                               <use xlinkHref="#icon-file-text"></use>
 391                             </svg>
 392                           </button>
 393                           {this.myComment && (
 394                             <>
 395                               <button
 396                                 class="btn btn-link btn-animate text-muted"
 397                                 onClick={linkEvent(this, this.handleEditClick)}
 398                                 data-tippy-content={i18n.t('edit')}
 399                               >
 400                                 <svg class="icon icon-inline">
 401                                   <use xlinkHref="#icon-edit"></use>
 402                                 </svg>
 403                               </button>
 404                               <button
 405                                 class="btn btn-link btn-animate text-muted"
 406                                 onClick={linkEvent(
 407                                   this,
 408                                   this.handleDeleteClick
 409                                 )}
 410                                 data-tippy-content={
 411                                   !node.comment.deleted
 412                                     ? i18n.t('delete')
 413                                     : i18n.t('restore')
 414                                 }
 415                               >
 416                                 <svg
 417                                   class={`icon icon-inline ${
 418                                     node.comment.deleted && 'text-danger'
 419                                   }`}
 420                                 >
 421                                   <use xlinkHref="#icon-trash"></use>
 422                                 </svg>
 423                               </button>
 424                             </>
 425                           )}
 426                           {/* Admins and mods can remove comments */}
 427                           {(this.canMod || this.canAdmin) && (
 428                             <>
 429                               {!node.comment.removed ? (
 430                                 <button
 431                                   class="btn btn-link btn-animate text-muted"
 432                                   onClick={linkEvent(
 433                                     this,
 434                                     this.handleModRemoveShow
 435                                   )}
 436                                 >
 437                                   {i18n.t('remove')}
 438                                 </button>
 439                               ) : (
 440                                 <button
 441                                   class="btn btn-link btn-animate text-muted"
 442                                   onClick={linkEvent(
 443                                     this,
 444                                     this.handleModRemoveSubmit
 445                                   )}
 446                                 >
 447                                   {i18n.t('restore')}
 448                                 </button>
 449                               )}
 450                             </>
 451                           )}
 452                           {/* Mods can ban from community, and appoint as mods to community */}
 453                           {this.canMod && (
 454                             <>
 455                               {!this.isMod &&
 456                                 (!node.comment.banned_from_community ? (
 457                                   <button
 458                                     class="btn btn-link btn-animate text-muted"
 459                                     onClick={linkEvent(
 460                                       this,
 461                                       this.handleModBanFromCommunityShow
 462                                     )}
 463                                   >
 464                                     {i18n.t('ban')}
 465                                   </button>
 466                                 ) : (
 467                                   <button
 468                                     class="btn btn-link btn-animate text-muted"
 469                                     onClick={linkEvent(
 470                                       this,
 471                                       this.handleModBanFromCommunitySubmit
 472                                     )}
 473                                   >
 474                                     {i18n.t('unban')}
 475                                   </button>
 476                                 ))}
 477                               {!node.comment.banned_from_community &&
 478                                 (!this.state.showConfirmAppointAsMod ? (
 479                                   <button
 480                                     class="btn btn-link btn-animate text-muted"
 481                                     onClick={linkEvent(
 482                                       this,
 483                                       this.handleShowConfirmAppointAsMod
 484                                     )}
 485                                   >
 486                                     {this.isMod
 487                                       ? i18n.t('remove_as_mod')
 488                                       : i18n.t('appoint_as_mod')}
 489                                   </button>
 490                                 ) : (
 491                                   <>
 492                                     <button class="btn btn-link btn-animate text-muted">
 493                                       {i18n.t('are_you_sure')}
 494                                     </button>
 495                                     <button
 496                                       class="btn btn-link btn-animate text-muted"
 497                                       onClick={linkEvent(
 498                                         this,
 499                                         this.handleAddModToCommunity
 500                                       )}
 501                                     >
 502                                       {i18n.t('yes')}
 503                                     </button>
 504                                     <button
 505                                       class="btn btn-link btn-animate text-muted"
 506                                       onClick={linkEvent(
 507                                         this,
 508                                         this.handleCancelConfirmAppointAsMod
 509                                       )}
 510                                     >
 511                                       {i18n.t('no')}
 512                                     </button>
 513                                   </>
 514                                 ))}
 515                             </>
 516                           )}
 517                           {/* Community creators and admins can transfer community to another mod */}
 518                           {(this.amCommunityCreator || this.canAdmin) &&
 519                             this.isMod &&
 520                             (!this.state.showConfirmTransferCommunity ? (
 521                               <button
 522                                 class="btn btn-link btn-animate text-muted"
 523                                 onClick={linkEvent(
 524                                   this,
 525                                   this.handleShowConfirmTransferCommunity
 526                                 )}
 527                               >
 528                                 {i18n.t('transfer_community')}
 529                               </button>
 530                             ) : (
 531                               <>
 532                                 <button class="btn btn-link btn-animate text-muted">
 533                                   {i18n.t('are_you_sure')}
 534                                 </button>
 535                                 <button
 536                                   class="btn btn-link btn-animate text-muted"
 537                                   onClick={linkEvent(
 538                                     this,
 539                                     this.handleTransferCommunity
 540                                   )}
 541                                 >
 542                                   {i18n.t('yes')}
 543                                 </button>
 544                                 <button
 545                                   class="btn btn-link btn-animate text-muted"
 546                                   onClick={linkEvent(
 547                                     this,
 548                                     this
 549                                       .handleCancelShowConfirmTransferCommunity
 550                                   )}
 551                                 >
 552                                   {i18n.t('no')}
 553                                 </button>
 554                               </>
 555                             ))}
 556                           {/* Admins can ban from all, and appoint other admins */}
 557                           {this.canAdmin && (
 558                             <>
 559                               {!this.isAdmin &&
 560                                 (!node.comment.banned ? (
 561                                   <button
 562                                     class="btn btn-link btn-animate text-muted"
 563                                     onClick={linkEvent(
 564                                       this,
 565                                       this.handleModBanShow
 566                                     )}
 567                                   >
 568                                     {i18n.t('ban_from_site')}
 569                                   </button>
 570                                 ) : (
 571                                   <button
 572                                     class="btn btn-link btn-animate text-muted"
 573                                     onClick={linkEvent(
 574                                       this,
 575                                       this.handleModBanSubmit
 576                                     )}
 577                                   >
 578                                     {i18n.t('unban_from_site')}
 579                                   </button>
 580                                 ))}
 581                               {!node.comment.banned &&
 582                                 (!this.state.showConfirmAppointAsAdmin ? (
 583                                   <button
 584                                     class="btn btn-link btn-animate text-muted"
 585                                     onClick={linkEvent(
 586                                       this,
 587                                       this.handleShowConfirmAppointAsAdmin
 588                                     )}
 589                                   >
 590                                     {this.isAdmin
 591                                       ? i18n.t('remove_as_admin')
 592                                       : i18n.t('appoint_as_admin')}
 593                                   </button>
 594                                 ) : (
 595                                   <>
 596                                     <button class="btn btn-link btn-animate text-muted">
 597                                       {i18n.t('are_you_sure')}
 598                                     </button>
 599                                     <button
 600                                       class="btn btn-link btn-animate text-muted"
 601                                       onClick={linkEvent(
 602                                         this,
 603                                         this.handleAddAdmin
 604                                       )}
 605                                     >
 606                                       {i18n.t('yes')}
 607                                     </button>
 608                                     <button
 609                                       class="btn btn-link btn-animate text-muted"
 610                                       onClick={linkEvent(
 611                                         this,
 612                                         this.handleCancelConfirmAppointAsAdmin
 613                                       )}
 614                                     >
 615                                       {i18n.t('no')}
 616                                     </button>
 617                                   </>
 618                                 ))}
 619                             </>
 620                           )}
 621                           {/* Site Creator can transfer to another admin */}
 622                           {this.amSiteCreator &&
 623                             this.isAdmin &&
 624                             (!this.state.showConfirmTransferSite ? (
 625                               <button
 626                                 class="btn btn-link btn-animate text-muted"
 627                                 onClick={linkEvent(
 628                                   this,
 629                                   this.handleShowConfirmTransferSite
 630                                 )}
 631                               >
 632                                 {i18n.t('transfer_site')}
 633                               </button>
 634                             ) : (
 635                               <>
 636                                 <button class="btn btn-link btn-animate text-muted">
 637                                   {i18n.t('are_you_sure')}
 638                                 </button>
 639                                 <button
 640                                   class="btn btn-link btn-animate text-muted"
 641                                   onClick={linkEvent(
 642                                     this,
 643                                     this.handleTransferSite
 644                                   )}
 645                                 >
 646                                   {i18n.t('yes')}
 647                                 </button>
 648                                 <button
 649                                   class="btn btn-link btn-animate text-muted"
 650                                   onClick={linkEvent(
 651                                     this,
 652                                     this.handleCancelShowConfirmTransferSite
 653                                   )}
 654                                 >
 655                                   {i18n.t('no')}
 656                                 </button>
 657                               </>
 658                             ))}
 659                         </>
 660                       )}
 661                     </>
 662                   )}
 663                 </div>
 664                 {/* end of button group */}
 665               </div>
 666             )}
 667           </div>
 668         </div>
 669         {/* end of details */}
 670         {this.state.showRemoveDialog && (
 671           <form
 672             class="form-inline"
 673             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
 674           >
 675             <input
 676               type="text"
 677               class="form-control mr-2"
 678               placeholder={i18n.t('reason')}
 679               value={this.state.removeReason}
 680               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
 681             />
 682             <button type="submit" class="btn btn-secondary">
 683               {i18n.t('remove_comment')}
 684             </button>
 685           </form>
 686         )}
 687         {this.state.showBanDialog && (
 688           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
 689             <div class="form-group row">
 690               <label class="col-form-label">{i18n.t('reason')}</label>
 691               <input
 692                 type="text"
 693                 class="form-control mr-2"
 694                 placeholder={i18n.t('reason')}
 695                 value={this.state.banReason}
 696                 onInput={linkEvent(this, this.handleModBanReasonChange)}
 697               />
 698             </div>
 699             {/* TODO hold off on expires until later */}
 700             {/* <div class="form-group row"> */}
 701             {/*   <label class="col-form-label">Expires</label> */}
 702             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
 703             {/* </div> */}
 704             <div class="form-group row">
 705               <button type="submit" class="btn btn-secondary">
 706                 {i18n.t('ban')} {node.comment.creator_name}
 707               </button>
 708             </div>
 709           </form>
 710         )}
 711         {this.state.showReply && (
 712           <CommentForm
 713             node={node}
 714             onReplyCancel={this.handleReplyCancel}
 715             disabled={this.props.locked}
 716             focus
 717           />
 718         )}
 719         {node.children && !this.state.collapsed && (
 720           <CommentNodes
 721             nodes={node.children}
 722             locked={this.props.locked}
 723             moderators={this.props.moderators}
 724             admins={this.props.admins}
 725             postCreatorId={this.props.postCreatorId}
 726             sort={this.props.sort}
 727             sortType={this.props.sortType}
 728             enableDownvotes={this.props.enableDownvotes}
 729           />
 730         )}
 731         {/* A collapsed clearfix */}
 732         {this.state.collapsed && <div class="row col-12"></div>}
 733       </div>
 734     );
 735   }
 736
 737   get linkBtn() {
 738     let node = this.props.node;
 739     return (
 740       <Link
 741         class="btn btn-link btn-animate text-muted"
 742         to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
 743         title={this.props.showContext ? i18n.t('show_context') : i18n.t('link')}
 744       >
 745         <svg class="icon icon-inline">
 746           <use xlinkHref="#icon-link"></use>
 747         </svg>
 748       </Link>
 749     );
 750   }
 751
 752   get loadingIcon() {
 753     return (
 754       <svg class="icon icon-spinner spin">
 755         <use xlinkHref="#icon-spinner"></use>
 756       </svg>
 757     );
 758   }
 759
 760   get myComment(): boolean {
 761     return (
 762       UserService.Instance.user &&
 763       this.props.node.comment.creator_id == UserService.Instance.user.id
 764     );
 765   }
 766
 767   get isMod(): boolean {
 768     return (
 769       this.props.moderators &&
 770       isMod(
 771         this.props.moderators.map(m => m.user_id),
 772         this.props.node.comment.creator_id
 773       )
 774     );
 775   }
 776
 777   get isAdmin(): boolean {
 778     return (
 779       this.props.admins &&
 780       isMod(
 781         this.props.admins.map(a => a.id),
 782         this.props.node.comment.creator_id
 783       )
 784     );
 785   }
 786
 787   get isPostCreator(): boolean {
 788     return this.props.node.comment.creator_id == this.props.postCreatorId;
 789   }
 790
 791   get canMod(): boolean {
 792     if (this.props.admins && this.props.moderators) {
 793       let adminsThenMods = this.props.admins
 794         .map(a => a.id)
 795         .concat(this.props.moderators.map(m => m.user_id));
 796
 797       return canMod(
 798         UserService.Instance.user,
 799         adminsThenMods,
 800         this.props.node.comment.creator_id
 801       );
 802     } else {
 803       return false;
 804     }
 805   }
 806
 807   get canAdmin(): boolean {
 808     return (
 809       this.props.admins &&
 810       canMod(
 811         UserService.Instance.user,
 812         this.props.admins.map(a => a.id),
 813         this.props.node.comment.creator_id
 814       )
 815     );
 816   }
 817
 818   get amCommunityCreator(): boolean {
 819     return (
 820       this.props.moderators &&
 821       UserService.Instance.user &&
 822       this.props.node.comment.creator_id != UserService.Instance.user.id &&
 823       UserService.Instance.user.id == this.props.moderators[0].user_id
 824     );
 825   }
 826
 827   get amSiteCreator(): boolean {
 828     return (
 829       this.props.admins &&
 830       UserService.Instance.user &&
 831       this.props.node.comment.creator_id != UserService.Instance.user.id &&
 832       UserService.Instance.user.id == this.props.admins[0].id
 833     );
 834   }
 835
 836   get commentUnlessRemoved(): string {
 837     let node = this.props.node;
 838     return node.comment.removed
 839       ? `*${i18n.t('removed')}*`
 840       : node.comment.deleted
 841       ? `*${i18n.t('deleted')}*`
 842       : node.comment.content;
 843   }
 844
 845   handleReplyClick(i: CommentNode) {
 846     i.state.showReply = true;
 847     i.setState(i.state);
 848   }
 849
 850   handleEditClick(i: CommentNode) {
 851     i.state.showEdit = true;
 852     i.setState(i.state);
 853   }
 854
 855   handleDeleteClick(i: CommentNode) {
 856     let deleteForm: DeleteCommentForm = {
 857       edit_id: i.props.node.comment.id,
 858       deleted: !i.props.node.comment.deleted,
 859       auth: null,
 860     };
 861     WebSocketService.Instance.deleteComment(deleteForm);
 862   }
 863
 864   handleSaveCommentClick(i: CommentNode) {
 865     let saved =
 866       i.props.node.comment.saved == undefined
 867         ? true
 868         : !i.props.node.comment.saved;
 869     let form: SaveCommentForm = {
 870       comment_id: i.props.node.comment.id,
 871       save: saved,
 872     };
 873
 874     WebSocketService.Instance.saveComment(form);
 875
 876     i.state.saveLoading = true;
 877     i.setState(this.state);
 878   }
 879
 880   handleReplyCancel() {
 881     this.state.showReply = false;
 882     this.state.showEdit = false;
 883     this.setState(this.state);
 884   }
 885
 886   handleCommentUpvote(i: CommentNodeI) {
 887     let new_vote = this.state.my_vote == 1 ? 0 : 1;
 888
 889     if (this.state.my_vote == 1) {
 890       this.state.score--;
 891       this.state.upvotes--;
 892     } else if (this.state.my_vote == -1) {
 893       this.state.downvotes--;
 894       this.state.upvotes++;
 895       this.state.score += 2;
 896     } else {
 897       this.state.upvotes++;
 898       this.state.score++;
 899     }
 900
 901     this.state.my_vote = new_vote;
 902
 903     let form: CommentLikeForm = {
 904       comment_id: i.comment.id,
 905       score: this.state.my_vote,
 906     };
 907
 908     WebSocketService.Instance.likeComment(form);
 909     this.setState(this.state);
 910     setupTippy();
 911   }
 912
 913   handleCommentDownvote(i: CommentNodeI) {
 914     let new_vote = this.state.my_vote == -1 ? 0 : -1;
 915
 916     if (this.state.my_vote == 1) {
 917       this.state.score -= 2;
 918       this.state.upvotes--;
 919       this.state.downvotes++;
 920     } else if (this.state.my_vote == -1) {
 921       this.state.downvotes--;
 922       this.state.score++;
 923     } else {
 924       this.state.downvotes++;
 925       this.state.score--;
 926     }
 927
 928     this.state.my_vote = new_vote;
 929
 930     let form: CommentLikeForm = {
 931       comment_id: i.comment.id,
 932       score: this.state.my_vote,
 933     };
 934
 935     WebSocketService.Instance.likeComment(form);
 936     this.setState(this.state);
 937     setupTippy();
 938   }
 939
 940   handleModRemoveShow(i: CommentNode) {
 941     i.state.showRemoveDialog = true;
 942     i.setState(i.state);
 943   }
 944
 945   handleModRemoveReasonChange(i: CommentNode, event: any) {
 946     i.state.removeReason = event.target.value;
 947     i.setState(i.state);
 948   }
 949
 950   handleModRemoveSubmit(i: CommentNode) {
 951     event.preventDefault();
 952     let form: RemoveCommentForm = {
 953       edit_id: i.props.node.comment.id,
 954       removed: !i.props.node.comment.removed,
 955       reason: i.state.removeReason,
 956       auth: null,
 957     };
 958     WebSocketService.Instance.removeComment(form);
 959
 960     i.state.showRemoveDialog = false;
 961     i.setState(i.state);
 962   }
 963
 964   handleMarkRead(i: CommentNode) {
 965     // if it has a user_mention_id field, then its a mention
 966     if (i.props.node.comment.user_mention_id) {
 967       let form: MarkUserMentionAsReadForm = {
 968         user_mention_id: i.props.node.comment.user_mention_id,
 969         read: !i.props.node.comment.read,
 970       };
 971       WebSocketService.Instance.markUserMentionAsRead(form);
 972     } else {
 973       let form: MarkCommentAsReadForm = {
 974         edit_id: i.props.node.comment.id,
 975         read: !i.props.node.comment.read,
 976         auth: null,
 977       };
 978       WebSocketService.Instance.markCommentAsRead(form);
 979     }
 980
 981     i.state.readLoading = true;
 982     i.setState(this.state);
 983   }
 984
 985   handleModBanFromCommunityShow(i: CommentNode) {
 986     i.state.showBanDialog = !i.state.showBanDialog;
 987     i.state.banType = BanType.Community;
 988     i.setState(i.state);
 989   }
 990
 991   handleModBanShow(i: CommentNode) {
 992     i.state.showBanDialog = !i.state.showBanDialog;
 993     i.state.banType = BanType.Site;
 994     i.setState(i.state);
 995   }
 996
 997   handleModBanReasonChange(i: CommentNode, event: any) {
 998     i.state.banReason = event.target.value;
 999     i.setState(i.state);
1000   }
1001
1002   handleModBanExpiresChange(i: CommentNode, event: any) {
1003     i.state.banExpires = event.target.value;
1004     i.setState(i.state);
1005   }
1006
1007   handleModBanFromCommunitySubmit(i: CommentNode) {
1008     i.state.banType = BanType.Community;
1009     i.setState(i.state);
1010     i.handleModBanBothSubmit(i);
1011   }
1012
1013   handleModBanSubmit(i: CommentNode) {
1014     i.state.banType = BanType.Site;
1015     i.setState(i.state);
1016     i.handleModBanBothSubmit(i);
1017   }
1018
1019   handleModBanBothSubmit(i: CommentNode) {
1020     event.preventDefault();
1021
1022     if (i.state.banType == BanType.Community) {
1023       let form: BanFromCommunityForm = {
1024         user_id: i.props.node.comment.creator_id,
1025         community_id: i.props.node.comment.community_id,
1026         ban: !i.props.node.comment.banned_from_community,
1027         reason: i.state.banReason,
1028         expires: getUnixTime(i.state.banExpires),
1029       };
1030       WebSocketService.Instance.banFromCommunity(form);
1031     } else {
1032       let form: BanUserForm = {
1033         user_id: i.props.node.comment.creator_id,
1034         ban: !i.props.node.comment.banned,
1035         reason: i.state.banReason,
1036         expires: getUnixTime(i.state.banExpires),
1037       };
1038       WebSocketService.Instance.banUser(form);
1039     }
1040
1041     i.state.showBanDialog = false;
1042     i.setState(i.state);
1043   }
1044
1045   handleShowConfirmAppointAsMod(i: CommentNode) {
1046     i.state.showConfirmAppointAsMod = true;
1047     i.setState(i.state);
1048   }
1049
1050   handleCancelConfirmAppointAsMod(i: CommentNode) {
1051     i.state.showConfirmAppointAsMod = false;
1052     i.setState(i.state);
1053   }
1054
1055   handleAddModToCommunity(i: CommentNode) {
1056     let form: AddModToCommunityForm = {
1057       user_id: i.props.node.comment.creator_id,
1058       community_id: i.props.node.comment.community_id,
1059       added: !i.isMod,
1060     };
1061     WebSocketService.Instance.addModToCommunity(form);
1062     i.state.showConfirmAppointAsMod = false;
1063     i.setState(i.state);
1064   }
1065
1066   handleShowConfirmAppointAsAdmin(i: CommentNode) {
1067     i.state.showConfirmAppointAsAdmin = true;
1068     i.setState(i.state);
1069   }
1070
1071   handleCancelConfirmAppointAsAdmin(i: CommentNode) {
1072     i.state.showConfirmAppointAsAdmin = false;
1073     i.setState(i.state);
1074   }
1075
1076   handleAddAdmin(i: CommentNode) {
1077     let form: AddAdminForm = {
1078       user_id: i.props.node.comment.creator_id,
1079       added: !i.isAdmin,
1080     };
1081     WebSocketService.Instance.addAdmin(form);
1082     i.state.showConfirmAppointAsAdmin = false;
1083     i.setState(i.state);
1084   }
1085
1086   handleShowConfirmTransferCommunity(i: CommentNode) {
1087     i.state.showConfirmTransferCommunity = true;
1088     i.setState(i.state);
1089   }
1090
1091   handleCancelShowConfirmTransferCommunity(i: CommentNode) {
1092     i.state.showConfirmTransferCommunity = false;
1093     i.setState(i.state);
1094   }
1095
1096   handleTransferCommunity(i: CommentNode) {
1097     let form: TransferCommunityForm = {
1098       community_id: i.props.node.comment.community_id,
1099       user_id: i.props.node.comment.creator_id,
1100     };
1101     WebSocketService.Instance.transferCommunity(form);
1102     i.state.showConfirmTransferCommunity = false;
1103     i.setState(i.state);
1104   }
1105
1106   handleShowConfirmTransferSite(i: CommentNode) {
1107     i.state.showConfirmTransferSite = true;
1108     i.setState(i.state);
1109   }
1110
1111   handleCancelShowConfirmTransferSite(i: CommentNode) {
1112     i.state.showConfirmTransferSite = false;
1113     i.setState(i.state);
1114   }
1115
1116   handleTransferSite(i: CommentNode) {
1117     let form: TransferSiteForm = {
1118       user_id: i.props.node.comment.creator_id,
1119     };
1120     WebSocketService.Instance.transferSite(form);
1121     i.state.showConfirmTransferSite = false;
1122     i.setState(i.state);
1123   }
1124
1125   get isCommentNew(): boolean {
1126     let now = moment.utc().subtract(10, 'minutes');
1127     let then = moment.utc(this.props.node.comment.published);
1128     return now.isBefore(then);
1129   }
1130
1131   handleCommentCollapse(i: CommentNode) {
1132     i.state.collapsed = !i.state.collapsed;
1133     i.setState(i.state);
1134   }
1135
1136   handleViewSource(i: CommentNode) {
1137     i.state.viewSource = !i.state.viewSource;
1138     i.setState(i.state);
1139   }
1140
1141   handleShowAdvanced(i: CommentNode) {
1142     i.state.showAdvanced = !i.state.showAdvanced;
1143     i.setState(i.state);
1144     setupTippy();
1145   }
1146
1147   get scoreColor() {
1148     if (this.state.my_vote == 1) {
1149       return 'text-info';
1150     } else if (this.state.my_vote == -1) {
1151       return 'text-danger';
1152     } else {
1153       return 'text-muted';
1154     }
1155   }
1156
1157   get pointsTippy(): string {
1158     let points = i18n.t('number_of_points', {
1159       count: this.state.score,
1160     });
1161
1162     let upvotes = i18n.t('number_of_upvotes', {
1163       count: this.state.upvotes,
1164     });
1165
1166     let downvotes = i18n.t('number_of_downvotes', {
1167       count: this.state.downvotes,
1168     });
1169
1170     return `${points} • ${upvotes} • ${downvotes}`;
1171   }
1172 }