From a5a326e73a8642a95313ff875f05e104cdada8b3 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 18 Mar 2021 22:04:46 +0800
Subject: [PATCH] Drop old txo-fetch results

## Issue
Closes lbry-desktop 4317: `Transaction list shows previously requested data / pages`

## Approach
A naive approach of creating a random transaction ID for each fetch. The latest ID, stored in `state`, will be the expected one -- any other transaction results will be dropped.

The loading spinning will continue to spin until the latest ID's results are fetched.
---
 dist/bundle.es.js            | 29 ++++++++++++++++++++++++-----
 src/redux/actions/wallet.js  | 15 +++++++++++++--
 src/redux/reducers/wallet.js | 15 +++++++++++++--
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/dist/bundle.es.js b/dist/bundle.es.js
index 783ec9b..efdf3de 100644
--- a/dist/bundle.es.js
+++ b/dist/bundle.es.js
@@ -2840,8 +2840,11 @@ function doFetchTransactions(page = 1, pageSize = 99999) {
 
 function doFetchTxoPage() {
   return (dispatch, getState) => {
+    const fetchId = Math.random().toString(36).substr(2, 9);
+
     dispatch({
-      type: FETCH_TXO_PAGE_STARTED
+      type: FETCH_TXO_PAGE_STARTED,
+      data: fetchId
     });
 
     const state = getState();
@@ -2873,12 +2876,18 @@ function doFetchTxoPage() {
     }).then(res => {
       dispatch({
         type: FETCH_TXO_PAGE_COMPLETED,
-        data: res
+        data: {
+          result: res,
+          fetchId: fetchId
+        }
       });
     }).catch(e => {
       dispatch({
         type: FETCH_TXO_PAGE_COMPLETED,
-        data: e.message
+        data: {
+          error: e.message,
+          fetchId: fetchId
+        }
       });
     });
   };
@@ -6073,6 +6082,7 @@ const defaultState$5 = {
   massClaimingTips: false,
   pendingMassClaimTxid: null,
   txoPage: {},
+  fetchId: '',
   fetchingTxos: false,
   fetchingTxosError: undefined,
   pendingSupportTransactions: {},
@@ -6100,16 +6110,24 @@ const walletReducer = handleActions({
     });
   },
 
-  [FETCH_TXO_PAGE_STARTED]: state => {
+  [FETCH_TXO_PAGE_STARTED]: (state, action) => {
     return _extends$d({}, state, {
+      fetchId: action.data,
       fetchingTxos: true,
       fetchingTxosError: undefined
     });
   },
 
   [FETCH_TXO_PAGE_COMPLETED]: (state, action) => {
+    if (state.fetchId !== action.data.fetchId) {
+      // Leave 'state' and 'fetchingTxos' alone. The latter would ensure
+      // the spiner would continue spinning for the latest transaction.
+      return _extends$d({}, state);
+    }
+
     return _extends$d({}, state, {
-      txoPage: action.data,
+      txoPage: action.data.result,
+      fetchId: '',
       fetchingTxos: false
     });
   },
@@ -6117,6 +6135,7 @@ const walletReducer = handleActions({
   [FETCH_TXO_PAGE_FAILED]: (state, action) => {
     return _extends$d({}, state, {
       txoPage: {},
+      fetchId: '',
       fetchingTxos: false,
       fetchingTxosError: action.data
     });
diff --git a/src/redux/actions/wallet.js b/src/redux/actions/wallet.js
index 9ff0e1a..8d73e90 100644
--- a/src/redux/actions/wallet.js
+++ b/src/redux/actions/wallet.js
@@ -81,8 +81,13 @@ export function doFetchTransactions(page = 1, pageSize = 99999) {
 
 export function doFetchTxoPage() {
   return (dispatch, getState) => {
+    const fetchId = Math.random()
+      .toString(36)
+      .substr(2, 9);
+
     dispatch({
       type: ACTIONS.FETCH_TXO_PAGE_STARTED,
+      data: fetchId,
     });
 
     const state = getState();
@@ -120,13 +125,19 @@ export function doFetchTxoPage() {
       .then(res => {
         dispatch({
           type: ACTIONS.FETCH_TXO_PAGE_COMPLETED,
-          data: res,
+          data: {
+            result: res,
+            fetchId: fetchId,
+          },
         });
       })
       .catch(e => {
         dispatch({
           type: ACTIONS.FETCH_TXO_PAGE_COMPLETED,
-          data: e.message,
+          data: {
+            error: e.message,
+            fetchId: fetchId,
+          },
         });
       });
   };
diff --git a/src/redux/reducers/wallet.js b/src/redux/reducers/wallet.js
index de5ac68..6dd1917 100644
--- a/src/redux/reducers/wallet.js
+++ b/src/redux/reducers/wallet.js
@@ -47,6 +47,7 @@ type WalletState = {
   txoFetchParams: {},
   utxoCounts: {},
   txoPage: any,
+  fetchId: string,
   fetchingTxos: boolean,
   fetchingTxosError?: string,
   consolidatingUtxos: boolean,
@@ -99,6 +100,7 @@ const defaultState = {
   massClaimingTips: false,
   pendingMassClaimTxid: null,
   txoPage: {},
+  fetchId: '',
   fetchingTxos: false,
   fetchingTxosError: undefined,
   pendingSupportTransactions: {},
@@ -129,18 +131,26 @@ export const walletReducer = handleActions(
       };
     },
 
-    [ACTIONS.FETCH_TXO_PAGE_STARTED]: (state: WalletState) => {
+    [ACTIONS.FETCH_TXO_PAGE_STARTED]: (state: WalletState, action) => {
       return {
         ...state,
+        fetchId: action.data,
         fetchingTxos: true,
         fetchingTxosError: undefined,
       };
     },
 
     [ACTIONS.FETCH_TXO_PAGE_COMPLETED]: (state: WalletState, action) => {
+      if (state.fetchId !== action.data.fetchId) {
+        // Leave 'state' and 'fetchingTxos' alone. The latter would ensure
+        // the spiner would continue spinning for the latest transaction.
+        return { ...state };
+      }
+
       return {
         ...state,
-        txoPage: action.data,
+        txoPage: action.data.result,
+        fetchId: '',
         fetchingTxos: false,
       };
     },
@@ -149,6 +159,7 @@ export const walletReducer = handleActions(
       return {
         ...state,
         txoPage: {},
+        fetchId: '',
         fetchingTxos: false,
         fetchingTxosError: action.data,
       };