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 export class Communities extends Component<any, CommunitiesState> {
  31   private subscription: Subscription;
  32   private emptyState: CommunitiesState = {
  33     communities: [],
  34     loading: true,
  35     page: 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   componentWillUnmount() {
  54     this.subscription.unsubscribe();
  55   }
  56
  57   static getDerivedStateFromProps(props) {
  58     return {
  59       page: getPageFromProps(props),
  60     };
  61   }
  62
  63   componentDidUpdate(_, lastState) {
  64     if (lastState.page !== this.state.page) {
  65       this.setState({ loading: true });
  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(paramUpdates: { page: number }) {
 176     const page = paramUpdates.page || this.state.page;
 177     this.props.history.push(`/communities/page/${page}`);
 178   }
 179
 180   nextPage(i: Communities) {
 181     i.updateUrl({ page: i.state.page + 1 });
 182   }
 183
 184   prevPage(i: Communities) {
 185     i.updateUrl({ page: i.state.page - 1 });
 186   }
 187
 188   handleUnsubscribe(communityId: number) {
 189     let form: FollowCommunityForm = {
 190       community_id: communityId,
 191       follow: false,
 192     };
 193     WebSocketService.Instance.followCommunity(form);
 194   }
 195
 196   handleSubscribe(communityId: number) {
 197     let form: FollowCommunityForm = {
 198       community_id: communityId,
 199       follow: true,
 200     };
 201     WebSocketService.Instance.followCommunity(form);
 202   }
 203
 204   refetch() {
 205     let listCommunitiesForm: ListCommunitiesForm = {
 206       sort: SortType[SortType.TopAll],
 207       limit: communityLimit,
 208       page: this.state.page,
 209     };
 210
 211     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 212   }
 213
 214   parseMessage(msg: WebSocketJsonResponse) {
 215     console.log(msg);
 216     let res = wsJsonToRes(msg);
 217     if (msg.error) {
 218       toast(i18n.t(msg.error), 'danger');
 219       return;
 220     } else if (res.op == UserOperation.ListCommunities) {
 221       let data = res.data as ListCommunitiesResponse;
 222       this.state.communities = data.communities;
 223       this.state.communities.sort(
 224         (a, b) => b.number_of_subscribers - a.number_of_subscribers
 225       );
 226       this.state.loading = false;
 227       window.scrollTo(0, 0);
 228       this.setState(this.state);
 229       let table = document.querySelector('#community_table');
 230       Sortable.initTable(table);
 231     } else if (res.op == UserOperation.FollowCommunity) {
 232       let data = res.data as CommunityResponse;
 233       let found = this.state.communities.find(c => c.id == data.community.id);
 234       found.subscribed = data.community.subscribed;
 235       found.number_of_subscribers = data.community.number_of_subscribers;
 236       this.setState(this.state);
 237     } else if (res.op == UserOperation.GetSite) {
 238       let data = res.data as GetSiteResponse;
 239       document.title = `${i18n.t('communities')} - ${data.site.name}`;
 240     }
 241   }
 242 }