lbry-desktop/ui/component/transactionRefreshButton/view.jsx

54 lines
1.3 KiB
React
Raw Normal View History

2018-11-08 18:13:36 +01:00
// @flow
import React, { PureComponent } from 'react';
import Button from 'component/button';
2019-11-01 20:17:06 +01:00
import { TX_LIST } from 'lbry-redux';
2018-11-08 18:13:36 +01:00
type Props = {
2019-11-01 20:17:06 +01:00
fetchTransactions: (?number, ?number) => void,
2018-11-08 18:13:36 +01:00
fetchingTransactions: boolean,
2019-11-01 18:27:01 +01:00
slim: boolean,
2018-11-08 18:13:36 +01:00
};
type State = {
label: string,
disabled: boolean,
};
2019-02-13 17:27:20 +01:00
class TransactionRefreshButton extends PureComponent<Props, State> {
2018-11-08 18:13:36 +01:00
constructor() {
super();
this.state = { label: __('Refresh'), disabled: false };
(this: any).handleClick = this.handleClick.bind(this);
}
handleClick() {
2019-11-01 18:27:01 +01:00
const { fetchTransactions, slim } = this.props;
2018-11-08 18:13:36 +01:00
// The fetchTransactions call will be super fast most of the time.
// Instead of showing a loading spinner for 100ms, change the label and show as "Refreshed!"
2019-11-01 18:27:01 +01:00
if (slim) {
2019-11-01 20:17:06 +01:00
fetchTransactions(1, TX_LIST.LATEST_PAGE_SIZE);
2019-11-01 18:27:01 +01:00
} else {
2019-11-01 20:17:06 +01:00
fetchTransactions();
2019-11-01 18:27:01 +01:00
}
2018-11-08 18:13:36 +01:00
this.setState({ label: __('Refreshed!'), disabled: true });
setTimeout(() => {
this.setState({ label: __('Refresh'), disabled: false });
}, 2000);
}
render() {
const { fetchingTransactions } = this.props;
const { label, disabled } = this.state;
return (
2019-10-23 20:59:33 +02:00
<Button button="link" label={label} onClick={this.handleClick} disabled={disabled || fetchingTransactions} />
2018-11-08 18:13:36 +01:00
);
}
}
2019-02-13 17:27:20 +01:00
export default TransactionRefreshButton;