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