Skip to content

Commit 3f38a4b

Browse files
mountinymountiny
authored
Merge pull request Expensify#67714 from DylanDylann/remove-onyx-connect-in-EmojiUtils-CardMessageUtils
Refactor src/libs/CardMessageUtils.ts to remove Onyx.connect() references
2 parents 5f87f8d + 6658489 commit 3f38a4b

10 files changed

Lines changed: 325 additions & 53 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
4747
"perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
4848
"typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
49-
"lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=301 --cache --cache-location=node_modules/.cache/eslint",
49+
"lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=299 --cache --cache-location=node_modules/.cache/eslint",
5050
"lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
5151
"lint-watch": "npx eslint-watch --watch --changed",
5252
"shellcheck": "./scripts/shellCheck.sh",

‎src/components/LHNOptionsList/OptionRowLHNData.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import {deepEqual} from 'fast-equals';
22
import React, {useMemo, useRef} from 'react';
33
import useCurrentReportID from '@hooks/useCurrentReportID';
4+
import useGetExpensifyCardFromReportAction from '@hooks/useGetExpensifyCardFromReportAction';
5+
import useOnyx from '@hooks/useOnyx';
6+
import {getSortedReportActions, shouldReportActionBeVisibleAsLastAction} from '@libs/ReportActionsUtils';
7+
import {canUserPerformWriteAction as canUserPerformWriteActionUtil} from '@libs/ReportUtils';
48
import SidebarUtils from '@libs/SidebarUtils';
59
import CONST from '@src/CONST';
610
import type {OptionData} from '@src/libs/ReportUtils';
11+
import ONYXKEYS from '@src/ONYXKEYS';
712
import OptionRowLHN from './OptionRowLHN';
813
import type {OptionRowLHNDataProps} from './types';
914

