src/shared/components/community/sidebar.tsx

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