diff --git a/src/renderer/component/transactionListRecent/view.jsx b/src/renderer/component/transactionListRecent/view.jsx index 3462a4d7f..41c60dd64 100644 --- a/src/renderer/component/transactionListRecent/view.jsx +++ b/src/renderer/component/transactionListRecent/view.jsx @@ -1,10 +1,11 @@ // @flow +import type { Transaction } from 'component/transactionList/view'; import React, { Fragment } from 'react'; import BusyIndicator from 'component/common/busy-indicator'; import Button from 'component/button'; import TransactionList from 'component/transactionList'; import * as icons from 'constants/icons'; -import type { Transaction } from 'component/transactionList/view'; +import RefreshTransactionButton from 'component/transactionRefreshButton'; type Props = { fetchTransactions: () => void, @@ -23,19 +24,12 @@ class TransactionListRecent extends React.PureComponent<Props> { } render() { - const { fetchingTransactions, hasTransactions, transactions, fetchTransactions } = this.props; + const { fetchingTransactions, hasTransactions, transactions } = this.props; return ( <section className="card card--section"> <div className="card__title card--space-between"> {__('Recent Transactions')} - <div className="card__actions-top-corner"> - <Button - button="inverse" - label={__('Refresh')} - onClick={fetchTransactions} - disabled={fetchingTransactions} - /> - </div> + <RefreshTransactionButton /> </div> <div className="card__subtitle"> {__('To view all of your transactions, navigate to the')}{' '} diff --git a/src/renderer/component/transactionRefreshButton/index.js b/src/renderer/component/transactionRefreshButton/index.js new file mode 100644 index 000000000..5f2ecd686 --- /dev/null +++ b/src/renderer/component/transactionRefreshButton/index.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux'; +import { doFetchTransactions, selectIsFetchingTransactions } from 'lbry-redux'; +import RefreshTransactionButton from './view'; + +const select = state => ({ + fetchingTransactions: selectIsFetchingTransactions(state), +}); + +const perform = dispatch => ({ + fetchTransactions: () => dispatch(doFetchTransactions()), +}); + +export default connect( + select, + perform +)(RefreshTransactionButton); diff --git a/src/renderer/component/transactionRefreshButton/view.jsx b/src/renderer/component/transactionRefreshButton/view.jsx new file mode 100644 index 000000000..bbaf730fe --- /dev/null +++ b/src/renderer/component/transactionRefreshButton/view.jsx @@ -0,0 +1,51 @@ +// @flow +import React, { PureComponent } from 'react'; +import Button from 'component/button'; + +type Props = { + fetchTransactions: () => void, + fetchingTransactions: boolean, +}; + +type State = { + label: string, + disabled: boolean, +}; + +class TransactionListRecent extends PureComponent<Props, State> { + constructor() { + super(); + + this.state = { label: __('Refresh'), disabled: false }; + + (this: any).handleClick = this.handleClick.bind(this); + } + + handleClick() { + const { fetchTransactions } = this.props; + + // 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!" + fetchTransactions(); + 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 ( + <Button + button="inverse" + label={label} + onClick={this.handleClick} + disabled={disabled || fetchingTransactions} + /> + ); + } +} + +export default TransactionListRecent; diff --git a/src/renderer/page/transactionHistory/view.jsx b/src/renderer/page/transactionHistory/view.jsx index 0c91fd021..465e2e633 100644 --- a/src/renderer/page/transactionHistory/view.jsx +++ b/src/renderer/page/transactionHistory/view.jsx @@ -3,7 +3,7 @@ import React from 'react'; import BusyIndicator from 'component/common/busy-indicator'; import TransactionList from 'component/transactionList'; import Page from 'component/page'; -import Button from 'component/button'; +import RefreshTransactionButton from 'component/transactionRefreshButton'; type Props = { fetchMyClaims: () => void, @@ -21,21 +21,14 @@ class TransactionHistoryPage extends React.PureComponent<Props> { } render() { - const { fetchingTransactions, transactions, fetchTransactions } = this.props; + const { fetchingTransactions, transactions } = this.props; return ( <Page> <section className="card card--section"> <div className="card__title card--space-between"> {__('Transaction History')} - <div className="card__actions-top-corner"> - <Button - button="inverse" - label={__('Refresh')} - onClick={fetchTransactions} - disabled={fetchingTransactions} - /> - </div> + <RefreshTransactionButton /> </div> {fetchingTransactions && !transactions.length ? ( <div className="card__content">