Adding paging on communities.

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);

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>

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} />