ui/src/components/communities.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { Subscription } from "rxjs";
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, ListCommunitiesResponse } from '../interfaces';
   6 import { WebSocketService, UserService } from '../services';
   7 import { msgOp, hotRank,mdToHtml } from '../utils';
   8
   9 interface CommunitiesState {
  10   communities: Array<Community>;
  11 }
  12
  13 export class Communities extends Component<any, CommunitiesState> {
  14   private subscription: Subscription;
  15   private emptyState: CommunitiesState = {
  16     communities: []
  17   }
  18
  19   constructor(props, context) {
  20     super(props, context);
  21     this.state = this.emptyState;
  22     this.subscription = WebSocketService.Instance.subject
  23       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  24       .subscribe(
  25         (msg) => this.parseMessage(msg),
  26         (err) => console.error(err),
  27         () => console.log('complete')
  28       );
  29     WebSocketService.Instance.listCommunities();
  30   }
  31
  32   render() {
  33     return (
  34       <div class="container-fluid">
  35         <div class="table-responsive">
  36           <table class="table table-sm table-hover" data-sortable>
  37             <thead>
  38               <tr>
  39                 <th>Name</th>
  40                 <th>Title</th>
  41                 <th>Category</th>
  42                 <th class="text-right">Subscribers</th>
  43                 <th class="text-right">Posts</th>
  44                 <th class="text-right">Comments</th>
  45               </tr>
  46             </thead>
  47             <tbody>
  48               {this.state.communities.map(community =>
  49                 <tr>
  50                   <td><Link to={`/community/${community.id}`}>{community.name}</Link></td>
  51                   <td>{community.title}</td>
  52                   <td>{community.category_name}</td>
  53                   <td class="text-right">{community.number_of_subscribers}</td>
  54                   <td class="text-right">{community.number_of_posts}</td>
  55                   <td class="text-right">{community.number_of_comments}</td>
  56                 </tr>
  57               )}
  58             </tbody>
  59           </table>
  60         </div>
  61       </div>
  62     );
  63   }
  64
  65
  66
  67   parseMessage(msg: any) {
  68     console.log(msg);
  69     let op: UserOperation = msgOp(msg);
  70     if (msg.error) {
  71       alert(msg.error);
  72       return;
  73     } else if (op == UserOperation.ListCommunities) {
  74       let res: ListCommunitiesResponse = msg;
  75       this.state.communities = res.communities;
  76       this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
  77       this.setState(this.state);
  78     }
  79   }
  80 }