src/shared/components/community/sidebar.tsx

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