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, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
   6 import { WebSocketService } from '../services';
   7 import { msgOp } from '../utils';
   8 import { i18n } from '../i18next';
   9 import { T } from 'inferno-i18next';
  10
  11 declare const Sortable: any;
  12
  13 interface CommunitiesState {
  14   communities: Array<Community>;
  15   page: number;
  16   loading: boolean;
  17 }
  18
  19 export class Communities extends Component<any, CommunitiesState> {
  20   private subscription: Subscription;
  21   private emptyState: CommunitiesState = {
  22     communities: [],
  23     loading: true,
  24     page: this.getPageFromProps(this.props),
  25   }
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29     this.state = this.emptyState;
  30     this.subscription = WebSocketService.Instance.subject
  31       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  32       .subscribe(
  33         (msg) => this.parseMessage(msg),
  34         (err) => console.error(err),
  35         () => console.log('complete')
  36       );
  37
  38     this.refetch();
  39
  40   }
  41
  42   getPageFromProps(props: any): number {
  43     return (props.match.params.page) ? Number(props.match.params.page) : 1;
  44   }
  45
  46   componentWillUnmount() {
  47     this.subscription.unsubscribe();
  48   }
  49
  50   componentDidMount() {
  51     document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`;
  52   }
  53
  54   // Necessary for back button for some reason
  55   componentWillReceiveProps(nextProps: any) {
  56     if (nextProps.history.action == 'POP') {
  57       this.state = this.emptyState;
  58       this.state.page = this.getPageFromProps(nextProps);
  59       this.refetch();
  60     }
  61   }
  62
  63   render() {
  64     return (
  65       <div class="container">
  66         {this.state.loading ?
  67         <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
  68         <div>
  69           <h5><T i18nKey="list_of_communities">#</T></h5>
  70           <div class="table-responsive">
  71             <table id="community_table" class="table table-sm table-hover">
  72               <thead class="pointer">
  73                 <tr>
  74                   <th><T i18nKey="name">#</T></th>
  75                   <th class="d-none d-lg-table-cell"><T i18nKey="title">#</T></th>
  76                   <th><T i18nKey="category">#</T></th>
  77                   <th class="text-right"><T i18nKey="subscribers">#</T></th>
  78                   <th class="text-right d-none d-lg-table-cell"><T i18nKey="posts">#</T></th>
  79                   <th class="text-right d-none d-lg-table-cell"><T i18nKey="comments">#</T></th>
  80                   <th></th>
  81                 </tr>
  82               </thead>
  83               <tbody>
  84                 {this.state.communities.map(community =>
  85                   <tr>
  86                     <td><Link to={`/c/${community.name}`}>{community.name}</Link></td>
  87                     <td class="d-none d-lg-table-cell">{community.title}</td>
  88                     <td>{community.category_name}</td>
  89                     <td class="text-right">{community.number_of_subscribers}</td>
  90                     <td class="text-right d-none d-lg-table-cell">{community.number_of_posts}</td>
  91                     <td class="text-right d-none d-lg-table-cell">{community.number_of_comments}</td>
  92                     <td class="text-right">
  93                       {community.subscribed ?
  94                       <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></span> :
  95                       <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></span>
  96                       }
  97                     </td>
  98                   </tr>
  99                 )}
 100               </tbody>
 101             </table>
 102           </div>
 103           {this.paginator()}
 104         </div>
 105         }
 106       </div>
 107     );
 108   }
 109
 110   paginator() {
 111     return (
 112       <div class="mt-2">
 113         {this.state.page > 1 &&
 114           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
 115         }
 116         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button>
 117       </div>
 118     );
 119   }
 120
 121   updateUrl() {
 122     this.props.history.push(`/communities/page/${this.state.page}`);
 123   }
 124
 125   nextPage(i: Communities) {
 126     i.state.page++;
 127     i.setState(i.state);
 128     i.updateUrl();
 129     i.refetch();
 130   }
 131
 132   prevPage(i: Communities) {
 133     i.state.page--;
 134     i.setState(i.state);
 135     i.updateUrl();
 136     i.refetch();
 137   }
 138
 139   handleUnsubscribe(communityId: number) {
 140     let form: FollowCommunityForm = {
 141       community_id: communityId,
 142       follow: false
 143     };
 144     WebSocketService.Instance.followCommunity(form);
 145   }
 146
 147   handleSubscribe(communityId: number) {
 148     let form: FollowCommunityForm = {
 149       community_id: communityId,
 150       follow: true
 151     };
 152     WebSocketService.Instance.followCommunity(form);
 153   }
 154
 155   refetch() {
 156     let listCommunitiesForm: ListCommunitiesForm = {
 157       sort: SortType[SortType.TopAll],
 158       limit: 100,
 159       page: this.state.page,
 160     }
 161
 162     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 163
 164   }
 165
 166   parseMessage(msg: any) {
 167     console.log(msg);
 168     let op: UserOperation = msgOp(msg);
 169     if (msg.error) {
 170       alert(i18n.t(msg.error));
 171       return;
 172     } else if (op == UserOperation.ListCommunities) {
 173       let res: ListCommunitiesResponse = msg;
 174       this.state.communities = res.communities;
 175       this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
 176       this.state.loading = false;
 177       window.scrollTo(0,0);
 178       this.setState(this.state);
 179       let table = document.querySelector('#community_table');
 180       Sortable.initTable(table);
 181     } else if (op == UserOperation.FollowCommunity) {
 182       let res: CommunityResponse = msg;
 183       let found = this.state.communities.find(c => c.id == res.community.id);
 184       found.subscribed = res.community.subscribed;
 185       found.number_of_subscribers = res.community.number_of_subscribers;
 186       this.setState(this.state);
 187     }
 188   }
 189 }