From b5ad608d88c053a36bbedbc0bd81ca91e79a4a6a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 8 Nov 2018 12:13:36 -0500
Subject: [PATCH] add RefreshTransactionList button

---
 .../component/transactionListRecent/view.jsx  | 14 ++---
 .../transactionRefreshButton/index.js         | 16 ++++++
 .../transactionRefreshButton/view.jsx         | 51 +++++++++++++++++++
 src/renderer/page/transactionHistory/view.jsx | 13 ++---
 4 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 src/renderer/component/transactionRefreshButton/index.js
 create mode 100644 src/renderer/component/transactionRefreshButton/view.jsx

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">