Merge pull request #1809 from CityOfZion/feature/add-polling-to-activity

feature: adds polling to activity tab
CityOfZion · Mar 1, 2019 · 2c9ada3 · 2c9ada3
2 parents 82c883c + 7ee21c8
commit 2c9ada3
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 7 deletions.
diff --git a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionHistoryPanel renders without crashing 1`] = `
-<withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory))))))))))))))))))))))
+<withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(Connect(Connect(withProgress(LoadedNotifier)))))))))))))))))))))))))
   address="AWy7RNBVr9vDadRMK9p7i7Z1tL7GrLAxoh"
   dispatch={[Function]}
   store={

diff --git a/app/components/Send/SendPanel/SendSuccess/index.jsx b/app/components/Send/SendPanel/SendSuccess/index.jsx
@@ -39,7 +39,7 @@ export default class SendSuccess extends React.Component<Props> {
           <CheckMarkIcon className={styles.sendSuccessHeaderIcon} />
           <div className={styles.sendSuccessHeaderInfo}>
             <h1 className={styles.sendSuccessHeaderInfoText}>
-              {numberOfItems} {pluralize('Transfer', numberOfItems)} completed
+              {numberOfItems} {pluralize('Transfer', numberOfItems)} pending
             </h1>
             <p className={styles.sendSuccessParagraphText}>
               {this.txFormattedDate}

diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx
@@ -13,16 +13,29 @@ type Props = {
   transactions: Array<Object>,
   handleFetchAdditionalTxData: () => void,
   handleGetPendingTransactionInfo: () => void,
+  handleRefreshTxData: () => void,
   pendingTransactions: Array<Object>,
   address: string,
 }
 
+const REFRESH_INTERVAL_MS = 30000
+
 export default class TransactionHistory extends React.Component<Props> {
+  transactionDataInterval: IntervalID
+
   static defaultProps = {
     transactions: [],
     pendingTransactions: [],
   }
 
+  componentDidMount() {
+    this.addPolling()
+  }
+
+  componentWillUnmount() {
+    this.removePolling()
+  }
+
   render() {
     const { className, transactions } = this.props
     const filteredPendingTransactions = this.pruneConfirmedTransactionsFromPending()
@@ -41,6 +54,19 @@ export default class TransactionHistory extends React.Component<Props> {
     )
   }
 
+  addPolling = () => {
+    this.transactionDataInterval = setInterval(async () => {
+      await this.props.handleGetPendingTransactionInfo()
+      this.props.handleRefreshTxData()
+    }, REFRESH_INTERVAL_MS)
+  }
+
+  removePolling = () => {
+    if (this.transactionDataInterval) {
+      clearInterval(this.transactionDataInterval)
+    }
+  }
+
   pruneConfirmedTransactionsFromPending() {
     const { transactions, pendingTransactions } = this.props
     const confirmed = transactions.map(tx => tx.txid)

diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/index.js b/app/components/TransactionHistory/TransactionHistoryPanel/index.js
@@ -9,6 +9,7 @@ import withProgressPanel from '../../../hocs/withProgressPanel'
 import withAuthData from '../../../hocs/withAuthData'
 import withNetworkData from '../../../hocs/withNetworkData'
 import withLoadingProp from '../../../hocs/withLoadingProp'
+import withSuccessNotification from '../../../hocs/withSuccessNotification'
 
 const mapTransactionsDataToProps = transactions => ({
   transactions,
@@ -21,6 +22,12 @@ const mapAccountActionsToProps = (actions, { net, address }) => ({
       address,
       shouldIncrementPagination: true,
     }),
+  handleRefreshTxData: () =>
+    actions.call({
+      net,
+      address,
+      shouldIncrementPagination: false,
+    }),
 })
 
 const mapPendingTransactionActionsToProps = (actions, { net, address }) => ({
@@ -47,4 +54,8 @@ export default compose(
   withData(getPendingTransactionInfo, mapPendingTransactionInfoToProps),
   withLoadingProp(transactionHistoryActions),
   withData(transactionHistoryActions, mapTransactionsDataToProps),
+  withSuccessNotification(
+    transactionHistoryActions,
+    'Received latest transaction information.',
+  ),
 )(TransactionHistoryPanel)
diff --git a/app/containers/Dashboard/Dashboard.jsx b/app/containers/Dashboard/Dashboard.jsx
@@ -25,7 +25,7 @@ type Props = {
 const REFRESH_INTERVAL_MS = 30000
 
 export default class Dashboard extends Component<Props> {
-  walletDataInterval: ?number
+  walletDataInterval: ?IntervalID
 
   componentDidMount() {
     this.addPolling()
@@ -80,17 +80,14 @@ export default class Dashboard extends Component<Props> {
   }
 
   addPolling = () => {
-    // $FlowFixMe
     this.walletDataInterval = setInterval(
       this.props.loadWalletData,
       REFRESH_INTERVAL_MS,
     )
   }
 
   removePolling = () => {
-    // $FlowFixMe
     if (this.walletDataInterval) {
-      // $FlowFixMe
       clearInterval(this.walletDataInterval)
     }
   }

diff --git a/app/modules/transactions.js b/app/modules/transactions.js
@@ -190,7 +190,7 @@ export const sendTransaction = ({
       dispatch(
         showSuccessNotification({
           message:
-            'Transaction complete! Your balance will automatically update when the blockchain has processed it.',
+            'Transaction pending! Your balance will automatically update when the blockchain has processed it.',
         }),
       )
       return resolve(response)