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 { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
   6 import { WebSocketService } from '../services';
   7 import { msgOp } from '../utils';
   8
   9 declare const Sortable: any;
  10
  11 interface CommunitiesState {
  12   communities: Array<Community>;
  13   page: number;
  14   loading: boolean;
  15 }
  16
  17 export class Communities extends Component<any, CommunitiesState> {
  18   private subscription: Subscription;
  19   private emptyState: CommunitiesState = {
  20     communities: [],
  21     loading: true,
  22     page: this.getPageFromProps(this.props),
  23   }
  24
  25   constructor(props: any, context: any) {
  26     super(props, context);
  27     this.state = this.emptyState;
  28     this.subscription = WebSocketService.Instance.subject
  29     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  30     .subscribe(
  31       (msg) => this.parseMessage(msg),
  32         (err) => console.error(err),
  33         () => console.log('complete')
  34     );
  35
  36     this.refetch();
  37
  38   }
  39
  40   getPageFromProps(props: any): number {
  41     return (props.match.params.page) ? Number(props.match.params.page) : 1;
  42   }
  43
  44   componentWillUnmount() {
  45     this.subscription.unsubscribe();
  46   }
  47
  48   componentDidMount() {
  49     document.title = "Communities - Lemmy";
  50     let table = document.querySelector('#community_table');
  51     Sortable.initTable(table);
  52   }
  53
  54   // Necessary for back button for some reason
  55   componentWillReceiveProps(nextProps: any) {
  56     if (nextProps.history.action == 'POP') {
  57       this.state = this.emptyState;
  58       this.state.page = this.getPageFromProps(nextProps);
  59       this.refetch();
  60     }
  61   }
  62
  63   render() {
  64     return (
  65       <div class="container">
  66         {this.state.loading ?
  67         <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
  68         <div>
  69           <h5>List of communities</h5>
  70           <div class="table-responsive">
  71             <table id="community_table" class="table table-sm table-hover">
  72               <thead class="pointer">
  73                 <tr>
  74                   <th>Name</th>
  75                   <th class="d-none d-lg-table-cell">Title</th>
  76                   <th>Category</th>
  77                   <th class="text-right">Subscribers</th>
  78                   <th class="text-right d-none d-lg-table-cell">Posts</th>
  79                   <th class="text-right d-none d-lg-table-cell">Comments</th>
  80                   <th></th>
  81                 </tr>
  82               </thead>
  83               <tbody>
  84                 {this.state.communities.map(community =>
  85                   <tr>
  86                     <td><Link to={`/c/${community.name}`}>{community.name}</Link></td>
  87                     <td class="d-none d-lg-table-cell">{community.title}</td>
  88                     <td>{community.category_name}</td>
  89                     <td class="text-right">{community.number_of_subscribers}</td>
  90                     <td class="text-right d-none d-lg-table-cell">{community.number_of_posts}</td>
  91                     <td class="text-right d-none d-lg-table-cell">{community.number_of_comments}</td>
  92                     <td class="text-right">
  93                       {community.subscribed ?
  94                       <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleUnsubscribe)}>Unsubscribe</span> :
  95                       <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleSubscribe)}>Subscribe</span>
  96                       }
  97                     </td>
  98                   </tr>
  99                 )}
 100               </tbody>
 101             </table>
 102           </div>
 103           {this.paginator()}
 104         </div>
 105         }
 106       </div>
 107     );
 108   }
 109
 110   paginator() {
 111     return (
 112       <div class="mt-2">
 113         {this.state.page > 1 &&
 114           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
 115         }
 116         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
 117       </div>
 118     );
 119   }
 120
 121   updateUrl() {
 122     this.props.history.push(`/communities/page/${this.state.page}`);
 123   }
 124
 125   nextPage(i: Communities) {
 126     i.state.page++;
 127     i.setState(i.state);
 128     i.updateUrl();
 129     i.refetch();
 130   }
 131
 132   prevPage(i: Communities) {
 133     i.state.page--;
 134     i.setState(i.state);
 135     i.updateUrl();
 136     i.refetch();
 137   }
 138
 139   handleUnsubscribe(communityId: number) {
 140     let form: FollowCommunityForm = {
 141       community_id: communityId,
 142       follow: false
 143     };
 144     WebSocketService.Instance.followCommunity(form);
 145   }
 146
 147   handleSubscribe(communityId: number) {
 148     let form: FollowCommunityForm = {
 149       community_id: communityId,
 150       follow: true
 151     };
 152     WebSocketService.Instance.followCommunity(form);
 153   }
 154
 155   refetch() {
 156     let listCommunitiesForm: ListCommunitiesForm = {
 157       sort: SortType[SortType.TopAll],
 158       limit: 100,
 159       page: this.state.page,
 160     }
 161
 162     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 163
 164   }
 165
 166   parseMessage(msg: any) {
 167     console.log(msg);
 168     let op: UserOperation = msgOp(msg);
 169     if (msg.error) {
 170       alert(msg.error);
 171       return;
 172     } else if (op == UserOperation.ListCommunities) {
 173       let res: ListCommunitiesResponse = msg;
 174       this.state.communities = res.communities;
 175       this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
 176       this.state.loading = false;
 177       window.scrollTo(0,0);
 178       this.setState(this.state);
 179     } else if (op == UserOperation.FollowCommunity) {
 180       let res: CommunityResponse = msg;
 181       let found = this.state.communities.find(c => c.id == res.community.id);
 182       found.subscribed = res.community.subscribed;
 183       found.number_of_subscribers = res.community.number_of_subscribers;
 184       this.setState(this.state);
 185     }
 186   }
 187 }