embarklabs/embark
2
0
Fork 0
mirror of https://github.com/embarklabs/embark.git synced 2025-01-27 05:56:21 +00:00
Code Issues Projects Releases Wiki Activity

add pagination to transactions too

Browse Source
This commit is contained in:
Jonathan Rainville 2018-10-24 14:47:06 -04:00
parent ab3fa97592
commit 3d3ce559e9
3 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
embark-ui/src/components/Transactions.js
View File

@ -4,9 +4,9 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon'; import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore"; import Pages from "./Pagination";
const Transactions = ({transactions, showLoadMore, loadMore}) => ( const Transactions = ({transactions, changePage, currentPage, numberOfPages}) => (
<Row> <Row>
<Col> <Col>
<Card> <Card>
@ -41,7 +41,7 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
</Row> </Row>
</div> </div>
))} ))}
{showLoadMore && <LoadMore loadMore={() => loadMore()}/>} <Pages changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -50,8 +50,9 @@ const Transactions = ({transactions, showLoadMore, loadMore}) => (
Transactions.propTypes = { Transactions.propTypes = {
transactions: PropTypes.arrayOf(PropTypes.object), transactions: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool, changePage: PropTypes.func,
loadMore: PropTypes.func currentPage: PropTypes.number,
numberOfPages: PropTypes.number
}; };
export default Transactions; export default Transactions;

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

@ -15,6 +15,7 @@ class BlocksContainer extends Component {
this.state = {currentPage: 0}; this.state = {currentPage: 0};
this.numberOfBlocks = 0; this.numberOfBlocks = 0;
this.currentBlocks = [];
} }
componentDidMount() { componentDidMount() {
@ -51,11 +52,14 @@ class BlocksContainer extends Component {
} }
render() { render() {
const currentBlocks = this.getCurrentBlocks(); const newBlocks = this.getCurrentBlocks();
if (newBlocks.length) {
this.currentBlocks = newBlocks;
}
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={currentBlocks.length > 0} {...this.props} render={() => ( <DataWrapper shouldRender={this.currentBlocks.length > 0} {...this.props} render={() => (
<Blocks blocks={currentBlocks} numberOfPages={this.getNumberOfPages()} <Blocks blocks={this.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()} />
)} /> )} />

49
embark-ui/src/containers/TransactionsContainer.js
View File

@ -7,7 +7,17 @@ import Transactions from '../components/Transactions';
import DataWrapper from "../components/DataWrapper"; import DataWrapper from "../components/DataWrapper";
import {getTransactions} from "../reducers/selectors"; import {getTransactions} from "../reducers/selectors";
const MAX_TXS = 10; // TODO use same constant as API
class TransactionsContainer extends Component { class TransactionsContainer extends Component {
constructor(props) {
super(props);
this.state = {currentPage: 0};
this.numberOfTxs = 0;
this.currentTxs = [];
}
componentDidMount() { componentDidMount() {
this.props.fetchTransactions(); this.props.fetchTransactions();
this.props.initBlockHeader(); this.props.initBlockHeader();
@ -17,24 +27,41 @@ class TransactionsContainer extends Component {
this.props.stopBlockHeader(); this.props.stopBlockHeader();
} }
loadMore() { getNumberOfPages() {
this.props.fetchTransactions(this.loadMoreFrom()); if (!this.numberOfTxs) {
let transactions = this.props.transactions;
if (transactions.length === 0) {
this.numberOfTxs = 0;
} else {
this.numberOfTxs = transactions[transactions.length - 1].blockNumber - 1;
}
}
return Math.ceil(this.numberOfTxs / MAX_TXS);
} }
loadMoreFrom() { changePage(newPage) {
let transactions = this.props.transactions; this.setState({currentPage: newPage});
if (transactions.length === 0) {
return 0; this.props.fetchTransactions((newPage * MAX_TXS) + MAX_TXS);
} }
return transactions[transactions.length - 1].blockNumber - 1;
getCurrentTransactions() {
const currentPage = this.state.currentPage || this.getNumberOfPages();
return this.props.transactions.filter(tx => tx.blockNumber <= (currentPage * MAX_TXS) + MAX_TXS &&
tx.blockNumber > currentPage * MAX_TXS);
} }
render() { render() {
const newTxs = this.getCurrentTransactions();
if (newTxs.length) {
this.currentTxs = newTxs;
}
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={this.props.transactions.length > 0} {...this.props} render={({transactions}) => ( <DataWrapper shouldRender={this.currentTxs.length > 0} {...this.props} render={() => (
<Transactions transactions={transactions} <Transactions transactions={this.currentTxs} numberOfPages={this.getNumberOfPages()}
showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} /> changePage={(newPage) => this.changePage(newPage)}
currentPage={this.state.currentPage || this.getNumberOfPages()} />
)} /> )} />
</React.Fragment> </React.Fragment>
); );