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