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