diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-04 23:26:38 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-04 23:26:38 -0700 |
commit | 2c66d86e2686c09e56d7b65ab679ce929d499478 (patch) | |
tree | 8d4f2fb0e95ba245a58b8730bb5fd89967e2e69c /ui/src/components | |
parent | 6a3bea1f50137993c74f8c38e417892929022234 (diff) |
Adding subscribe to communities.
- Adding subscribe. Fixes #12. Fixes #27.
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/communities.tsx | 31 | ||||
-rw-r--r-- | ui/src/components/community.tsx | 5 | ||||
-rw-r--r-- | ui/src/components/post.tsx | 5 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 25 |
4 files changed, 63 insertions, 3 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; } |