@@ -39,6 +44,25 @@ function OptionRowLHNData({
3944
const isReportFocused = isOptionFocused && currentReportIDValue?.currentReportID === reportID;
4045

4146
const optionItemRef = useRef<OptionData | undefined>(undefined);
47+
48+
const [reportActionsData] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canBeMissing: true});
49+
50+
const lastAction = useMemo(() => {
51+
if (!reportActionsData || !fullReport) {
52+
return undefined;
53+
}
54+
55+
const canUserPerformWriteAction = canUserPerformWriteActionUtil(fullReport);
56+
const actionsArray = getSortedReportActions(Object.values(reportActionsData));
57+
58+
const reportActionsForDisplay = actionsArray.filter(
59+
(reportAction) => shouldReportActionBeVisibleAsLastAction(reportAction, canUserPerformWriteAction) && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED,
60+
);
61+
62+
return reportActionsForDisplay.at(-1);
63+
}, [reportActionsData, fullReport]);
64+
65+
const card = useGetExpensifyCardFromReportAction({reportAction: lastAction, policyID: fullReport?.policyID});
4266
const optionItem = useMemo(() => {
4367
// Note: ideally we'd have this as a dependent selector in onyx!
4468
const item = SidebarUtils.getOptionData({
@@ -51,6 +75,7 @@ function OptionRowLHNData({
5175
parentReportAction,
5276
lastMessageTextFromReport,
5377
invoiceReceiverPolicy,
78+
card,
5479
localeCompare,
5580
});
5681
// eslint-disable-next-line react-compiler/react-compiler
@@ -84,6 +109,7 @@ function OptionRowLHNData({
84109
invoiceReceiverPolicy,
85110
lastMessageTextFromReport,
86111
reportAttributes,
112+
card,
87113
localeCompare,
88114
]);
89115

‎src/components/ReportActionItem/IssueCardMessage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import type {OnyxEntry} from 'react-native-onyx';
33
import Button from '@components/Button';
44
import {useSession} from '@components/OnyxListItemProvider';
55
import RenderHTML from '@components/RenderHTML';
6+
import useGetExpensifyCardFromReportAction from '@hooks/useGetExpensifyCardFromReportAction';
67
import useLocalize from '@hooks/useLocalize';
78
import useOnyx from '@hooks/useOnyx';
89
import useThemeStyles from '@hooks/useThemeStyles';
9-
import {getExpensifyCardFromReportAction} from '@libs/CardMessageUtils';
1010
import Navigation from '@libs/Navigation/Navigation';
1111
import {getCardIssuedMessage, getOriginalMessage, shouldShowAddMissingDetails} from '@libs/ReportActionsUtils';
1212
import ONYXKEYS from '@src/ONYXKEYS';
@@ -25,7 +25,7 @@ function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
2525
const styles = useThemeStyles();
2626
const session = useSession();
2727
const assigneeAccountID = (getOriginalMessage(action) as IssueNewCardOriginalMessage)?.assigneeAccountID;
28-
const expensifyCard = getExpensifyCardFromReportAction({reportAction: action, policyID});
28+
const expensifyCard = useGetExpensifyCardFromReportAction({reportAction: action, policyID});
2929
const isAssigneeCurrentUser = !isEmptyObject(session) && session.accountID === assigneeAccountID;
3030
const shouldShowAddMissingDetailsButton = isAssigneeCurrentUser && shouldShowAddMissingDetails(action?.actionName, expensifyCard);
3131
const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});

‎src/hooks/useGetExpensifyCardFromReportAction.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {getPolicy, getWorkspaceAccountID, isPolicyAdmin} from '@libs/PolicyUtils';
2+
import {getOriginalMessage, isCardIssuedAction} from '@libs/ReportActionsUtils';
3+
import CONST from '@src/CONST';
4+
import ONYXKEYS from '@src/ONYXKEYS';
5+
import type {Card, ReportAction} from '@src/types/onyx';
6+
import useOnyx from './useOnyx';
7+
8+
function useGetExpensifyCardFromReportAction({reportAction, policyID}: {reportAction?: ReportAction; policyID?: string}): Card | undefined {
9+
const [allUserCards] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
10+
const [allExpensifyCards] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {
11+
selector: (val) => {
12+
const workspaceAccountID = getWorkspaceAccountID(policyID);
13+
return val?.[`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`] ?? {};
14+
},
15+
canBeMissing: true,
16+
});
17+
const cardIssuedActionOriginalMessage = isCardIssuedAction(reportAction) ? getOriginalMessage(reportAction) : undefined;
18+
19+
const cardID = cardIssuedActionOriginalMessage?.cardID ?? CONST.DEFAULT_NUMBER_ID;
20+
// This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
21+
// eslint-disable-next-line deprecation/deprecation
22+
return isPolicyAdmin(getPolicy(policyID)) ? allExpensifyCards?.[cardID] : allUserCards?.[cardID];
23+
}
24+
25+
export default useGetExpensifyCardFromReportAction;

‎src/libs/CardMessageUtils.ts‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/libs/SidebarUtils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
66
import type {PartialPolicyForSidebar, ReportsToDisplayInLHN} from '@hooks/useSidebarOrderedReports';
77
import CONST from '@src/CONST';
88
import ONYXKEYS from '@src/ONYXKEYS';
9-
import type {PersonalDetails, PersonalDetailsList, ReportActions, ReportAttributesDerivedValue, ReportNameValuePairs, Transaction, TransactionViolation} from '@src/types/onyx';
9+
import type {Card, PersonalDetails, PersonalDetailsList, ReportActions, ReportAttributesDerivedValue, ReportNameValuePairs, Transaction, TransactionViolation} from '@src/types/onyx';
1010
import type Beta from '@src/types/onyx/Beta';
1111
import type {ReportAttributes} from '@src/types/onyx/DerivedValues';
1212
import type {Errors} from '@src/types/onyx/OnyxCommon';
1313
import type Policy from '@src/types/onyx/Policy';
1414
import type PriorityMode from '@src/types/onyx/PriorityMode';
1515
import type Report from '@src/types/onyx/Report';
1616
import type ReportAction from '@src/types/onyx/ReportAction';
17-
import {getExpensifyCardFromReportAction} from './CardMessageUtils';
1817
import {extractCollectionItemID} from './CollectionUtils';
1918
import {hasValidDraftComment} from './DraftCommentUtils';
2019
import {translateLocal} from './Localize';
@@ -510,6 +509,7 @@ function getOptionData({
510509
parentReportAction,
511510
lastMessageTextFromReport: lastMessageTextFromReportProp,
512511
invoiceReceiverPolicy,
512+
card,
513513
localeCompare,
514514
}: {
515515
report: OnyxEntry<Report>;
@@ -521,6 +521,7 @@ function getOptionData({
521521
lastMessageTextFromReport?: string;
522522
invoiceReceiverPolicy?: OnyxEntry<Policy>;
523523
reportAttributes: OnyxEntry<ReportAttributes>;
524+
card: Card | undefined;
524525
localeCompare: LocaleContextProps['localeCompare'];
525526
}): OptionData | undefined {
526527
// When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
@@ -746,7 +747,6 @@ function getOptionData({
746747
} else if (lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.LEAVE_POLICY) {
747748
result.alternateText = getPolicyChangeLogEmployeeLeftMessage(lastAction, true);
748749
} else if (isCardIssuedAction(lastAction)) {
749-
const card = getExpensifyCardFromReportAction({reportAction: lastAction, policyID: report.policyID});
750750
result.alternateText = getCardIssuedMessage({reportAction: lastAction, expensifyCard: card});
751751
} else if (lastAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && lastActorDisplayName && lastMessageTextFromReport) {
752752
result.alternateText = formatReportLastMessageText(Parser.htmlToText(`${lastActorDisplayName}: ${lastMessageText}`));

‎src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ContextMenuItem from '@components/ContextMenuItem';
1111
import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
1212
import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
1313
import useEnvironment from '@hooks/useEnvironment';
14+
import useGetExpensifyCardFromReportAction from '@hooks/useGetExpensifyCardFromReportAction';
1415
import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
1516
import useLocalize from '@hooks/useLocalize';
1617
import useNetwork from '@hooks/useNetwork';
@@ -20,7 +21,6 @@ import useReportIsArchived from '@hooks/useReportIsArchived';
2021
import useResponsiveLayout from '@hooks/useResponsiveLayout';
2122
import useRestoreInputFocus from '@hooks/useRestoreInputFocus';
2223
import useStyleUtils from '@hooks/useStyleUtils';
23-
import {getExpensifyCardFromReportAction} from '@libs/CardMessageUtils';
2424
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
2525
import {getLinkedTransactionID, getOneTransactionThreadReportID, getOriginalMessage, getReportAction} from '@libs/ReportActionsUtils';
2626
import {
@@ -321,7 +321,7 @@ function BaseReportActionContextMenu({
321321
};
322322

323323
// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
324-
const card = getExpensifyCardFromReportAction({reportAction: (reportAction ?? null) as ReportAction, policyID});
324+
const card = useGetExpensifyCardFromReportAction({reportAction: (reportAction ?? null) as ReportAction, policyID});
325325

326326
return (
327327
(isVisible || shouldKeepOpen || !isMini) && (

‎tests/perf-test/SidebarUtils.perf-test.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ describe('SidebarUtils', () => {
8484
policy,
8585
parentReportAction,
8686
oneTransactionThreadReport: undefined,
87+
card: undefined,
8788
localeCompare,
8889
}),
8990
);

‎tests/unit/SidebarUtilsTest.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ describe('SidebarUtils', () => {
328328
policy: undefined,
329329
parentReportAction: undefined,
330330
oneTransactionThreadReport: undefined,
331+
card: undefined,
331332
localeCompare,
332333
});
333334
const optionDataUnpinned = SidebarUtils.getOptionData({
@@ -338,6 +339,7 @@ describe('SidebarUtils', () => {
338339
policy: undefined,
339340
parentReportAction: undefined,
340341
oneTransactionThreadReport: undefined,
342+
card: undefined,
341343
localeCompare,
342344
});
343345

@@ -832,6 +834,7 @@ describe('SidebarUtils', () => {
832834
policy: undefined,
833835
parentReportAction: undefined,
834836
oneTransactionThreadReport: undefined,
837+
card: undefined,
835838
localeCompare,
836839
});
837840

@@ -890,6 +893,7 @@ describe('SidebarUtils', () => {
890893
policy: undefined,
891894
parentReportAction: undefined,
892895
oneTransactionThreadReport: undefined,
896+
card: undefined,
893897
localeCompare,
894898
});
895899

@@ -931,6 +935,7 @@ describe('SidebarUtils', () => {
931935
parentReportAction: undefined,
932936
lastMessageTextFromReport: 'test message',
933937
oneTransactionThreadReport: undefined,
938+
card: undefined,
934939
localeCompare,
935940
});
936941

@@ -965,6 +970,7 @@ describe('SidebarUtils', () => {
965970
parentReportAction: undefined,
966971
lastMessageTextFromReport: 'test message',
967972
oneTransactionThreadReport: undefined,
973+
card: undefined,
968974
localeCompare,
969975
});
970976

@@ -996,6 +1002,7 @@ describe('SidebarUtils', () => {
9961002
parentReportAction: undefined,
9971003
lastMessageTextFromReport: 'test message',
9981004
oneTransactionThreadReport: undefined,
1005+
card: undefined,
9991006
localeCompare,
10001007
});
10011008

@@ -1116,6 +1123,7 @@ describe('SidebarUtils', () => {
11161123
policy,
11171124
parentReportAction: undefined,
11181125
oneTransactionThreadReport: undefined,
1126+
card: undefined,
11191127
localeCompare,
11201128
});
11211129
const {totalDisplaySpend} = getMoneyRequestSpendBreakdown(iouReport);
@@ -1158,6 +1166,7 @@ describe('SidebarUtils', () => {
11581166
parentReportAction: undefined,
11591167
lastMessageTextFromReport: 'test message',
11601168
oneTransactionThreadReport: undefined,
1169+
card: undefined,
11611170
localeCompare,
11621171
});
11631172

@@ -1223,6 +1232,7 @@ describe('SidebarUtils', () => {
12231232
policy: undefined,
12241233
parentReportAction: undefined,
12251234
oneTransactionThreadReport: undefined,
1235+
card: undefined,
12261236
localeCompare,
12271237
});
12281238

@@ -1265,6 +1275,7 @@ describe('SidebarUtils', () => {
12651275
policy: undefined,
12661276
parentReportAction: undefined,
12671277
oneTransactionThreadReport: undefined,
1278+
card: undefined,
12681279
localeCompare,
12691280
});
12701281

@@ -1329,6 +1340,7 @@ describe('SidebarUtils', () => {
13291340
policy: undefined,
13301341
parentReportAction: undefined,
13311342
oneTransactionThreadReport: undefined,
1343+
card: undefined,
13321344
localeCompare,
13331345
});
13341346

@@ -1440,6 +1452,7 @@ describe('SidebarUtils', () => {
14401452
policy: undefined,
14411453
parentReportAction: undefined,
14421454
oneTransactionThreadReport: undefined,
1455+
card: undefined,
14431456
localeCompare,
14441457
});
14451458

0 commit comments

Comments
 (0)