status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

change page when clicking on it for blocks

This commit is contained in:
Jonathan Rainville 2018-10-24 14:27:01 -04:00
parent 8bdc8d41d4
commit ab3fa97592
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
embark-ui/src/components/Pagination.js
View File

@ -6,7 +6,7 @@ const NB_PAGES_MAX = 8;
const Pages = ({currentPage, numberOfPages, changePage}) => { const Pages = ({currentPage, numberOfPages, changePage}) => {
let max = currentPage + NB_PAGES_MAX / 2; let max = currentPage + NB_PAGES_MAX / 2;
if (max >= numberOfPages) { if (max > numberOfPages) {
max = numberOfPages; max = numberOfPages;
} }
let i = max - NB_PAGES_MAX; let i = max - NB_PAGES_MAX;

34
embark-ui/src/containers/BlocksContainer.js
View File

@ -14,6 +14,7 @@ class BlocksContainer extends Component {
super(props); super(props);
this.state = {currentPage: 0}; this.state = {currentPage: 0};
this.numberOfBlocks = 0;
} }
componentDidMount() { componentDidMount() {
@ -25,31 +26,36 @@ class BlocksContainer extends Component {
this.props.stopBlockHeader(); this.props.stopBlockHeader();
} }
loadMore() {
this.props.fetchBlocks(this.loadMoreFrom());
}
getNumberOfPages() { getNumberOfPages() {
return Math.ceil(this.loadMoreFrom() / MAX_BLOCKS); if (!this.numberOfBlocks) {
} let blocks = this.props.blocks;
if (blocks.length === 0) {
loadMoreFrom() { this.numberOfBlocks = 0;
let blocks = this.props.blocks; } else {
if (blocks.length === 0) { this.numberOfBlocks = blocks[blocks.length - 1].number - 1;
return 0; }
} }
return blocks[blocks.length - 1].number - 1; return Math.ceil(this.numberOfBlocks / MAX_BLOCKS);
} }
changePage(newPage) { changePage(newPage) {
this.setState({currentPage: 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() { render() {
const currentBlocks = this.getCurrentBlocks();
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => ( <DataWrapper shouldRender={currentBlocks.length > 0} {...this.props} render={() => (
<Blocks blocks={blocks} numberOfPages={this.getNumberOfPages()} <Blocks blocks={currentBlocks} numberOfPages={this.getNumberOfPages()}
changePage={(newPage) => this.changePage(newPage)} changePage={(newPage) => this.changePage(newPage)}
currentPage={this.state.currentPage || this.getNumberOfPages()} /> currentPage={this.state.currentPage || this.getNumberOfPages()} />
)} /> )} />