conflict in layout

embark-ui/src/components/Blocks.js

@@ -2,11 +2,11 @@ import React from 'react';
 import {Link} from "react-router-dom";
 import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 import PropTypes from 'prop-types';
+import Pages from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
-import LoadMore from "./LoadMore";
 
-const Blocks = ({blocks, showLoadMore, loadMore}) => (
+const Blocks = ({blocks, changePage, currentPage}) => (
   <Row>
     <Col>
       <Card>
@@ -37,7 +37,7 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
               </Row>
             </div>
           ))}
-          {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
+          <Pages changePage={changePage} currentPage={currentPage} numberOfPages={5}/>
         </CardBody>
       </Card>
     </Col>
@@ -46,8 +46,8 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
 
 Blocks.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
-  showLoadMore: PropTypes.bool,
+  changePage: PropTypes.func,
-  loadMore: PropTypes.func
+  currentPage: PropTypes.number
 };
 
 export default Blocks;

embark-ui/src/components/Layout.js

@@ -129,7 +129,7 @@ class Layout extends React.Component {
         </Nav>
         <AppHeaderDropdown className="list-unstyled d-xl-none" direction="down">
           <DropdownToggle nav>
-            <FontAwesome name='bars'/>
+            <FontAwesome name="bars"/>
           </DropdownToggle>
           <DropdownMenu>
             {HEADER_NAV_ITEMS.map((item) => (

embark-ui/src/components/Pagination.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
+import PropTypes from 'prop-types';
+
+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>);
+  }
+
+  return (
+    <Pagination aria-label="Page navigation example">
+      <PaginationItem>
+        <PaginationLink previous href="#"/>
+      </PaginationItem>
+      {paginationItems}
+      <PaginationItem>
+        <PaginationLink next href="#"/>
+      </PaginationItem>
+    </Pagination>
+  );
+};
+
+Pages.propTypes = {
+  numberOfPages: PropTypes.number,
+  currentPage: PropTypes.number,
+  changePage: PropTypes.func
+};
+
+export default Pages;

embark-ui/src/containers/BlocksContainer.js

@@ -8,6 +8,12 @@ import DataWrapper from "../components/DataWrapper";
 import {getBlocks} from "../reducers/selectors";
 
 class BlocksContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {currentPage: 1};
+  }
+
   componentDidMount() {
     this.props.fetchBlocks();
     this.props.initBlockHeader();
@@ -29,11 +35,16 @@ class BlocksContainer extends Component {
     return blocks[blocks.length - 1].number - 1;
   }
 
+  changePage(newPage) {
+    this.setState({currentPage: newPage});
+  }
+
   render() {
     return (
       <React.Fragment>
         <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
-          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
+          <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)}
+                  changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
         )} />
       </React.Fragment>
     );