]> 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 c723567789095b515368bf3a9241c63bc6ebe656..d5b54f02268d8cf8bf6505f5d1883c31c54a91d5 100644 (file)
@@ -1,5 +1,5 @@
-import { None, Option, Some } from "@sniptt/monads";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
   AddModToCommunity,
@@ -7,25 +7,25 @@ import {
   CommunityModeratorView,
   CommunityView,
   DeleteCommunity,
+  EditCommunity,
   FollowCommunity,
-  PersonViewSafe,
+  Language,
+  PersonView,
   PurgeCommunity,
   RemoveCommunity,
-  SubscribedType,
-  toUndefined,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
 import {
   amAdmin,
   amMod,
   amTopMod,
-  auth,
   getUnixTime,
+  hostname,
   mdToHtml,
-  numToSI,
-  wsClient,
+  myAuthRequired,
 } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
@@ -35,51 +35,90 @@ import { PersonListing } from "../person/person-listing";
 interface SidebarProps {
   community_view: CommunityView;
   moderators: CommunityModeratorView[];
-  admins: PersonViewSafe[];
-  online: number;
+  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: Option<string>;
-  removeExpires: Option<string>;
+  removeReason?: string;
+  removeExpires?: string;
   showEdit: boolean;
   showRemoveDialog: boolean;
   showPurgeDialog: boolean;
-  purgeReason: Option<string>;
-  purgeLoading: 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: None,
-    removeExpires: None,
     showPurgeDialog: false,
-    purgeReason: None,
-    purgeLoading: 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={Some(this.props.community_view)}
-            onEdit={this.handleEditCommunity}
+            community_view={this.props.community_view}
+            allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
+            communityLanguages={this.props.communityLanguages}
+            onUpsertCommunity={this.props.onEditCommunity}
             onCancel={this.handleEditCancel}
             enableNsfw={this.props.enableNsfw}
           />
@@ -89,67 +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 className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.communityTitle()}
-            {this.adminButtons()}
-            {this.subscribe()}
-            {this.canPost && this.createPost()}
-            {this.blockCommunity()}
-          </div>
-        </div>
-        <div className="card border-secondary mb-3">
-          <div className="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 className="mr-2">{community.title}</span>
-          {subscribed == SubscribedType.Subscribed && (
+          <span className="me-2">
+            <CommunityLink community={community} hideAvatar />
+          </span>
+          {subscribed === "Subscribed" && (
             <button
-              className="btn btn-secondary btn-sm mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              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")}
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                <>
+                  <Icon icon="check" classes="icon-inline text-success me-1" />
+                  {i18n.t("joined")}
+                </>
+              )}
             </button>
           )}
