diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js
index ba27fbd0..405fa0fc 100644
--- a/embark-ui/src/components/Blocks.js
+++ b/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}) => (
@@ -37,7 +37,7 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
))}
- {showLoadMore && loadMore()}/>}
+
@@ -46,8 +46,8 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
Blocks.propTypes = {
blocks: PropTypes.arrayOf(PropTypes.object),
- showLoadMore: PropTypes.bool,
- loadMore: PropTypes.func
+ changePage: PropTypes.func,
+ currentPage: PropTypes.number
};
export default Blocks;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 37d5e6b7..f7ba5b29 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -129,7 +129,7 @@ class Layout extends React.Component {
-
+
{HEADER_NAV_ITEMS.map((item) => (
diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js
new file mode 100644
index 00000000..bc3ed83f
--- /dev/null
+++ b/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(
+ {
+ e.preventDefault();
+ changePage(i);
+ }}>
+ {i}
+
+ );
+ }
+
+ return (
+
+
+
+
+ {paginationItems}
+
+
+
+
+ );
+};
+
+Pages.propTypes = {
+ numberOfPages: PropTypes.number,
+ currentPage: PropTypes.number,
+ changePage: PropTypes.func
+};
+
+export default Pages;
diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js
index 1163214f..c5038dab 100644
--- a/embark-ui/src/containers/BlocksContainer.js
+++ b/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 (
0} {...this.props} render={({blocks}) => (
- = 0)} loadMore={() => this.loadMore()} />
+ = 0)}
+ changePage={(newPage) => this.changePage(newPage)} currentPage={this.state.currentPage} />
)} />
);