Skip to content

Commit 262117e

Browse files
mountinymountiny
authored
Merge pull request Expensify#67170 from Expensify/revert-66927-feat/66148-improve-ReportActionItem-performance
[CP Staging] Revert "improve ReportActionItem performance"
2 parents fe85b37 + ec7ba03 commit 262117e

12 files changed

Lines changed: 38 additions & 287 deletions

‎src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import ConfirmModal from '@components/ConfirmModal';
1212
import DecisionModal from '@components/DecisionModal';
1313
import FlatList from '@components/FlatList';
1414
import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
15-
import {usePersonalDetails} from '@components/OnyxListItemProvider';
1615
import {PressableWithFeedback} from '@components/Pressable';
1716
import {useSearchContext} from '@components/Search/SearchContext';
1817
import Text from '@components/Text';
@@ -45,7 +44,7 @@ import {
4544
shouldReportActionBeVisible,
4645
wasMessageReceivedWhileOffline,
4746
} from '@libs/ReportActionsUtils';
48-
import {canUserPerformWriteAction, chatIncludesChronosWithID, getOriginalReportID, getReportLastVisibleActionCreated, isUnread} from '@libs/ReportUtils';
47+
import {canUserPerformWriteAction, chatIncludesChronosWithID, getReportLastVisibleActionCreated, isUnread} from '@libs/ReportUtils';
4948
import markOpenReportEnd from '@libs/Telemetry/markOpenReportEnd';
5049
import {isTransactionPendingDelete} from '@libs/TransactionUtils';
5150
import Visibility from '@libs/Visibility';
@@ -142,13 +141,6 @@ function MoneyRequestReportActionsList({
142141
selector: (parentReportActions) => getParentReportAction(parentReportActions, report?.parentReportActionID),
143142
});
144143

