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