ui/src/components/community.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse,  CommunityUser, UserView, SortType, Post, GetPostsForm, ListingType, GetPostsResponse, CreatePostLikeResponse } from '../interfaces';
   5 import { WebSocketService } from '../services';
   6 import { PostListings } from './post-listings';
   7 import { Sidebar } from './sidebar';
   8 import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils';
   9
  10 interface State {
  11   community: CommunityI;
  12   communityId: number;
  13   communityName: string;
  14   moderators: Array<CommunityUser>;
  15   admins: Array<UserView>;
  16   loading: boolean;
  17   posts: Array<Post>;
  18   sort: SortType;
  19   page: number;
  20 }
  21
  22 export class Community extends Component<any, State> {
  23
  24   private subscription: Subscription;
  25   private emptyState: State = {
  26     community: {
  27       id: null,
  28       name: null,
  29       title: null,
  30       category_id: null,
  31       category_name: null,
  32       creator_id: null,
  33       creator_name: null,
  34       number_of_subscribers: null,
  35       number_of_posts: null,
  36       number_of_comments: null,
  37       published: null,
  38       removed: null,
  39       deleted: null,
  40     },
  41     moderators: [],
  42     admins: [],
  43     communityId: Number(this.props.match.params.id),
  44     communityName: this.props.match.params.name,
  45     loading: true,
  46     posts: [],
  47     sort: this.getSortTypeFromProps(this.props),
  48     page: this.getPageFromProps(this.props),
  49   }
  50
  51   getSortTypeFromProps(props: any): SortType {
  52     return (props.match.params.sort) ?
  53       routeSortTypeToEnum(props.match.params.sort) :
  54       SortType.Hot;
  55   }
  56
  57   getPageFromProps(props: any): number {
  58     return (props.match.params.page) ? Number(props.match.params.page) : 1;
  59   }
  60
  61   constructor(props: any, context: any) {
  62     super(props, context);
  63
  64     this.state = this.emptyState;
  65
  66     this.subscription = WebSocketService.Instance.subject
  67     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  68     .subscribe(
  69       (msg) => this.parseMessage(msg),
  70         (err) => console.error(err),
  71         () => console.log('complete')
  72     );
  73
  74     if (this.state.communityId) {
  75       WebSocketService.Instance.getCommunity(this.state.communityId);
  76     } else if (this.state.communityName) {
  77       WebSocketService.Instance.getCommunityByName(this.state.communityName);
  78     }
  79
  80   }
  81
  82   componentWillUnmount() {
  83     this.subscription.unsubscribe();
  84   }
  85
  86   // Necessary for back button for some reason
  87   componentWillReceiveProps(nextProps: any) {
  88     if (nextProps.history.action == 'POP') {
  89       this.state = this.emptyState;
  90       this.state.sort = this.getSortTypeFromProps(nextProps);
  91       this.state.page = this.getPageFromProps(nextProps);
  92       this.fetchPosts();
  93     }
  94   }
  95
  96   render() {
  97     return (
  98       <div class="container">
  99         {this.state.loading ?
 100         <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
 101         <div class="row">
 102           <div class="col-12 col-md-8">
 103             <h5>{this.state.community.title}
 104             {this.state.community.removed &&
 105               <small className="ml-2 text-muted font-italic">removed</small>
 106             }
 107           </h5>
 108           {this.selects()}
 109           <PostListings posts={this.state.posts} />
 110           {this.paginator()}
 111           </div>
 112           <div class="col-12 col-md-4">
 113             <Sidebar
 114               community={this.state.community}
 115               moderators={this.state.moderators}
 116               admins={this.state.admins}
 117             />
 118           </div>
 119         </div>
 120         }
 121       </div>
 122     )
 123   }
 124
 125   selects() {
 126     return (
 127       <div className="mb-2">
 128         <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto">
 129           <option disabled>Sort Type</option>
 130           <option value={SortType.Hot}>Hot</option>
 131           <option value={SortType.New}>New</option>
 132           <option disabled>──────────</option>
 133           <option value={SortType.TopDay}>Top Day</option>
 134           <option value={SortType.TopWeek}>Week</option>
 135           <option value={SortType.TopMonth}>Month</option>
 136           <option value={SortType.TopYear}>Year</option>
 137           <option value={SortType.TopAll}>All</option>
 138         </select>
 139       </div>
 140     )
 141   }
 142
 143   paginator() {
 144     return (
 145       <div class="mt-2">
 146         {this.state.page > 1 &&
 147           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
 148         }
 149         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
 150       </div>
 151     );
 152   }
 153
 154   nextPage(i: Community) {
 155     i.state.page++;
 156     i.setState(i.state);
 157     i.updateUrl();
 158     i.fetchPosts();
 159   }
 160
 161   prevPage(i: Community) {
 162     i.state.page--;
 163     i.setState(i.state);
 164     i.updateUrl();
 165     i.fetchPosts();
 166   }
 167
 168   handleSortChange(i: Community, event: any) {
 169     i.state.sort = Number(event.target.value);
 170     i.state.page = 1;
 171     i.setState(i.state);
 172     i.updateUrl();
 173     i.fetchPosts();
 174   }
 175
 176   updateUrl() {
 177     let sortStr = SortType[this.state.sort].toLowerCase();
 178     this.props.history.push(`/c/${this.state.community.name}/sort/${sortStr}/page/${this.state.page}`);
 179   }
 180
 181   fetchPosts() {
 182     let getPostsForm: GetPostsForm = {
 183       page: this.state.page,
 184       limit: fetchLimit,
 185       sort: SortType[this.state.sort],
 186       type_: ListingType[ListingType.Community],
 187       community_id: this.state.community.id,
 188     }
 189     WebSocketService.Instance.getPosts(getPostsForm);
 190   }
 191
 192   parseMessage(msg: any) {
 193     console.log(msg);
 194     let op: UserOperation = msgOp(msg);
 195     if (msg.error) {
 196       alert(msg.error);
 197       return;
 198     } else if (op == UserOperation.GetCommunity) {
 199       let res: GetCommunityResponse = msg;
 200       this.state.community = res.community;
 201       this.state.moderators = res.moderators;
 202       this.state.admins = res.admins;
 203       document.title = `/c/${this.state.community.name} - Lemmy`;
 204       this.setState(this.state);
 205       this.fetchPosts();
 206     } else if (op == UserOperation.EditCommunity) {
 207       let res: CommunityResponse = msg;
 208       this.state.community = res.community;
 209       this.setState(this.state);
 210     } else if (op == UserOperation.FollowCommunity) {
 211       let res: CommunityResponse = msg;
 212       this.state.community.subscribed = res.community.subscribed;
 213       this.state.community.number_of_subscribers = res.community.number_of_subscribers;
 214       this.setState(this.state);
 215     } else if (op == UserOperation.GetPosts) {
 216       let res: GetPostsResponse = msg;
 217       this.state.posts = res.posts;
 218       this.state.loading = false;
 219       window.scrollTo(0,0);
 220       this.setState(this.state);
 221     } else if (op == UserOperation.CreatePostLike) {
 222       let res: CreatePostLikeResponse = msg;
 223       let found = this.state.posts.find(c => c.id == res.post.id);
 224       found.my_vote = res.post.my_vote;
 225       found.score = res.post.score;
 226       found.upvotes = res.post.upvotes;
 227       found.downvotes = res.post.downvotes;
 228       this.setState(this.state);
 229     }
 230   }
 231 }
 232