Skip to content

Commit

Permalink
fix: migrate withFullTransactionOrNotFound
Browse files Browse the repository at this point in the history
  • Loading branch information
@daledah
daledah committed Oct 7, 2024
1 parent 6d8e739 commit 7703d0e
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 127 deletions.
152 changes: 46 additions & 106 deletions src/components/MoneyRequestConfirmationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native';
import lodashIsEqual from 'lodash/isEqual';
import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {InteractionManager, View} from 'react-native';
import {useOnyx, withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useDebouncedState from '@hooks/useDebouncedState';
Expand Down Expand Up @@ -50,36 +50,7 @@ import UserListItem from './SelectionList/UserListItem';
import SettlementButton from './SettlementButton';
import Text from './Text';

type MoneyRequestConfirmationListOnyxProps = {
/** Collection of categories attached to a policy */
policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;

/** Collection of draft categories attached to a policy */
policyCategoriesDraft: OnyxEntry<OnyxTypes.PolicyCategories>;

/** Collection of tags attached to a policy */
policyTags: OnyxEntry<OnyxTypes.PolicyTagLists>;

/** The policy of the report */
policy: OnyxEntry<OnyxTypes.Policy>;

/** The draft policy of the report */
policyDraft: OnyxEntry<OnyxTypes.Policy>;

/** Unit and rate used for if the expense is a distance expense */
mileageRates: OnyxEntry<Record<string, MileageRate>>;

/** Mileage rate default for the policy */
defaultMileageRate: OnyxEntry<MileageRate>;

/** Last selected distance rates */
lastSelectedDistanceRates: OnyxEntry<Record<string, string>>;

/** List of currencies */
currencyList: OnyxEntry<OnyxTypes.CurrencyList>;
};

type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps & {
type MoneyRequestConfirmationListProps = {
/** Callback to inform parent modal of success */
onConfirm?: (selectedParticipants: Participant[]) => void;

Expand Down Expand Up @@ -179,17 +150,11 @@ function MoneyRequestConfirmationList({
onConfirm,
iouType = CONST.IOU.TYPE.SUBMIT,
iouAmount,
policyCategories: policyCategoriesReal,
policyCategoriesDraft,
mileageRates: mileageRatesReal,
isDistanceRequest = false,
policy: policyReal,
policyDraft,
isPolicyExpenseChat = false,
iouCategory = '',
shouldShowSmartScanFields = true,
isEditingSplitBill,
policyTags,
iouCurrencyCode,
iouMerchant,
selectedParticipants: selectedParticipantsProp,
Expand All @@ -206,14 +171,24 @@ function MoneyRequestConfirmationList({
onToggleBillable,
hasSmartScanFailed,
reportActionID,
defaultMileageRate,
lastSelectedDistanceRates,
action = CONST.IOU.ACTION.CREATE,
currencyList,
shouldDisplayReceipt = false,
shouldPlaySound = true,
isConfirmed,
}: MoneyRequestConfirmationListProps) {
const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`);
const [mileageRatesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, {
selector: (selectedPolicy) => DistanceRequestUtils.getMileageRates(selectedPolicy),
});
const [defaultMileageRate] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, {
selector: (selectedPolicy) => DistanceRequestUtils.getDefaultMileageRate(selectedPolicy),
});
const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`);
const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES);
const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
const policy = policyReal ?? policyDraft;
const policyCategories = policyCategoriesReal ?? policyCategoriesDraft;
const [mileageRatesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID || '-1'}`, {
Expand Down Expand Up @@ -975,70 +950,35 @@ function MoneyRequestConfirmationList({

MoneyRequestConfirmationList.displayName = 'MoneyRequestConfirmationList';

export default withOnyx<MoneyRequestConfirmationListProps, MoneyRequestConfirmationListOnyxProps>({
policyCategories: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
},
policyCategoriesDraft: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`,
},
policyTags: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
},
defaultMileageRate: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
selector: DistanceRequestUtils.getDefaultMileageRate,
},
mileageRates: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
selector: (policy: OnyxEntry<OnyxTypes.Policy>) => DistanceRequestUtils.getMileageRates(policy),
},
policy: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
},
policyDraft: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`,
},
lastSelectedDistanceRates: {
key: ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES,
},
currencyList: {
key: ONYXKEYS.CURRENCY_LIST,
},
})(
memo(
MoneyRequestConfirmationList,
(prevProps, nextProps) =>
lodashIsEqual(prevProps.transaction, nextProps.transaction) &&
prevProps.onSendMoney === nextProps.onSendMoney &&
prevProps.onConfirm === nextProps.onConfirm &&
prevProps.iouType === nextProps.iouType &&
prevProps.iouAmount === nextProps.iouAmount &&
prevProps.isDistanceRequest === nextProps.isDistanceRequest &&
prevProps.isPolicyExpenseChat === nextProps.isPolicyExpenseChat &&
prevProps.iouCategory === nextProps.iouCategory &&
prevProps.shouldShowSmartScanFields === nextProps.shouldShowSmartScanFields &&
prevProps.isEditingSplitBill === nextProps.isEditingSplitBill &&
prevProps.iouCurrencyCode === nextProps.iouCurrencyCode &&
prevProps.iouMerchant === nextProps.iouMerchant &&
lodashIsEqual(prevProps.selectedParticipants, nextProps.selectedParticipants) &&
lodashIsEqual(prevProps.payeePersonalDetails, nextProps.payeePersonalDetails) &&
prevProps.isReadOnly === nextProps.isReadOnly &&
prevProps.bankAccountRoute === nextProps.bankAccountRoute &&
prevProps.policyID === nextProps.policyID &&
prevProps.reportID === nextProps.reportID &&
prevProps.receiptPath === nextProps.receiptPath &&
prevProps.iouComment === nextProps.iouComment &&
prevProps.receiptFilename === nextProps.receiptFilename &&
prevProps.iouCreated === nextProps.iouCreated &&
prevProps.iouIsBillable === nextProps.iouIsBillable &&
prevProps.onToggleBillable === nextProps.onToggleBillable &&
prevProps.hasSmartScanFailed === nextProps.hasSmartScanFailed &&
prevProps.reportActionID === nextProps.reportActionID &&
lodashIsEqual(prevProps.defaultMileageRate, nextProps.defaultMileageRate) &&
lodashIsEqual(prevProps.lastSelectedDistanceRates, nextProps.lastSelectedDistanceRates) &&
lodashIsEqual(prevProps.action, nextProps.action) &&
lodashIsEqual(prevProps.currencyList, nextProps.currencyList) &&
prevProps.shouldDisplayReceipt === nextProps.shouldDisplayReceipt,
),
export default memo(
MoneyRequestConfirmationList,
(prevProps, nextProps) =>
lodashIsEqual(prevProps.transaction, nextProps.transaction) &&
prevProps.onSendMoney === nextProps.onSendMoney &&
prevProps.onConfirm === nextProps.onConfirm &&
prevProps.iouType === nextProps.iouType &&
prevProps.iouAmount === nextProps.iouAmount &&
prevProps.isDistanceRequest === nextProps.isDistanceRequest &&
prevProps.isPolicyExpenseChat === nextProps.isPolicyExpenseChat &&
prevProps.iouCategory === nextProps.iouCategory &&
prevProps.shouldShowSmartScanFields === nextProps.shouldShowSmartScanFields &&
prevProps.isEditingSplitBill === nextProps.isEditingSplitBill &&
prevProps.iouCurrencyCode === nextProps.iouCurrencyCode &&
prevProps.iouMerchant === nextProps.iouMerchant &&
lodashIsEqual(prevProps.selectedParticipants, nextProps.selectedParticipants) &&
lodashIsEqual(prevProps.payeePersonalDetails, nextProps.payeePersonalDetails) &&
prevProps.isReadOnly === nextProps.isReadOnly &&
prevProps.bankAccountRoute === nextProps.bankAccountRoute &&
prevProps.policyID === nextProps.policyID &&
prevProps.reportID === nextProps.reportID &&
prevProps.receiptPath === nextProps.receiptPath &&
prevProps.iouComment === nextProps.iouComment &&
prevProps.receiptFilename === nextProps.receiptFilename &&
prevProps.iouCreated === nextProps.iouCreated &&
prevProps.iouIsBillable === nextProps.iouIsBillable &&
prevProps.onToggleBillable === nextProps.onToggleBillable &&
prevProps.hasSmartScanFailed === nextProps.hasSmartScanFailed &&
prevProps.reportActionID === nextProps.reportActionID &&
lodashIsEqual(prevProps.action, nextProps.action) &&
prevProps.shouldDisplayReceipt === nextProps.shouldDisplayReceipt,
);
42 changes: 21 additions & 21 deletions src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type {RouteProp} from '@react-navigation/native';
import {useIsFocused} from '@react-navigation/native';
import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
import React, {forwardRef} from 'react';
import React, {forwardRef, useMemo} from 'react';

Check failure on line 4 in src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

'useMemo' is defined but never used
import {useOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import getComponentDisplayName from '@libs/getComponentDisplayName';
import * as IOUUtils from '@libs/IOUUtils';
Expand Down Expand Up @@ -38,14 +38,25 @@ type MoneyRequestRouteName =
| typeof SCREENS.MONEY_REQUEST.STEP_SEND_FROM
| typeof SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO;

type Route<T extends MoneyRequestRouteName> = RouteProp<MoneyRequestNavigatorParamList, T>;
type Route<TRouteName extends MoneyRequestRouteName> = RouteProp<MoneyRequestNavigatorParamList, TRouteName>;

type WithFullTransactionOrNotFoundProps<T extends MoneyRequestRouteName> = WithFullTransactionOrNotFoundOnyxProps & {route: Route<T>};
type WithFullTransactionOrNotFoundProps<TRouteName extends MoneyRequestRouteName> = WithFullTransactionOrNotFoundOnyxProps & {
route: Route<TRouteName>;
};

export default function <TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
export default function <TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>, TRef>(
WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
): React.ComponentType<Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps> & RefAttributes<TRef>> {
// eslint-disable-next-line rulesdir/no-negated-variables
function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
const transactionID = props.transaction?.transactionID;
function WithFullTransactionOrNotFound(props: Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps>, ref: ForwardedRef<TRef>) {
const {route} = props;
const transactionID = route.params.transactionID ?? -1;
const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE;

const shouldUseTransactionDraft = IOUUtils.shouldUseTransactionDraft(userAction);

const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);

const isFocused = useIsFocused();

Expand All @@ -59,27 +70,16 @@ export default function <TProps extends WithFullTransactionOrNotFoundProps<Money
return (
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
{...(props as TProps)}
transaction={shouldUseTransactionDraft ? transactionDraft : transaction}
ref={ref}
/>
);
}

WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
// eslint-disable-next-line deprecation/deprecation
return withOnyx<TProps & RefAttributes<TRef>, WithFullTransactionOrNotFoundOnyxProps>({
transaction: {
key: ({route}) => {
const transactionID = route.params.transactionID ?? -1;
const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE;

if (IOUUtils.shouldUseTransactionDraft(userAction)) {
return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`;
}
return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
},
},
})(forwardRef(WithFullTransactionOrNotFound));
return forwardRef(WithFullTransactionOrNotFound);
}

export type {WithFullTransactionOrNotFoundProps};

0 comments on commit 7703d0e

Please sign in to comment.