summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/src/components/communities.tsx63
-rw-r--r--ui/src/index.html2
-rw-r--r--ui/src/index.tsx1
3 files changed, 58 insertions, 8 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 1b4ec70f..03e124f1 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 4aaa86b5..de457eca 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 357637d2..76605d8b 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} />