1 files changed, 23 insertions, 2 deletions
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 3f11749c..ad3eeccc 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -1,6 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
-import { Community, CommunityUser } from '../interfaces';
+import { Community, CommunityUser, FollowCommunityForm } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { mdToHtml } from '../utils';
 import { CommunityForm } from './community-form';
@@ -61,7 +61,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <li className="list-inline-item badge badge-light">{community.number_of_posts} Posts</li>
           <li className="list-inline-item badge badge-light">{community.number_of_comments} Comments</li>
         </ul>
-        <div><button type="button" class="btn btn-secondary mb-2">Subscribe</button></div>
+        <div>
+          {community.subscribed 
+            ? <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleUnsubscribe)}>Unsubscribe</button>
+            : <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleSubscribe)}>Subscribe</button>
+          }
+        </div>
         {community.description && 
           <div>
             <hr />
@@ -96,6 +101,22 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   handleDeleteClick(i: Sidebar, event) {
   }
 
+  handleUnsubscribe(communityId: number) {
+    let form: FollowCommunityForm = {
+      community_id: communityId,
+      follow: false
+    };
+    WebSocketService.Instance.followCommunity(form);
+  }
+
+  handleSubscribe(communityId: number) {
+    let form: FollowCommunityForm = {
+      community_id: communityId,
+      follow: true
+    };
+    WebSocketService.Instance.followCommunity(form);
+  }
+
   private get amCreator(): boolean {
     return UserService.Instance.loggedIn && this.props.community.creator_id == UserService.Instance.user.id;
   }