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 import { T, i18n } from 'inferno-i18next';
12 community: CommunityI;
14 communityName: string;
15 moderators: Array<CommunityUser>;
16 admins: Array<UserView>;
23 export class Community extends Component<any, State> {
25 private subscription: Subscription;
26 private emptyState: State = {
35 number_of_subscribers: null,
36 number_of_posts: null,
37 number_of_comments: null,
45 communityId: Number(this.props.match.params.id),
46 communityName: this.props.match.params.name,
49 sort: this.getSortTypeFromProps(this.props),
50 page: this.getPageFromProps(this.props),
53 getSortTypeFromProps(props: any): SortType {
54 return (props.match.params.sort) ?
55 routeSortTypeToEnum(props.match.params.sort) :
59 getPageFromProps(props: any): number {
60 return (props.match.params.page) ? Number(props.match.params.page) : 1;
63 constructor(props: any, context: any) {
64 super(props, context);
66 this.state = this.emptyState;
68 this.subscription = WebSocketService.Instance.subject
69 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
71 (msg) => this.parseMessage(msg),
72 (err) => console.error(err),
73 () => console.log('complete')
76 if (this.state.communityId) {
77 WebSocketService.Instance.getCommunity(this.state.communityId);
78 } else if (this.state.communityName) {
79 WebSocketService.Instance.getCommunityByName(this.state.communityName);
84 componentWillUnmount() {
85 this.subscription.unsubscribe();
88 // Necessary for back button for some reason
89 componentWillReceiveProps(nextProps: any) {
90 if (nextProps.history.action == 'POP') {
91 this.state = this.emptyState;
92 this.state.sort = this.getSortTypeFromProps(nextProps);
93 this.state.page = this.getPageFromProps(nextProps);
100 <div class="container">
101 {this.state.loading ?
102 <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
104 <div class="col-12 col-md-8">
105 <h5>{this.state.community.title}
106 {this.state.community.removed &&
107 <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
109 {this.state.community.nsfw &&
110 <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small>
114 <PostListings posts={this.state.posts} />
117 <div class="col-12 col-md-4">
119 community={this.state.community}
120 moderators={this.state.moderators}
121 admins={this.state.admins}
132 <div className="mb-2">
133 <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto">
134 <option disabled><T i18nKey="sort_type">#</T></option>
135 <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
136 <option value={SortType.New}><T i18nKey="new">#</T></option>
137 <option disabled>──────</option>
138 <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
139 <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
140 <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
141 <option value={SortType.TopYear}><T i18nKey="year">#</T></option>
142 <option value={SortType.TopAll}><T i18nKey="all">#</T></option>
151 {this.state.page > 1 &&
152 <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
154 <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button>
159 nextPage(i: Community) {
166 prevPage(i: Community) {
173 handleSortChange(i: Community, event: any) {
174 i.state.sort = Number(event.target.value);
182 let sortStr = SortType[this.state.sort].toLowerCase();
183 this.props.history.push(`/c/${this.state.community.name}/sort/${sortStr}/page/${this.state.page}`);
187 let getPostsForm: GetPostsForm = {
188 page: this.state.page,
190 sort: SortType[this.state.sort],
191 type_: ListingType[ListingType.Community],
192 community_id: this.state.community.id,
194 WebSocketService.Instance.getPosts(getPostsForm);
197 parseMessage(msg: any) {
199 let op: UserOperation = msgOp(msg);
201 alert(i18n.t(msg.error));
203 } else if (op == UserOperation.GetCommunity) {
204 let res: GetCommunityResponse = msg;
205 this.state.community = res.community;
206 this.state.moderators = res.moderators;
207 this.state.admins = res.admins;
208 document.title = `/c/${this.state.community.name} - ${WebSocketService.Instance.site.name}`;
209 this.setState(this.state);
211 } else if (op == UserOperation.EditCommunity) {
212 let res: CommunityResponse = msg;
213 this.state.community = res.community;
214 this.setState(this.state);
215 } else if (op == UserOperation.FollowCommunity) {
216 let res: CommunityResponse = msg;
217 this.state.community.subscribed = res.community.subscribed;
218 this.state.community.number_of_subscribers = res.community.number_of_subscribers;
219 this.setState(this.state);
220 } else if (op == UserOperation.GetPosts) {
221 let res: GetPostsResponse = msg;
222 this.state.posts = res.posts;
223 this.state.loading = false;
224 window.scrollTo(0,0);
225 this.setState(this.state);
226 } else if (op == UserOperation.CreatePostLike) {
227 let res: CreatePostLikeResponse = msg;
228 let found = this.state.posts.find(c => c.id == res.post.id);
229 found.my_vote = res.post.my_vote;
230 found.score = res.post.score;
231 found.upvotes = res.post.upvotes;
232 found.downvotes = res.post.downvotes;
233 this.setState(this.state);