diff options
author | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
commit | 4e5561283392d2ab1545cabb4455a8ffc490f86b (patch) | |
tree | a4ee9cc096826dc32faf3675212c7f95f1b3ea5e /ui/src/components/communities.tsx | |
parent | 82ea5ae9186e5a8e631c87a61077e16713eb87a4 (diff) |
Running prettier on code.
- #305 , #309
Diffstat (limited to 'ui/src/components/communities.tsx')
-rw-r--r-- | ui/src/components/communities.tsx | 191 |
1 files changed, 132 insertions, 59 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 49b982dc..7e4a0ef8 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -1,8 +1,16 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; -import { Subscription } from "rxjs"; +import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces'; +import { + UserOperation, + Community, + ListCommunitiesResponse, + CommunityResponse, + FollowCommunityForm, + ListCommunitiesForm, + SortType, +} from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp } from '../utils'; import { i18n } from '../i18next'; @@ -22,25 +30,31 @@ export class Communities extends Component<any, CommunitiesState> { communities: [], loading: true, page: this.getPageFromProps(this.props), - } + }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.subscription = WebSocketService.Instance.subject - .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .pipe( + retryWhen(errors => + errors.pipe( + delay(3000), + take(10) + ) + ) + ) .subscribe( - (msg) => this.parseMessage(msg), - (err) => console.error(err), + msg => this.parseMessage(msg), + err => console.error(err), () => console.log('complete') ); this.refetch(); - } 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; } componentWillUnmount() { @@ -48,7 +62,9 @@ export class Communities extends Component<any, CommunitiesState> { } componentDidMount() { - document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`; + document.title = `${i18n.t('communities')} - ${ + WebSocketService.Instance.site.name + }`; } // Necessary for back button for some reason @@ -63,46 +79,92 @@ export class Communities extends Component<any, CommunitiesState> { render() { return ( <div class="container"> - {this.state.loading ? - <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : - <div> - <h5><T i18nKey="list_of_communities">#</T></h5> - <div class="table-responsive"> - <table id="community_table" class="table table-sm table-hover"> - <thead class="pointer"> - <tr> - <th><T i18nKey="name">#</T></th> - <th class="d-none d-lg-table-cell"><T i18nKey="title">#</T></th> - <th><T i18nKey="category">#</T></th> - <th class="text-right"><T i18nKey="subscribers">#</T></th> - <th class="text-right d-none d-lg-table-cell"><T i18nKey="posts">#</T></th> - <th class="text-right d-none d-lg-table-cell"><T i18nKey="comments">#</T></th> - <th></th> - </tr> - </thead> - <tbody> - {this.state.communities.map(community => + {this.state.loading ? ( + <h5 class=""> + <svg class="icon icon-spinner spin"> + <use xlinkHref="#icon-spinner"></use> + </svg> + </h5> + ) : ( + <div> + <h5> + <T i18nKey="list_of_communities">#</T> + </h5> + <div class="table-responsive"> + <table id="community_table" class="table table-sm table-hover"> + <thead class="pointer"> <tr> - <td><Link to={`/c/${community.name}`}>{community.name}</Link></td> - <td class="d-none d-lg-table-cell">{community.title}</td> - <td>{community.category_name}</td> - <td class="text-right">{community.number_of_subscribers}</td> - <td class="text-right d-none d-lg-table-cell">{community.number_of_posts}</td> - <td class="text-right d-none d-lg-table-cell">{community.number_of_comments}</td> - <td class="text-right"> - {community.subscribed ? - <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></span> : - <span class="pointer btn-link" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></span> - } - </td> + <th> + <T i18nKey="name">#</T> + </th> + <th class="d-none d-lg-table-cell"> + <T i18nKey="title">#</T> + </th> + <th> + <T i18nKey="category">#</T> + </th> + <th class="text-right"> + <T i18nKey="subscribers">#</T> + </th> + <th class="text-right d-none d-lg-table-cell"> + <T i18nKey="posts">#</T> + </th> + <th class="text-right d-none d-lg-table-cell"> + <T i18nKey="comments">#</T> + </th> + <th></th> </tr> - )} - </tbody> - </table> + </thead> + <tbody> + {this.state.communities.map(community => ( + <tr> + <td> + <Link to={`/c/${community.name}`}> + {community.name} + </Link> + </td> + <td class="d-none d-lg-table-cell">{community.title}</td> + <td>{community.category_name}</td> + <td class="text-right"> + {community.number_of_subscribers} + </td> + <td class="text-right d-none d-lg-table-cell"> + {community.number_of_posts} + </td> + <td class="text-right d-none d-lg-table-cell"> + {community.number_of_comments} + </td> + <td class="text-right"> + {community.subscribed ? ( + <span + class="pointer btn-link" + onClick={linkEvent( + community.id, + this.handleUnsubscribe + )} + > + <T i18nKey="unsubscribe">#</T> + </span> + ) : ( + <span + class="pointer btn-link" + onClick={linkEvent( + community.id, + this.handleSubscribe + )} + > + <T i18nKey="subscribe">#</T> + </span> + )} + </td> + </tr> + ))} + </tbody> + </table> + </div> + {this.paginator()} </div> - {this.paginator()} - </div> - } + )} </div> ); } @@ -110,10 +172,20 @@ export class Communities extends Component<any, CommunitiesState> { paginator() { return ( <div class="mt-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> ); } @@ -122,14 +194,14 @@ export class Communities extends Component<any, CommunitiesState> { this.props.history.push(`/communities/page/${this.state.page}`); } - nextPage(i: Communities) { + nextPage(i: Communities) { i.state.page++; i.setState(i.state); i.updateUrl(); i.refetch(); } - prevPage(i: Communities) { + prevPage(i: Communities) { i.state.page--; i.setState(i.state); i.updateUrl(); @@ -139,7 +211,7 @@ export class Communities extends Component<any, CommunitiesState> { handleUnsubscribe(communityId: number) { let form: FollowCommunityForm = { community_id: communityId, - follow: false + follow: false, }; WebSocketService.Instance.followCommunity(form); } @@ -147,7 +219,7 @@ export class Communities extends Component<any, CommunitiesState> { handleSubscribe(communityId: number) { let form: FollowCommunityForm = { community_id: communityId, - follow: true + follow: true, }; WebSocketService.Instance.followCommunity(form); } @@ -157,10 +229,9 @@ export class Communities extends Component<any, CommunitiesState> { sort: SortType[SortType.TopAll], limit: 100, page: this.state.page, - } + }; WebSocketService.Instance.listCommunities(listCommunitiesForm); - } parseMessage(msg: any) { @@ -172,9 +243,11 @@ export class Communities extends Component<any, CommunitiesState> { } else if (op == UserOperation.ListCommunities) { let res: ListCommunitiesResponse = msg; this.state.communities = res.communities; - this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers); + this.state.communities.sort( + (a, b) => b.number_of_subscribers - a.number_of_subscribers + ); this.state.loading = false; - window.scrollTo(0,0); + window.scrollTo(0, 0); this.setState(this.state); let table = document.querySelector('#community_table'); Sortable.initTable(table); @@ -184,6 +257,6 @@ export class Communities extends Component<any, CommunitiesState> { found.subscribed = res.community.subscribed; found.number_of_subscribers = res.community.number_of_subscribers; this.setState(this.state); - } + } } } |