src/shared/components/community/sidebar.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Link } from "inferno-router";
   3 import {
   4   AddModToCommunity,
   5   BlockCommunity,
   6   CommunityModeratorView,
   7   CommunityView,
   8   DeleteCommunity,
   9   FollowCommunity,
  10   Language,
  11   PersonViewSafe,
  12   PurgeCommunity,
  13   RemoveCommunity,
  14   SubscribedType,
  15 } from "lemmy-js-client";
  16 import { i18n } from "../../i18next";
  17 import { UserService, WebSocketService } from "../../services";
  18 import {
  19   amAdmin,
  20   amMod,
  21   amTopMod,
  22   getUnixTime,
  23   mdToHtml,
  24   myAuth,
  25   numToSI,
  26   wsClient,
  27 } from "../../utils";
  28 import { BannerIconHeader } from "../common/banner-icon-header";
  29 import { Icon, PurgeWarning, Spinner } from "../common/icon";
  30 import { CommunityForm } from "../community/community-form";
  31 import { CommunityLink } from "../community/community-link";
  32 import { PersonListing } from "../person/person-listing";
  33
  34 interface SidebarProps {
  35   community_view: CommunityView;
  36   moderators: CommunityModeratorView[];
  37   admins: PersonViewSafe[];
  38   allLanguages: Language[];
  39   siteLanguages: number[];
  40   communityLanguages?: number[];
  41   online: number;
  42   enableNsfw?: boolean;
  43   showIcon?: boolean;
  44   editable?: boolean;
  45 }
  46
  47 interface SidebarState {
  48   removeReason?: string;
  49   removeExpires?: string;
  50   showEdit: boolean;
  51   showRemoveDialog: boolean;
  52   showPurgeDialog: boolean;
  53   purgeReason?: string;
  54   purgeLoading: boolean;
  55   showConfirmLeaveModTeam: boolean;
  56 }
  57
  58 export class Sidebar extends Component<SidebarProps, SidebarState> {
  59   state: SidebarState = {
  60     showEdit: false,
  61     showRemoveDialog: false,
  62     showPurgeDialog: false,
  63     purgeLoading: false,
  64     showConfirmLeaveModTeam: false,
  65   };
  66
  67   constructor(props: any, context: any) {
  68     super(props, context);
  69     this.handleEditCommunity = this.handleEditCommunity.bind(this);
  70     this.handleEditCancel = this.handleEditCancel.bind(this);
  71   }
  72
  73   render() {
  74     return (
  75       <div>
  76         {!this.state.showEdit ? (
  77           this.sidebar()
  78         ) : (
  79           <CommunityForm
  80             community_view={this.props.community_view}
  81             allLanguages={this.props.allLanguages}
  82             siteLanguages={this.props.siteLanguages}
  83             communityLanguages={this.props.communityLanguages}
  84             onEdit={this.handleEditCommunity}
  85             onCancel={this.handleEditCancel}
  86             enableNsfw={this.props.enableNsfw}
  87           />
  88         )}
  89       </div>
  90     );
  91   }
  92
  93   sidebar() {
  94     return (
  95       <div>
  96         <div className="card border-secondary mb-3">
  97           <div className="card-body">
  98             {this.communityTitle()}
  99             {this.props.editable && this.adminButtons()}
 100             {this.subscribe()}
 101             {this.canPost && this.createPost()}
 102             {this.blockCommunity()}
 103           </div>
 104         </div>
 105         <div className="card border-secondary mb-3">
 106           <div className="card-body">
 107             {this.description()}
 108             {this.badges()}
 109             {this.mods()}
 110           </div>
 111         </div>
 112       </div>
 113     );
 114   }
 115
 116   communityTitle() {
 117     let community = this.props.community_view.community;
 118     let subscribed = this.props.community_view.subscribed;
 119     return (
 120       <div>
 121         <h5 className="mb-0">
 122           {this.props.showIcon && !community.removed && (
 123             <BannerIconHeader icon={community.icon} banner={community.banner} />
 124           )}
 125           <span className="mr-2">{community.title}</span>
 126           {subscribed == SubscribedType.Subscribed && (
 127             <button
 128               className="btn btn-secondary btn-sm mr-2"
 129               onClick={linkEvent(this, this.handleUnsubscribe)}
 130             >
 131               <Icon icon="check" classes="icon-inline text-success mr-1" />
 132               {i18n.t("joined")}
 133             </button>
 134           )}
 135           {subscribed == SubscribedType.Pending && (
 136             <button
 137               className="btn btn-warning mr-2"
 138               onClick={linkEvent(this, this.handleUnsubscribe)}
 139             >
 140               {i18n.t("subscribe_pending")}
 141             </button>
 142           )}
 143           {community.removed && (
 144             <small className="mr-2 text-muted font-italic">
 145               {i18n.t("removed")}
 146             </small>
 147           )}
 148           {community.deleted && (
 149             <small className="mr-2 text-muted font-italic">
 150               {i18n.t("deleted")}
 151             </small>
 152           )}
 153           {community.nsfw && (
 154             <small className="mr-2 text-muted font-italic">
 155               {i18n.t("nsfw")}
 156             </small>
 157           )}
 158         </h5>
 159         <CommunityLink
 160           community={community}
 161           realLink
 162           useApubName
 163           muted
 164           hideAvatar
 165         />
 166       </div>
 167     );
 168   }
 169
 170   badges() {
 171     let community_view = this.props.community_view;
 172     let counts = community_view.counts;
 173     return (
 174       <ul className="my-1 list-inline">
 175         <li className="list-inline-item badge badge-secondary">
 176           {i18n.t("number_online", {
 177             count: this.props.online,
 178             formattedCount: numToSI(this.props.online),
 179           })}
 180         </li>
 181         <li
 182           className="list-inline-item badge badge-secondary pointer"
 183           data-tippy-content={i18n.t("active_users_in_the_last_day", {
 184             count: counts.users_active_day,
 185             formattedCount: counts.users_active_day,
 186           })}
 187         >
 188           {i18n.t("number_of_users", {
 189             count: counts.users_active_day,
 190             formattedCount: numToSI(counts.users_active_day),
 191           })}{" "}
 192           / {i18n.t("day")}
 193         </li>
 194         <li
 195           className="list-inline-item badge badge-secondary pointer"
 196           data-tippy-content={i18n.t("active_users_in_the_last_week", {
 197             count: counts.users_active_week,
 198             formattedCount: counts.users_active_week,
 199           })}
 200         >
 201           {i18n.t("number_of_users", {
 202             count: counts.users_active_week,
 203             formattedCount: numToSI(counts.users_active_week),
 204           })}{" "}
 205           / {i18n.t("week")}
 206         </li>
 207         <li
 208           className="list-inline-item badge badge-secondary pointer"
 209           data-tippy-content={i18n.t("active_users_in_the_last_month", {
 210             count: counts.users_active_month,
 211             formattedCount: counts.users_active_month,
 212           })}
 213         >
 214           {i18n.t("number_of_users", {
 215             count: counts.users_active_month,
 216             formattedCount: numToSI(counts.users_active_month),
 217           })}{" "}
 218           / {i18n.t("month")}
 219         </li>
 220         <li
 221           className="list-inline-item badge badge-secondary pointer"
 222           data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
 223             count: counts.users_active_half_year,
 224             formattedCount: counts.users_active_half_year,
 225           })}
 226         >
 227           {i18n.t("number_of_users", {
 228             count: counts.users_active_half_year,
 229             formattedCount: numToSI(counts.users_active_half_year),
 230           })}{" "}
 231           / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
 232         </li>
 233         <li className="list-inline-item badge badge-secondary">
 234           {i18n.t("number_of_subscribers", {
 235             count: counts.subscribers,
 236             formattedCount: numToSI(counts.subscribers),
 237           })}
 238         </li>
 239         <li className="list-inline-item badge badge-secondary">
 240           {i18n.t("number_of_posts", {
 241             count: counts.posts,
 242             formattedCount: numToSI(counts.posts),
 243           })}
 244         </li>
 245         <li className="list-inline-item badge badge-secondary">
 246           {i18n.t("number_of_comments", {
 247             count: counts.comments,
 248             formattedCount: numToSI(counts.comments),
 249           })}
 250         </li>
 251         <li className="list-inline-item">
 252           <Link
 253             className="badge badge-primary"
 254             to={`/modlog/community/${this.props.community_view.community.id}`}
 255           >
 256             {i18n.t("modlog")}
 257           </Link>
 258         </li>
 259       </ul>
 260     );
 261   }
 262
 263   mods() {
 264     return (
 265       <ul className="list-inline small">
 266         <li className="list-inline-item">{i18n.t("mods")}: </li>
 267         {this.props.moderators.map(mod => (
 268           <li key={mod.moderator.id} className="list-inline-item">
 269             <PersonListing person={mod.moderator} />
 270           </li>
 271         ))}
 272       </ul>
 273     );
 274   }
 275
 276   createPost() {
 277     let cv = this.props.community_view;
 278     return (
 279       <Link
 280         className={`btn btn-secondary btn-block mb-2 ${
 281           cv.community.deleted || cv.community.removed ? "no-click" : ""
 282         }`}
 283         to={`/create_post?communityId=${cv.community.id}`}
 284       >
 285         {i18n.t("create_a_post")}
 286       </Link>
 287     );
 288   }
 289
 290   subscribe() {
 291     let community_view = this.props.community_view;
 292     return (
 293       <div className="mb-2">
 294         {community_view.subscribed == SubscribedType.NotSubscribed && (
 295           <button
 296             className="btn btn-secondary btn-block"
 297             onClick={linkEvent(this, this.handleSubscribe)}
 298           >
 299             {i18n.t("subscribe")}
 300           </button>
 301         )}
 302       </div>
 303     );
 304   }
 305
 306   blockCommunity() {
 307     let community_view = this.props.community_view;
 308     let blocked = this.props.community_view.blocked;
 309
 310     return (
 311       <div className="mb-2">
 312         {community_view.subscribed == SubscribedType.NotSubscribed &&
 313           (blocked ? (
 314             <button
 315               className="btn btn-danger btn-block"
 316               onClick={linkEvent(this, this.handleUnblock)}
 317             >
 318               {i18n.t("unblock_community")}
 319             </button>
 320           ) : (
 321             <button
 322               className="btn btn-danger btn-block"
 323               onClick={linkEvent(this, this.handleBlock)}
 324             >
 325               {i18n.t("block_community")}
 326             </button>
 327           ))}
 328       </div>
 329     );
 330   }
 331
 332   description() {
 333     let desc = this.props.community_view.community.description;
 334     return (
 335       desc && (
 336         <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
 337       )
 338     );
 339   }
 340
 341   adminButtons() {
 342     let community_view = this.props.community_view;
 343     return (
 344       <>
 345         <ul className="list-inline mb-1 text-muted font-weight-bold">
 346           {amMod(this.props.moderators) && (
 347             <>
 348               <li className="list-inline-item-action">
 349                 <button
 350                   className="btn btn-link text-muted d-inline-block"
 351                   onClick={linkEvent(this, this.handleEditClick)}
 352                   data-tippy-content={i18n.t("edit")}
 353                   aria-label={i18n.t("edit")}
 354                 >
 355                   <Icon icon="edit" classes="icon-inline" />
 356                 </button>
 357               </li>
 358               {!amTopMod(this.props.moderators) &&
 359                 (!this.state.showConfirmLeaveModTeam ? (
 360                   <li className="list-inline-item-action">
 361                     <button
 362                       className="btn btn-link text-muted d-inline-block"
 363                       onClick={linkEvent(
 364                         this,
 365                         this.handleShowConfirmLeaveModTeamClick
 366                       )}
 367                     >
 368                       {i18n.t("leave_mod_team")}
 369                     </button>
 370                   </li>
 371                 ) : (
 372                   <>
 373                     <li className="list-inline-item-action">
 374                       {i18n.t("are_you_sure")}
 375                     </li>
 376                     <li className="list-inline-item-action">
 377                       <button
 378                         className="btn btn-link text-muted d-inline-block"
 379                         onClick={linkEvent(this, this.handleLeaveModTeamClick)}
 380                       >
 381                         {i18n.t("yes")}
 382                       </button>
 383                     </li>
 384                     <li className="list-inline-item-action">
 385                       <button
 386                         className="btn btn-link text-muted d-inline-block"
 387                         onClick={linkEvent(
 388                           this,
 389                           this.handleCancelLeaveModTeamClick
 390                         )}
 391                       >
 392                         {i18n.t("no")}
 393                       </button>
 394                     </li>
 395                   </>
 396                 ))}
 397               {amTopMod(this.props.moderators) && (
 398                 <li className="list-inline-item-action">
 399                   <button
 400                     className="btn btn-link text-muted d-inline-block"
 401                     onClick={linkEvent(this, this.handleDeleteClick)}
 402                     data-tippy-content={
 403                       !community_view.community.deleted
 404                         ? i18n.t("delete")
 405                         : i18n.t("restore")
 406                     }
 407                     aria-label={
 408                       !community_view.community.deleted
 409                         ? i18n.t("delete")
 410                         : i18n.t("restore")
 411                     }
 412                   >
 413                     <Icon
 414                       icon="trash"
 415                       classes={`icon-inline ${
 416                         community_view.community.deleted && "text-danger"
 417                       }`}
 418                     />
 419                   </button>
 420                 </li>
 421               )}
 422             </>
 423           )}
 424           {amAdmin() && (
 425             <li className="list-inline-item">
 426               {!this.props.community_view.community.removed ? (
 427                 <button
 428                   className="btn btn-link text-muted d-inline-block"
 429                   onClick={linkEvent(this, this.handleModRemoveShow)}
 430                 >
 431                   {i18n.t("remove")}
 432                 </button>
 433               ) : (
 434                 <button
 435                   className="btn btn-link text-muted d-inline-block"
 436                   onClick={linkEvent(this, this.handleModRemoveSubmit)}
 437                 >
 438                   {i18n.t("restore")}
 439                 </button>
 440               )}
 441               <button
 442                 className="btn btn-link text-muted d-inline-block"
 443                 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
 444                 aria-label={i18n.t("purge_community")}
 445               >
 446                 {i18n.t("purge_community")}
 447               </button>
 448             </li>
 449           )}
 450         </ul>
 451         {this.state.showRemoveDialog && (
 452           <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
 453             <div className="form-group">
 454               <label className="col-form-label" htmlFor="remove-reason">
 455                 {i18n.t("reason")}
 456               </label>
 457               <input
 458                 type="text"
 459                 id="remove-reason"
 460                 className="form-control mr-2"
 461                 placeholder={i18n.t("optional")}
 462                 value={this.state.removeReason}
 463                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
 464               />
 465             </div>
 466             {/* TODO hold off on expires for now */}
 467             {/* <div class="form-group row"> */}
 468             {/*   <label class="col-form-label">Expires</label> */}
 469             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
 470             {/* </div> */}
 471             <div className="form-group">
 472               <button type="submit" className="btn btn-secondary">
 473                 {i18n.t("remove_community")}
 474               </button>
 475             </div>
 476           </form>
 477         )}
 478         {this.state.showPurgeDialog && (
 479           <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
 480             <div className="form-group">
 481               <PurgeWarning />
 482             </div>
 483             <div className="form-group">
 484               <label className="sr-only" htmlFor="purge-reason">
 485                 {i18n.t("reason")}
 486               </label>
 487               <input
 488                 type="text"
 489                 id="purge-reason"
 490                 className="form-control mr-2"
 491                 placeholder={i18n.t("reason")}
 492                 value={this.state.purgeReason}
 493                 onInput={linkEvent(this, this.handlePurgeReasonChange)}
 494               />
 495             </div>
 496             <div className="form-group">
 497               {this.state.purgeLoading ? (
 498                 <Spinner />
 499               ) : (
 500                 <button
 501                   type="submit"
 502                   className="btn btn-secondary"
 503                   aria-label={i18n.t("purge_community")}
 504                 >
 505                   {i18n.t("purge_community")}
 506                 </button>
 507               )}
 508             </div>
 509           </form>
 510         )}
 511       </>
 512     );
 513   }
 514
 515   handleEditClick(i: Sidebar) {
 516     i.setState({ showEdit: true });
 517   }
 518
 519   handleEditCommunity() {
 520     this.setState({ showEdit: false });
 521   }
 522
 523   handleEditCancel() {
 524     this.setState({ showEdit: false });
 525   }
 526
 527   handleDeleteClick(i: Sidebar, event: any) {
 528     event.preventDefault();
 529     let auth = myAuth();
 530     if (auth) {
 531       let deleteForm: DeleteCommunity = {
 532         community_id: i.props.community_view.community.id,
 533         deleted: !i.props.community_view.community.deleted,
 534         auth,
 535       };
 536       WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
 537     }
 538   }
 539
 540   handleShowConfirmLeaveModTeamClick(i: Sidebar) {
 541     i.setState({ showConfirmLeaveModTeam: true });
 542   }
 543
 544   handleLeaveModTeamClick(i: Sidebar) {
 545     let mui = UserService.Instance.myUserInfo;
 546     let auth = myAuth();
 547     if (auth && mui) {
 548       let form: AddModToCommunity = {
 549         person_id: mui.local_user_view.person.id,
 550         community_id: i.props.community_view.community.id,
 551         added: false,
 552         auth,
 553       };
 554       WebSocketService.Instance.send(wsClient.addModToCommunity(form));
 555       i.setState({ showConfirmLeaveModTeam: false });
 556     }
 557   }
 558
 559   handleCancelLeaveModTeamClick(i: Sidebar) {
 560     i.setState({ showConfirmLeaveModTeam: false });
 561   }
 562
 563   handleUnsubscribe(i: Sidebar, event: any) {
 564     event.preventDefault();
 565     let community_id = i.props.community_view.community.id;
 566     let auth = myAuth();
 567     if (auth) {
 568       let form: FollowCommunity = {
 569         community_id,
 570         follow: false,
 571         auth,
 572       };
 573       WebSocketService.Instance.send(wsClient.followCommunity(form));
 574     }
 575
 576     // Update myUserInfo
 577     let mui = UserService.Instance.myUserInfo;
 578     if (mui) {
 579       mui.follows = mui.follows.filter(i => i.community.id != community_id);
 580     }
 581   }
 582
 583   handleSubscribe(i: Sidebar, event: any) {
 584     event.preventDefault();
 585     let community_id = i.props.community_view.community.id;
 586     let auth = myAuth();
 587     if (auth) {
 588       let form: FollowCommunity = {
 589         community_id,
 590         follow: true,
 591         auth,
 592       };
 593       WebSocketService.Instance.send(wsClient.followCommunity(form));
 594     }
 595
 596     // Update myUserInfo
 597     let mui = UserService.Instance.myUserInfo;
 598     if (mui) {
 599       mui.follows.push({
 600         community: i.props.community_view.community,
 601         follower: mui.local_user_view.person,
 602       });
 603     }
 604   }
 605
 606   get canPost(): boolean {
 607     return (
 608       !this.props.community_view.community.posting_restricted_to_mods ||
 609       amMod(this.props.moderators) ||
 610       amAdmin()
 611     );
 612   }
 613
 614   handleModRemoveShow(i: Sidebar) {
 615     i.setState({ showRemoveDialog: true });
 616   }
 617
 618   handleModRemoveReasonChange(i: Sidebar, event: any) {
 619     i.setState({ removeReason: event.target.value });
 620   }
 621
 622   handleModRemoveExpiresChange(i: Sidebar, event: any) {
 623     i.setState({ removeExpires: event.target.value });
 624   }
 625
 626   handleModRemoveSubmit(i: Sidebar, event: any) {
 627     event.preventDefault();
 628     let auth = myAuth();
 629     if (auth) {
 630       let removeForm: RemoveCommunity = {
 631         community_id: i.props.community_view.community.id,
 632         removed: !i.props.community_view.community.removed,
 633         reason: i.state.removeReason,
 634         expires: getUnixTime(i.state.removeExpires),
 635         auth,
 636       };
 637       WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
 638
 639       i.setState({ showRemoveDialog: false });
 640     }
 641   }
 642
 643   handlePurgeCommunityShow(i: Sidebar) {
 644     i.setState({ showPurgeDialog: true, showRemoveDialog: false });
 645   }
 646
 647   handlePurgeReasonChange(i: Sidebar, event: any) {
 648     i.setState({ purgeReason: event.target.value });
 649   }
 650
 651   handlePurgeSubmit(i: Sidebar, event: any) {
 652     event.preventDefault();
 653
 654     let auth = myAuth();
 655     if (auth) {
 656       let form: PurgeCommunity = {
 657         community_id: i.props.community_view.community.id,
 658         reason: i.state.purgeReason,
 659         auth,
 660       };
 661       WebSocketService.Instance.send(wsClient.purgeCommunity(form));
 662       i.setState({ purgeLoading: true });
 663     }
 664   }
 665
 666   handleBlock(i: Sidebar, event: any) {
 667     event.preventDefault();
 668     let auth = myAuth();
 669     if (auth) {
 670       let blockCommunityForm: BlockCommunity = {
 671         community_id: i.props.community_view.community.id,
 672         block: true,
 673         auth,
 674       };
 675       WebSocketService.Instance.send(
 676         wsClient.blockCommunity(blockCommunityForm)
 677       );
 678     }
 679   }
 680
 681   handleUnblock(i: Sidebar, event: any) {
 682     event.preventDefault();
 683     let auth = myAuth();
 684     if (auth) {
 685       let blockCommunityForm: BlockCommunity = {
 686         community_id: i.props.community_view.community.id,
 687         block: false,
 688         auth,
 689       };
 690       WebSocketService.Instance.send(
 691         wsClient.blockCommunity(blockCommunityForm)
 692       );
 693     }
 694   }
 695 }