src/shared/components/communities.tsx

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