-          {subscribed == SubscribedType.Pending && (
+          {subscribed === "Pending" && (
             <button
-              className="btn btn-warning mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              className="btn btn-warning me-2"
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
-              {i18n.t("subscribe_pending")}
+              {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>
           )}
@@ -165,99 +236,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  badges() {
-    let community_view = this.props.community_view;
-    let counts = community_view.counts;
-    return (
-      <ul className="my-1 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: this.props.online,
-            formattedCount: numToSI(this.props.online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: counts.users_active_day,
-            formattedCount: counts.users_active_day,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_day,
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: counts.users_active_week,
-            formattedCount: counts.users_active_week,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_week,
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: counts.users_active_month,
-            formattedCount: counts.users_active_month,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_month,
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: counts.users_active_half_year,
-            formattedCount: counts.users_active_half_year,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_half_year,
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_subscribers", {
-            count: counts.subscribers,
-            formattedCount: numToSI(counts.subscribers),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: counts.posts,
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: counts.comments,
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link
-            className="badge badge-primary"
-            to={`/modlog/community/${this.props.community_view.community.id}`}
-          >
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   mods() {
     return (
       <ul className="list-inline small">
@@ -272,13 +250,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   createPost() {
-    let cv = this.props.community_view;
+    const cv = this.props.community_view;
     return (
       <Link
-        className={`btn btn-secondary btn-block mb-2 ${
+        className={`btn btn-secondary d-block mb-2 w-100 ${
           cv.community.deleted || cv.community.removed ? "no-click" : ""
         }`}
-        to={`/create_post?community_id=${cv.community.id}`}
+        to={`/create_post?communityId=${cv.community.id}`}
       >
         {i18n.t("create_a_post")}
       </Link>
@@ -286,63 +264,57 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   subscribe() {
-    let community_view = this.props.community_view;
+    const community_view = this.props.community_view;
     return (
-      <div className="mb-2">
-        {community_view.subscribed == SubscribedType.NotSubscribed && (
+      <>
+        {community_view.subscribed == "NotSubscribed" && (
           <button
-            className="btn btn-secondary btn-block"
-            onClick={linkEvent(this, this.handleSubscribe)}
+            className="btn btn-secondary d-block mb-2 w-100"
+            onClick={linkEvent(this, this.handleFollowCommunity)}
           >
-            {i18n.t("subscribe")}
+            {this.state.followCommunityLoading ? (
+              <Spinner />
+            ) : (
+              i18n.t("subscribe")
+            )}
           </button>
         )}
-      </div>
+      </>
     );
   }
 
   blockCommunity() {
-    let community_view = this.props.community_view;
-    let blocked = this.props.community_view.blocked;
+    const { subscribed, blocked } = this.props.community_view;
 
     return (
-      <div className="mb-2">
-        {community_view.subscribed == SubscribedType.NotSubscribed &&
-          (blocked ? (
-            <button
-              className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleUnblock)}
-            >
-              {i18n.t("unblock_community")}
-            </button>
-          ) : (
-            <button
-              className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlock)}
-            >
-              {i18n.t("block_community")}
-            </button>
-          ))}
-      </div>
+      <>
+        {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;
-    return description.match({
-      some: desc => (
+    const desc = this.props.community_view.community.description;
+    return (
+      desc && (
         <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
-      ),
-      none: <></>,
-    });
+      )
+    );
   }
 
   adminButtons() {
-    let community_view = this.props.community_view;
+    const community_view = this.props.community_view;
     return (
       <>
         <ul className="list-inline mb-1 text-muted font-weight-bold">
-          {amMod(Some(this.props.moderators)) && (
+          {amMod(this.props.moderators) && (
             <>
               <li className="list-inline-item-action">
                 <button
@@ -354,7 +326,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   <Icon icon="edit" classes="icon-inline" />
                 </button>
               </li>
-              {!amTopMod(Some(this.props.moderators)) &&
+              {!amTopMod(this.props.moderators) &&
                 (!this.state.showConfirmLeaveModTeam ? (
                   <li className="list-inline-item-action">
                     <button
@@ -375,7 +347,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     <li className="list-inline-item-action">
                       <button
                         className="btn btn-link text-muted d-inline-block"
-                        onClick={linkEvent(this, this.handleLeaveModTeamClick)}
+                        onClick={linkEvent(this, this.handleLeaveModTeam)}
                       >
                         {i18n.t("yes")}
                       </button>
@@ -393,11 +365,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     </li>
                   </>
                 ))}
-              {amTopMod(Some(this.props.moderators)) && (
+              {amTopMod(this.props.moderators) && (
                 <li className="list-inline-item-action">
                   <button
                     className="btn btn-link text-muted d-inline-block"
-                    onClick={linkEvent(this, this.handleDeleteClick)}
+                    onClick={linkEvent(this, this.handleDeleteCommunity)}
                     data-tippy-content={
                       !community_view.community.deleted
                         ? i18n.t("delete")
@@ -409,18 +381,22 @@ 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>
               )}
             </>
           )}
-          {amAdmin(Some(this.props.admins)) && (
+          {amAdmin() && (
             <li className="list-inline-item">
               {!this.props.community_view.community.removed ? (
                 <button
@@ -432,9 +408,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               ) : (
                 <button
                   className="btn btn-link text-muted d-inline-block"
-                  onClick={linkEvent(this, this.handleModRemoveSubmit)}
+                  onClick={linkEvent(this, this.handleRemoveCommunity)}
                 >
-                  {i18n.t("restore")}
+                  {this.state.removeCommunityLoading ? (
+                    <Spinner />
+                  ) : (
+                    i18n.t("restore")
+                  )}
                 </button>
               )}
               <button
@@ -448,52 +428,56 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
         </ul>
         {this.state.showRemoveDialog && (
-          <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
-            <div className="form-group">
+          <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"
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("optional")}
-                value={toUndefined(this.state.removeReason)}
+                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 className="form-group">
+            <div className="input-group mb-3">
               <button type="submit" className="btn btn-secondary">
-                {i18n.t("remove_community")}
+                {this.state.removeCommunityLoading ? (
+                  <Spinner />
+                ) : (
+                  i18n.t("remove_community")
+                )}
               </button>
             </div>
           </form>
         )}
         {this.state.showPurgeDialog && (
-          <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
-            <div className="form-group">
+          <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
+            <div className="input-group mb-3">
               <PurgeWarning />
             </div>
-            <div className="form-group">
-              <label className="sr-only" htmlFor="purge-reason">
+            <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 mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("reason")}
-                value={toUndefined(this.state.purgeReason)}
+                value={this.state.purgeReason}
                 onInput={linkEvent(this, this.handlePurgeReasonChange)}
               />
             </div>
-            <div className="form-group">
-              {this.state.purgeLoading ? (
+            <div className="input-group mb-3">
+              {this.state.purgeCommunityLoading ? (
                 <Spinner />
               ) : (
                 <button
@@ -515,92 +499,23 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState({ showEdit: true });
   }
 
-  handleEditCommunity() {
-    this.setState({ showEdit: false });
-  }
-
   handleEditCancel() {
     this.setState({ showEdit: false });
   }
 
-  handleDeleteClick(i: Sidebar, event: any) {
-    event.preventDefault();
-    let deleteForm = new DeleteCommunity({
-      community_id: i.props.community_view.community.id,
-      deleted: !i.props.community_view.community.deleted,
-      auth: auth().unwrap(),
-    });
-    WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
-  }
-
   handleShowConfirmLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: true });
   }
 
-  handleLeaveModTeamClick(i: Sidebar) {
-    UserService.Instance.myUserInfo.match({
-      some: mui => {
-        let form = new AddModToCommunity({
-          person_id: mui.local_user_view.person.id,
-          community_id: i.props.community_view.community.id,
-          added: false,
-          auth: auth().unwrap(),
-        });
-        WebSocketService.Instance.send(wsClient.addModToCommunity(form));
-        i.setState({ showConfirmLeaveModTeam: false });
-      },
-      none: void 0,
-    });
-  }
-
   handleCancelLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: false });
   }
 
-  handleUnsubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    let community_id = i.props.community_view.community.id;
-    let form = new FollowCommunity({
-      community_id,
-      follow: false,
-      auth: auth().unwrap(),
-    });
-    WebSocketService.Instance.send(wsClient.followCommunity(form));
-
-    // Update myUserInfo
-    UserService.Instance.myUserInfo.match({
-      some: mui =>
-        (mui.follows = mui.follows.filter(i => i.community.id != community_id)),
-      none: void 0,
-    });
-  }
-
-  handleSubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    let community_id = i.props.community_view.community.id;
-    let form = new FollowCommunity({
-      community_id,
-      follow: true,
-      auth: auth().unwrap(),
-    });
-    WebSocketService.Instance.send(wsClient.followCommunity(form));
-
-    // Update myUserInfo
-    UserService.Instance.myUserInfo.match({
-      some: mui =>
-        mui.follows.push({
-          community: i.props.community_view.community,
-          follower: mui.local_user_view.person,
-        }),
-      none: void 0,
-    });
-  }
-
   get canPost(): boolean {
     return (
       !this.props.community_view.community.posting_restricted_to_mods ||
-      amMod(Some(this.props.moderators)) ||
-      amAdmin(Some(this.props.admins))
+      amMod(this.props.moderators) ||
+      amAdmin()
     );
   }
 
@@ -609,25 +524,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   handleModRemoveReasonChange(i: Sidebar, event: any) {
-    i.setState({ removeReason: Some(event.target.value) });
+    i.setState({ removeReason: event.target.value });
   }
 
   handleModRemoveExpiresChange(i: Sidebar, event: any) {
-    i.setState({ removeExpires: Some(event.target.value) });
-  }
-
-  handleModRemoveSubmit(i: Sidebar, event: any) {
-    event.preventDefault();
-    let removeForm = new RemoveCommunity({
-      community_id: i.props.community_view.community.id,
-      removed: !i.props.community_view.community.removed,
-      reason: i.state.removeReason,
-      expires: i.state.removeExpires.map(getUnixTime),
-      auth: auth().unwrap(),
-    });
-    WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
-
-    i.setState({ showRemoveDialog: false });
+    i.setState({ removeExpires: event.target.value });
   }
 
   handlePurgeCommunityShow(i: Sidebar) {
@@ -635,39 +536,79 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   handlePurgeReasonChange(i: Sidebar, event: any) {
-    i.setState({ purgeReason: Some(event.target.value) });
+    i.setState({ purgeReason: event.target.value });
   }
 
-  handlePurgeSubmit(i: Sidebar, event: any) {
-    event.preventDefault();
+  // 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(),
+    });
+  }
 
-    let form = new PurgeCommunity({
+  handleFollowCommunity(i: Sidebar) {
+    i.setState({ followCommunityLoading: true });
+    i.props.onFollowCommunity({
       community_id: i.props.community_view.community.id,
-      reason: i.state.purgeReason,
-      auth: auth().unwrap(),
+      follow: true,
+      auth: myAuthRequired(),
+    });
+  }
+
+  handleBlockCommunity(i: Sidebar) {
+    const { community, blocked } = i.props.community_view;
+
+    i.props.onBlockCommunity({
+      community_id: community.id,
+      block: !blocked,
+      auth: myAuthRequired(),
     });
-    WebSocketService.Instance.send(wsClient.purgeCommunity(form));
+  }
+
+  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(),
+      });
+    }
+  }
 
-    i.setState({ purgeLoading: true });
+  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(),
+    });
   }
 
-  handleBlock(i: Sidebar, event: any) {
+  handleRemoveCommunity(i: Sidebar, event: any) {
     event.preventDefault();
-    let blockCommunityForm = new BlockCommunity({
+    i.setState({ removeCommunityLoading: true });
+    i.props.onRemoveCommunity({
       community_id: i.props.community_view.community.id,
-      block: true,
-      auth: auth().unwrap(),
+      removed: !i.props.community_view.community.removed,
+      reason: i.state.removeReason,
+      expires: getUnixTime(i.state.removeExpires), // TODO fix this
+      auth: myAuthRequired(),
     });
-    WebSocketService.Instance.send(wsClient.blockCommunity(blockCommunityForm));
   }
 
-  handleUnblock(i: Sidebar, event: any) {
+  handlePurgeCommunity(i: Sidebar, event: any) {
     event.preventDefault();
-    let blockCommunityForm = new BlockCommunity({
+    i.setState({ purgeCommunityLoading: true });
+    i.props.onPurgeCommunity({
       community_id: i.props.community_view.community.id,
-      block: false,
-      auth: auth().unwrap(),
+      reason: i.state.purgeReason,
+      auth: myAuthRequired(),
     });
-    WebSocketService.Instance.send(wsClient.blockCommunity(blockCommunityForm));
   }
 }