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         <h4>Communities</h4>
  36         <div class="table-responsive">
  37           <table class="table table-sm table-hover" data-sortable>
  38             <thead>
  39               <tr>
  40                 <th>Name</th>
  41                 <th>Title</th>
  42                 <th>Category</th>
  43                 <th class="text-right">Subscribers</th>
  44                 <th class="text-right">Posts</th>
  45                 <th class="text-right">Comments</th>
  46               </tr>
  47             </thead>
  48             <tbody>
  49               {this.state.communities.map(community =>
  50                 <tr>
  51                   <td><Link to={`/community/${community.id}`}>{community.name}</Link></td>
  52                   <td>{community.title}</td>
  53                   <td>{community.category_name}</td>
  54                   <td class="text-right">{community.number_of_subscribers}</td>
  55                   <td class="text-right">{community.number_of_posts}</td>
  56                   <td class="text-right">{community.number_of_comments}</td>
  57                 </tr>
  58               )}
  59             </tbody>
  60           </table>
  61         </div>
  62       </div>
  63     );
  64   }
  65
  66
  67
  68   parseMessage(msg: any) {
  69     console.log(msg);
  70     let op: UserOperation = msgOp(msg);
  71     if (msg.error) {
  72       alert(msg.error);
  73       return;
  74     } else if (op == UserOperation.ListCommunities) {
  75       let res: ListCommunitiesResponse = msg;
  76       this.state.communities = res.communities;
  77       this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
  78       this.setState(this.state);
  79     }
  80   }
  81 }