From ad97e06bfb0530a9a571c3cb83f1d9b3e338ee50 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 30 Apr 2019 06:49:01 -0700 Subject: [PATCH] Adding paging on communities. --- ui/src/components/communities.tsx | 63 ++++++++++++++++++++++++++++--- ui/src/index.html | 2 - ui/src/index.tsx | 1 + 3 files changed, 58 insertions(+), 8 deletions(-) diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 1b4ec70f9..03e124f17 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -10,6 +10,7 @@ declare const Sortable: any; interface CommunitiesState { communities: Array; + page: number; loading: boolean; } @@ -17,7 +18,8 @@ export class Communities extends Component { private subscription: Subscription; private emptyState: CommunitiesState = { communities: [], - loading: true + loading: true, + page: this.getPageFromProps(this.props), } constructor(props: any, context: any) { @@ -31,13 +33,12 @@ export class Communities extends Component { () => console.log('complete') ); - let listCommunitiesForm: ListCommunitiesForm = { - sort: SortType[SortType.TopAll], - limit: 100, - } + this.refetch(); - WebSocketService.Instance.listCommunities(listCommunitiesForm); + } + getPageFromProps(props: any): number { + return (props.match.params.page) ? Number(props.match.params.page) : 1; } componentWillUnmount() { @@ -50,6 +51,15 @@ export class Communities extends Component { Sortable.initTable(table); } + // 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 (
@@ -90,12 +100,42 @@ export class Communities extends Component {
+ {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, @@ -112,6 +152,17 @@ export class Communities extends Component { 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); diff --git a/ui/src/index.html b/ui/src/index.html index 4aaa86b5a..de457ecaa 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -6,8 +6,6 @@ - - Lemmy diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 357637d2b..76605d8b8 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -43,6 +43,7 @@ class Index extends Component { +