ui/src/components/communities.tsx

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