Adding subscribe to communities.

- Adding subscribe. Fixes #12. Fixes #27.

6 files changed, 82 insertions, 7 deletions

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 80953aaa..e8158a36 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -2,7 +2,7 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, ListCommunitiesResponse } from '../interfaces';
+import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp, hotRank,mdToHtml } from '../utils';
 
@@ -29,6 +29,7 @@ export class Communities extends Component<any, CommunitiesState> {
         () => console.log('complete')
       );
     WebSocketService.Instance.listCommunities();
+
   }
 
   componentDidMount() {
@@ -50,6 +51,7 @@ export class Communities extends Component<any, CommunitiesState> {
                 <th class="text-right">Subscribers</th>
                 <th class="text-right">Posts</th>
                 <th class="text-right">Comments</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
@@ -61,6 +63,12 @@ export class Communities extends Component<any, CommunitiesState> {
                   <td class="text-right">{community.number_of_subscribers}</td>
                   <td class="text-right">{community.number_of_posts}</td>
                   <td class="text-right">{community.number_of_comments}</td>
+                  <td class="text-right">
+                    {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>
+                    }
+                  </td>
                 </tr>
               )}
             </tbody>
@@ -70,8 +78,23 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
+  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);
+  }
+
   parseMessage(msg: any) {
     console.log(msg);
     let op: UserOperation = msgOp(msg);
@@ -83,6 +106,12 @@ export class Communities extends Component<any, CommunitiesState> {
       this.state.communities = res.communities;
       this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
       this.setState(this.state);
+    } else if (op == UserOperation.FollowCommunity) {
+      let res: CommunityResponse = msg;
+      let found = this.state.communities.find(c => c.id == res.community.id);
+      found.subscribed = res.community.subscribed;
+      found.number_of_subscribers = res.community.number_of_subscribers;
+      this.setState(this.state);
     }
   }
 }
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index d5f75b45..726055ba 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -147,6 +147,11 @@ export class Community extends Component<any, State> {
       let res: CommunityResponse = msg;
       this.state.community = res.community;
       this.setState(this.state);
+    } else if (op == UserOperation.FollowCommunity) {
+      let res: CommunityResponse = msg;
+      this.state.community.subscribed = res.community.subscribed;
+      this.state.community.number_of_subscribers = res.community.number_of_subscribers;
+      this.setState(this.state);
     }
   }
 }
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 0075e9df..2a870c4d 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -229,6 +229,11 @@ export class Post extends Component<any, PostState> {
       this.state.post.community_id = res.community.id;
       this.state.post.community_name = res.community.name;
       this.setState(this.state);
+    } else if (op == UserOperation.FollowCommunity) {
+      let res: CommunityResponse = msg;
+      this.state.community.subscribed = res.community.subscribed;
+      this.state.community.number_of_subscribers = res.community.number_of_subscribers;
+      this.setState(this.state);
     }
 
   }
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;
   }
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 0505a398..f8007cba 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -1,5 +1,5 @@
 export enum UserOperation {
-  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity
+  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity
 }
 
 export interface User {
@@ -18,6 +18,8 @@ export interface CommunityUser {
 }
 
 export interface Community {
+  user_id?: number;
+  subscribed?: boolean;
   id: number;
   name: string;
   title: string;
@@ -171,6 +173,12 @@ export interface Category {
   name: string;
 }
 
+export interface FollowCommunityForm {
+  community_id: number;
+  follow: boolean;
+  auth?: string;
+}
+
 export interface LoginForm {
   username_or_email: string;
   password: string;
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index d89d0128..c8cc9557 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -1,5 +1,5 @@
 import { wsUri } from '../env';
-import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm } from '../interfaces';
+import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm } from '../interfaces';
 import { webSocket } from 'rxjs/webSocket';
 import { Subject } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
@@ -42,8 +42,14 @@ export class WebSocketService {
     this.subject.next(this.wsSendWrapper(UserOperation.EditCommunity, communityForm));
   }
 
+  public followCommunity(followCommunityForm: FollowCommunityForm) {
+    this.setAuth(followCommunityForm);
+    this.subject.next(this.wsSendWrapper(UserOperation.FollowCommunity, followCommunityForm));
+  }
+
   public listCommunities() {
-    this.subject.next(this.wsSendWrapper(UserOperation.ListCommunities, undefined));
+    let data = {auth: UserService.Instance.auth };
+    this.subject.next(this.wsSendWrapper(UserOperation.ListCommunities, data));
   }
 
   public listCategories() {
@@ -61,7 +67,8 @@ export class WebSocketService {
   }
 
   public getCommunity(communityId: number) {
-    this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, {id: communityId}));
+    let data = {id: communityId, auth: UserService.Instance.auth };
+    this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, data));
   }
 
   public createComment(commentForm: CommentForm) {