145-
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: false});
146-
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
147-
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
148-
const personalDetails = usePersonalDetails();
149-
const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}`, {canBeMissing: true});
150-
const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}`, {canBeMissing: true});
151-
152144
const transactionsWithoutPendingDelete = useMemo(() => transactions.filter((t) => !isTransactionPendingDelete(t)), [transactions]);
153145
const mostRecentIOUReportActionID = useMemo(() => getMostRecentIOURequestActionID(reportActions), [reportActions]);
154146
const transactionThreadReportID = getOneTransactionThreadReportID(report, chatReport, reportActions ?? [], false, reportTransactionIDs);
@@ -479,12 +471,6 @@ function MoneyRequestReportActionsList({
479471
!isConsecutiveChronosAutomaticTimerAction(visibleReportActions, index, chatIncludesChronosWithID(reportAction?.reportID)) &&
480472
hasNextActionMadeBySameActor(visibleReportActions, index);
481473

482-
const actionEmojiReactions = emojiReactions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportAction.reportActionID}`];
483-
const originalReportID = getOriginalReportID(report.reportID, reportAction);
484-
const reportDraftMessages = draftMessage?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`];
485-
const matchingDraftMessage = reportDraftMessages?.[reportAction.reportActionID];
486-
const matchingDraftMessageString = typeof matchingDraftMessage === 'string' ? matchingDraftMessage : matchingDraftMessage?.message;
487-
488474
return (
489475
<ReportActionsListItemRenderer
490476
allReports={allReports}
@@ -503,12 +489,6 @@ function MoneyRequestReportActionsList({
503489
isFirstVisibleReportAction={firstVisibleReportActionID === reportAction.reportActionID}
504490
shouldHideThreadDividerLine
505491
linkedReportActionID={linkedReportActionID}
506-
userWallet={userWallet}
507-
isUserValidated={isUserValidated}
508-
personalDetails={personalDetails}
509-
userBillingFundID={userBillingFundID}
510-
emojiReactions={actionEmojiReactions}
511-
draftMessage={matchingDraftMessageString}
512492
/>
513493
);
514494
},
@@ -524,12 +504,6 @@ function MoneyRequestReportActionsList({
524504
linkedReportActionID,
525505
allReports,
526506
policies,
527-
userWallet,
528-
isUserValidated,
529-
personalDetails,
530-
userBillingFundID,
531-
emojiReactions,
532-
draftMessage,
533507
],
534508
);
535509

‎src/components/Search/SearchList.tsx‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import Checkbox from '@components/Checkbox';
1010
import * as Expensicons from '@components/Icon/Expensicons';
1111
import MenuItem from '@components/MenuItem';
1212
import Modal from '@components/Modal';
13-
import {usePersonalDetails} from '@components/OnyxListItemProvider';
1413
import {PressableWithFeedback} from '@components/Pressable';
1514
import type ChatListItem from '@components/SelectionList/ChatListItem';
1615
import type TaskListItem from '@components/SelectionList/Search/TaskListItem';
@@ -175,12 +174,6 @@ function SearchList(
175174

176175
const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
177176

178-
const personalDetails = usePersonalDetails();
179-
180-
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: false});
181-
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
182-
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
183-
184177
const handleLongPressRow = useCallback(
185178
(item: SearchListItem) => {
186179
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -349,19 +342,15 @@ function SearchList(
349342
isDisabled={isDisabled}
350343
allReports={allReports}
351344
groupBy={groupBy}
352-
userWallet={userWallet}
353-
isUserValidated={isUserValidated}
354-
personalDetails={personalDetails}
355-
userBillingFundID={userBillingFundID}
356345
/>
357346
);
358347
},
359348
[
360349
ListItem,
361350
canSelectMultiple,
362351
focusedIndex,
363-
itemsToHighlight,
364352
handleLongPressRow,
353+
itemsToHighlight,
365354
onCheckboxPress,
366355
onSelectRow,
367356
policies,
@@ -370,10 +359,6 @@ function SearchList(
370359
setFocusedIndex,
371360
shouldPreventDefaultFocusOnSelectRow,
372361
allReports,
373-
userWallet,
374-
isUserValidated,
375-
personalDetails,
376-
userBillingFundID,
377362
],
378363
);
379364

‎src/components/SelectionList/BaseSelectionListItemRenderer.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
3-
import type {OnyxEntry} from 'react-native-onyx';
43
import type useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
54
import type useSingleExecution from '@hooks/useSingleExecution';
65
import {isMobileChrome} from '@libs/Browser';
76
import {isTransactionGroupListItemType} from '@libs/SearchUIUtils';
8-
import type {PersonalDetailsList, UserWallet} from '@src/types/onyx';
97
import type {BaseListItemProps, ExtendedTargetedEvent, ListItem, SelectionListProps} from './types';
108

119
type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow'> &
@@ -17,10 +15,6 @@ type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListI
1715
singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
1816
titleStyles?: StyleProp<TextStyle>;
1917
titleContainerStyles?: StyleProp<ViewStyle>;
20-
userWallet?: OnyxEntry<UserWallet>;
21-
isUserValidated?: boolean | undefined;
22-
personalDetails?: OnyxEntry<PersonalDetailsList>;
23-
userBillingFundID?: number | undefined;
2418
};
2519

