Update optimistic IDs in sequential queue

src/libs/API.js

@@ -21,6 +21,9 @@ Request.use(Middleware.RecheckConnection);
 // Reauthentication - Handles jsonCode 407 which indicates an expired authToken. We need to reauthenticate and get a new authToken with our stored credentials.
 Request.use(Middleware.Reauthentication);
 
+// If an optimistic ID is not used by the server, this will update the remaining serialized requests using that optimistic ID to use the correct ID instead.
+Request.use(Middleware.HandleUnusedOptimisticID);
+
 // SaveResponseInOnyx - Merges either the successData or failureData into Onyx depending on if the call was successful or not. This needs to be the LAST middleware we use, don't add any
 // middlewares after this, because the SequentialQueue depends on the result of this middleware to pause the queue (if needed) to bring the app to an up-to-date state.
 Request.use(Middleware.SaveResponseInOnyx);

src/libs/Middleware/HandleUnusedOptimisticID.ts

@@ -0,0 +1,39 @@
+import _ from 'lodash';
+import ONYXKEYS from '../../ONYXKEYS';
+import Report from '../../types/onyx/Report';
+import {Middleware} from '../Request';
+import * as PersistedRequests from '../actions/PersistedRequests';
+import deepReplaceKeysAndValues from '../deepReplaceKeysAndValues';
+
+const handleUnusedOptimisticID: Middleware = (requestResponse, request, isFromSequentialQueue) =>
+ requestResponse.then((response) => {
+ const responseOnyxData = response?.onyxData ?? [];
+ responseOnyxData.forEach((onyxData) => {
+ const key = onyxData.key;
+ if (!key.startsWith(ONYXKEYS.COLLECTION.REPORT)) {
+ return;
+ }
+
+ if (!onyxData.value) {
+ return;
+ }
+
+ const report: Report = onyxData.value as Report;
+ const preexistingReportID = report.preexistingReportID;
+ if (!preexistingReportID) {
+ return;
+ }
+ const oldReportID = request.data?.reportID;
+ const offset = isFromSequentialQueue ? 1 : 0;
+ PersistedRequests.getAll()
+ .slice(offset)
+ .forEach((persistedRequest, index) => {
+ const persistedRequestClone = _.clone(persistedRequest);
+ persistedRequestClone.data = deepReplaceKeysAndValues(persistedRequest.data, oldReportID as string, preexistingReportID);
+ PersistedRequests.update(index + offset, persistedRequestClone);
+ });
+ });
+ return response;
+ });
+
+export default handleUnusedOptimisticID;

src/libs/Middleware/index.js

@@ -1,6 +1,7 @@
+import HandleUnusedOptimisticID from './HandleUnusedOptimisticID';
 import Logging from './Logging';
 import Reauthentication from './Reauthentication';
 import RecheckConnection from './RecheckConnection';
 import SaveResponseInOnyx from './SaveResponseInOnyx';
 
-export {Logging, Reauthentication, RecheckConnection, SaveResponseInOnyx};
+export {HandleUnusedOptimisticID, Logging, Reauthentication, RecheckConnection, SaveResponseInOnyx};

src/libs/Request.ts

@@ -2,12 +2,13 @@ import HttpUtils from './HttpUtils';
 import enhanceParameters from './Network/enhanceParameters';
 import * as NetworkStore from './Network/NetworkStore';
 import Request from '../types/onyx/Request';
+import Response from '../types/onyx/Response';
 
-type Middleware = (response: unknown, request: Request, isFromSequentialQueue: boolean) => Promise<unknown>;
+type Middleware = (response: Promise<Response>, request: Request, isFromSequentialQueue: boolean) => Promise<Response>;
 
 let middlewares: Middleware[] = [];
 
