import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp } from '../utils'; declare const Sortable: any; interface CommunitiesState { communities: Array; page: number; loading: boolean; } export class Communities extends Component { private subscription: Subscription; private emptyState: 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)))) .subscribe( (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; } componentWillUnmount() { this.subscription.unsubscribe(); } componentDidMount() { document.title = `Communities - ${WebSocketService.Instance.site.name}`; } // Necessary for back button for some reason componentWillReceiveProps(nextProps: any) { if (nextProps.history.action == 'POP') { this.state = this.emptyState; this.state.page = this.getPageFromProps(nextProps); this.refetch(); } } render() { return (
{this.state.loading ?
:
List of communities
{this.state.communities.map(community => )}
Name Title Category Subscribers Posts Comments
{community.name} {community.title} {community.category_name} {community.number_of_subscribers} {community.number_of_posts} {community.number_of_comments} {community.subscribed ? Unsubscribe : Subscribe }
{this.paginator()}
}
); } paginator() { return (
{this.state.page > 1 && }
); } updateUrl() { this.props.history.push(`/communities/page/${this.state.page}`); } nextPage(i: Communities) { i.state.page++; i.setState(i.state); i.updateUrl(); i.refetch(); } prevPage(i: Communities) { i.state.page--; i.setState(i.state); i.updateUrl(); i.refetch(); } handleUnsubscribe(communityId: number) { let form: FollowCommunityForm = { community_id: communityId, follow: false }; WebSocketService.Instance.followCommunity(form); } handleSubscribe(communityId: number) { let form: FollowCommunityForm = { community_id: communityId, follow: true }; WebSocketService.Instance.followCommunity(form); } refetch() { let listCommunitiesForm: ListCommunitiesForm = { sort: SortType[SortType.TopAll], limit: 100, page: this.state.page, } WebSocketService.Instance.listCommunities(listCommunitiesForm); } parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { alert(msg.error); return; } 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.loading = false; window.scrollTo(0,0); this.setState(this.state); let table = document.querySelector('#community_table'); Sortable.initTable(table); } else if (op == UserOperation.FollowCommunity) { let res: CommunityResponse = msg; let found = this.state.communities.find(c => c.id == res.community.id); found.subscribed = res.community.subscribed; found.number_of_subscribers = res.community.number_of_subscribers; this.setState(this.state); } } }