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