Skip to content

Commit ab1e0f2

Browse files
allgandalfallgandalf
committed
address reviewers comment
1 parent 03cabab commit ab1e0f2

4 files changed

Lines changed: 41 additions & 18 deletions

File tree

‎src/components/SelectionList/Search/ReportListItemHeader.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {ColorValue} from 'react-native';
44
import type {OnyxEntry} from 'react-native-onyx';
@@ -17,6 +17,7 @@ import {handleActionButtonPress} from '@userActions/Search';
1717
import CONST from '@src/CONST';
1818
import ONYXKEYS from '@src/ONYXKEYS';
1919
import type * as OnyxTypes from '@src/types/onyx';
20+
import type {SearchPolicy, SearchReport} from '@src/types/onyx/SearchResults';
2021
import ActionCell from './ActionCell';
2122
import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow';
2223

@@ -172,6 +173,12 @@ function ReportListItemHeader<TItem extends ListItem>({
172173
const thereIsFromAndTo = !!reportItem?.from && !!reportItem?.to;
173174
const showUserInfo = (reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo) || (reportItem.type === CONST.REPORT.TYPE.EXPENSE && !!reportItem?.from);
174175
const [snapshot] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchHash}`, {canBeMissing: true});
176+
const snapshotReport = useMemo(() => {
177+
return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${reportItem.reportID}`] ?? {}) as SearchReport;
178+
}, [snapshot, reportItem.reportID]);
179+
const snapshotPolicy = useMemo(() => {
180+
return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem.policyID}`] ?? {}) as SearchPolicy;
181+
}, [snapshot, reportItem.policyID]);
175182
const [lastPaymentMethod] = useOnyx(`${ONYXKEYS.NVP_LAST_PAYMENT_METHOD}`, {canBeMissing: true});
176183
const avatarBorderColor =
177184
StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
@@ -182,7 +189,8 @@ function ReportListItemHeader<TItem extends ListItem>({
182189
reportItem,
183190
() => onSelectRow(reportItem as unknown as TItem),
184191
shouldUseNarrowLayout && !!canSelectMultiple,
185-
snapshot?.data,
192+
snapshotReport,
193+
snapshotPolicy,
186194
lastPaymentMethod,
187195
currentSearchKey,
188196
);

‎src/components/SelectionList/Search/TransactionListItem.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {handleActionButtonPress as handleActionButtonPressUtil} from '@libs/acti
1818
import variables from '@styles/variables';
1919
import CONST from '@src/CONST';
2020
import ONYXKEYS from '@src/ONYXKEYS';
21+
import type {SearchPolicy, SearchReport} from '@src/types/onyx/SearchResults';
2122
import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow';
2223

2324
function TransactionListItem<TItem extends ListItem>({
@@ -40,6 +41,13 @@ function TransactionListItem<TItem extends ListItem>({
4041
const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
4142
const {currentSearchHash, currentSearchKey} = useSearchContext();
4243
const [snapshot] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchHash}`, {canBeMissing: true});
44+
const snapshotReport = useMemo(() => {
45+
return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as SearchReport;
46+
}, [snapshot, transactionItem.reportID]);
47+
48+
const snapshotPolicy = useMemo(() => {
49+
return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${transactionItem.policyID}`] ?? {}) as SearchPolicy;
50+
}, [snapshot, transactionItem.policyID]);
4351
const [lastPaymentMethod] = useOnyx(`${ONYXKEYS.NVP_LAST_PAYMENT_METHOD}`, {canBeMissing: true});
4452

4553
const pressableStyle = [
@@ -88,11 +96,12 @@ function TransactionListItem<TItem extends ListItem>({
8896
transactionItem,
8997
() => onSelectRow(item),
9098
shouldUseNarrowLayout && !!canSelectMultiple,
91-
snapshot?.data,
99+
snapshotReport,
100+
snapshotPolicy,
92101
lastPaymentMethod,
93102
currentSearchKey,
94103
);
95-
}, [canSelectMultiple, currentSearchHash, currentSearchKey, item, onSelectRow, shouldUseNarrowLayout, transactionItem, snapshot, lastPaymentMethod]);
104+
}, [currentSearchHash, transactionItem, shouldUseNarrowLayout, canSelectMultiple, snapshotReport, snapshotPolicy, lastPaymentMethod, currentSearchKey, onSelectRow, item]);
96105

97106
const handleCheckboxPress = useCallback(() => {
98107
onCheckboxPress?.(item);

‎src/libs/actions/Search.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import CONST from '@src/CONST';
2222
import ONYXKEYS from '@src/ONYXKEYS';
2323
import {FILTER_KEYS} from '@src/types/form/SearchAdvancedFiltersForm';
2424
import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
25-
import type {LastPaymentMethod, LastPaymentMethodType, Policy, SearchResults} from '@src/types/onyx';
25+
import type {LastPaymentMethod, LastPaymentMethodType, Policy} from '@src/types/onyx';
2626
import type {ConnectionName} from '@src/types/onyx/Policy';
2727
import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults';
2828
import type Nullable from '@src/types/utils/Nullable';
@@ -32,7 +32,8 @@ function handleActionButtonPress(
3232
item: TransactionListItemType | TransactionReportGroupListItemType,
3333
goToItem: () => void,
3434
isInMobileSelectionMode: boolean,
35-
snapshotData: SearchResults['data'] | undefined,
35+
snapshotReport: SearchReport,
36+
snapshotPolicy: SearchPolicy,
3637
lastPaymentMethod: OnyxEntry<LastPaymentMethod>,
3738
currentSearchKey?: SearchKey,
3839
) {
@@ -42,29 +43,28 @@ function handleActionButtonPress(
4243
const allReportTransactions = (isTransactionGroupListItemType(item) ? item.transactions : [item]) as SearchTransaction[];
4344
const hasHeldExpense = hasHeldExpenses('', allReportTransactions);
4445

45-
if (hasHeldExpense || isInMobileSelectionMode || !snapshotData) {
46+
if (hasHeldExpense || isInMobileSelectionMode) {
4647
goToItem();
4748
return;
4849
}
4950

5051
switch (item.action) {
5152
case CONST.SEARCH.ACTION_TYPES.PAY:
52-
getPayActionCallback(hash, item, goToItem, snapshotData, lastPaymentMethod, currentSearchKey);
53+
getPayActionCallback(hash, item, goToItem, snapshotReport, snapshotPolicy, lastPaymentMethod, currentSearchKey);
5354
return;
5455
case CONST.SEARCH.ACTION_TYPES.APPROVE:
5556
approveMoneyRequestOnSearch(hash, [item.reportID], transactionID, currentSearchKey);
5657
return;
5758
case CONST.SEARCH.ACTION_TYPES.SUBMIT: {
58-
const policy = snapshotData?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`] ?? {};
59-
submitMoneyRequestOnSearch(hash, [item], [policy], transactionID, currentSearchKey);
59+
submitMoneyRequestOnSearch(hash, [item], [snapshotPolicy], transactionID, currentSearchKey);
6060
return;
6161
}
6262
case CONST.SEARCH.ACTION_TYPES.EXPORT_TO_ACCOUNTING: {
6363
if (!item) {
6464
return;
6565
}
6666

67-
const policy = (snapshotData?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`] ?? {}) as Policy;
67+
const policy = (snapshotPolicy ?? {}) as Policy;
6868
const connectedIntegration = getValidConnectedIntegration(policy);
6969

7070
if (!connectedIntegration) {
@@ -97,7 +97,8 @@ function getPayActionCallback(
9797
hash: number,
9898
item: TransactionListItemType | TransactionReportGroupListItemType,
9999
goToItem: () => void,
100-
snapshotData: SearchResults['data'],
100+
snapshotReport: SearchReport,
101+
snapshotPolicy: SearchPolicy,
101102
lastPaymentMethod: OnyxEntry<LastPaymentMethod>,
102103
currentSearchKey?: SearchKey,
103104
) {
@@ -108,16 +109,15 @@ function getPayActionCallback(
108109
return;
109110
}
110111

111-
const report = snapshotData?.[`${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`] ?? {};
112-
const amount = Math.abs((report?.total ?? 0) - (report?.nonReimbursableTotal ?? 0));
112+
const amount = Math.abs((snapshotReport?.total ?? 0) - (snapshotReport?.nonReimbursableTotal ?? 0));
113113
const transactionID = isTransactionListItemType(item) ? [item.transactionID] : undefined;
114114

115115
if (lastPolicyPaymentMethod === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) {
116116
payMoneyRequestOnSearch(hash, [{reportID: item.reportID, amount, paymentType: lastPolicyPaymentMethod}], transactionID, currentSearchKey);
117117
return;
118118
}
119119

120-
const hasVBBA = !!snapshotData?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`]?.achAccount?.bankAccountID;
120+
const hasVBBA = !!snapshotPolicy?.achAccount?.bankAccountID;
121121
if (hasVBBA) {
122122
payMoneyRequestOnSearch(hash, [{reportID: item.reportID, amount, paymentType: lastPolicyPaymentMethod}], transactionID, currentSearchKey);
123123
return;

‎tests/unit/Search/handleActionButtonPressTest.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -247,21 +247,27 @@ describe('handleActionButtonPress', () => {
247247
Onyx.merge(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, mockLastPaymentMethod);
248248
});
249249

250+
const snapshotReport = mockSnapshotForItem?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${mockReportItemWithHold.reportID}`] ?? {};
251+
const snapshotPolicy = mockSnapshotForItem?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${mockReportItemWithHold.policyID}`] ?? {};
252+
250253
test('Should navigate to item when report has one transaction on hold', () => {
251254
const goToItem = jest.fn(() => {});
252-
handleActionButtonPress(searchHash, mockReportItemWithHold, goToItem, false, mockSnapshotForItem?.data, mockLastPaymentMethod);
255+
// @ts-expect-error: Allow partial record in snapshot update for testing
256+
handleActionButtonPress(searchHash, mockReportItemWithHold, goToItem, false, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
253257
expect(goToItem).toHaveBeenCalledTimes(1);
254258
});
255259

256260
test('Should not navigate to item when the hold is removed', () => {
257261
const goToItem = jest.fn(() => {});
258-
handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, false, mockSnapshotForItem?.data, mockLastPaymentMethod);
262+
// @ts-expect-error: Allow partial record in snapshot update for testing
263+
handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, false, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
259264
expect(goToItem).toHaveBeenCalledTimes(0);
260265
});
261266

262267
test('Should run goToItem callback when user is in mobile selection mode', () => {
263268
const goToItem = jest.fn(() => {});
264-
handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, true, mockSnapshotForItem?.data, mockLastPaymentMethod);
269+
// @ts-expect-error: Allow partial record in snapshot update for testing
270+
handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, true, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
265271
expect(goToItem).toHaveBeenCalledTimes(1);
266272
});
267273
});

0 commit comments

Comments
 (0)