-function makeXHR(request: Request): Promise<unknown> {
+function makeXHR(request: Request): Promise<Response> {
  const finalParameters = enhanceParameters(request.command, request?.data ?? {});
  return NetworkStore.hasReadRequiredDataFromStorage().then(() => {
  // If we're using the Supportal token and this is not a Supportal request
@@ -16,10 +17,10 @@ function makeXHR(request: Request): Promise<unknown> {
  return new Promise<void>((resolve) => resolve());
  }
  return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure);
- });
+ }) as Promise<Response>;
 }
 
-function processWithMiddleware(request: Request, isFromSequentialQueue = false): Promise<unknown> {
+function processWithMiddleware(request: Request, isFromSequentialQueue = false): Promise<Response> {
  return middlewares.reduce((last, middleware) => middleware(last, request, isFromSequentialQueue), makeXHR(request));
 }
 
@@ -32,3 +33,4 @@ function clearMiddlewares() {
 }
 
 export {clearMiddlewares, processWithMiddleware, use};
+export type {Middleware};

src/libs/actions/PersistedRequests.ts

@@ -31,18 +31,21 @@ function remove(requestToRemove: Request) {
  * We only remove the first matching request because the order of requests matters.
  * If we were to remove all matching requests, we can end up with a final state that is different than what the user intended.
  */
- const requests = [...persistedRequests];
- const index = requests.findIndex((persistedRequest) => isEqual(persistedRequest, requestToRemove));
- if (index !== -1) {
- requests.splice(index, 1);
+ const index = persistedRequests.findIndex((persistedRequest) => isEqual(persistedRequest, requestToRemove));
+ if (index === -1) {
+ return;
  }
+ persistedRequests.splice(index, 1);
+ Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, persistedRequests);
+}
 
- persistedRequests = requests;
- Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, requests);
+function update(oldRequestIndex: number, newRequest: Request) {
+ persistedRequests.splice(oldRequestIndex, 1, newRequest);
+ Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, persistedRequests);
 }
 
 function getAll(): Request[] {
  return persistedRequests;
 }
 
-export {clear, save, getAll, remove};
+export {clear, save, getAll, remove, update};

src/libs/deepReplaceKeysAndValues.ts

@@ -0,0 +1,50 @@
+type ReplaceableValue = Record<string, unknown> | unknown[] | string | number | boolean | undefined | null;
+
+/**
+ * @param target the object or value to transform
+ * @param oldVal the value to search for
+ * @param newVal the replacement value
+ */
+function deepReplaceKeysAndValues<T extends ReplaceableValue>(target: T, oldVal: string, newVal: string): T {
+ if (!target) {
+ return target;
+ }
+
+ if (typeof target === 'string') {
+ return target.replace(oldVal, newVal) as T;
+ }
+
+ if (typeof target !== 'object') {
+ return target;
+ }
+
+ if (Array.isArray(target)) {
+ return target.map((item) => deepReplaceKeysAndValues(item as T, oldVal, newVal)) as T;
+ }
+
+ const newObj: Record<string, unknown> = {};
+ Object.entries(target).forEach(([key, val]) => {
+ const newKey = key.replace(oldVal, newVal);
+
+ if (typeof val === 'object') {
+ newObj[newKey] = deepReplaceKeysAndValues(val as T, oldVal, newVal);
+ return;
+ }
+
+ if (val === oldVal) {
+ newObj[newKey] = newVal;
+ return;
+ }
+
+ if (typeof val === 'string') {
+ newObj[newKey] = val.replace(oldVal, newVal);
+ return;
+ }
+
+ newObj[newKey] = val;
+ });
+
+ return newObj as T;
+}
+
+export default deepReplaceKeysAndValues;

src/types/onyx/Report.ts

