fix(embark-ui): correctly calculate which blocks to display

Revise calculations related to block numbers and pagination in the blocks
explorer and explorers overview.

Make the number of blocks to display per page configurable and set it to 5 in
the explorers overview.

packages/embark-ui/src/components/Blocks.js

@@ -14,6 +14,7 @@ const Blocks = ({blocks, changePage, currentPage, numberOfPages}) => (
           <h2>Blocks</h2>
         </CardHeader>
         <CardBody>
+          {!blocks.length && "No blocks to display"}
           {blocks.map(block => (
             <div className="explorer-row border-top" key={block.number}>
               <CardTitleIdenticon id={block.hash}>Block&nbsp;

packages/embark-ui/src/components/ExplorerDashboardLayout.js

@@ -22,7 +22,7 @@ const ExplorerDashboardLayout = () => (
       </Row>
       <Row>
         <Col xl={6}>
-          <BlocksContainer overridePageHead={false} />
+          <BlocksContainer numBlocksToDisplay={5} overridePageHead={false} />
         </Col>
         <Col xl={6}>
           <TransactionsContainer overridePageHead={false} />

packages/embark-ui/src/containers/BlocksContainer.js

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-
-import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
+import {blocks as blocksAction,
+        initBlockHeader,
+        stopBlockHeader} from '../actions';
 import Blocks from '../components/Blocks';
 import DataWrapper from "../components/DataWrapper";
 import PageHead from "../components/PageHead";
@@ -14,9 +15,8 @@ class BlocksContainer extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {currentPage: 0};
-    this.numberOfBlocks = 0;
-    this.currentBlocks = [];
+    this.numBlocksToDisplay = this.props.numBlocksToDisplay || MAX_BLOCKS;
+    this.state = {currentPage: 1};
   }
 
   componentDidMount() {
@@ -28,42 +28,50 @@ class BlocksContainer extends Component {
     this.props.stopBlockHeader();
   }
 
+  get numberOfBlocks() {
+    const blocks = this.props.blocks;
+    return !blocks.length ? 0 : blocks[0].number + 1;
+  }
+
   getNumberOfPages() {
-    if (!this.numberOfBlocks) {
-      let blocks = this.props.blocks;
-      if (blocks.length === 0) {
-        this.numberOfBlocks = 0;
-      } else {
-        this.numberOfBlocks = blocks[blocks.length - 1].number - 1;
-      }
-    }
-    return Math.ceil(this.numberOfBlocks / MAX_BLOCKS);
+    return Math.ceil(this.numberOfBlocks / this.numBlocksToDisplay);
   }
 
   changePage(newPage) {
     this.setState({currentPage: newPage});
-
-    this.props.fetchBlocks((newPage * MAX_BLOCKS) + MAX_BLOCKS);
+    this.props.fetchBlocks(
+      this.numberOfBlocks - 1 - (this.numBlocksToDisplay * (newPage - 1))
+    );
   }
 
   getCurrentBlocks() {
-    const currentPage = this.state.currentPage || this.getNumberOfPages();
-    return this.props.blocks.filter(block => block.number <= (currentPage * MAX_BLOCKS) + MAX_BLOCKS &&
-      block.number > currentPage * MAX_BLOCKS);
+    return this.props.blocks
+      .filter(block => {
+        const index = (
+          (this.numberOfBlocks -
+           (this.numBlocksToDisplay * (this.state.currentPage - 1))) -
+            block.number
+        );
+        return index <= this.numBlocksToDisplay && index > 0;
+      });
   }
 
   render() {
     const newBlocks = this.getCurrentBlocks();
-    if (newBlocks.length) {
-      this.currentBlocks = newBlocks;
-    }
     return (
       <React.Fragment>
-        <PageHead title="Blocks" enabled={this.props.overridePageHead} description="Summary of the most recent blocks" />
-        <DataWrapper shouldRender={this.currentBlocks.length > 0} {...this.props} render={() => (
-          <Blocks blocks={this.currentBlocks} numberOfPages={this.getNumberOfPages()}
+        <PageHead
+          title="Blocks"
+          enabled={this.props.overridePageHead}
+          description="Summary of the most recent blocks" />
+        <DataWrapper
+          shouldRender={true}
+          {...this.props}
+          render={() => (
+            <Blocks blocks={newBlocks}
+                    numberOfPages={this.getNumberOfPages()}
                     changePage={(newPage) => this.changePage(newPage)}
-                  currentPage={this.state.currentPage || this.getNumberOfPages()} />
+                    currentPage={this.state.currentPage} />
           )} />
       </React.Fragment>
     );
@@ -71,13 +79,18 @@ class BlocksContainer extends Component {
 }
 
 function mapStateToProps(state) {
-  return {blocks: getBlocks(state), error: state.errorMessage, loading: state.loading};
+  return {
+    blocks: getBlocks(state),
+    error: state.errorMessage,
+    loading: state.loading
+  };
 }
 
 BlocksContainer.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
   fetchBlocks: PropTypes.func,
   initBlockHeader: PropTypes.func,
+  numBlocksToDisplay: PropTypes.number,
   stopBlockHeader: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool,

packages/embark-ui/src/reducers/selectors.js

@@ -249,4 +249,3 @@ export function getPreviewUrl(state) {
 export function getEditorOperationStatus(state) {
   return state.editorOperationStatus;
 }
-