]> Untitled Git - lemmy-ui.git/blobdiff - src/shared/components/community/sidebar.tsx
component classes v2
[lemmy-ui.git] / src / shared / components / community / sidebar.tsx
index c0cb991901aaddf26bd36a4fbadc1647b31c7b6d..d5b54f02268d8cf8bf6505f5d1883c31c54a91d5 100644 (file)
@@ -1,19 +1,33 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
   AddModToCommunity,
+  BlockCommunity,
   CommunityModeratorView,
   CommunityView,
   DeleteCommunity,
+  EditCommunity,
   FollowCommunity,
-  PersonViewSafe,
+  Language,
+  PersonView,
+  PurgeCommunity,
   RemoveCommunity,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
-import { authField, getUnixTime, mdToHtml, wsClient } from "../../utils";
+import { UserService } from "../../services";
+import {
+  amAdmin,
+  amMod,
+  amTopMod,
+  getUnixTime,
+  hostname,
+  mdToHtml,
+  myAuthRequired,
+} from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
-import { Icon } from "../common/icon";
+import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@@ -21,45 +35,90 @@ import { PersonListing } from "../person/person-listing";
 interface SidebarProps {
   community_view: CommunityView;
   moderators: CommunityModeratorView[];
-  admins: PersonViewSafe[];
-  online: number;
-  enableNsfw: boolean;
+  admins: PersonView[];
+  allLanguages: Language[];
+  siteLanguages: number[];
+  communityLanguages?: number[];
+  enableNsfw?: boolean;
   showIcon?: boolean;
+  editable?: boolean;
+  onDeleteCommunity(form: DeleteCommunity): void;
+  onRemoveCommunity(form: RemoveCommunity): void;
+  onLeaveModTeam(form: AddModToCommunity): void;
+  onFollowCommunity(form: FollowCommunity): void;
+  onBlockCommunity(form: BlockCommunity): void;
+  onPurgeCommunity(form: PurgeCommunity): void;
+  onEditCommunity(form: EditCommunity): void;
 }
 
 interface SidebarState {
+  removeReason?: string;
+  removeExpires?: string;
   showEdit: boolean;
   showRemoveDialog: boolean;
-  removeReason: string;
-  removeExpires: string;
+  showPurgeDialog: boolean;
+  purgeReason?: string;
   showConfirmLeaveModTeam: boolean;
+  deleteCommunityLoading: boolean;
+  removeCommunityLoading: boolean;
+  leaveModTeamLoading: boolean;
+  followCommunityLoading: boolean;
+  purgeCommunityLoading: boolean;
 }
 
 export class Sidebar extends Component<SidebarProps, SidebarState> {
-  private emptyState: SidebarState = {
+  state: SidebarState = {
     showEdit: false,
     showRemoveDialog: false,
-    removeReason: null,
-    removeExpires: null,
+    showPurgeDialog: false,
     showConfirmLeaveModTeam: false,
+    deleteCommunityLoading: false,
+    removeCommunityLoading: false,
+    leaveModTeamLoading: false,
+    followCommunityLoading: false,
+    purgeCommunityLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
-    this.handleEditCommunity = this.handleEditCommunity.bind(this);
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
+  ): void {
+    if (this.props.moderators != nextProps.moderators) {
+      this.setState({
+        showConfirmLeaveModTeam: false,
+      });
+    }
+
+    if (this.props.community_view != nextProps.community_view) {
+      this.setState({
+        showEdit: false,
+        showPurgeDialog: false,
+        showRemoveDialog: false,
+        deleteCommunityLoading: false,
+        removeCommunityLoading: false,
+        leaveModTeamLoading: false,
+        followCommunityLoading: false,
+        purgeCommunityLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
-      <div>
+      <div className="community-sidebar">
         {!this.state.showEdit ? (
           this.sidebar()
         ) : (
           <CommunityForm
             community_view={this.props.community_view}
-            onEdit={this.handleEditCommunity}
+            allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
+            communityLanguages={this.props.communityLanguages}
+            onUpsertCommunity={this.props.onEditCommunity}
             onCancel={this.handleEditCancel}
             enableNsfw={this.props.enableNsfw}
           />
@@ -69,59 +128,99 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   sidebar() {
+    const myUSerInfo = UserService.Instance.myUserInfo;
+    const { name, actor_id } = this.props.community_view.community;
     return (
-      <div>
-        <div class="card border-secondary mb-3">
-          <div class="card-body">
-            {this.communityTitle()}
-            {this.adminButtons()}
-            {this.subscribe()}
-            {this.createPost()}
-          </div>
-        </div>
-        <div class="card border-secondary mb-3">
-          <div class="card-body">
-            {this.description()}
-            {this.badges()}
-            {this.mods()}
-          </div>
+      <aside className="mb-3">
+        <div id="sidebarContainer">
+          <section id="sidebarMain" className="card border-secondary mb-3">
+            <div className="card-body">
+              {this.communityTitle()}
+              {this.props.editable && this.adminButtons()}
+              {myUSerInfo && this.subscribe()}
+              {this.canPost && this.createPost()}
+              {myUSerInfo && this.blockCommunity()}
+              {!myUSerInfo && (
+                <div className="alert alert-info" role="alert">
+                  <T
+                    i18nKey="community_not_logged_in_alert"
+                    interpolation={{
+                      community: name,
+                      instance: hostname(actor_id),
+                    }}
+                  >
+                    #<code className="user-select-all">#</code>#
+                  </T>
+                </div>
+              )}
+            </div>
+          </section>
+          <section id="sidebarInfo" className="card border-secondary mb-3">
+            <div className="card-body">
+              {this.description()}
+              <Badges
+                communityId={this.props.community_view.community.id}
+                counts={this.props.community_view.counts}
+              />
+              {this.mods()}
+            </div>
+          </section>
         </div>
-      </div>
+      </aside>
     );
   }
 
   communityTitle() {
-    let community = this.props.community_view.community;
-    let subscribed = this.props.community_view.subscribed;
+    const community = this.props.community_view.community;
+    const subscribed = this.props.community_view.subscribed;
     return (
       <div>
         <h5 className="mb-0">
-          {this.props.showIcon && (
+          {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
-          <span class="mr-2">{community.title}</span>
-          {subscribed && (
-            <a
-              class="btn btn-secondary btn-sm mr-2"
-              href="#"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+          <span className="me-2">
+            <CommunityLink community={community} hideAvatar />
+          </span>
+          {subscribed === "Subscribed" && (
+            <button
+              className="btn btn-secondary btn-sm me-2"
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
-              <Icon icon="check" classes="icon-inline text-success mr-1" />
-              {i18n.t("joined")}
-            </a>
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                <>
+                  <Icon icon="check" classes="icon-inline text-success me-1" />
+                  {i18n.t("joined")}
+                </>
+              )}
+            </button>
+          )}
+          {subscribed === "Pending" && (
+            <button
+              className="btn btn-warning me-2"
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
+            >
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("subscribe_pending")
+              )}
+            </button>
           )}
           {community.removed && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("removed")}
             </small>
           )}
           {community.deleted && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("deleted")}
             </small>
           )}
           {community.nsfw && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("nsfw")}
             </small>
           )}
@@ -137,93 +236,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  badges() {
-    let community_view = this.props.community_view;
-    let counts = community_view.counts;
-    return (
-      <ul class="my-1 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", { count: this.props.online })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={`${i18n.t("number_of_users", {
-            count: counts.users_active_day,
-          })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_day,
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={`${i18n.t("number_of_users", {
-            count: counts.users_active_week,
-          })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_week,
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={`${i18n.t("number_of_users", {
-            count: counts.users_active_month,
-          })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_month,
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={`${i18n.t("number_of_users", {
-            count: counts.users_active_half_year,
-          })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
-            count: 6,
-          })}`}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_half_year,
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_subscribers", {
-            count: counts.subscribers,
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: counts.posts,
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: counts.comments,
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link
-            className="badge badge-secondary"
-            to={`/modlog/community/${this.props.community_view.community.id}`}
-          >
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   mods() {
     return (
-      <ul class="list-inline small">
-        <li class="list-inline-item">{i18n.t("mods")}: </li>
+      <ul className="list-inline small">
+        <li className="list-inline-item">{i18n.t("mods")}: </li>
         {this.props.moderators.map(mod => (
-          <li class="list-inline-item">
+          <li key={mod.moderator.id} className="list-inline-item">
             <PersonListing person={mod.moderator} />
           </li>
         ))}
@@ -232,62 +250,75 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   createPost() {
-    let community_view = this.props.community_view;
+    const cv = this.props.community_view;
     return (
-      community_view.subscribed && (
-        <Link
-          className={`btn btn-secondary btn-block mb-2 ${
-            community_view.community.deleted || community_view.community.removed
-              ? "no-click"
-              : ""
-          }`}
-          to={`/create_post?community_id=${community_view.community.id}`}
-        >
-          {i18n.t("create_a_post")}
-        </Link>
-      )
+      <Link
+        className={`btn btn-secondary d-block mb-2 w-100 ${
+          cv.community.deleted || cv.community.removed ? "no-click" : ""
+        }`}
+        to={`/create_post?communityId=${cv.community.id}`}
+      >
+        {i18n.t("create_a_post")}
+      </Link>
     );
   }
 
   subscribe() {
-    let community_view = this.props.community_view;
+    const community_view = this.props.community_view;
     return (
-      <div class="mb-2">
-        {!community_view.subscribed && (
-          <a
-            class="btn btn-secondary btn-block"
-            href="#"
-            onClick={linkEvent(this, this.handleSubscribe)}
+      <>
+        {community_view.subscribed == "NotSubscribed" && (
+          <button
+            className="btn btn-secondary d-block mb-2 w-100"
+            onClick={linkEvent(this, this.handleFollowCommunity)}
           >
-            {i18n.t("subscribe")}
-          </a>
+            {this.state.followCommunityLoading ? (
+              <Spinner />
+            ) : (
+              i18n.t("subscribe")
+            )}
+          </button>
         )}
-      </div>
+      </>
+    );
+  }
+
+  blockCommunity() {
+    const { subscribed, blocked } = this.props.community_view;
+
+    return (
+      <>
+        {subscribed == "NotSubscribed" && (
+          <button
+            className="btn btn-danger d-block mb-2 w-100"
+            onClick={linkEvent(this, this.handleBlockCommunity)}
+          >
+            {i18n.t(blocked ? "unblock_community" : "block_community")}
+          </button>
+        )}
+      </>
     );
   }
 
   description() {
-    let description = this.props.community_view.community.description;
+    const desc = this.props.community_view.community.description;
     return (
-      description && (
-        <div
-          className="md-div"
-          dangerouslySetInnerHTML={mdToHtml(description)}
-        />
+      desc && (
+        <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
       )
     );
   }
 
   adminButtons() {
-    let community_view = this.props.community_view;
+    const community_view = this.props.community_view;
     return (
       <>
-        <ul class="list-inline mb-1 text-muted font-weight-bold">
-          {this.canMod && (
+        <ul className="list-inline mb-1 text-muted font-weight-bold">
+          {amMod(this.props.moderators) && (
             <>
               <li className="list-inline-item-action">
                 <button
-                  class="btn btn-link text-muted d-inline-block"
+                  className="btn btn-link text-muted d-inline-block"
                   onClick={linkEvent(this, this.handleEditClick)}
                   data-tippy-content={i18n.t("edit")}
                   aria-label={i18n.t("edit")}
@@ -295,11 +326,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   <Icon icon="edit" classes="icon-inline" />
                 </button>
               </li>
-              {!this.amTopMod &&
+              {!amTopMod(this.props.moderators) &&
                 (!this.state.showConfirmLeaveModTeam ? (
                   <li className="list-inline-item-action">
                     <button
-                      class="btn btn-link text-muted d-inline-block"
+                      className="btn btn-link text-muted d-inline-block"
                       onClick={linkEvent(
                         this,
                         this.handleShowConfirmLeaveModTeamClick
@@ -315,15 +346,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     </li>
                     <li className="list-inline-item-action">
                       <button
-                        class="btn btn-link text-muted d-inline-block"
-                        onClick={linkEvent(this, this.handleLeaveModTeamClick)}
+                        className="btn btn-link text-muted d-inline-block"
+                        onClick={linkEvent(this, this.handleLeaveModTeam)}
                       >
                         {i18n.t("yes")}
                       </button>
                     </li>
                     <li className="list-inline-item-action">
                       <button
-                        class="btn btn-link text-muted d-inline-block"
+                        className="btn btn-link text-muted d-inline-block"
                         onClick={linkEvent(
                           this,
                           this.handleCancelLeaveModTeamClick
@@ -334,11 +365,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     </li>
                   </>
                 ))}
-              {this.amTopMod && (
+              {amTopMod(this.props.moderators) && (
                 <li className="list-inline-item-action">
                   <button
-                    class="btn btn-link text-muted d-inline-block"
-                    onClick={linkEvent(this, this.handleDeleteClick)}
+                    className="btn btn-link text-muted d-inline-block"
+                    onClick={linkEvent(this, this.handleDeleteCommunity)}
                     data-tippy-content={
                       !community_view.community.deleted
                         ? i18n.t("delete")
@@ -350,202 +381,234 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                         : i18n.t("restore")
                     }
                   >
-                    <Icon
-                      icon="trash"
-                      classes={`icon-inline ${
-                        community_view.community.deleted && "text-danger"
-                      }`}
-                    />
+                    {this.state.deleteCommunityLoading ? (
+                      <Spinner />
+                    ) : (
+                      <Icon
+                        icon="trash"
+                        classes={`icon-inline ${
+                          community_view.community.deleted && "text-danger"
+                        }`}
+                      />
+                    )}{" "}
                   </button>
                 </li>
               )}
             </>
           )}
-          {this.canAdmin && (
+          {amAdmin() && (
             <li className="list-inline-item">
               {!this.props.community_view.community.removed ? (
                 <button
-                  class="btn btn-link text-muted d-inline-block"
+                  className="btn btn-link text-muted d-inline-block"
                   onClick={linkEvent(this, this.handleModRemoveShow)}
                 >
                   {i18n.t("remove")}
                 </button>
               ) : (
                 <button
-                  class="btn btn-link text-muted d-inline-block"
-                  onClick={linkEvent(this, this.handleModRemoveSubmit)}
+                  className="btn btn-link text-muted d-inline-block"
+                  onClick={linkEvent(this, this.handleRemoveCommunity)}
                 >
-                  {i18n.t("restore")}
+                  {this.state.removeCommunityLoading ? (
+                    <Spinner />
+                  ) : (
+                    i18n.t("restore")
+                  )}
                 </button>
               )}
+              <button
+                className="btn btn-link text-muted d-inline-block"
+                onClick={linkEvent(this, this.handlePurgeCommunityShow)}
+                aria-label={i18n.t("purge_community")}
+              >
+                {i18n.t("purge_community")}
+              </button>
             </li>
           )}
         </ul>
         {this.state.showRemoveDialog && (
-          <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
-            <div class="form-group row">
-              <label class="col-form-label" htmlFor="remove-reason">
+          <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
+            <div className="input-group mb-3">
+              <label className="col-form-label" htmlFor="remove-reason">
                 {i18n.t("reason")}
               </label>
               <input
                 type="text"
                 id="remove-reason"
-                class="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("optional")}
                 value={this.state.removeReason}
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
               />
             </div>
             {/* TODO hold off on expires for now */}
-            {/* <div class="form-group row"> */}
+            {/* <div class="mb-3 row"> */}
             {/*   <label class="col-form-label">Expires</label> */}
-            {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+            {/*   <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
             {/* </div> */}
-            <div class="form-group row">
-              <button type="submit" class="btn btn-secondary">
-                {i18n.t("remove_community")}
+            <div className="input-group mb-3">
+              <button type="submit" className="btn btn-secondary">
+                {this.state.removeCommunityLoading ? (
+                  <Spinner />
+                ) : (
+                  i18n.t("remove_community")
+                )}
               </button>
             </div>
           </form>
         )}
+        {this.state.showPurgeDialog && (
+          <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
+            <div className="input-group mb-3">
+              <PurgeWarning />
+            </div>
+            <div className="input-group mb-3">
+              <label className="visually-hidden" htmlFor="purge-reason">
+                {i18n.t("reason")}
+              </label>
+              <input
+                type="text"
+                id="purge-reason"
+                className="form-control me-2"
+                placeholder={i18n.t("reason")}
+                value={this.state.purgeReason}
+                onInput={linkEvent(this, this.handlePurgeReasonChange)}
+              />
+            </div>
+            <div className="input-group mb-3">
+              {this.state.purgeCommunityLoading ? (
+                <Spinner />
+              ) : (
+                <button
+                  type="submit"
+                  className="btn btn-secondary"
+                  aria-label={i18n.t("purge_community")}
+                >
+                  {i18n.t("purge_community")}
+                </button>
+              )}
+            </div>
+          </form>
+        )}
       </>
     );
   }
 
   handleEditClick(i: Sidebar) {
-    i.state.showEdit = true;
-    i.setState(i.state);
+    i.setState({ showEdit: true });
   }
 
-  handleEditCommunity() {
-    this.state.showEdit = false;
-    this.setState(this.state);
+  handleEditCancel() {
+    this.setState({ showEdit: false });
   }
 
-  handleEditCancel() {
-    this.state.showEdit = false;
-    this.setState(this.state);
+  handleShowConfirmLeaveModTeamClick(i: Sidebar) {
+    i.setState({ showConfirmLeaveModTeam: true });
   }
 
-  handleDeleteClick(i: Sidebar, event: any) {
-    event.preventDefault();
-    let deleteForm: DeleteCommunity = {
-      community_id: i.props.community_view.community.id,
-      deleted: !i.props.community_view.community.deleted,
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
+  handleCancelLeaveModTeamClick(i: Sidebar) {
+    i.setState({ showConfirmLeaveModTeam: false });
   }
 
-  handleShowConfirmLeaveModTeamClick(i: Sidebar) {
-    i.state.showConfirmLeaveModTeam = true;
-    i.setState(i.state);
+  get canPost(): boolean {
+    return (
+      !this.props.community_view.community.posting_restricted_to_mods ||
+      amMod(this.props.moderators) ||
+      amAdmin()
+    );
   }
 
-  handleLeaveModTeamClick(i: Sidebar) {
-    let form: AddModToCommunity = {
-      person_id: UserService.Instance.myUserInfo.local_user_view.person.id,
-      community_id: i.props.community_view.community.id,
-      added: false,
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.addModToCommunity(form));
-    i.state.showConfirmLeaveModTeam = false;
-    i.setState(i.state);
+  handleModRemoveShow(i: Sidebar) {
+    i.setState({ showRemoveDialog: true });
   }
 
-  handleCancelLeaveModTeamClick(i: Sidebar) {
-    i.state.showConfirmLeaveModTeam = false;
-    i.setState(i.state);
+  handleModRemoveReasonChange(i: Sidebar, event: any) {
+    i.setState({ removeReason: event.target.value });
   }
 
-  handleUnsubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    let community_id = i.props.community_view.community.id;
-    let form: FollowCommunity = {
-      community_id,
-      follow: false,
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.followCommunity(form));
-
-    // Update myUserInfo
-    UserService.Instance.myUserInfo.follows =
-      UserService.Instance.myUserInfo.follows.filter(
-        i => i.community.id != community_id
-      );
+  handleModRemoveExpiresChange(i: Sidebar, event: any) {
+    i.setState({ removeExpires: event.target.value });
   }
 
-  handleSubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    let community_id = i.props.community_view.community.id;
-    let form: FollowCommunity = {
-      community_id,
-      follow: true,
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.followCommunity(form));
-
-    // Update myUserInfo
-    UserService.Instance.myUserInfo.follows.push({
-      community: i.props.community_view.community,
-      follower: UserService.Instance.myUserInfo.local_user_view.person,
-    });
+  handlePurgeCommunityShow(i: Sidebar) {
+    i.setState({ showPurgeDialog: true, showRemoveDialog: false });
   }
 
-  private get amTopMod(): boolean {
-    return (
-      this.props.moderators[0].moderator.id ==
-      UserService.Instance.myUserInfo.local_user_view.person.id
-    );
+  handlePurgeReasonChange(i: Sidebar, event: any) {
+    i.setState({ purgeReason: event.target.value });
   }
 
-  get canMod(): boolean {
-    return (
-      UserService.Instance.myUserInfo &&
-      this.props.moderators
-        .map(m => m.moderator.id)
-        .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
-    );
+  // TODO Do we need two of these?
+  handleUnfollowCommunity(i: Sidebar) {
+    i.setState({ followCommunityLoading: true });
+    i.props.onFollowCommunity({
+      community_id: i.props.community_view.community.id,
+      follow: false,
+      auth: myAuthRequired(),
+    });
   }
 
-  get canAdmin(): boolean {
-    return (
-      UserService.Instance.myUserInfo &&
-      this.props.admins
-        .map(a => a.person.id)
-        .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
-    );
+  handleFollowCommunity(i: Sidebar) {
+    i.setState({ followCommunityLoading: true });
+    i.props.onFollowCommunity({
+      community_id: i.props.community_view.community.id,
+      follow: true,
+      auth: myAuthRequired(),
+    });
   }
 
-  handleModRemoveShow(i: Sidebar) {
-    i.state.showRemoveDialog = true;
-    i.setState(i.state);
+  handleBlockCommunity(i: Sidebar) {
+    const { community, blocked } = i.props.community_view;
+
+    i.props.onBlockCommunity({
+      community_id: community.id,
+      block: !blocked,
+      auth: myAuthRequired(),
+    });
   }
 
-  handleModRemoveReasonChange(i: Sidebar, event: any) {
-    i.state.removeReason = event.target.value;
-    i.setState(i.state);
+  handleLeaveModTeam(i: Sidebar) {
+    const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
+    if (myId) {
+      i.setState({ leaveModTeamLoading: true });
+      i.props.onLeaveModTeam({
+        community_id: i.props.community_view.community.id,
+        person_id: 92,
+        added: false,
+        auth: myAuthRequired(),
+      });
+    }
   }
 
-  handleModRemoveExpiresChange(i: Sidebar, event: any) {
-    console.log(event.target.value);
-    i.state.removeExpires = event.target.value;
-    i.setState(i.state);
+  handleDeleteCommunity(i: Sidebar) {
+    i.setState({ deleteCommunityLoading: true });
+    i.props.onDeleteCommunity({
+      community_id: i.props.community_view.community.id,
+      deleted: !i.props.community_view.community.deleted,
+      auth: myAuthRequired(),
+    });
   }
 
-  handleModRemoveSubmit(i: Sidebar, event: any) {
+  handleRemoveCommunity(i: Sidebar, event: any) {
     event.preventDefault();
-    let removeForm: RemoveCommunity = {
+    i.setState({ removeCommunityLoading: true });
+    i.props.onRemoveCommunity({
       community_id: i.props.community_view.community.id,
       removed: !i.props.community_view.community.removed,
       reason: i.state.removeReason,
-      expires: getUnixTime(i.state.removeExpires),
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
+      expires: getUnixTime(i.state.removeExpires), // TODO fix this
+      auth: myAuthRequired(),
+    });
+  }
 
-    i.state.showRemoveDialog = false;
-    i.setState(i.state);
+  handlePurgeCommunity(i: Sidebar, event: any) {
+    event.preventDefault();
+    i.setState({ purgeCommunityLoading: true });
+    i.props.onPurgeCommunity({
+      community_id: i.props.community_view.community.id,
+      reason: i.state.purgeReason,
+      auth: myAuthRequired(),
+    });
   }
 }