X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fcommunity%2Fsidebar.tsx;h=a5c620f3b4b5704e8763a4d549af8fbd97c877d8;hb=2b1af707c3df6126b3e6890106c03c60ad49b1be;hp=d592571c5a83604edfcd9581295e4efeeaa7fc40;hpb=f61037f5d89f12818c8100f907a98b74e980112a;p=lemmy-ui.git

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index d592571..a5c620f 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -1,4 +1,4 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
   AddModToCommunity,
@@ -6,6 +6,7 @@ import {
   CommunityModeratorView,
   CommunityView,
   DeleteCommunity,
+  EditCommunity,
   FollowCommunity,
   Language,
   PersonView,
@@ -13,7 +14,7 @@ import {
   RemoveCommunity,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
 import {
   amAdmin,
   amMod,
@@ -21,9 +22,8 @@ import {
   getUnixTime,
   hostname,
   mdToHtml,
-  myAuth,
+  myAuthRequired,
   numToSI,
-  wsClient,
 } from "../../utils";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -42,6 +42,13 @@ interface SidebarProps {
   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 {
@@ -51,8 +58,13 @@ interface SidebarState {
   showRemoveDialog: boolean;
   showPurgeDialog: boolean;
   purgeReason?: string;
-  purgeLoading: boolean;
   showConfirmLeaveModTeam: boolean;
+  deleteCommunityLoading: boolean;
+  removeCommunityLoading: boolean;
+  leaveModTeamLoading: boolean;
+  followCommunityLoading: boolean;
+  blockCommunityLoading: boolean;
+  purgeCommunityLoading: boolean;
 }
 
 export class Sidebar extends Component<SidebarProps, SidebarState> {
@@ -60,16 +72,44 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     showEdit: false,
     showRemoveDialog: false,
     showPurgeDialog: false,
-    purgeLoading: false,
     showConfirmLeaveModTeam: false,
+    deleteCommunityLoading: false,
+    removeCommunityLoading: false,
+    leaveModTeamLoading: false,
+    followCommunityLoading: false,
+    blockCommunityLoading: false,
+    purgeCommunityLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    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,
+        blockCommunityLoading: false,
+        purgeCommunityLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
       <div>
@@ -81,7 +121,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             communityLanguages={this.props.communityLanguages}
-            onEdit={this.handleEditCommunity}
+            onUpsertCommunity={this.props.onEditCommunity}
             onCancel={this.handleEditCancel}
             enableNsfw={this.props.enableNsfw}
           />
@@ -138,18 +178,28 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {subscribed === "Subscribed" && (
             <button
               className="btn btn-secondary btn-sm mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              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 mr-1" />
+                  {i18n.t("joined")}
+                </>
+              )}
             </button>
           )}
           {subscribed === "Pending" && (
             <button
               className="btn btn-warning mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
-              {i18n.t("subscribe_pending")}
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("subscribe_pending")
+              )}
             </button>
           )}
           {community.removed && (
@@ -306,9 +356,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         {community_view.subscribed == "NotSubscribed" && (
           <button
             className="btn btn-secondary btn-block"
-            onClick={linkEvent(this, this.handleSubscribe)}
+            onClick={linkEvent(this, this.handleFollowCommunity)}
           >
-            {i18n.t("subscribe")}
+            {this.state.followCommunityLoading ? (
+              <Spinner />
+            ) : (
+              i18n.t("subscribe")
+            )}
           </button>
         )}
       </div>
@@ -325,16 +379,24 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           (blocked ? (
             <button
               className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleUnblock)}
+              onClick={linkEvent(this, this.handleBlockCommunity)}
             >
-              {i18n.t("unblock_community")}
+              {this.state.blockCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("unblock_community")
+              )}
             </button>
           ) : (
             <button
               className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlock)}
+              onClick={linkEvent(this, this.handleBlockCommunity)}
             >
-              {i18n.t("block_community")}
+              {this.state.blockCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("block_community")
+              )}
             </button>
           ))}
       </div>
@@ -388,7 +450,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>
@@ -410,7 +472,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.handleDeleteClick)}
+                    onClick={linkEvent(this, this.handleDeleteCommunity)}
                     data-tippy-content={
                       !community_view.community.deleted
                         ? i18n.t("delete")
@@ -422,12 +484,16 @@ 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>
               )}
@@ -445,9 +511,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
@@ -461,7 +531,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
         </ul>
         {this.state.showRemoveDialog && (
-          <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
+          <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
             <div className="form-group">
               <label className="col-form-label" htmlFor="remove-reason">
                 {i18n.t("reason")}
@@ -482,13 +552,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {/* </div> */}
             <div className="form-group">
               <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)}>
