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<Community>; + page: number; loading: boolean; } @@ -17,7 +18,8 @@ export class Communities extends Component<any, CommunitiesState> { 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<any, CommunitiesState> { () => 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<any, CommunitiesState> { 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 ( <div class="container"> @@ -90,12 +100,42 @@ export class Communities extends Component<any, CommunitiesState> { </tbody> </table> </div> + {this.paginator()} </div> } </div> ); } + paginator() { + return ( + <div class="mt-2"> + {this.state.page > 1 && + <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button> + } + <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button> + </div> + ); + } + + 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<any, CommunitiesState> { 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 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" type="image/svg+xml" href="/static/assets/favicon.svg" /> <link rel="apple-touch-icon" href="/static/assets/apple-touch-icon.png" /> - - <title>Lemmy</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.8.0/js/sortable.min.js"></script> 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<any, any> { <Route path={`/login`} component={Login} /> <Route path={`/create_post`} component={CreatePost} /> <Route path={`/create_community`} component={CreateCommunity} /> + <Route path={`/communities/page/:page`} component={Communities} /> <Route path={`/communities`} component={Communities} /> <Route path={`/post/:id/comment/:comment_id`} component={Post} /> <Route path={`/post/:id`} component={Post} />