Add pagination

2 files changed, 30 insertions, 3 deletions

diff --git a/src/components/List.js b/src/components/List.js
index b93f2ee..558f1ab 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "semantic-ui-react";
+import { Button, Pagination } from "semantic-ui-react";
 
 import ObjectComponent from "./ObjectComponent";
 import SearchForm from "./SearchForm";
@@ -12,19 +12,30 @@ class List extends React.Component {
             filter: {
                 field: "default-field",
                 value: ""
-            }
+            },
+            page: 1,
+            totalPages: 1
         };
 
         this.getData = this.getData.bind(this);
+        this.setPage = this.setPage.bind(this);
+        this.queryString = this.queryString.bind(this);
     }
 
     componentDidMount() {
         this.getData();
     }
 
+    queryString() {
+        return [
+            `limit=${process.env.PER_PAGE}`,
+            `skip=${this.state.page * process.env.PER_PAGE}`
+        ].join("&");
+    }
+
     // Fetch data from external source, update state
     getData() {
-        fetch(`${process.env.COLLECTOR_URL}/sc/v0/get`, {
+        fetch(`${process.env.COLLECTOR_URL}/sc/v0/get?${this.queryString()}`, {
             headers: {
                 Authorization: "Basic " + btoa("user1:pw1")
             }
@@ -52,6 +63,13 @@ class List extends React.Component {
         );
     }
 
+    setPage(e, { activePage: n }) {
+        this.setState({ page: n }, () => {
+            this.getData();
+            window.scrollTo(0, 0);
+        });
+    }
+
     render() {
         return (
             <div id="list-container">
@@ -72,6 +90,14 @@ class List extends React.Component {
                         return <ObjectComponent {...data} key={data._id} />;
                     })}
                 </div>
+                <div id="pagination">
+                    <Pagination
+                        activePage={this.state.page}
+                        // totalPages={this.totalPages()}
+                        totalPages={5} // TODO
+                        onPageChange={this.setPage}
+                    />
+                </div>
             </div>
         );
     }
diff --git a/src/styles/main.css b/src/styles/main.css
index ba42d67..375bcf3 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -12,6 +12,7 @@ body {
 #list-container,
 #object-view {
     width: 100%;
+    padding-bottom: 10em;
 }
 
 /* Header */