ui/src/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 '../interfaces';
  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: Array<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 class="d-none d-lg-table-cell">{i18n.t('title')}</th>
 105                     <th>{i18n.t('category')}</th>
 106                     <th class="text-right">{i18n.t('subscribers')}</th>
 107                     <th class="text-right d-none d-lg-table-cell">
 108                       {i18n.t('posts')}
 109                     </th>
 110                     <th class="text-right d-none d-lg-table-cell">
 111                       {i18n.t('comments')}
 112                     </th>
 113                     <th></th>
 114                   </tr>
 115                 </thead>
 116                 <tbody>
 117                   {this.state.communities.map(community => (
 118                     <tr>
 119                       <td>
 120                         <CommunityLink community={community} />
 121                       </td>
 122                       <td class="d-none d-lg-table-cell">{community.title}</td>
 123                       <td>{community.category_name}</td>
 124                       <td class="text-right">
 125                         {community.number_of_subscribers}
 126                       </td>
 127                       <td class="text-right d-none d-lg-table-cell">
 128                         {community.number_of_posts}
 129                       </td>
 130                       <td class="text-right d-none d-lg-table-cell">
 131                         {community.number_of_comments}
 132                       </td>
 133                       <td class="text-right">
 134                         {community.subscribed ? (
 135                           <span
 136                             class="pointer btn-link"
 137                             onClick={linkEvent(
 138                               community.id,
 139                               this.handleUnsubscribe
 140                             )}
 141                           >
 142                             {i18n.t('unsubscribe')}
 143                           </span>
 144                         ) : (
 145                           <span
 146                             class="pointer btn-link"
 147                             onClick={linkEvent(
 148                               community.id,
 149                               this.handleSubscribe
 150                             )}
 151                           >
 152                             {i18n.t('subscribe')}
 153                           </span>
 154                         )}
 155                       </td>
 156                     </tr>
 157                   ))}
 158                 </tbody>
 159               </table>
 160             </div>
 161             {this.paginator()}
 162           </div>
 163         )}
 164       </div>
 165     );
 166   }
 167
 168   paginator() {
 169     return (
 170       <div class="mt-2">
 171         {this.state.page > 1 && (
 172           <button
 173             class="btn btn-secondary mr-1"
 174             onClick={linkEvent(this, this.prevPage)}
 175           >
 176             {i18n.t('prev')}
 177           </button>
 178         )}
 179
 180         {this.state.communities.length > 0 && (
 181           <button
 182             class="btn btn-secondary"
 183             onClick={linkEvent(this, this.nextPage)}
 184           >
 185             {i18n.t('next')}
 186           </button>
 187         )}
 188       </div>
 189     );
 190   }
 191
 192   updateUrl(paramUpdates: CommunitiesProps) {
 193     const page = paramUpdates.page || this.state.page;
 194     this.props.history.push(`/communities/page/${page}`);
 195   }
 196
 197   nextPage(i: Communities) {
 198     i.updateUrl({ page: i.state.page + 1 });
 199   }
 200
 201   prevPage(i: Communities) {
 202     i.updateUrl({ page: i.state.page - 1 });
 203   }
 204
 205   handleUnsubscribe(communityId: number) {
 206     let form: FollowCommunityForm = {
 207       community_id: communityId,
 208       follow: false,
 209     };
 210     WebSocketService.Instance.followCommunity(form);
 211   }
 212
 213   handleSubscribe(communityId: number) {
 214     let form: FollowCommunityForm = {
 215       community_id: communityId,
 216       follow: true,
 217     };
 218     WebSocketService.Instance.followCommunity(form);
 219   }
 220
 221   refetch() {
 222     let listCommunitiesForm: ListCommunitiesForm = {
 223       sort: SortType[SortType.TopAll],
 224       limit: communityLimit,
 225       page: this.state.page,
 226     };
 227
 228     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 229   }
 230
 231   parseMessage(msg: WebSocketJsonResponse) {
 232     console.log(msg);
 233     let res = wsJsonToRes(msg);
 234     if (msg.error) {
 235       toast(i18n.t(msg.error), 'danger');
 236       return;
 237     } else if (res.op == UserOperation.ListCommunities) {
 238       let data = res.data as ListCommunitiesResponse;
 239       this.state.communities = data.communities;
 240       this.state.communities.sort(
 241         (a, b) => b.number_of_subscribers - a.number_of_subscribers
 242       );
 243       this.state.loading = false;
 244       window.scrollTo(0, 0);
 245       this.setState(this.state);
 246       let table = document.querySelector('#community_table');
 247       Sortable.initTable(table);
 248     } else if (res.op == UserOperation.FollowCommunity) {
 249       let data = res.data as CommunityResponse;
 250       let found = this.state.communities.find(c => c.id == data.community.id);
 251       found.subscribed = data.community.subscribed;
 252       found.number_of_subscribers = data.community.number_of_subscribers;
 253       this.setState(this.state);
 254     } else if (res.op == UserOperation.GetSite) {
 255       let data = res.data as GetSiteResponse;
 256       this.state.site = data.site;
 257       this.setState(this.state);
 258     }
 259   }
 260 }