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, getPageFromProps } 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 interface CommunitiesProps {
  31   page: number;
  32 }
  33
  34 export class Communities extends Component<any, CommunitiesState> {
  35   private subscription: Subscription;
  36   private emptyState: CommunitiesState = {
  37     communities: [],
  38     loading: true,
  39     page: getPageFromProps(this.props),
  40   };
  41
  42   constructor(props: any, context: any) {
  43     super(props, context);
  44     this.state = this.emptyState;
  45     this.subscription = WebSocketService.Instance.subject
  46       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  47       .subscribe(
  48         msg => this.parseMessage(msg),
  49         err => console.error(err),
  50         () => console.log('complete')
  51       );
  52
  53     this.refetch();
  54     WebSocketService.Instance.getSite();
  55   }
  56
  57   componentWillUnmount() {
  58     this.subscription.unsubscribe();
  59   }
  60
  61   static getDerivedStateFromProps(props: any): CommunitiesProps {
  62     return {
  63       page: getPageFromProps(props),
  64     };
  65   }
  66
  67   componentDidUpdate(_: any, lastState: CommunitiesState) {
  68     if (lastState.page !== this.state.page) {
  69       this.setState({ loading: true });
  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                         <CommunityLink community={community} />
 108                       </td>
 109                       <td class="d-none d-lg-table-cell">{community.title}</td>
 110                       <td>{community.category_name}</td>
 111                       <td class="text-right">
 112                         {community.number_of_subscribers}
 113                       </td>
 114                       <td class="text-right d-none d-lg-table-cell">
 115                         {community.number_of_posts}
 116                       </td>
 117                       <td class="text-right d-none d-lg-table-cell">
 118                         {community.number_of_comments}
 119                       </td>
 120                       <td class="text-right">
 121                         {community.subscribed ? (
 122                           <span
 123                             class="pointer btn-link"
 124                             onClick={linkEvent(
 125                               community.id,
 126                               this.handleUnsubscribe
 127                             )}
 128                           >
 129                             {i18n.t('unsubscribe')}
 130                           </span>
 131                         ) : (
 132                           <span
 133                             class="pointer btn-link"
 134                             onClick={linkEvent(
 135                               community.id,
 136                               this.handleSubscribe
 137                             )}
 138                           >
 139                             {i18n.t('subscribe')}
 140                           </span>
 141                         )}
 142                       </td>
 143                     </tr>
 144                   ))}
 145                 </tbody>
 146               </table>
 147             </div>
 148             {this.paginator()}
 149           </div>
 150         )}
 151       </div>
 152     );
 153   }
 154
 155   paginator() {
 156     return (
 157       <div class="mt-2">
 158         {this.state.page > 1 && (
 159           <button
 160             class="btn btn-sm btn-secondary mr-1"
 161             onClick={linkEvent(this, this.prevPage)}
 162           >
 163             {i18n.t('prev')}
 164           </button>
 165         )}
 166
 167         {this.state.communities.length > 0 && (
 168           <button
 169             class="btn btn-sm btn-secondary"
 170             onClick={linkEvent(this, this.nextPage)}
 171           >
 172             {i18n.t('next')}
 173           </button>
 174         )}
 175       </div>
 176     );
 177   }
 178
 179   updateUrl(paramUpdates: CommunitiesProps) {
 180     const page = paramUpdates.page || this.state.page;
 181     this.props.history.push(`/communities/page/${page}`);
 182   }
 183
 184   nextPage(i: Communities) {
 185     i.updateUrl({ page: i.state.page + 1 });
 186   }
 187
 188   prevPage(i: Communities) {
 189     i.updateUrl({ page: i.state.page - 1 });
 190   }
 191
 192   handleUnsubscribe(communityId: number) {
 193     let form: FollowCommunityForm = {
 194       community_id: communityId,
 195       follow: false,
 196     };
 197     WebSocketService.Instance.followCommunity(form);
 198   }
 199
 200   handleSubscribe(communityId: number) {
 201     let form: FollowCommunityForm = {
 202       community_id: communityId,
 203       follow: true,
 204     };
 205     WebSocketService.Instance.followCommunity(form);
 206   }
 207
 208   refetch() {
 209     let listCommunitiesForm: ListCommunitiesForm = {
 210       sort: SortType[SortType.TopAll],
 211       limit: communityLimit,
 212       page: this.state.page,
 213     };
 214
 215     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 216   }
 217
 218   parseMessage(msg: WebSocketJsonResponse) {
 219     console.log(msg);
 220     let res = wsJsonToRes(msg);
 221     if (msg.error) {
 222       toast(i18n.t(msg.error), 'danger');
 223       return;
 224     } else if (res.op == UserOperation.ListCommunities) {
 225       let data = res.data as ListCommunitiesResponse;
 226       this.state.communities = data.communities;
 227       this.state.communities.sort(
 228         (a, b) => b.number_of_subscribers - a.number_of_subscribers
 229       );
 230       this.state.loading = false;
 231       window.scrollTo(0, 0);
 232       this.setState(this.state);
 233       let table = document.querySelector('#community_table');
 234       Sortable.initTable(table);
 235     } else if (res.op == UserOperation.FollowCommunity) {
 236       let data = res.data as CommunityResponse;
 237       let found = this.state.communities.find(c => c.id == data.community.id);
 238       found.subscribed = data.community.subscribed;
 239       found.number_of_subscribers = data.community.number_of_subscribers;
 240       this.setState(this.state);
 241     } else if (res.op == UserOperation.GetSite) {
 242       let data = res.data as GetSiteResponse;
 243       document.title = `${i18n.t('communities')} - ${data.site.name}`;
 244     }
 245   }
 246 }