From 3ca8baa858b03d685a9781163d372fde6e132dd1 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Mon, 25 Mar 2024 15:38:14 +0700 Subject: [PATCH 1/4] fix: migrate old logic --- .../request/step/IOURequestStepDistance.js | 46 ++++++++++++++----- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js index dad610cbc636..c132b1b3f5e8 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.js +++ b/src/pages/iou/request/step/IOURequestStepDistance.js @@ -1,7 +1,6 @@ import lodashGet from 'lodash/get'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Button from '@components/Button'; import DistanceRequestFooter from '@components/DistanceRequest/DistanceRequestFooter'; @@ -22,8 +21,8 @@ import variables from '@styles/variables'; import * as IOU from '@userActions/IOU'; import * as MapboxToken from '@userActions/MapboxToken'; import * as Transaction from '@userActions/Transaction'; +import * as TransactionEdit from '@userActions/TransactionEdit'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes'; import StepScreenWrapper from './StepScreenWrapper'; @@ -41,14 +40,11 @@ const propTypes = { /** The transaction object being modified in Onyx */ transaction: transactionPropTypes, - /** backup version of the original transaction */ - transactionBackup: transactionPropTypes, }; const defaultProps = { report: {}, transaction: {}, - transactionBackup: {}, }; function IOURequestStepDistance({ @@ -57,7 +53,6 @@ function IOURequestStepDistance({ params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - transactionBackup, }) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -85,6 +80,8 @@ function IOURequestStepDistance({ const atLeastTwoDifferentWaypointsError = useMemo(() => _.size(validatedWaypoints) < 2, [validatedWaypoints]); const isEditing = action === CONST.IOU.ACTION.EDIT; const isCreatingNewRequest = Navigation.getActiveRoute().includes('start'); + const transactionWasSaved = useRef(false); + const [transactionBackup, setTransactionBackup] = useState({}); useEffect(() => { MapboxToken.init(); @@ -112,6 +109,31 @@ function IOURequestStepDistance({ setShouldShowAtLeastTwoDifferentWaypointsError(false); }, [atLeastTwoDifferentWaypointsError, duplicateWaypointsError, hasRouteError, isLoading, isLoadingRoute, nonEmptyWaypointsCount, transaction]); + useEffect(() => { + if (isCreatingNewRequest) { + return () => {}; + } + // This effect runs when the component is mounted and unmounted. It's purpose is to be able to properly + // discard changes if the user cancels out of making any changes. This is accomplished by backing up the + // original transaction, letting the user modify the current transaction, and then if the user ever + // cancels out of the modal without saving changes, the original transaction is restored from the backup. + + // On mount, create the backup transaction. + setTransactionBackup(transaction); + 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) { + return; + } + setTransactionBackup({}); + TransactionEdit.restoreOriginalTransactionFromBackup(lodashGet(transaction, 'transactionID', '')); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const navigateBack = () => { Navigation.goBack(backTo); }; @@ -187,10 +209,14 @@ function IOURequestStepDistance({ const submitWaypoints = useCallback(() => { // If there is any error or loading state, don't let user go to next page. - if (duplicateWaypointsError || atLeastTwoDifferentWaypointsError || hasRouteError || isLoadingRoute || isLoading) { + if (duplicateWaypointsError || atLeastTwoDifferentWaypointsError || hasRouteError || isLoadingRoute || (!isEditing && isLoading)) { setShouldShowAtLeastTwoDifferentWaypointsError(true); return; } + if (!isCreatingNewRequest) { + transactionWasSaved.current = true; + } + if (isEditing) { // If nothing was changed, simply go to transaction thread // We compare only addresses because numbers are rounded while backup @@ -213,6 +239,7 @@ function IOURequestStepDistance({ hasRouteError, isLoadingRoute, isLoading, + isCreatingNewRequest, isEditing, navigateToNextStep, transactionBackup, @@ -290,9 +317,4 @@ IOURequestStepDistance.defaultProps = defaultProps; export default compose( withWritableReportOrNotFound, withFullTransactionOrNotFound, - withOnyx({ - transactionBackup: { - key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${props.transactionID}`, - }, - }), )(IOURequestStepDistance); From 5c60b2fc141d87a698b3ec77c4154e6024cdf8c2 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 26 Mar 2024 11:21:08 +0700 Subject: [PATCH 2/4] backup transaction --- src/libs/actions/TransactionEdit.ts | 38 ++----------------- .../request/step/IOURequestStepDistance.js | 11 ++---- 2 files changed, 6 insertions(+), 43 deletions(-) diff --git a/src/libs/actions/TransactionEdit.ts b/src/libs/actions/TransactionEdit.ts index b1710aa72cbb..c980106fb036 100644 --- a/src/libs/actions/TransactionEdit.ts +++ b/src/libs/actions/TransactionEdit.ts @@ -3,40 +3,8 @@ import type {OnyxEntry} from 'react-native-onyx'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Transaction} from '@src/types/onyx'; -/** - * Makes a backup copy of a transaction object that can be restored when the user cancels editing a transaction. - */ -function createBackupTransaction(transaction: OnyxEntry) { - if (!transaction) { - return; - } - - const newTransaction = { - ...transaction, - }; - - // Use set so that it will always fully overwrite any backup transaction that could have existed before - Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction.transactionID}`, newTransaction); -} - -/** - * Removes a transaction from Onyx that was only used temporary in the edit flow - */ -function removeBackupTransaction(transactionID: string) { - Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, null); -} - -function restoreOriginalTransactionFromBackup(transactionID: string) { - const connectionID = Onyx.connect({ - key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, - callback: (backupTransaction) => { - Onyx.disconnect(connectionID); - - // Use set to completely overwrite the original transaction - Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, backupTransaction); - removeBackupTransaction(transactionID); - }, - }); +function restoreOriginalTransactionFromBackup(transactionID: string, backupTransaction: OnyxEntry) { + Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, backupTransaction); } -export {createBackupTransaction, removeBackupTransaction, restoreOriginalTransactionFromBackup}; +export default {restoreOriginalTransactionFromBackup}; diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js index c132b1b3f5e8..5f7fde9d41d1 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.js +++ b/src/pages/iou/request/step/IOURequestStepDistance.js @@ -39,7 +39,6 @@ const propTypes = { /** The transaction object being modified in Onyx */ transaction: transactionPropTypes, - }; const defaultProps = { @@ -120,16 +119,15 @@ function IOURequestStepDistance({ // On mount, create the backup transaction. setTransactionBackup(transaction); - 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) { + if (transactionWasSaved.current || _.isEqual(transaction, transactionBackup)) { return; } + TransactionEdit.restoreOriginalTransactionFromBackup(lodashGet(transaction, 'transactionID', ''), transactionBackup); setTransactionBackup({}); - TransactionEdit.restoreOriginalTransactionFromBackup(lodashGet(transaction, 'transactionID', '')); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -314,7 +312,4 @@ IOURequestStepDistance.displayName = 'IOURequestStepDistance'; IOURequestStepDistance.propTypes = propTypes; IOURequestStepDistance.defaultProps = defaultProps; -export default compose( - withWritableReportOrNotFound, - withFullTransactionOrNotFound, -)(IOURequestStepDistance); +export default compose(withWritableReportOrNotFound, withFullTransactionOrNotFound)(IOURequestStepDistance); From 7854bc8406c3787199fed92f96ec1995091ec2cb Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 26 Mar 2024 12:37:27 +0700 Subject: [PATCH 3/4] remove redundant changes --- ios/Podfile.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 2966a4c0b2ca..310003ee8adc 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -39,7 +39,7 @@ PODS: - React-Core - Expo (50.0.4): - ExpoModulesCore - - ExpoImage (1.10.1): + - ExpoImage (1.11.0): - ExpoModulesCore - SDWebImage (~> 5.17.0) - SDWebImageAVIFCoder (~> 0.10.1) @@ -1790,7 +1790,7 @@ SPEC CHECKSUMS: EXAV: 09a4d87fa6b113fbb0ada3aade6799f78271cb44 EXImageLoader: 55080616b2fe9da19ef8c7f706afd9814e279b6b Expo: 1e3bcf9dd99de57a636127057f6b488f0609681a - ExpoImage: 1cdaa65a6a70bb01067e21ad1347ff2d973885f5 + ExpoImage: 390c524542b258f8173f475c1cc71f016444a7be ExpoImageManipulator: c1d7cb865eacd620a35659f3da34c70531f10b59 ExpoModulesCore: 96d1751929ad10622773bb729ab28a8423f0dd0c FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4 @@ -1921,8 +1921,8 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a - Yoga: 13c8ef87792450193e117976337b8527b49e8c03 + Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 PODFILE CHECKSUM: a431c146e1501391834a2f299a74093bac53b530 -COCOAPODS: 1.15.2 +COCOAPODS: 1.13.0 From 16b399d3792ec0d98900e3610b2fbbff560b5865 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 26 Mar 2024 14:25:23 +0700 Subject: [PATCH 4/4] fix import --- src/pages/iou/request/step/IOURequestStepDistance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js index 5f7fde9d41d1..1fa4a87ea3a4 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.js +++ b/src/pages/iou/request/step/IOURequestStepDistance.js @@ -21,7 +21,7 @@ import variables from '@styles/variables'; import * as IOU from '@userActions/IOU'; import * as MapboxToken from '@userActions/MapboxToken'; import * as Transaction from '@userActions/Transaction'; -import * as TransactionEdit from '@userActions/TransactionEdit'; +import TransactionEdit from '@userActions/TransactionEdit'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';