Skip to content

Commit 6ffff4a

Browse files
cristipavalcristipaval
authored
Merge pull request #88579 from callstack-internal/perf-send-message-phase-9
refactor: PureReportActionItem, ChatTransactionPreview
2 parents df52f66 + c68fda1 commit 6ffff4a

7 files changed

Lines changed: 105 additions & 92 deletions

File tree

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

Lines changed: 12 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import MoneyRequestReportPreview from '@components/ReportActionItem/MoneyRequest
3030
import MovedTransactionAction from '@components/ReportActionItem/MovedTransactionAction';
3131
import TaskAction from '@components/ReportActionItem/TaskAction';
3232
import TaskPreview from '@components/ReportActionItem/TaskPreview';
33-
import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
3433
import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
3534
import UnreportedTransactionAction from '@components/ReportActionItem/UnreportedTransactionAction';
3635
import {SearchStateContext} from '@components/Search/SearchContext';
@@ -40,7 +39,6 @@ import Text from '@components/Text';
4039
import TextLink from '@components/TextLink';
4140
import UnreadActionIndicator from '@components/UnreadActionIndicator';
4241
import useConfirmModal from '@hooks/useConfirmModal';
43-
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
4442
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
4543
import useLocalize from '@hooks/useLocalize';
4644
import useOnyx from '@hooks/useOnyx';
@@ -98,9 +96,7 @@ import {
9896
isReimbursementDeQueuedOrCanceledAction,
9997
isReimbursementQueuedAction,
10098
isRenamedAction,
101-
isSplitBillAction as isSplitBillActionReportActionsUtils,
10299
isTaskAction,
103-
isTrackExpenseAction as isTrackExpenseActionReportActionsUtils,
104100
isTripPreview,
105101
isWhisperActionTargetedToOthers,
106102
useTableReportViewActionRenderConditionals,
@@ -126,7 +122,7 @@ import variables from '@styles/variables';
126122
import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
127123
import type {IgnoreDirection} from '@userActions/ClearReportActionErrors';
128124
import {hideEmojiPicker, isActive} from '@userActions/EmojiPickerAction';
129-
import {createTransactionThreadReport, expandURLPreview} from '@userActions/Report';
125+
import {expandURLPreview} from '@userActions/Report';
130126
import CONST from '@src/CONST';
131127
import ONYXKEYS from '@src/ONYXKEYS';
132128
import ROUTES from '@src/ROUTES';
@@ -137,6 +133,7 @@ import {isEmptyObject, isEmptyValueObject} from '@src/types/utils/EmptyObject';
137133
import ApprovalFlowContent, {isApprovalFlowAction} from './actionContents/ApprovalFlowContent';
138134
import CardBrokenConnectionContent from './actionContents/CardBrokenConnectionContent';
139135
import ChatMessageContent from './actionContents/ChatMessageContent';
136+
import ChatTransactionPreview from './actionContents/ChatTransactionPreview';
140137
import ConfirmWhisperContent from './actionContents/ConfirmWhisperContent';
141138
import FraudAlertContent from './actionContents/FraudAlertContent';
142139
import JoinRequestContent from './actionContents/JoinRequestContent';
@@ -165,12 +162,6 @@ type PureReportActionItemProps = {
165162
/** The personal policy ID */
166163
personalPolicyID: string | undefined;
167164

168-
/** Model of onboarding selected */
169-
introSelected?: OnyxEntry<OnyxTypes.IntroSelected>;
170-
171-
/** Beta features list */
172-
betas: OnyxEntry<OnyxTypes.Beta[]>;
173-
174165
/** Report for this action */
175166
report: OnyxEntry<OnyxTypes.Report>;
176167

@@ -337,8 +328,6 @@ const isEmptyHTML = <T extends React.JSX.Element>({props: {html}}: T): boolean =
337328

338329
function PureReportActionItem({
339330
personalPolicyID,
340-
introSelected,
341-
betas,
342331
action,
343332
report,
344333
policy,
@@ -393,7 +382,6 @@ function PureReportActionItem({
393382
const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
394383
const {translate, formatPhoneNumber, localeCompare, formatTravelDate, datetimeToCalendarTime} = useLocalize();
395384
const {showConfirmModal} = useConfirmModal();
396-
const personalDetail = useCurrentUserPersonalDetails();
397385
const {shouldUseNarrowLayout} = useResponsiveLayout();
398386
const reportID = report?.reportID ?? action?.reportID;
399387
const theme = useTheme();
@@ -428,8 +416,6 @@ function PureReportActionItem({
428416
[StyleUtils, isReportActionLinked, theme.messageHighlightBG, shouldHighlight],
429417
);
430418

431-
const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, 1, undefined, undefined);
432-
433419
const isDeletedParentAction = isDeletedParentActionUtils(action);
434420

435421
// IOUDetails only exists when we are sending money
@@ -724,46 +710,16 @@ function PureReportActionItem({
724710
const shouldShowSplitPreview = isSplitBill || isSplitScanWithNoAmount;
725711
if (report.chatType === CONST.REPORT.CHAT_TYPE.SELF_DM || shouldShowSplitPreview) {
726712
children = (
727-
<View style={[styles.mt1, styles.w100]}>
728-
<TransactionPreview
729-
iouReportID={getIOUReportIDFromReportActionPreview(action)}
730-
chatReportID={reportID}
731-
reportID={reportID}
732-
action={action}
733-
shouldDisplayContextMenu={shouldDisplayContextMenuValue}
734-
isBillSplit={isSplitBillActionReportActionsUtils(action)}
735-
transactionID={shouldShowSplitPreview ? moneyRequestOriginalMessage?.IOUTransactionID : undefined}
736-
containerStyles={[reportPreviewStyles.transactionPreviewStandaloneStyle, styles.mt1]}
737-
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStandaloneStyle.width}
738-
onPreviewPressed={() => {
739-
if (shouldShowSplitPreview) {
740-
Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(chatReportID, action.reportActionID, Navigation.getReportRHPActiveRoute()));
741-
return;
742-
}
743-
744-
// If no childReportID exists, create transaction thread on-demand
745-
if (!action.childReportID) {
746-
const createdTransactionThreadReport = createTransactionThreadReport(
747-
introSelected,
748-
personalDetail.email ?? '',
749-
personalDetail.accountID,
750-
betas,
751-
iouReport,
752-
action,
753-
);
754-
if (createdTransactionThreadReport?.reportID) {
755-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(createdTransactionThreadReport.reportID, undefined, undefined, Navigation.getActiveRoute()));
756-
return;
757-
}
758-
return;
759-
}
760-
761-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(action.childReportID, undefined, undefined, Navigation.getActiveRoute()));
762-
}}
763-
isTrackExpense={isTrackExpenseActionReportActionsUtils(action)}
764-
originalReportID={originalReportID}
765-
/>
766-
</View>
713+
<ChatTransactionPreview
714+
action={action}
715+
reportID={reportID}
716+
originalReportID={originalReportID}
717+
chatReportID={chatReportID}
718+
iouReport={iouReport}
719+
shouldShowSplitPreview={shouldShowSplitPreview}
720+
shouldDisplayContextMenu={shouldDisplayContextMenuValue}
721+
transactionID={shouldShowSplitPreview ? moneyRequestOriginalMessage?.IOUTransactionID : undefined}
722+
/>
767723
);
768724
} else {
769725
children = emptyHTML;
@@ -1089,7 +1045,6 @@ function PureReportActionItem({
10891045
contextMenuStateValue={contextMenuStateValue}
10901046
contextMenuActionsValue={contextMenuActionsValue}
10911047
userBillingFundID={userBillingFundID}
1092-
introSelected={introSelected}
10931048
/>
10941049
);
10951050
}
@@ -1436,8 +1391,6 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => {
14361391
prevProps.isUserValidated === nextProps.isUserValidated &&
14371392
prevProps.parentReport?.reportID === nextProps.parentReport?.reportID &&
14381393
deepEqual(prevProps.personalDetails, nextProps.personalDetails) &&
1439-
deepEqual(prevProps.introSelected, nextProps.introSelected) &&
1440-
deepEqual(prevProps.betas, nextProps.betas) &&
14411394
prevProps.originalReportID === nextProps.originalReportID &&
14421395
deepEqual(prevProps.originalReport?.participants, nextProps.originalReport?.participants) &&
14431396
prevProps.isArchivedRoom === nextProps.isArchivedRoom &&

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import type {PersonalDetailsList, Transaction} from '@src/types/onyx';
2323
import type {PureReportActionItemProps} from './PureReportActionItem';
2424
import PureReportActionItem from './PureReportActionItem';
2525

26-
type ReportActionItemProps = Omit<PureReportActionItemProps, 'taskReport' | 'linkedReport' | 'iouReportOfLinkedReport' | 'personalPolicyID' | 'betas'> & {
26+
type ReportActionItemProps = Omit<PureReportActionItemProps, 'taskReport' | 'linkedReport' | 'iouReportOfLinkedReport' | 'personalPolicyID'> & {
2727
/** Whether to show the draft message or not */
2828
shouldShowDraftMessage?: boolean;
2929

@@ -62,8 +62,6 @@ function ReportActionItem({
6262
const originalMessage = getOriginalMessage(action);
6363
const originalReportID = useOriginalReportID(reportID, action);
6464
const isOriginalReportArchived = useReportIsArchived(originalReportID);
65-
const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
66-
const [betas] = useOnyx(ONYXKEYS.BETAS);
6765
const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`);
6866
const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`);
6967
const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`);
@@ -98,8 +96,6 @@ function ReportActionItem({
9896
<PureReportActionItem
9997
// eslint-disable-next-line react/jsx-props-no-spreading
10098
{...props}
101-
introSelected={introSelected}
102-
betas={betas}
10399
personalPolicyID={personalPolicyID}
104100
action={action}
105101
report={report}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@ type ChatActionableButtonsProps = {
3939
reportID: string | undefined;
4040
originalReportID: string;
4141
userBillingFundID: number | undefined;
42-
introSelected: OnyxEntry<OnyxTypes.IntroSelected>;
4342
};
4443

45-
function ChatActionableButtons({action, report, originalReport, reportID, originalReportID, userBillingFundID, introSelected}: ChatActionableButtonsProps) {
44+
function ChatActionableButtons({action, report, originalReport, reportID, originalReportID, userBillingFundID}: ChatActionableButtonsProps) {
4645
const styles = useThemeStyles();
4746
const personalDetail = useCurrentUserPersonalDetails();
4847
const {isRestrictedToPreferredPolicy, preferredPolicyID} = usePreferredPolicy();
4948
const activePolicy = useActivePolicy();
5049

5150
const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
51+
const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
5252
const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
5353
const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);
5454
const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ type ChatMessageContentProps = {
5959
onShowContextMenu: (callback: () => void) => void;
6060
};
6161
userBillingFundID: number | undefined;
62-
introSelected: OnyxEntry<OnyxTypes.IntroSelected>;
6362
};
6463

6564
function ChatMessageContent({
@@ -81,7 +80,6 @@ function ChatMessageContent({
8180
contextMenuStateValue,
8281
contextMenuActionsValue,
8382
userBillingFundID,
84-
introSelected,
8583
}: ChatMessageContentProps) {
8684
const {translate} = useLocalize();
8785
const styles = useThemeStyles();
@@ -139,7 +137,6 @@ function ChatMessageContent({
139137
reportID={reportID}
140138
originalReportID={originalReportID}
141139
userBillingFundID={userBillingFundID}
142-
introSelected={introSelected}
143140
/>
144141
)}
145142
</View>

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import {View} from 'react-native';
3+
import type {OnyxEntry} from 'react-native-onyx';
4+
import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
5+
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
6+
import useOnyx from '@hooks/useOnyx';
7+
import useResponsiveLayout from '@hooks/useResponsiveLayout';
8+
import useStyleUtils from '@hooks/useStyleUtils';
9+
import useThemeStyles from '@hooks/useThemeStyles';
10+
import Navigation from '@libs/Navigation/Navigation';
11+
import {getIOUReportIDFromReportActionPreview, isSplitBillAction, isTrackExpenseAction} from '@libs/ReportActionsUtils';
12+
import {createTransactionThreadReport} from '@userActions/Report';
13+
import ONYXKEYS from '@src/ONYXKEYS';
14+
import ROUTES from '@src/ROUTES';
15+
import type * as OnyxTypes from '@src/types/onyx';
16+
17+
type ChatTransactionPreviewProps = {
18+
/** All the data of the action, used for showing context menu and deriving the IOU report */
19+
action: OnyxTypes.ReportAction;
20+
21+
/** The ID of the current report where the preview is rendered */
22+
reportID: string | undefined;
23+
24+
/** ID of the original report from which the given report action was first created */
25+
originalReportID: string;
26+
27+
/** The ID of the associated chat report, used when navigating to split bill details */
28+
chatReportID: string | undefined;
29+
30+
/** The IOU report linked to this transaction, used when creating a transaction thread on demand */
31+
iouReport: OnyxEntry<OnyxTypes.Report>;
32+
33+
/** Whether the preview should navigate to the split bill details screen on press */
34+
shouldShowSplitPreview: boolean;
35+
36+
/** Whether the context menu should be shown on press */
37+
shouldDisplayContextMenu: boolean;
38+
39+
/** The ID of the transaction to preview */
40+
transactionID: string | undefined;
41+
};
42+
43+
function ChatTransactionPreview({action, reportID, originalReportID, chatReportID, iouReport, shouldShowSplitPreview, shouldDisplayContextMenu, transactionID}: ChatTransactionPreviewProps) {
44+
const styles = useThemeStyles();
45+
const StyleUtils = useStyleUtils();
46+
const {shouldUseNarrowLayout} = useResponsiveLayout();
47+
const personalDetail = useCurrentUserPersonalDetails();
48+
const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
49+
const [betas] = useOnyx(ONYXKEYS.BETAS);
50+
51+
const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, 1, undefined, undefined);
52+
53+
return (
54+
<View style={[styles.mt1, styles.w100]}>
55+
<TransactionPreview
56+
iouReportID={getIOUReportIDFromReportActionPreview(action)}
57+
chatReportID={reportID}
58+
reportID={reportID}
59+
action={action}
60+
shouldDisplayContextMenu={shouldDisplayContextMenu}
61+
isBillSplit={isSplitBillAction(action)}
62+
transactionID={transactionID}
63+
containerStyles={[reportPreviewStyles.transactionPreviewStandaloneStyle, styles.mt1]}
64+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStandaloneStyle.width}
65+
onPreviewPressed={() => {
66+
if (shouldShowSplitPreview) {
67+
Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(chatReportID, action.reportActionID, Navigation.getReportRHPActiveRoute()));
68+
return;
69+
}
70+
71+
// If no childReportID exists, create transaction thread on-demand
72+
if (!action.childReportID) {
73+
const createdTransactionThreadReport = createTransactionThreadReport(introSelected, personalDetail.email ?? '', personalDetail.accountID, betas, iouReport, action);
74+
if (createdTransactionThreadReport?.reportID) {
75+
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(createdTransactionThreadReport.reportID, undefined, undefined, Navigation.getActiveRoute()));
76+
return;
77+
}
78+
return;
79+
}
80+
81+
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(action.childReportID, undefined, undefined, Navigation.getActiveRoute()));
82+
}}
83+
isTrackExpense={isTrackExpenseAction(action)}
84+
originalReportID={originalReportID}
85+
/>
86+
</View>
87+
);
88+
}
89+
90+
export default ChatTransactionPreview;

‎tests/ui/ClearReportActionErrorsUITest.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ describe('ClearReportActionErrors UI', () => {
104104
taskReport={undefined}
105105
linkedReport={undefined}
106106
iouReportOfLinkedReport={undefined}
107-
betas={undefined}
108107
clearAllRelatedReportActionErrors={clearErrorFn}
109108
originalReportID={originalReportID}
110109
/>

0 commit comments

Comments
 (0)