Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for edit amount page flickering #51935

Merged
merged 4 commits into from
Nov 5, 2024
Merged

Fix for edit amount page flickering #51935

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb1600a
migration from withOnyx to useOnyx for IOURequestStepAmount
jayeshmangwani Nov 3, 2024
5e21276
added isEmptyObject check before using the draftTransaction
jayeshmangwani Nov 3, 2024
571fd77
Merge branch 'main' into fix_for_edit_amout_page_flickering
jayeshmangwani Nov 5, 2024
9fa9db4
updated fallback policyID to -1
jayeshmangwani Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 10 additions & 54 deletions src/pages/iou/request/step/IOURequestStepAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
Expand Down Expand Up @@ -32,25 +32,7 @@ type AmountParams = {
paymentMethod?: PaymentMethodType;
};

type IOURequestStepAmountOnyxProps = {
/** The draft transaction that holds data to be persisted on the current transaction */
splitDraftTransaction: OnyxEntry<OnyxTypes.Transaction>;

/** Whether the confirmation step should be skipped */
skipConfirmation: OnyxEntry<boolean>;

/** The draft transaction object being modified in Onyx */
draftTransaction: OnyxEntry<OnyxTypes.Transaction>;

/** Personal details of all users */
personalDetails: OnyxEntry<OnyxTypes.PersonalDetailsList>;

/** The policy which the user has access to and which the report is tied to */
policy: OnyxEntry<OnyxTypes.Policy>;
};

type IOURequestStepAmountProps = IOURequestStepAmountOnyxProps &
WithCurrentUserPersonalDetailsProps &
type IOURequestStepAmountProps = WithCurrentUserPersonalDetailsProps &
WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_AMOUNT | typeof SCREENS.MONEY_REQUEST.CREATE> & {
/** The transaction object being modified in Onyx */
transaction: OnyxEntry<OnyxTypes.Transaction>;
Expand All @@ -65,14 +47,15 @@ function IOURequestStepAmount({
params: {iouType, reportID, transactionID, backTo, pageIndex, action, currency: selectedCurrency = ''},
},
transaction,
policy,
personalDetails,
currentUserPersonalDetails,
splitDraftTransaction,
skipConfirmation,
draftTransaction,
shouldKeepUserInput = false,
}: IOURequestStepAmountProps) {
const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID ?? -1}`);
const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? 0}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? 0}`);
const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? -1}`);

I know that we migrated from the previous withOnyx. But for consistency, what do you think? Same as

App/src/pages/iou/request/IOURequestStartPage.tsx

Line 48 in bef062b

const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${route?.params.transactionID || -1}`);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it looks good to update it to -1

const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? -1}`);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`);

const {translate} = useLocalize();
const textInput = useRef<BaseTextInputRef | null>(null);
const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
Expand All @@ -85,7 +68,7 @@ function IOURequestStepAmount({
const isEditingSplitBill = isEditing && isSplitBill;
const currentTransaction = isEditingSplitBill && !isEmptyObject(splitDraftTransaction) ? splitDraftTransaction : transaction;
const {amount: transactionAmount} = ReportUtils.getTransactionDetails(currentTransaction) ?? {amount: 0};
const {currency: originalCurrency} = ReportUtils.getTransactionDetails(isEditing ? draftTransaction : transaction) ?? {currency: CONST.CURRENCY.USD};
const {currency: originalCurrency} = ReportUtils.getTransactionDetails(isEditing && !isEmptyObject(draftTransaction) ? draftTransaction : transaction) ?? {currency: CONST.CURRENCY.USD};
const currency = CurrencyUtils.isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;

// For quick button actions, we'll skip the confirmation page unless the report is archived or this is a workspace request, as
Expand Down Expand Up @@ -332,34 +315,7 @@ function IOURequestStepAmount({

IOURequestStepAmount.displayName = 'IOURequestStepAmount';

const IOURequestStepAmountWithOnyx = withOnyx<IOURequestStepAmountProps, IOURequestStepAmountOnyxProps>({
splitDraftTransaction: {
key: ({route}) => {
const transactionID = route.params.transactionID ?? -1;
return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
},
},
draftTransaction: {
key: ({route}) => {
const transactionID = route.params.transactionID ?? 0;
return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`;
},
},
skipConfirmation: {
key: ({route}) => {
const transactionID = route.params.transactionID ?? -1;
return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`;
},
},
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
policy: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`,
},
})(IOURequestStepAmount);

const IOURequestStepAmountWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepAmountWithOnyx);
const IOURequestStepAmountWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepAmount);
// eslint-disable-next-line rulesdir/no-negated-variables
const IOURequestStepAmountWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepAmountWithCurrentUserPersonalDetails, true);
// eslint-disable-next-line rulesdir/no-negated-variables
Expand Down
Loading