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} /> )} /> );