Skip to content

Commit 1ce133b

Browse files
cristipavalcristipaval
authored
Merge pull request Expensify#93421 from callstack-internal/perf/stable-ReportActionItem-tree
[NoQA] stabilize stableReportSelector and more reports in the ReportActionItem tree
2 parents 7224b83 + 1b7c484 commit 1ce133b

11 files changed

Lines changed: 66 additions & 12 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -564,6 +564,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
564564
parentReportActionForTransactionThread={EmptyParentReportActionForTransactionThread}
565565
report={reportStable}
566566
transactionThreadReport={transactionThreadReport}
567+
chatReport={chatReport}
567568
displayAsGroup={displayAsGroup}
568569
shouldDisplayNewMarker={reportAction.reportActionID === unreadMarkerReportActionID}
569570
shouldDisplayReplyDivider={visibleReportActions.length > 1}
@@ -580,6 +581,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
580581
visibleReportActions,
581582
parentReportAction,
582583
reportStable,
584+
chatReport,
583585
isOffline,
584586
transactionThreadReport,
585587
unreadMarkerReportActionID,

‎src/components/Search/SearchList/ListItem/ChatListItem.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import useOnyx from '@hooks/useOnyx';
77
import useTheme from '@hooks/useTheme';
88
import useThemeStyles from '@hooks/useThemeStyles';
99
import FS from '@libs/Fullstory';
10+
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
1011
import ReportActionItem from '@pages/inbox/report/ReportActionItem';
1112
import variables from '@styles/variables';
1213
import ONYXKEYS from '@src/ONYXKEYS';
@@ -31,6 +32,7 @@ function ChatListItem<TItem extends ListItem>({
3132
const reportActionItem = item as unknown as ReportActionListItemType;
3233
const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem?.reportID}`, {selector: getStableReportSelector});
3334
const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem?.childReportID}`);
35+
const [chatReportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportStable?.chatReportID)}`, {selector: getStableReportSelector});
3436
const styles = useThemeStyles();
3537
const theme = useTheme();
3638
const {isSelected} = useRowSelection(item.keyForList);
@@ -81,6 +83,7 @@ function ChatListItem<TItem extends ListItem>({
8183
action={reportActionItem}
8284
report={reportStable}
8385
transactionThreadReport={transactionThreadReport}
86+
chatReport={chatReportStable}
8487
onPress={handlePress}
8588
parentReportAction={undefined}
8689
displayAsGroup={false}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
1313
import DateUtils from '@libs/DateUtils';
1414
import DebugUtils from '@libs/DebugUtils';
1515
import {canUseTouchScreen} from '@libs/DeviceCapabilities';
16+
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
1617
import Navigation from '@libs/Navigation/Navigation';
1718
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
1819
import type {DebugParamList} from '@libs/Navigation/types';
@@ -62,6 +63,8 @@ function DebugReportActionCreatePage({
6263
const [session] = useOnyx(ONYXKEYS.SESSION);
6364
const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
6465
const [draftReportAction, setDraftReportAction] = useState<string>(() => getInitialReportAction(reportID, session, personalDetailsList));
66+
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
67+
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
6568

6669
const reportAction = useMemo(() => parseReportActionJSON(draftReportAction), [draftReportAction]);
6770

@@ -128,7 +131,8 @@ function DebugReportActionCreatePage({
128131
<ReportActionItem
129132
action={reportAction}
130133
transactionThreadReport={transactionThreadReport}
131-
report={{reportID}}
134+
report={report}
135+
chatReport={chatReport}
132136
parentReportAction={undefined}
133137
displayAsGroup={false}
134138
shouldDisplayNewMarker={false}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import type {OnyxEntry} from 'react-native-onyx';
33
import ScrollView from '@components/ScrollView';
44
import useOnyx from '@hooks/useOnyx';
5+
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
56
import ReportActionItem from '@pages/inbox/report/ReportActionItem';
67
import ONYXKEYS from '@src/ONYXKEYS';
78
import type {Report, ReportAction} from '@src/types/onyx';
@@ -17,12 +18,14 @@ type DebugReportActionPreviewProps = {
1718
function DebugReportActionPreview({reportAction, reportID}: DebugReportActionPreviewProps) {
1819
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
1920
const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportAction?.childReportID}`);
21+
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
2022

