Merge pull request #1670 from LemmyNet/bugfix/fix-subscribe-button-la…

…yout Make community sidebar "Subscribe"/"Joined"/"Pending" button consistent
LemmyNet · Jun 28, 2023 · 0e9faf7 · 0e9faf7
2 parents d5c45aa + 068e6eb
commit 0e9faf7
Showing 1 changed file with 39 additions and 32 deletions.
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
@@ -166,7 +166,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   communityTitle() {
     const community = this.props.community_view.community;
-    const subscribed = this.props.community_view.subscribed;
+
     return (
       <div>
         <h5 className="mb-0">
@@ -176,33 +176,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <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)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <Icon icon="check" classes="icon-inline text-success me-1" />
-                  {I18NextService.i18n.t("joined")}
-                </>
-              )}
-            </button>
-          )}
-          {subscribed === "Pending" && (
-            <button
-              className="btn btn-warning me-2"
-              onClick={linkEvent(this, this.handleUnfollowCommunity)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                I18NextService.i18n.t("subscribe_pending")
-              )}
-            </button>
-          )}
           {community.removed && (
             <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("removed")}
@@ -259,8 +232,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   subscribe() {
     const community_view = this.props.community_view;
-    return (
-      community_view.subscribed === "NotSubscribed" && (
+
+    if (community_view.subscribed === "NotSubscribed") {
+      return (
         <button
           className="btn btn-secondary d-block mb-2 w-100"
           onClick={linkEvent(this, this.handleFollowCommunity)}
@@ -271,8 +245,41 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             I18NextService.i18n.t("subscribe")
           )}
         </button>
-      )
-    );
+      );
+    }
+
+    if (community_view.subscribed === "Subscribed") {
+      return (
+        <button
+          className="btn btn-secondary d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Icon icon="check" classes="icon-inline text-success me-1" />
+              {I18NextService.i18n.t("joined")}
+            </>
+          )}
+        </button>
+      );
+    }
+
+    if (community_view.subscribed === "Pending") {
+      return (
+        <button
+          className="btn btn-warning d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            I18NextService.i18n.t("subscribe_pending")
+          )}
+        </button>
+      );
+    }
   }
 
   blockCommunity() {