+          <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
             <div className="form-group">
               <PurgeWarning />
             </div>
@@ -506,7 +580,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               />
             </div>
             <div className="form-group">
-              {this.state.purgeLoading ? (
+              {this.state.purgeCommunityLoading ? (
                 <Spinner />
               ) : (
                 <button
@@ -528,93 +602,18 @@ 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();
-    const auth = myAuth();
-    if (auth) {
-      const deleteForm: DeleteCommunity = {
-        community_id: i.props.community_view.community.id,
-        deleted: !i.props.community_view.community.deleted,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
-    }
-  }
-
   handleShowConfirmLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: true });
   }
 
-  handleLeaveModTeamClick(i: Sidebar) {
-    const mui = UserService.Instance.myUserInfo;
-    const auth = myAuth();
-    if (auth && mui) {
-      const form: AddModToCommunity = {
-        person_id: mui.local_user_view.person.id,
-        community_id: i.props.community_view.community.id,
-        added: false,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.addModToCommunity(form));
-      i.setState({ showConfirmLeaveModTeam: false });
-    }
-  }
-
   handleCancelLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: false });
   }
 
-  handleUnsubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    const community_id = i.props.community_view.community.id;
-    const auth = myAuth();
-    if (auth) {
-      const form: FollowCommunity = {
-        community_id,
-        follow: false,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.followCommunity(form));
-    }
-
-    // Update myUserInfo
-    const mui = UserService.Instance.myUserInfo;
-    if (mui) {
-      mui.follows = mui.follows.filter(i => i.community.id != community_id);
-    }
-  }
-
-  handleSubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    const community_id = i.props.community_view.community.id;
-    const auth = myAuth();
-    if (auth) {
-      const form: FollowCommunity = {
-        community_id,
-        follow: true,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.followCommunity(form));
-    }
-
-    // Update myUserInfo
-    const mui = UserService.Instance.myUserInfo;
-    if (mui) {
-      mui.follows.push({
-        community: i.props.community_view.community,
-        follower: mui.local_user_view.person,
-      });
-    }
-  }
-
   get canPost(): boolean {
     return (
       !this.props.community_view.community.posting_restricted_to_mods ||
@@ -635,23 +634,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState({ removeExpires: event.target.value });
   }
 
-  handleModRemoveSubmit(i: Sidebar, event: any) {
-    event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const removeForm: RemoveCommunity = {
-        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,
-      };
-      WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
-
-      i.setState({ showRemoveDialog: false });
-    }
-  }
-
   handlePurgeCommunityShow(i: Sidebar) {
     i.setState({ showPurgeDialog: true, showRemoveDialog: false });
   }
@@ -660,48 +642,75 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     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(),
+    });
+  }
+
+  handleFollowCommunity(i: Sidebar) {
+    i.setState({ followCommunityLoading: true });
+    i.props.onFollowCommunity({
+      community_id: i.props.community_view.community.id,
+      follow: true,
+      auth: myAuthRequired(),
+    });
+  }
+
+  handleBlockCommunity(i: Sidebar) {
+    i.setState({ blockCommunityLoading: true });
+    i.props.onBlockCommunity({
+      community_id: 0,
+      block: !i.props.community_view.blocked,
+      auth: myAuthRequired(),
+    });
+  }
 
-    const auth = myAuth();
-    if (auth) {
-      const form: PurgeCommunity = {
+  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,
-        reason: i.state.purgeReason,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.purgeCommunity(form));
-      i.setState({ purgeLoading: true });
+        person_id: 92,
+        added: false,
+        auth: myAuthRequired(),
+      });
     }
   }
 
-  handleBlock(i: Sidebar, event: any) {
+  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(),
+    });
+  }
+
+  handleRemoveCommunity(i: Sidebar, event: any) {
     event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const blockCommunityForm: BlockCommunity = {
-        community_id: i.props.community_view.community.id,
-        block: true,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
-    }
+    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), // TODO fix this
+      auth: myAuthRequired(),
+    });
   }
 
-  handleUnblock(i: Sidebar, event: any) {
+  handlePurgeCommunity(i: Sidebar, event: any) {
     event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const blockCommunityForm: BlockCommunity = {
-        community_id: i.props.community_view.community.id,
-        block: false,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
-    }
+    i.setState({ purgeCommunityLoading: true });
+    i.props.onPurgeCommunity({
+      community_id: i.props.community_view.community.id,
+      reason: i.state.purgeReason,
+      auth: myAuthRequired(),
+    });
   }
 }