add pagination to transactions too

embark-ui/src/components/Transactions.js

@@ -4,9 +4,9 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
-import LoadMore from "./LoadMore";
+import Pages from "./Pagination";
 
-const Transactions = ({transactions, showLoadMore, loadMore}) => (
+const Transactions = ({transactions, changePage, currentPage, numberOfPages}) => (
   <Row>
     <Col>
       <Card>
@@ -41,7 +41,7 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
               </Row>
             </div>
           ))}
-          {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>
@@ -50,8 +50,9 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
 
 Transactions.propTypes = {
   transactions: PropTypes.arrayOf(PropTypes.object),
-  showLoadMore: PropTypes.bool,
-  loadMore: PropTypes.func
+  changePage: PropTypes.func,
+  currentPage: PropTypes.number,
+  numberOfPages: PropTypes.number
 };
 
 export default Transactions;

embark-ui/src/containers/BlocksContainer.js

@@ -15,6 +15,7 @@ class BlocksContainer extends Component {
 
     this.state = {currentPage: 0};
     this.numberOfBlocks = 0;
+    this.currentBlocks = [];
   }
 
   componentDidMount() {
@@ -51,11 +52,14 @@ class BlocksContainer extends Component {
   }
 
   render() {
-    const currentBlocks = this.getCurrentBlocks();
+    const newBlocks = this.getCurrentBlocks();
+    if (newBlocks.length) {
+      this.currentBlocks = newBlocks;
+    }
     return (
       <React.Fragment>
-        <DataWrapper shouldRender={currentBlocks.length > 0} {...this.props} render={() => (
-          <Blocks blocks={currentBlocks} numberOfPages={this.getNumberOfPages()}
+        <DataWrapper shouldRender={this.currentBlocks.length > 0} {...this.props} render={() => (
+          <Blocks blocks={this.currentBlocks} numberOfPages={this.getNumberOfPages()}
                   changePage={(newPage) => this.changePage(newPage)}
                   currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />

embark-ui/src/containers/TransactionsContainer.js

@@ -7,7 +7,17 @@ import Transactions from '../components/Transactions';
 import DataWrapper from "../components/DataWrapper";
 import {getTransactions} from "../reducers/selectors";
 
+const MAX_TXS = 10; // TODO use same constant as API
+
 class TransactionsContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {currentPage: 0};
+    this.numberOfTxs = 0;
+    this.currentTxs = [];
+  }
+
   componentDidMount() {
     this.props.fetchTransactions();
     this.props.initBlockHeader();
@@ -17,24 +27,41 @@ class TransactionsContainer extends Component {
     this.props.stopBlockHeader();
   }
 
-  loadMore() {
-    this.props.fetchTransactions(this.loadMoreFrom());
+  getNumberOfPages() {
+    if (!this.numberOfTxs) {
+      let transactions = this.props.transactions;
+      if (transactions.length === 0) {
+        this.numberOfTxs = 0;
+      } else {
+        this.numberOfTxs = transactions[transactions.length - 1].blockNumber - 1;
+      }
+    }
+    return Math.ceil(this.numberOfTxs / MAX_TXS);
   }
 
-  loadMoreFrom() {
-    let transactions = this.props.transactions;
-    if (transactions.length === 0) {
-      return 0;
-    }
-    return transactions[transactions.length - 1].blockNumber - 1;
+  changePage(newPage) {
+    this.setState({currentPage: newPage});
+
+    this.props.fetchTransactions((newPage * MAX_TXS) + MAX_TXS);
+  }
+
+  getCurrentTransactions() {
+    const currentPage = this.state.currentPage || this.getNumberOfPages();
+    return this.props.transactions.filter(tx => tx.blockNumber <= (currentPage * MAX_TXS) + MAX_TXS &&
+      tx.blockNumber > currentPage * MAX_TXS);
   }
 
   render() {
+    const newTxs = this.getCurrentTransactions();
+    if (newTxs.length) {
+      this.currentTxs = newTxs;
+    }
     return (
       <React.Fragment>
-        <DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => (
-          <Transactions transactions={transactions}
-                        showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
+        <DataWrapper shouldRender={this.currentTxs.length > 0} {...this.props} render={() => (
+          <Transactions transactions={this.currentTxs} numberOfPages={this.getNumberOfPages()}
+                        changePage={(newPage) => this.changePage(newPage)}
+                        currentPage={this.state.currentPage || this.getNumberOfPages()} />
         )} />
       </React.Fragment>
     );