diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-04 13:00:19 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-04 13:00:19 -0700 |
commit | d07a1b4563b829232040c9b1156a6598f493f469 (patch) | |
tree | 41ef81c91c558f8d7841f58ce53d0bfb745863e7 /ui/src/components/communities.tsx | |
parent | 927cb6d35637c886df019bcbf8f2434afe63ca80 (diff) |
Adding forum / community page
- Adding the page. Fixes #17.
- Adding number of comments for community.
- Add sorting to that table.
Diffstat (limited to 'ui/src/components/communities.tsx')
-rw-r--r-- | ui/src/components/communities.tsx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx new file mode 100644 index 00000000..411aebe1 --- /dev/null +++ b/ui/src/components/communities.tsx @@ -0,0 +1,80 @@ +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 { WebSocketService, UserService } from '../services'; +import { msgOp, hotRank,mdToHtml } from '../utils'; + +interface CommunitiesState { + communities: Array<Community>; +} + +export class Communities extends Component<any, CommunitiesState> { + private subscription: Subscription; + private emptyState: CommunitiesState = { + communities: [] + } + + constructor(props, context) { + super(props, context); + this.state = this.emptyState; + this.subscription = WebSocketService.Instance.subject + .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .subscribe( + (msg) => this.parseMessage(msg), + (err) => console.error(err), + () => console.log('complete') + ); + WebSocketService.Instance.listCommunities(); + } + + render() { + return ( + <div class="container-fluid"> + <div class="table-responsive"> + <table class="table table-sm table-hover" data-sortable> + <thead> + <tr> + <th>Name</th> + <th>Title</th> + <th>Category</th> + <th class="text-right">Subscribers</th> + <th class="text-right">Posts</th> + <th class="text-right">Comments</th> + </tr> + </thead> + <tbody> + {this.state.communities.map(community => + <tr> + <td><Link to={`/community/${community.id}`}>{community.name}</Link></td> + <td>{community.title}</td> + <td>{community.category_name}</td> + <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> + </tr> + )} + </tbody> + </table> + </div> + </div> + ); + } + + + + parseMessage(msg: any) { + console.log(msg); + let op: UserOperation = msgOp(msg); + if (msg.error) { + alert(msg.error); + return; + } else if (op == UserOperation.ListCommunities) { + let res: ListCommunitiesResponse = msg; + this.state.communities = res.communities; + this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers); + this.setState(this.state); + } + } +} |