Load only 100 txns at a time
This commit is contained in:
parent
a785a998e8
commit
408a97ad59
|
@ -81,6 +81,7 @@
|
|||
.primarybutton {
|
||||
background-color: #c3921f;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding-top: 8px;
|
||||
|
|
|
@ -248,14 +248,15 @@ type Props = {
|
|||
|
||||
type State = {
|
||||
clickedTx: Transaction | null,
|
||||
modalIsOpen: boolean
|
||||
modalIsOpen: boolean,
|
||||
numTxnsToShow: number
|
||||
};
|
||||
|
||||
export default class Transactions extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = { clickedTx: null, modalIsOpen: false };
|
||||
this.state = { clickedTx: null, modalIsOpen: false, numTxnsToShow: 100 };
|
||||
}
|
||||
|
||||
txClicked = (tx: Transaction) => {
|
||||
|
@ -268,9 +269,17 @@ export default class Transactions extends Component<Props, State> {
|
|||
this.setState({ clickedTx: null, modalIsOpen: false });
|
||||
};
|
||||
|
||||
show100MoreTxns = () => {
|
||||
const { numTxnsToShow } = this.state;
|
||||
|
||||
this.setState({ numTxnsToShow: numTxnsToShow + 100 });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { transactions, info, addressBook, setSendTo } = this.props;
|
||||
const { clickedTx, modalIsOpen } = this.state;
|
||||
const { clickedTx, modalIsOpen, numTxnsToShow } = this.state;
|
||||
|
||||
const isLoadMoreEnabled = numTxnsToShow < transactions.length;
|
||||
|
||||
const addressBookMap = addressBook.reduce((map, obj) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
@ -291,7 +300,7 @@ export default class Transactions extends Component<Props, State> {
|
|||
<div className={[cstyles.center, cstyles.margintoplarge].join(' ')}>No Transactions Yet</div>
|
||||
)}
|
||||
{transactions &&
|
||||
transactions.map(t => {
|
||||
transactions.slice(0, numTxnsToShow).map(t => {
|
||||
const key = t.type + t.txid + t.address;
|
||||
return (
|
||||
<TxItemBlock
|
||||
|
@ -304,6 +313,16 @@ export default class Transactions extends Component<Props, State> {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{isLoadMoreEnabled && (
|
||||
<div
|
||||
style={{ marginLeft: '45%', width: '100px' }}
|
||||
className={cstyles.primarybutton}
|
||||
onClick={this.show100MoreTxns}
|
||||
>
|
||||
Load more
|
||||
</div>
|
||||
)}
|
||||
</ScrollPane>
|
||||
|
||||
<TxModal
|
||||
|
|
Loading…
Reference in New Issue