@@ -49,7 +49,7 @@ type Report = {
  reportName?: string;
 
  /** ID of the report */
- reportID?: string;
+ reportID: string;
 
  /** The state that the report is currently in */
  stateNum?: ValueOf<typeof CONST.REPORT.STATE_NUM>;
@@ -77,6 +77,7 @@ type Report = {
  participantAccountIDs?: number[];
  total?: number;
  currency?: string;
+ preexistingReportID?: string;
 };
 
 export default Report;

tests/unit/MiddlewareTest.js

@@ -0,0 +1,102 @@
+import Onyx from 'react-native-onyx';
+import * as NetworkStore from '../../src/libs/Network/NetworkStore';
+import * as Request from '../../src/libs/Request';
+import * as SequentialQueue from '../../src/libs/Network/SequentialQueue';
+import * as TestHelper from '../utils/TestHelper';
+import waitForNetworkPromises from '../utils/waitForNetworkPromises';
+import ONYXKEYS from '../../src/ONYXKEYS';
+import * as MainQueue from '../../src/libs/Network/MainQueue';
+import HttpUtils from '../../src/libs/HttpUtils';
+
+Onyx.init({
+ keys: ONYXKEYS,
+});
+
+beforeAll(() => {
+ global.fetch = TestHelper.getGlobalFetchMock();
+});
+
+beforeEach(async () => {
+ SequentialQueue.pause();
+ MainQueue.clear();
+ HttpUtils.cancelPendingRequests();
+ NetworkStore.checkRequiredData();
+ await waitForNetworkPromises();
+ jest.clearAllMocks();
+ Request.clearMiddlewares();
+});
+
+describe('Middleware', () => {
+ describe('HandleUnusedOptimisticID', () => {
+ test('Normal request', async () => {
+ const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID');
+ const handleUnusedOptimisticID = jest.spyOn(actual, 'default');
+ Request.use(handleUnusedOptimisticID);
+ const requests = [
+ {
+ command: 'OpenReport',
+ data: {authToken: 'testToken', reportID: '1234'},
+ },
+ {
+ command: 'AddComment',
+ data: {authToken: 'testToken', reportID: '1234', reportActionID: '5678', reportComment: 'foo'},
+ },
+ ];
+ for (const request of requests) {
+ SequentialQueue.push(request);
+ }
+ SequentialQueue.unpause();
+ await waitForNetworkPromises();
+
+ expect(global.fetch).toHaveBeenCalledTimes(2);
+ expect(global.fetch).toHaveBeenLastCalledWith('https://www.expensify.com.dev/api?command=AddComment', expect.anything());
+ TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[1][1].body, {reportID: '1234', reportActionID: '5678', reportComment: 'foo'});
+ expect(global.fetch).toHaveBeenNthCalledWith(1, 'https://www.expensify.com.dev/api?command=OpenReport', expect.anything());
+ TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[0][1].body, {reportID: '1234'});
+ });
+
+ test('Request with preexistingReportID', async () => {
+ const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID');
+ const handleUnusedOptimisticID = jest.spyOn(actual, 'default');
+ Request.use(handleUnusedOptimisticID);
+ const requests = [
+ {
+ command: 'OpenReport',
+ data: {authToken: 'testToken', reportID: '1234'},
+ },
+ {
+ command: 'AddComment',
+ data: {authToken: 'testToken', reportID: '1234', reportActionID: '5678', reportComment: 'foo'},
+ },
+ ];
+ for (const request of requests) {
+ SequentialQueue.push(request);
+ }
+
+ global.fetch.mockImplementationOnce(async () => ({
+ ok: true,
+ json: async () => ({
+ jsonCode: 200,
+ onyxData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}1234`,
+ value: {
+ preexistingReportID: '5555',
+ },
+ },
+ ],
+ }),
+ }));
+
+ SequentialQueue.unpause();
+ await waitForNetworkPromises();
+
+ expect(global.fetch).toHaveBeenCalledTimes(2);
+ expect(global.fetch).toHaveBeenLastCalledWith('https://www.expensify.com.dev/api?command=AddComment', expect.anything());
+ TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[1][1].body, {reportID: '5555', reportActionID: '5678', reportComment: 'foo'});
+ expect(global.fetch).toHaveBeenNthCalledWith(1, 'https://www.expensify.com.dev/api?command=OpenReport', expect.anything());
+ TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[0][1].body, {reportID: '1234'});
+ });
+ });
+});