From d893123d58eba87fd10fd8a365e4603211d0a7d6 Mon Sep 17 00:00:00 2001
From: Emilio Silva Schlenker <e18r@protonmail.com>
Date: Mon, 11 Mar 2019 10:20:25 -0300
Subject: [PATCH] Recent payments update on each new tip (#78)

The recent payments component was updated to handle new tips by
filtering out transactions that didn't happen in the current
session, and also by updating itself on the go on each tip received.
---
 .../components/RecentPayments/index.js        | 21 +++++++++++++++++--
 src/pages/Dashboard/components/Tip.js         | 13 ++----------
 src/pages/Dashboard/desktop.view.js           |  7 ++++++-
 src/pages/Dashboard/index.js                  |  9 +++++---
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard/components/RecentPayments/index.js b/src/pages/Dashboard/components/RecentPayments/index.js
index b93353c..a02bde0 100644
--- a/src/pages/Dashboard/components/RecentPayments/index.js
+++ b/src/pages/Dashboard/components/RecentPayments/index.js
@@ -30,23 +30,40 @@ class RecentPayments extends React.Component {
     isLoading: true
   };
 
-  componentDidMount() {
+  loadTxs(props) {
     store.fetch.pos().subscribe(async result => {
       // eslint-disable-next-line new-cap
       this.wallet = new xDAIHDWallet(null, result.data.pos.address);
       await this.wallet.setWeb3();
       await this.wallet.fetchEthTransactions();
+      let filteredTxs = [];
+      if(props.txHashes) {
+        filteredTxs = this.wallet.transactions.filter(tx => {
+          return props.txHashes.includes(tx.transactionHash);
+        });
+      }
+      else {
+        filteredTxs = this.wallet.transactions;
+      }
       this.setState({
         // eslint-disable-next-line react/no-unused-state
-        transactions: this.wallet.transactions,
+        transactions: filteredTxs,
         isLoading: false
       });
     });
+  }
+
+  componentDidMount() {
+    this.loadTxs(this.props);
     if(this.props.type) {
       this.setState({ type: this.props.type });
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.loadTxs(nextProps);
+  }
+
   render() {
     const { transactions, isLoading } = this.state;
     return (
diff --git a/src/pages/Dashboard/components/Tip.js b/src/pages/Dashboard/components/Tip.js
index ff3eb5c..0dddb2c 100644
--- a/src/pages/Dashboard/components/Tip.js
+++ b/src/pages/Dashboard/components/Tip.js
@@ -31,7 +31,6 @@ class Tip extends Component {
     this.state = {
       posAddress: null,
       txState: null,
-      txHashes: [],
     };
   }
 
@@ -39,15 +38,9 @@ class Tip extends Component {
     this.setState({ txState: WatcherTx.STATES.PENDING });
     this.tipWatcher = new WatcherTx(WatcherTx.NETWORKS.XDAI);
     this.tipWatcher.xdaiTransfer(this.state.posAddress, null, data => {
-      this.setState(prevState => {
-        //console.log(prevState);
-        return {
-          txState: data.state,
-          //txHashes: prevState.txHashes.push(data.txHash),
-        };
-      });
+      this.setState({ txState: data.state});
       if (data.state === WatcherTx.STATES.CONFIRMED) {
-        this.props.onPaymentReceived();
+        this.props.onTipReceived(data.txHash);
       }
     });
   }
@@ -64,7 +57,6 @@ class Tip extends Component {
       const posAddress = result.data.pos.address;
       this.setState({ posAddress });
     });
-    this.startWatcher();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -73,7 +65,6 @@ class Tip extends Component {
     }
     else {
       this.stopWatcher();
-      console.log(this.state);
     }
   }
 
diff --git a/src/pages/Dashboard/desktop.view.js b/src/pages/Dashboard/desktop.view.js
index ca8a419..bda6fdb 100644
--- a/src/pages/Dashboard/desktop.view.js
+++ b/src/pages/Dashboard/desktop.view.js
@@ -62,7 +62,12 @@ export default function() {
                   }
                 />
               )}
-              {activeTab === 'tip' && <RecentPayments type="tips" />}
+              {activeTab === 'tip' && (
+                <RecentPayments
+                  type="tips"
+                  txHashes={this.state.tipHashes}
+                />
+              )}
             </RightSide>
             <LeftSide>
               {activeTab !== 'tip' && (
diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js
index bb1cb8d..8ab401f 100644
--- a/src/pages/Dashboard/index.js
+++ b/src/pages/Dashboard/index.js
@@ -20,7 +20,8 @@ class Dashboard extends Component {
       totalAmount: '0',
       paymentModalOpen: false,
       setupModalOpen: false,
-      pos: { address: null }
+      pos: { address: null },
+      tipHashes: [],
     };
   }
 
@@ -63,8 +64,10 @@ class Dashboard extends Component {
     }, 5000);
   };
 
-  onTipReceived = () => {
-    
+  onTipReceived = (txHash) => {
+    const { tipHashes } = this.state;
+    tipHashes.push(txHash);
+    this.setState({ tipHashes });
   }
 
   handleNavItemChange = activeTab => {