display correct pagination whatever the page

embark-ui/src/components/Blocks.js

@@ -6,7 +6,7 @@ import Pages from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
 
-const Blocks = ({blocks, changePage, currentPage}) => (
+const Blocks = ({blocks, changePage, currentPage, numberOfPages}) => (
   <Row>
     <Col>
       <Card>
@@ -37,7 +37,7 @@ const Blocks = ({blocks, changePage, currentPage}) => (
               </Row>
             </div>
           ))}
-          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={5}/>
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
         </CardBody>
       </Card>
     </Col>
@@ -47,7 +47,8 @@ const Blocks = ({blocks, changePage, currentPage}) => (
 Blocks.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
   changePage: PropTypes.func,
-  currentPage: PropTypes.number
+  currentPage: PropTypes.number,
+  numberOfPages: PropTypes.number
 };
 
 export default Blocks;

embark-ui/src/components/Pagination.js

@@ -2,27 +2,43 @@ import React from 'react';
 import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
 import PropTypes from 'prop-types';
 
+const NB_PAGES_MAX = 14;
+
 const Pages = ({currentPage, numberOfPages, changePage}) => {
-  const paginationItems = [];
-  for (let i = 1; i <= numberOfPages; i++) {
-    paginationItems.push(<PaginationItem active={currentPage === i} key={'page-' + i}>
-      <PaginationLink href="#" onClick={(e) => {
-        e.preventDefault();
-        changePage(i);
-      }}>
-        {i}
-      </PaginationLink>
-    </PaginationItem>);
+  let i = currentPage - NB_PAGES_MAX / 2;
+  if (i < 1) {
+    i = 1;
+  }
+  let max = i + NB_PAGES_MAX;
+  if (max > numberOfPages) {
+    max = numberOfPages;
+  }
+  const pageNumbers = [];
+  for (i; i <= max; i++) {
+    pageNumbers.push(i);
   }
 
   return (
     <Pagination aria-label="Page navigation example">
-      <PaginationItem>
-        <PaginationLink previous href="#"/>
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(currentPage - 1);
+        }}/>
       </PaginationItem>
-      {paginationItems}
-      <PaginationItem>
-        <PaginationLink next href="#"/>
+      {pageNumbers.map(number => (<PaginationItem active={currentPage === number} key={'page-' + number}>
+        <PaginationLink href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(number);
+        }}>
+          {number}
+        </PaginationLink>
+      </PaginationItem>))}
+      <PaginationItem disabled={currentPage >= numberOfPages}>
+        <PaginationLink next href="#" onClick={(e) => {
+          e.preventDefault();
+          changePage(currentPage + 1);
+        }}/>
       </PaginationItem>
     </Pagination>
   );

embark-ui/src/containers/BlocksContainer.js

@@ -7,6 +7,8 @@ import Blocks from '../components/Blocks';
 import DataWrapper from "../components/DataWrapper";
 import {getBlocks} from "../reducers/selectors";
 
+const MAX_BLOCKS = 10; // TODO use same constant as API
+
 class BlocksContainer extends Component {
   constructor(props) {
     super(props);
@@ -27,6 +29,10 @@ class BlocksContainer extends Component {
     this.props.fetchBlocks(this.loadMoreFrom());
   }
 
+  getNumberOfPages() {
+    return Math.ceil(this.loadMoreFrom() / MAX_BLOCKS);
+  }
+
   loadMoreFrom() {
     let blocks = this.props.blocks;
     if (blocks.length === 0) {
@@ -43,7 +49,7 @@ class BlocksContainer extends Component {
     return (
       <React.Fragment>
         <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
-          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)}
+          <Blocks blocks={blocks} numberOfPages={this.getNumberOfPages()}
                   changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
         )} />
       </React.Fragment>