Merge pull request #16093 from tienifr/fix/15627-sync-update-and-reco…

…nnect-on-reconnection

fix/15627: Requeue ReconnectApp API requests to fix old data getting rendered when going from offline to online mode

src/CONST.js

@@ -494,6 +494,9 @@ const CONST = {
         MAX_RETRY_WAIT_TIME_MS: 10 * 1000,
         PROCESS_REQUEST_DELAY_MS: 1000,
         MAX_PENDING_TIME_MS: 10 * 1000,
+        COMMAND: {
+            RECONNECT_APP: 'ReconnectApp',
+        },
     },
     NVP: {
         IS_FIRST_TIME_NEW_EXPENSIFY_USER: 'isFirstTimeNewExpensifyUser',

src/libs/HttpUtils.js

@@ -21,6 +21,9 @@ Onyx.connect({
 // We use the AbortController API to terminate pending request in `cancelPendingRequests`
 let cancellationController = new AbortController();
 
+// To terminate pending ReconnectApp requests https://github.com/Expensify/App/issues/15627
+let reconnectAppCancellationController = new AbortController();
+
 /**
  * Send an HTTP request, and attempt to resolve the json response.
  * If there is a network error, we'll set the application offline.
@@ -29,12 +32,18 @@ let cancellationController = new AbortController();
  * @param {String} [method]
  * @param {Object} [body]
  * @param {Boolean} [canCancel]
+ * @param {String} [command]
  * @returns {Promise}
  */
-function processHTTPRequest(url, method = 'get', body = null, canCancel = true) {
+function processHTTPRequest(url, method = 'get', body = null, canCancel = true, command = '') {
+    let signal;
+    if (canCancel) {
+        signal = command === CONST.NETWORK.COMMAND.RECONNECT_APP ? reconnectAppCancellationController.signal : cancellationController.signal;
+    }
+
     return fetch(url, {
         // We hook requests to the same Controller signal, so we can cancel them all at once
-        signal: canCancel ? cancellationController.signal : undefined,
+        signal,
         method,
         body,
     })
@@ -109,7 +118,12 @@ function xhr(command, data, type = CONST.NETWORK.METHOD.POST, shouldUseSecure =
     });
 
     const url = ApiUtils.getCommandURL({shouldUseSecure, command});
-    return processHTTPRequest(url, type, formData, data.canCancel);
+    return processHTTPRequest(url, type, formData, data.canCancel, command);
+}
+
+function cancelPendingReconnectAppRequest() {
+    reconnectAppCancellationController.abort();
+    reconnectAppCancellationController = new AbortController();
 }
 
 function cancelPendingRequests() {
@@ -118,9 +132,11 @@ function cancelPendingRequests() {
     // We create a new instance because once `abort()` is called any future requests using the same controller would
     // automatically get rejected: https://dom.spec.whatwg.org/#abortcontroller-api-integration
     cancellationController = new AbortController();
+    cancelPendingReconnectAppRequest();
 }
 
 export default {
     xhr,
     cancelPendingRequests,
+    cancelPendingReconnectAppRequest,
 };

src/libs/actions/App.js

@@ -165,7 +165,7 @@ function openApp() {
  * Refreshes data when the app reconnects
  */
 function reconnectApp() {
-    API.write('ReconnectApp', {policyIDList: getNonOptimisticPolicyIDs(allPolicies)}, {
+    API.write(CONST.NETWORK.COMMAND.RECONNECT_APP, {policyIDList: getNonOptimisticPolicyIDs(allPolicies)}, {
         optimisticData: [{
             onyxMethod: CONST.ONYX.METHOD.MERGE,
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,

src/libs/actions/PersistedRequests.js

@@ -1,6 +1,8 @@
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
+import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
+import HttpUtils from '../HttpUtils';
 
 let persistedRequests = [];
 
@@ -17,7 +19,12 @@ function clear() {
  * @param {Array} requestsToPersist
  */
 function save(requestsToPersist) {
-    persistedRequests = persistedRequests.concat(requestsToPersist);
+    HttpUtils.cancelPendingReconnectAppRequest();
+    persistedRequests = _.chain(persistedRequests)
+        .concat(requestsToPersist)
+        .partition(request => request.command !== CONST.NETWORK.COMMAND.RECONNECT_APP)
+        .flatten()
+        .value();
     Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, persistedRequests);
 }