2123
return (
2224
<ScrollView>
2325
<ReportActionItem
2426
action={reportAction ?? ({} as ReportAction)}
2527
transactionThreadReport={transactionThreadReport}
28+
chatReport={chatReport}
2629
report={report ?? ({} as Report)}
2730
parentReportAction={undefined}
2831
displayAsGroup={false}

‎src/pages/inbox/report/AncestorReportActionItem.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import useNetwork from '@hooks/useNetwork';
77
import useOnyx from '@hooks/useOnyx';
88
import useResponsiveLayout from '@hooks/useResponsiveLayout';
99
import useThemeStyles from '@hooks/useThemeStyles';
10+
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
1011
import {isTripPreview} from '@libs/ReportActionsUtils';
1112
import {canCurrentUserOpenReport, canUserPerformWriteAction as canUserPerformWriteActionReportUtils, isArchivedReport, navigateToLinkedReportAction} from '@libs/ReportUtils';
1213
import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report';
1314
import ONYXKEYS from '@src/ONYXKEYS';
15+
import {getStableReportSelector} from '@src/selectors/Report';
1416
import type {Beta, IntroSelected, PersonalDetails, Report, ReportAction, ReportNameValuePairs} from '@src/types/onyx';
1517
import type {Errors} from '@src/types/onyx/OnyxCommon';
1618
import ReportActionItem from './ReportActionItem';
@@ -87,6 +89,7 @@ function AncestorReportActionItem({
8789
const styles = useThemeStyles();
8890
const currentUserPersonalDetail = useCurrentUserPersonalDetails();
8991
const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailByAccountIDSelector(report?.ownerAccountID)});
92+
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`, {selector: getStableReportSelector});
9093

9194
const shouldDisplayThreadDivider = !isTripPreview(reportAction);
9295
const isAncestorReportArchived = isArchivedReport(reportNameValuePairs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID}`]);
@@ -150,6 +153,7 @@ function AncestorReportActionItem({
150153
onPress={canOpenAncestorReport ? openAncestorReport : undefined}
151154
parentReportAction={parentReportAction}
152155
transactionThreadReport={transactionThreadReport}
156+
chatReport={chatReport}
153157
displayAsGroup={false}
154158
shouldDisplayNewMarker={shouldDisplayNewMarker}
155159
isFirstVisibleReportAction={isFirstVisibleReportAction}

‎src/pages/inbox/report/ReportActionItem.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ import ControlSelection from '@libs/ControlSelection';
3636
import {canUseTouchScreen, hasHoverSupport} from '@libs/DeviceCapabilities';
3737
import type {OnyxDataWithErrors} from '@libs/ErrorUtils';
3838
import {getLatestErrorMessageField, isReceiptError} from '@libs/ErrorUtils';
39-
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
4039
import {isReportMessageAttachment} from '@libs/isReportMessageAttachment';
4140
import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
4241
import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
@@ -97,6 +96,9 @@ type ReportActionItemProps = {
9796
/** The transaction thread report associated with the report for this action, if any */
9897
transactionThreadReport: OnyxEntry<OnyxTypes.Report>;
9998

99+
/** The chat report associated with the report for this action (report.chatReportID) */
100+
chatReport: OnyxEntry<OnyxTypes.Report>;
101+
100102
/** Report action belonging to the report's parent */
101103
parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
102104

@@ -153,6 +155,7 @@ function ReportActionItem({
153155
action,
154156
report,
155157
transactionThreadReport,
158+
chatReport,
156159
linkedReportActionID,
157160
displayAsGroup,
158161
parentReportAction,
@@ -171,8 +174,7 @@ function ReportActionItem({
171174
}: ReportActionItemProps) {
172175
const reportID = report?.reportID ?? action?.reportID;
173176
const originalReportID = useOriginalReportID(report?.reportID, action);
174-
const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {selector: getStableReportSelector});
175-
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`);
177+
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`, {selector: getStableReportSelector});
176178

177179
const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
178180
const transactionsOnIOUReport = useReportTransactions(iouReport?.reportID);
@@ -210,8 +212,6 @@ function ReportActionItem({
210212

211213
const shouldRenderViewBasedOnAction = useTableReportViewActionRenderConditionals(action);
212214

213-
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
214-
215215
const highlightedBackgroundColorIfNeeded = isReportActionLinked || shouldHighlight ? StyleUtils.getBackgroundColorStyle(theme.messageHighlightBG) : {};
216216

217217
const isDeletedParentAction = isDeletedParentActionUtils(action);
@@ -594,7 +594,6 @@ function ReportActionItem({
594594
action={action}
595595
report={report}
596596
reportID={reportID}
597-
originalReport={originalReport}
598597
originalReportID={originalReportID}
599598
iouReport={iouReport}
600599
displayAsGroup={displayAsGroup}

‎src/pages/inbox/report/ReportActionsList.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,9 @@ function ReportActionsList({
214214
});
215215
const isHarvestCreatedExpenseReportAction = isHarvestCreatedExpenseReport(reportNameValuePairs?.origin, reportNameValuePairs?.originalID);
216216

217-
const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {selector: getStableReportSelector});
217+
const stableReportSelector = useCallback((reportEntry: OnyxEntry<OnyxTypes.Report>) => getStableReportSelector(reportEntry), []);
218+
const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {selector: stableReportSelector});
219+
const [chatReportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportStable?.chatReportID)}`, {selector: stableReportSelector});
218220

219221
const backTo = route?.params?.backTo as string;
220222
const linkedReportActionID = route?.params?.reportActionID;
@@ -553,6 +555,7 @@ function ReportActionsList({
553555
parentReportActionForTransactionThread={parentReportActionForTransactionThread}
554556
report={reportStable}
555557
transactionThreadReport={transactionThreadReport}
558+
chatReport={chatReportStable}
556559
linkedReportActionID={linkedReportActionID}
557560
displayAsGroup={
558561
!isConsecutiveChronosAutomaticTimerAction(renderedVisibleReportActions, safeIndex, chatIncludesChronosWithID(reportAction?.reportID), isOffline) &&
@@ -591,6 +594,7 @@ function ReportActionsList({
591594
isHarvestCreatedExpenseReportAction,
592595
renderedVisibleReportActions,
593596
reportStable,
597+
chatReportStable,
594598
shouldHideThreadDividerLine,
595599
shouldUseThreadDividerLine,
596600
showHiddenHistory,

‎src/pages/inbox/report/ReportActionsListItemRenderer.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ type ReportActionsListItemRendererProps = {
2323
/** The transaction thread report associated with the report for this action, if any */
2424
transactionThreadReport: OnyxEntry<Report>;
2525

26+
/** The chat report associated with the report for this action (report.chatReportID) */
27+
chatReport?: OnyxEntry<Report>;
28+
2629
/** Should the comment have the appearance of being grouped with the previous comment? */
2730
displayAsGroup: boolean;
2831

@@ -59,6 +62,7 @@ function ReportActionsListItemRenderer({
5962
parentReportAction,
6063
report,
6164
transactionThreadReport,
65+
chatReport,
6266
displayAsGroup,
6367
shouldHideThreadDividerLine,
6468
shouldDisplayNewMarker,
@@ -168,6 +172,7 @@ function ReportActionsListItemRenderer({
168172
parentReportAction={parentReportAction}
169173
report={report}
170174
transactionThreadReport={transactionThreadReport}
175+
chatReport={chatReport}
171176
parentReportActionForTransactionThread={parentReportActionForTransactionThread}
172177
action={action}
173178
linkedReportActionID={linkedReportActionID}

‎src/pages/inbox/report/actionContents/ActionContentRouter.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import TaskPreview from '@components/ReportActionItem/TaskPreview';
1313
import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
1414
import UnreportedTransactionAction from '@components/ReportActionItem/UnreportedTransactionAction';
1515
import useLocalize from '@hooks/useLocalize';
16+
import useOnyx from '@hooks/useOnyx';
1617
import useThemeStyles from '@hooks/useThemeStyles';
1718
import {
1819
getChangedApproverActionMessage,
@@ -45,6 +46,8 @@ import {
4546
import {getMovedActionMessage, isExpenseReport} from '@libs/ReportUtils';
4647
import ReportActionItemBasicMessage from '@pages/inbox/report/ReportActionItemBasicMessage';
4748
import CONST from '@src/CONST';
49+
import ONYXKEYS from '@src/ONYXKEYS';
50+
import {getStableReportSelector} from '@src/selectors/Report';
4851
import type * as OnyxTypes from '@src/types/onyx';
4952
import ApprovalFlowContent, {isApprovalFlowAction} from './ApprovalFlowContent';
5053
import CardBrokenConnectionContent from './CardBrokenConnectionContent';
@@ -73,9 +76,6 @@ type ActionContentRouterProps = {
7376
/** Report for this action */
7477
report: OnyxEntry<OnyxTypes.Report>;
7578

76-
/** Original report from which the given reportAction is first created */
77-
originalReport: OnyxEntry<OnyxTypes.Report>;
78-
7979
/** ID of the original report from which the given reportAction is first created */
8080
originalReportID?: string;
8181

@@ -125,7 +125,6 @@ type ActionContentRouterProps = {
125125
function ActionContentRouter({
126126
action,
127127
report,
128-
originalReport,
129128
originalReportID,
130129
iouReport,
131130
reportID,
@@ -145,6 +144,8 @@ function ActionContentRouter({
145144
const {translate, formatTravelDate} = useLocalize();
146145
const styles = useThemeStyles();
147146

147+
const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {selector: getStableReportSelector});
148+
148149
// Report that owns this action for mutations (thread / merged-list cases use originalReport). This is a stable projection (heartbeat fields stripped).
149150
const actionOwnerReportStable = originalReport ?? report;
150151

‎tests/ui/ClearReportActionErrorsUITest.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ describe('ClearReportActionErrors UI', () => {
8686
<PortalProvider>
8787
<ReportActionItem
8888
report={report}
89+
chatReport={undefined}
8990
transactionThreadReport={undefined}
9091
parentReportAction={undefined}
9192
action={action}

0 commit comments

Comments
 (0)