diff options
Diffstat (limited to 'ui/src/components/community.tsx')
-rw-r--r-- | ui/src/components/community.tsx | 189 |
1 files changed, 127 insertions, 62 deletions
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 580e9a49..434f4530 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -1,11 +1,29 @@ import { Component, linkEvent } from 'inferno'; -import { Subscription } from "rxjs"; +import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse, CommunityUser, UserView, SortType, Post, GetPostsForm, ListingType, GetPostsResponse, CreatePostLikeResponse } from '../interfaces'; +import { + UserOperation, + Community as CommunityI, + GetCommunityResponse, + CommunityResponse, + CommunityUser, + UserView, + SortType, + Post, + GetPostsForm, + ListingType, + GetPostsResponse, + CreatePostLikeResponse, +} from '../interfaces'; import { WebSocketService } from '../services'; import { PostListings } from './post-listings'; import { Sidebar } from './sidebar'; -import { msgOp, routeSortTypeToEnum, fetchLimit, postRefetchSeconds } from '../utils'; +import { + msgOp, + routeSortTypeToEnum, + fetchLimit, + postRefetchSeconds, +} from '../utils'; import { T, i18n } from 'inferno-i18next'; interface State { @@ -21,7 +39,6 @@ interface State { } export class Community extends Component<any, State> { - private subscription: Subscription; private postFetcher: any; private emptyState: State = { @@ -49,16 +66,16 @@ export class Community extends Component<any, State> { posts: [], sort: this.getSortTypeFromProps(this.props), page: this.getPageFromProps(this.props), - } + }; getSortTypeFromProps(props: any): SortType { - return (props.match.params.sort) ? - routeSortTypeToEnum(props.match.params.sort) : - SortType.Hot; + return props.match.params.sort + ? routeSortTypeToEnum(props.match.params.sort) + : SortType.Hot; } getPageFromProps(props: any): number { - return (props.match.params.page) ? Number(props.match.params.page) : 1; + return props.match.params.page ? Number(props.match.params.page) : 1; } constructor(props: any, context: any) { @@ -67,19 +84,25 @@ export class Community extends Component<any, State> { this.state = this.emptyState; this.subscription = WebSocketService.Instance.subject - .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) - .subscribe( - (msg) => this.parseMessage(msg), - (err) => console.error(err), + .pipe( + retryWhen(errors => + errors.pipe( + delay(3000), + take(10) + ) + ) + ) + .subscribe( + msg => this.parseMessage(msg), + err => console.error(err), () => console.log('complete') - ); + ); if (this.state.communityId) { WebSocketService.Instance.getCommunity(this.state.communityId); } else if (this.state.communityName) { WebSocketService.Instance.getCommunityByName(this.state.communityName); } - } componentWillUnmount() { @@ -100,78 +123,118 @@ export class Community extends Component<any, State> { render() { return ( <div class="container"> - {this.state.loading ? - <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : - <div class="row"> - <div class="col-12 col-md-8"> - <h5>{this.state.community.title} - {this.state.community.removed && - <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small> - } - {this.state.community.nsfw && - <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small> - } + {this.state.loading ? ( + <h5> + <svg class="icon icon-spinner spin"> + <use xlinkHref="#icon-spinner"></use> + </svg> </h5> - {this.selects()} - <PostListings posts={this.state.posts} /> - {this.paginator()} - </div> - <div class="col-12 col-md-4"> - <Sidebar - community={this.state.community} - moderators={this.state.moderators} - admins={this.state.admins} - /> + ) : ( + <div class="row"> + <div class="col-12 col-md-8"> + <h5> + {this.state.community.title} + {this.state.community.removed && ( + <small className="ml-2 text-muted font-italic"> + <T i18nKey="removed">#</T> + </small> + )} + {this.state.community.nsfw && ( + <small className="ml-2 text-muted font-italic"> + <T i18nKey="nsfw">#</T> + </small> + )} + </h5> + {this.selects()} + <PostListings posts={this.state.posts} /> + {this.paginator()} + </div> + <div class="col-12 col-md-4"> + <Sidebar + community={this.state.community} + moderators={this.state.moderators} + admins={this.state.admins} + /> + </div> </div> - </div> - } + )} </div> - ) + ); } selects() { return ( <div className="mb-2"> - <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto"> - <option disabled><T i18nKey="sort_type">#</T></option> - <option value={SortType.Hot}><T i18nKey="hot">#</T></option> - <option value={SortType.New}><T i18nKey="new">#</T></option> + <select + value={this.state.sort} + onChange={linkEvent(this, this.handleSortChange)} + class="custom-select custom-select-sm w-auto" + > + <option disabled> + <T i18nKey="sort_type">#</T> + </option> + <option value={SortType.Hot}> + <T i18nKey="hot">#</T> + </option> + <option value={SortType.New}> + <T i18nKey="new">#</T> + </option> <option disabled>──────</option> - <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option> - <option value={SortType.TopWeek}><T i18nKey="week">#</T></option> - <option value={SortType.TopMonth}><T i18nKey="month">#</T></option> - <option value={SortType.TopYear}><T i18nKey="year">#</T></option> - <option value={SortType.TopAll}><T i18nKey="all">#</T></option> + <option value={SortType.TopDay}> + <T i18nKey="top_day">#</T> + </option> + <option value={SortType.TopWeek}> + <T i18nKey="week">#</T> + </option> + <option value={SortType.TopMonth}> + <T i18nKey="month">#</T> + </option> + <option value={SortType.TopYear}> + <T i18nKey="year">#</T> + </option> + <option value={SortType.TopAll}> + <T i18nKey="all">#</T> + </option> </select> </div> - ) + ); } paginator() { return ( <div class="my-2"> - {this.state.page > 1 && - <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button> - } - <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button> + {this.state.page > 1 && ( + <button + class="btn btn-sm btn-secondary mr-1" + onClick={linkEvent(this, this.prevPage)} + > + <T i18nKey="prev">#</T> + </button> + )} + <button + class="btn btn-sm btn-secondary" + onClick={linkEvent(this, this.nextPage)} + > + <T i18nKey="next">#</T> + </button> </div> ); } - nextPage(i: Community) { + nextPage(i: Community) { i.state.page++; i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } - prevPage(i: Community) { + prevPage(i: Community) { i.state.page--; i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } handleSortChange(i: Community, event: any) { @@ -180,12 +243,14 @@ export class Community extends Component<any, State> { i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } updateUrl() { let sortStr = SortType[this.state.sort].toLowerCase(); - this.props.history.push(`/c/${this.state.community.name}/sort/${sortStr}/page/${this.state.page}`); + this.props.history.push( + `/c/${this.state.community.name}/sort/${sortStr}/page/${this.state.page}` + ); } keepFetchingPosts() { @@ -200,7 +265,7 @@ export class Community extends Component<any, State> { sort: SortType[this.state.sort], type_: ListingType[ListingType.Community], community_id: this.state.community.id, - } + }; WebSocketService.Instance.getPosts(getPostsForm); } @@ -225,7 +290,8 @@ export class Community extends Component<any, State> { } else if (op == UserOperation.FollowCommunity) { let res: CommunityResponse = msg; this.state.community.subscribed = res.community.subscribed; - this.state.community.number_of_subscribers = res.community.number_of_subscribers; + this.state.community.number_of_subscribers = + res.community.number_of_subscribers; this.setState(this.state); } else if (op == UserOperation.GetPosts) { let res: GetPostsResponse = msg; @@ -243,4 +309,3 @@ export class Community extends Component<any, State> { } } } - |