Simple Paginator

app/components/voting-dapp/paginator.js

@@ -1,2 +1,37 @@
-const Paginator = (props) => '<< | < | 1 | 2 | 3 | > | >>';
+import web3 from "Embark/web3"
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import {Button} from 'react-bootstrap';
+
+class Paginator extends React.Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+
+      };
+    }
+
+    render(){
+        let ln = Math.ceil(this.props.total / this.props.recordsByPage);
+        let btnArray = []
+        for(let i = 1; i <= ln; i++){
+            btnArray.push(<Button bsStyle="link" className={i == this.props.pageNum ? 'current' : ''} onClick={(e) => this.props.pageHandler(e, i)}>{i}</Button>)
+        }
+
+        return <div>
+            <Button bsStyle="link" onClick={(e) => this.props.pageHandler(e, 1)}>&lt;</Button>
+            {
+                btnArray.map((component, index) => (
+                <React.Fragment key={index}>
+                    { component }
+                </React.Fragment>
+                ))
+            }
+            <Button bsStyle="link" onClick={(e) => this.props.pageHandler(e, ln)}>&gt;</Button>
+        </div>;
+    }
+
+}
+
 export default Paginator;

app/components/voting-dapp/proposal-container.js

@@ -7,20 +7,30 @@ import Proposal from './proposal';
 import ProposalList from './proposal-list';
 import Paginator from './paginator';
 
+const pageLength = 10;
 class ProposalContainer extends React.Component {
 
     constructor(props) {
       super(props);
       this.state = {
-          proposals: []
+          proposals: [],
+          total: 10,  // TODO get total
+          page: 1
       };
     }
 
     componentDidMount(){
-        this.fetchProposals(_p => this.setState({proposals: _p}));
+        this.getProposalsOnPage(this.state.page);
     }
 
-    fetchProposals(cb){
+    getProposalsOnPage(pageNum){
+        this.fetchProposals((pageNum - 1) * pageLength, pageLength, _p => this.setState({proposals: _p, page: pageNum}));
+    }
+
+    fetchProposals(from, qty, cb){
+
+        console.log("Loading %s records starting from record %s", qty, from);
+
         // TODO: populate proposals
         let proposalList = [
             {
@@ -39,7 +49,7 @@ class ProposalContainer extends React.Component {
     render(){
         return <React.Fragment>
             <ProposalList proposals={this.state.proposals} />
-            <Paginator />
+            <Paginator total={this.state.total} recordsByPage={pageLength} page={this.state.page} pageHandler={(e, pageNum) => this.getProposalsOnPage(pageNum) } />
             </React.Fragment>;
     }