[HOLD for payment 2025-01-24] [$250] Distance- Waypoint is saved when distance editor RHP is refreshed and dismissed without saving

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.60-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh011101s2@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Submit a distance expense
4. Go to transaction thread
5. Click Distance
6. Add another waypoint
7. Refresh the page while distance editor RHP is open (close and reopen the app on Android and iOS)
8. Click outside the RHP to dismiss it
9. Click Distance

Expected Result:

The waypoint added in Step 6 will not appear because the new distance is not saved

Actual Result:

The waypoint added in Step 6 appears even when the new distance is not saved

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6662755_1731429445776.20241113_003143.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857103747653162057
• Upwork Job ID: 1857103747653162057
• Last Price Increase: 2024-12-19
• Automatic offers:
• rayane-djouah | Reviewer | 105406722
• FitseTLT | Contributor | 105406724

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-11-21 19:03:45 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance- Waypoint is saved when distance editor RHP is refreshed and dismissed without saving

What is the root cause of that problem?

We already have a code that is run on unmount to restore transaction here

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 230 in 8a83e2b

TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', IOUUtils.shouldUseTransactionDraft(action));

But it is never called for the case of a reloading the page
so when it is opened after refresh we re-load the changed transaction to the backup so if we dismiss it will have the new waypoints

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 221 in 8a83e2b

TransactionEdit.createBackupTransaction(transaction);

What changes do you think we should make in order to solve the problem?

We should update to only load backup transaction if the the transactionBackup is empty
we can use Onyx.connect and run the code inside the callback in createBackupTransaction
by updating createBackupTransaction

function createBackupTransaction(transaction: OnyxEntry<Transaction>, isDraft: boolean) {
    if (!transaction) {
        return;
    }

    // In Strict Mode, the backup logic useEffect is triggered twice on mount. The restore logic is delayed because we need to connect to the onyx first,
    // so it's possible that the restore logic is executed after creating the backup for the 2nd time which will completely clear the backup.
    // To avoid that, we need to cancel the pending connection.
    Onyx.disconnect(connection);
    const newTransaction = {
        ...transaction,
    };
    const conn = Onyx.connect({
        key: `${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`,
        callback: (transactionBackup) => {
            Onyx.disconnect(conn);
            if (transactionBackup) {
                Onyx.set(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`, transactionBackup);
                return;
            }
            // Use set so that it will always fully overwrite any backup transaction that could have existed before
            Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`, newTransaction);
        },
    });
}

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 221 in 64eaf2f

TransactionEdit.createBackupTransaction(transaction);

        TransactionEdit.createBackupTransaction(transaction, IOUUtils.shouldUseTransactionDraft(action));

Note that this will fix the bug not only on page reloadrefresh but also for app closing and reopening 👍

Or optionally
Or optionally

we need the setTimeout b/c by the time the effect is run useOnyx will not populate transactionBackup but

 setTimeout(() => {
            if (!transactionBackup) {
                // On mount, create the backup transaction.
                TransactionEdit.createBackupTransaction(transaction);
            }
        }, 0);

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-13 06:06:56 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Waypoint is saved when distance editor RHP is refreshed and dismissed without saving

What is the root cause of that problem?

When the page is reloaded, we can't execute this code to restore the original transaction from the backup.

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 222 to 236 in 3897516

	return () => {
	// If the user cancels out of the modal without without saving changes, then the original transaction
	// needs to be restored from the backup so that all changes are removed.
	if (transactionWasSaved.current) {
	TransactionEdit.removeBackupTransaction(transaction?.transactionID ?? '-1');
	return;
	}
	TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', IOUUtils.shouldUseTransactionDraft(action));
	// If the user opens IOURequestStepDistance in offline mode and then goes online, re-open the report to fill in missing fields from the transaction backup
	if (!transaction?.reportID) {
	return;
	}
	Report.openReport(transaction?.reportID);
	};

After the reload is complete, create a backup transaction with data that has not been restored to the original transaction. This causes the issue where we still see the waypoint edited but not saved

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 214 to 220 in 3897516

	useEffect(() => {
	if (isCreatingNewRequest) {
	return () => {};
	}
	// On mount, create the backup transaction.
	TransactionEdit.createBackupTransaction(transaction);

What changes do you think we should make in order to solve the problem?

To resolve this issue, we need to check if the page is reloaded, then we don't need to create a new backup with the edited data. By the following steps:

1 Create a new Onyx to indicate whether the page is reloaded or not

// src/ONYXKEYS.ts#L459
+      EDIT_DISTANCE_PAGE_RELOAD: 'editDistancePageReload_',

2 Listen for the event before the reload

// src/pages/iou/request/step/IOURequestStepDistance.tsx#L214
+    useEffect(() => {
+        window.addEventListener('beforeunload', () => {
+            Onyx.set(`${ONYXKEYS.EDIT_DISTANCE_PAGE_RELOAD}${transactionID}`, true);
+        });

+        return () => {
+            window.removeEventListener('beforeunload', () => {
+                Onyx.set(`${ONYXKEYS.EDIT_DISTANCE_PAGE_RELOAD}${transactionID}`, false);
+            });

+            Onyx.set(`${ONYXKEYS.EDIT_DISTANCE_PAGE_RELOAD}${transactionID}`, false);
+        };
+    }, [transactionID]);

3 Add loading to wait value of edit distance reload

// src/pages/iou/request/step/IOURequestStepDistance.tsx#L75
+    const [isEditDistancePageRefreshing, isEditDistancePageResult] = useOnyx(`${ONYXKEYS.EDIT_DISTANCE_PAGE_RELOAD}${transactionID}`);
// src/pages/iou/request/step/IOURequestStepDistance.tsx#L530

+    if (isLoadingOnyxValue(isEditDistancePageResult)) {
+        return <FullScreenLoadingIndicator />;
+    }

4 Add condition to check create new back up or not.

// src/pages/iou/request/step/IOURequestStepDistance.tsx#L215
 useEffect(() => {
        if (isCreatingNewRequest) {
            return () => {};
        }

        // On mount, create the backup transaction.
-        TransactionEdit.createBackupTransaction(transaction);
+        InteractionManager.runAfterInteractions(() => {
+            requestAnimationFrame(() => {
+                // On mount, create the backup transaction.
+                if (isTransactionPageRefreshing === true || isTransactionPageRefreshing === undefined) {
+                    if (transactionWasSaved.current) {
+                        TransactionEdit.removeBackupTransaction(transaction?.transactionID ?? '-1');
+                        return;
+                    }
+                    TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', IOUUtils.shouldUseTransactionDraft(action));

+                    if (!transaction?.reportID) {
+                        return;
+                    }
+                    Report.openReport(transaction?.reportID);
+                    return;
+                }

+                TransactionEdit.createBackupTransaction(transaction);
+            });
+        });

        return () => {
            // If the user cancels out of the modal without without saving changes, then the original transaction
            // needs to be restored from the backup so that all changes are removed.
            if (transactionWasSaved.current) {
                TransactionEdit.removeBackupTransaction(transaction?.transactionID ?? '-1');
                return;
            }
            TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', IOUUtils.shouldUseTransactionDraft(action));

            // If the user opens IOURequestStepDistance in offline mode and then goes online, re-open the report to fill in missing fields from the transaction backup
            if (!transaction?.reportID) {
                return;
            }
            Report.openReport(transaction?.reportID);
        };
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, []);

POC

Screen.Recording.2024-11-13.at.12.57.58.mp4

Test Branch

What alternative solutions did you explore? (Optional)

[joekaufmanexpensify]

Reproduced.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021857103747653162057

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)