src/shared/components/sidebar.tsx

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