diff --git a/embark-ui/src/components/Pagination.js b/embark-ui/src/components/Pagination.js index 2d566115..d8b1f1dc 100644 --- a/embark-ui/src/components/Pagination.js +++ b/embark-ui/src/components/Pagination.js @@ -6,7 +6,7 @@ const NB_PAGES_MAX = 8; const Pages = ({currentPage, numberOfPages, changePage}) => { let max = currentPage + NB_PAGES_MAX / 2; - if (max >= numberOfPages) { + if (max > numberOfPages) { max = numberOfPages; } let i = max - NB_PAGES_MAX; diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js index c580d70b..398f038a 100644 --- a/embark-ui/src/containers/BlocksContainer.js +++ b/embark-ui/src/containers/BlocksContainer.js @@ -14,6 +14,7 @@ class BlocksContainer extends Component { super(props); this.state = {currentPage: 0}; + this.numberOfBlocks = 0; } componentDidMount() { @@ -25,31 +26,36 @@ class BlocksContainer extends Component { this.props.stopBlockHeader(); } - loadMore() { - this.props.fetchBlocks(this.loadMoreFrom()); - } - getNumberOfPages() { - return Math.ceil(this.loadMoreFrom() / MAX_BLOCKS); - } - - loadMoreFrom() { - let blocks = this.props.blocks; - if (blocks.length === 0) { - return 0; + 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 blocks[blocks.length - 1].number - 1; + return Math.ceil(this.numberOfBlocks / MAX_BLOCKS); } changePage(newPage) { this.setState({currentPage: newPage}); + + this.props.fetchBlocks((newPage * MAX_BLOCKS) + MAX_BLOCKS); + } + + 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); } render() { + const currentBlocks = this.getCurrentBlocks(); return ( - 0} {...this.props} render={({blocks}) => ( - 0} {...this.props} render={() => ( + this.changePage(newPage)} currentPage={this.state.currentPage || this.getNumberOfPages()} /> )} />