2620
function BaseSelectionListItemRenderer<TItem extends ListItem>({
@@ -51,10 +45,6 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
5145
titleContainerStyles,
5246
shouldUseDefaultRightHandSideCheckmark,
5347
canShowProductTrainingTooltip = true,
54-
userWallet,
55-
isUserValidated,
56-
personalDetails,
57-
userBillingFundID,
5848
}: BaseSelectionListItemRendererProps<TItem>) {
5949
const handleOnCheckboxPress = () => {
6050
if (isTransactionGroupListItemType(item)) {
@@ -106,10 +96,6 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
10696
titleContainerStyles={titleContainerStyles}
10797
shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
10898
canShowProductTrainingTooltip={canShowProductTrainingTooltip}
109-
userWallet={userWallet}
110-
isUserValidated={isUserValidated}
111-
personalDetails={personalDetails}
112-
userBillingFundID={userBillingFundID}
11399
/>
114100
{item.footerContent && item.footerContent}
115101
</>

‎src/components/SelectionList/ChatListItem.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@ function ChatListItem<TItem extends ListItem>({
2323
shouldSyncFocus,
2424
policies,
2525
allReports,
26-
userWallet,
27-
isUserValidated,
28-
personalDetails,
29-
userBillingFundID,
3026
}: ChatListItemProps<TItem>) {
3127
const reportActionItem = item as unknown as ReportActionListItemType;
3228
const reportID = Number(reportActionItem?.reportID ?? CONST.DEFAULT_NUMBER_ID);
@@ -97,10 +93,6 @@ function ChatListItem<TItem extends ListItem>({
9793
}
9894
policies={policies}
9995
shouldShowBorder
100-
userWallet={userWallet}
101-
isUserValidated={isUserValidated}
102-
personalDetails={personalDetails}
103-
userBillingFundID={userBillingFundID}
10496
/>
10597
</BaseListItem>
10698
);

‎src/components/SelectionList/types.ts‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type {
1212
TextStyle,
1313
ViewStyle,
1414
} from 'react-native';
15-
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
15+
import type {OnyxCollection} from 'react-native-onyx';
1616
import type {AnimatedStyle} from 'react-native-reanimated';
1717
import type {SearchRouterItem} from '@components/Search/SearchAutocompleteList';
1818
import type {SearchColumnType, SearchGroupBy} from '@components/Search/types';
@@ -22,7 +22,7 @@ import type SpendCategorySelectorListItem from '@pages/workspace/categories/Spen
2222
// eslint-disable-next-line no-restricted-imports
2323
import type CursorStyles from '@styles/utils/cursor/types';
2424
import type CONST from '@src/CONST';
25-
import type {PersonalDetailsList, Policy, Report, TransactionViolation, UserWallet} from '@src/types/onyx';
25+
import type {Policy, Report, TransactionViolation} from '@src/types/onyx';
2626
import type {Attendee, SplitExpense} from '@src/types/onyx/IOU';
2727
import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
2828
import type {SearchCard, SearchPersonalDetails, SearchReport, SearchReportAction, SearchTask, SearchTransaction} from '@src/types/onyx/SearchResults';
@@ -477,18 +477,6 @@ type ChatListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
477477

478478
/** The report data */
479479
report?: Report;
480-
481-
/** The user wallet */
482-
userWallet: OnyxEntry<UserWallet>;
483-
484-
/** Whether the user is validated */
485-
isUserValidated: boolean | undefined;
486-
487-
/** Personal details list */
488-
personalDetails: OnyxEntry<PersonalDetailsList>;
489-
490-
/** User billing fund ID */
491-
userBillingFundID: number | undefined;
492480
};
493481

494482
type ValidListItem =

‎src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,7 @@ function DebugReportActionCreatePage({
5050
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
5151
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
5252
const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
53-
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: true});
54-
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
5553
const [draftReportAction, setDraftReportAction] = useState<string>(() => getInitialReportAction(reportID, session, personalDetailsList));
56-
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
57-
5854
const [error, setError] = useState<string>();
5955

6056
const createReportAction = useCallback(() => {
@@ -124,10 +120,6 @@ function DebugReportActionCreatePage({
124120
index={0}
125121
isFirstVisibleReportAction={false}
126122
shouldDisplayContextMenu={false}
127-
userWallet={userWallet}
128-
isUserValidated={isUserValidated}
129-
personalDetails={personalDetailsList}
130-
userBillingFundID={userBillingFundID}
131123
/>
132124
) : (
133125
<Text>{translate('debug.nothingToPreview')}</Text>

‎src/pages/Debug/ReportAction/DebugReportActionPreview.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import type {OnyxEntry} from 'react-native-onyx';
3-
import {usePersonalDetails} from '@components/OnyxListItemProvider';
43
import ScrollView from '@components/ScrollView';
54
import useOnyx from '@hooks/useOnyx';
65
import ReportActionItem from '@pages/home/report/ReportActionItem';
@@ -18,10 +17,6 @@ type DebugReportActionPreviewProps = {
1817
function DebugReportActionPreview({reportAction, reportID}: DebugReportActionPreviewProps) {
1918
const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
2019
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
21-
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: true});
22-
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
23-
const personalDetails = usePersonalDetails();
24-
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
2520
const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
2621

2722
return (
@@ -39,10 +34,6 @@ function DebugReportActionPreview({reportAction, reportID}: DebugReportActionPre
3934
index={0}
4035
isFirstVisibleReportAction={false}
4136
shouldDisplayContextMenu={false}
42-
userWallet={userWallet}
43-
isUserValidated={isUserValidated}
44-
personalDetails={personalDetails}
45-
userBillingFundID={userBillingFundID}
4637
/>
4738
</ScrollView>
4839
);

‎src/pages/TransactionDuplicate/DuplicateTransactionItem.tsx‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
4-
import {usePersonalDetails} from '@components/OnyxListItemProvider';
54
import useOnyx from '@hooks/useOnyx';
65
import useThemeStyles from '@hooks/useThemeStyles';
76
import {getOriginalMessage, getReportAction, isMoneyRequestAction} from '@libs/ReportActionsUtils';
8-
import {getOriginalReportID} from '@libs/ReportUtils';
97
import ReportActionItem from '@pages/home/report/ReportActionItem';
108
import CONST from '@src/CONST';
119
import ONYXKEYS from '@src/ONYXKEYS';
@@ -21,10 +19,6 @@ type DuplicateTransactionItemProps = {
2119

2220
function DuplicateTransactionItem({transaction, index, allReports, policies}: DuplicateTransactionItemProps) {
2321
const styles = useThemeStyles();
24-
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET, {canBeMissing: true});
25-
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
26-
const personalDetails = usePersonalDetails();
27-
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
2822
const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${transaction?.reportID}`];
2923
const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.reportID}`, {canBeMissing: false});
3024

@@ -34,28 +28,10 @@ function DuplicateTransactionItem({transaction, index, allReports, policies}: Du
3428
return IOUTransactionID === transaction?.transactionID;
3529
});
3630

37-
const originalReportID = getOriginalReportID(report?.reportID, action);
38-
39-
const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`, {
40-
canBeMissing: true,
41-
});
42-
43-
const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action?.reportActionID}`, {
44-
canBeMissing: true,
45-
});
46-
47-
const [linkedTransactionRouteError] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${isMoneyRequestAction(action) && getOriginalMessage(action)?.IOUTransactionID}`, {
48-
canBeMissing: true,
49-
selector: (transactionItem) => transactionItem?.errorFields?.route ?? null,
50-
});
51-
5231
if (!action || !report) {
5332
return null;
5433
}
5534

56-
const reportDraftMessage = draftMessage?.[action.reportActionID];
57-
const matchingDraftMessage = typeof reportDraftMessage === 'string' ? reportDraftMessage : reportDraftMessage?.message;
58-
5935
return (
6036
<View style={styles.pb2}>
6137
<ReportActionItem
@@ -71,13 +47,6 @@ function DuplicateTransactionItem({transaction, index, allReports, policies}: Du
7147
isMostRecentIOUReportAction={false}
7248
isFirstVisibleReportAction={false}
7349
shouldDisplayContextMenu={false}
74-
userWallet={userWallet}
75-
isUserValidated={isUserValidated}
76-
personalDetails={personalDetails}
77-
draftMessage={matchingDraftMessage}
78-
emojiReactions={emojiReactions}
79-
linkedTransactionRouteError={linkedTransactionRouteError}
80-
userBillingFundID={userBillingFundID}
8150
/>
8251
</View>
8352
);

0 commit comments

Comments
 (0)