Skip to content

Commit c26de24

Browse files
carlosmicelicarlosmiceli
authored
Merge pull request #55260 from callstack-internal/perf/improve-chat-switch
perf: avoid using getOrderedReportIDs when calculating GBR/RBR state
2 parents 8102c19 + 52caad0 commit c26de24

File tree

3 files changed

+30
-69
lines changed

3 files changed

+30
-69
lines changed

‎src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import Text from '@components/Text';
1010
import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
1111
import useActiveWorkspace from '@hooks/useActiveWorkspace';
1212
import useBottomTabIsFocused from '@hooks/useBottomTabIsFocused';
13-
import useCurrentReportID from '@hooks/useCurrentReportID';
1413
import useLocalize from '@hooks/useLocalize';
14+
import {useReportIDs} from '@hooks/useReportIDs';
1515
import useTheme from '@hooks/useTheme';
1616
import useThemeStyles from '@hooks/useThemeStyles';
1717
import getPlatform from '@libs/getPlatform';
@@ -70,17 +70,10 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
7070
const styles = useThemeStyles();
7171
const {translate} = useLocalize();
7272
const {activeWorkspaceID} = useActiveWorkspace();
73-
const {currentReportID} = useCurrentReportID() ?? {};
73+
const {orderedReportIDs} = useReportIDs();
7474
const [user] = useOnyx(ONYXKEYS.USER);
75-
const [betas] = useOnyx(ONYXKEYS.BETAS);
76-
const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE);
77-
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
78-
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
7975
const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
80-
const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
81-
const [chatTabBrickRoad, setChatTabBrickRoad] = useState<BrickRoad>(() =>
82-
getChatTabBrickRoad(activeWorkspaceID, currentReportID, reports, betas, policies, priorityMode, transactionViolations),
83-
);
76+
const [chatTabBrickRoad, setChatTabBrickRoad] = useState<BrickRoad>(undefined);
8477
const isFocused = useBottomTabIsFocused();
8578
const platform = getPlatform();
8679
const isWebOrDesktop = platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP;
@@ -89,10 +82,10 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
8982
selectedTab !== SCREENS.HOME && isFocused,
9083
);
9184
useEffect(() => {
92-
setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID, currentReportID, reports, betas, policies, priorityMode, transactionViolations));
85+
setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID, orderedReportIDs));
9386
// We need to get a new brick road state when report actions are updated, otherwise we'll be showing an outdated brick road.
9487
// That's why reportActions is added as a dependency here
95-
}, [activeWorkspaceID, transactionViolations, reports, reportActions, betas, policies, priorityMode, currentReportID]);
88+
}, [activeWorkspaceID, orderedReportIDs, reportActions]);
9689

9790
const navigateToChats = useCallback(() => {
9891
if (selectedTab === SCREENS.HOME) {
@@ -138,12 +131,6 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
138131
selectedTab={selectedTab}
139132
chatTabBrickRoad={chatTabBrickRoad}
140133
activeWorkspaceID={activeWorkspaceID}
141-
reports={reports}
142-
currentReportID={currentReportID}
143-
betas={betas}
144-
policies={policies}
145-
transactionViolations={transactionViolations}
146-
priorityMode={priorityMode}
147134
/>
148135
)}
149136
<View style={styles.bottomTabBarContainer}>

‎src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useCallback, useMemo} from 'react';
22
import {View} from 'react-native';
3-
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
3+
import type {OnyxEntry} from 'react-native-onyx';
44
import {useOnyx} from 'react-native-onyx';
55
import Button from '@components/Button';
66
import Icon from '@components/Icon';
@@ -9,6 +9,7 @@ import Text from '@components/Text';
99
import type {IndicatorStatus} from '@hooks/useIndicatorStatus';
1010
import useIndicatorStatus from '@hooks/useIndicatorStatus';
1111
import useLocalize from '@hooks/useLocalize';
12+
import {useReportIDs} from '@hooks/useReportIDs';
1213
import useStyleUtils from '@hooks/useStyleUtils';
1314
import useTheme from '@hooks/useTheme';
1415
import useThemeStyles from '@hooks/useThemeStyles';
@@ -21,18 +22,12 @@ import ONYXKEYS from '@src/ONYXKEYS';
2122
import type {Route} from '@src/ROUTES';
2223
import ROUTES from '@src/ROUTES';
2324
import SCREENS from '@src/SCREENS';
24-
import type {Beta, Policy, PriorityMode, ReimbursementAccount, Report, TransactionViolations} from '@src/types/onyx';
25+
import type {ReimbursementAccount} from '@src/types/onyx';
2526

2627
type DebugTabViewProps = {
2728
selectedTab?: string;
2829
chatTabBrickRoad: BrickRoad;
2930
activeWorkspaceID?: string;
30-
currentReportID: string | undefined;
31-
reports: OnyxCollection<Report>;
32-
betas: OnyxEntry<Beta[]>;
33-
policies: OnyxCollection<Policy>;
34-
transactionViolations: OnyxCollection<TransactionViolations>;
35-
priorityMode: OnyxEntry<PriorityMode>;
3631
};
3732

3833
function getSettingsMessage(status: IndicatorStatus | undefined): TranslationPaths | undefined {
@@ -97,13 +92,14 @@ function getSettingsRoute(status: IndicatorStatus | undefined, reimbursementAcco
9792
}
9893
}
9994

100-
function DebugTabView({selectedTab = '', chatTabBrickRoad, activeWorkspaceID, currentReportID, reports, betas, policies, transactionViolations, priorityMode}: DebugTabViewProps) {
95+
function DebugTabView({selectedTab = '', chatTabBrickRoad, activeWorkspaceID}: DebugTabViewProps) {
10196
const StyleUtils = useStyleUtils();
10297
const theme = useTheme();
10398
const styles = useThemeStyles();
10499
const {translate} = useLocalize();
105100
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
106101
const {status, indicatorColor, policyIDWithErrors} = useIndicatorStatus();
102+
const {orderedReportIDs} = useReportIDs();
107103

108104
const message = useMemo((): TranslationPaths | undefined => {
109105
if (selectedTab === SCREENS.HOME) {
@@ -137,7 +133,7 @@ function DebugTabView({selectedTab = '', chatTabBrickRoad, activeWorkspaceID, cu
137133

138134
const navigateTo = useCallback(() => {
139135
if (selectedTab === SCREENS.HOME && !!chatTabBrickRoad) {
140-
const report = getChatTabBrickRoadReport(activeWorkspaceID, currentReportID, reports, betas, policies, priorityMode, transactionViolations);
136+
const report = getChatTabBrickRoadReport(activeWorkspaceID, orderedReportIDs);
141137

142138
if (report) {
143139
Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(report.reportID));
@@ -150,7 +146,7 @@ function DebugTabView({selectedTab = '', chatTabBrickRoad, activeWorkspaceID, cu
150146
Navigation.navigate(route);
151147
}
152148
}
153-
}, [selectedTab, chatTabBrickRoad, activeWorkspaceID, currentReportID, reports, betas, policies, priorityMode, transactionViolations, status, reimbursementAccount, policyIDWithErrors]);
149+
}, [selectedTab, chatTabBrickRoad, activeWorkspaceID, orderedReportIDs, status, reimbursementAccount, policyIDWithErrors]);
154150

155151
if (!([SCREENS.HOME, SCREENS.SETTINGS.ROOT] as string[]).includes(selectedTab) || !indicator) {
156152
return null;

‎src/libs/WorkspacesSettingsUtils.ts

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@ import Onyx from 'react-native-onyx';
22
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
33
import type {ValueOf} from 'type-fest';
44
import type {LocaleContextProps} from '@components/LocaleContextProvider';
5-
import type {PolicySelector} from '@hooks/useReportIDs';
65
import CONST from '@src/CONST';
76
import type {TranslationPaths} from '@src/languages/types';
87
import ONYXKEYS from '@src/ONYXKEYS';
9-
import type {Beta, Policy, PriorityMode, ReimbursementAccount, Report, ReportAction, ReportActions, TransactionViolation, TransactionViolations} from '@src/types/onyx';
8+
import type {Policy, ReimbursementAccount, Report, ReportAction, ReportActions, TransactionViolations} from '@src/types/onyx';
109
import type {PolicyConnectionSyncProgress, Unit} from '@src/types/onyx/Policy';
1110
import {isConnectionInProgress} from './actions/connections';
12-
import * as CurrencyUtils from './CurrencyUtils';
11+
import {convertToDisplayString} from './CurrencyUtils';
1312
import {isPolicyAdmin, shouldShowCustomUnitsError, shouldShowEmployeeListError, shouldShowPolicyError, shouldShowSyncError, shouldShowTaxRateError} from './PolicyUtils';
14-
import * as ReportActionsUtils from './ReportActionsUtils';
15-
import * as ReportUtils from './ReportUtils';
16-
import SidebarUtils from './SidebarUtils';
13+
import {getOneTransactionThreadReportID} from './ReportActionsUtils';
14+
import {getAllReportErrors, hasReportViolations, isReportOwner, isUnread, isUnreadWithMention, requiresAttentionFromCurrentUser, shouldDisplayViolationsRBRInLHN} from './ReportUtils';
1715

1816
type CheckingMethod = () => boolean;
1917

@@ -69,13 +67,13 @@ Onyx.connect({
6967
*/
7068
const getBrickRoadForPolicy = (report: Report, altReportActions?: OnyxCollection<ReportActions>): BrickRoad => {
7169
const reportActions = (altReportActions ?? allReportActions)?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`] ?? {};
72-
const reportErrors = ReportUtils.getAllReportErrors(report, reportActions);
73-
const oneTransactionThreadReportID = ReportActionsUtils.getOneTransactionThreadReportID(report.reportID, reportActions);
70+
const reportErrors = getAllReportErrors(report, reportActions);
71+
const oneTransactionThreadReportID = getOneTransactionThreadReportID(report.reportID, reportActions);
7472
let doesReportContainErrors = Object.keys(reportErrors ?? {}).length !== 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined;
7573

7674
if (!doesReportContainErrors) {
77-
const shouldDisplayViolations = ReportUtils.shouldDisplayViolationsRBRInLHN(report, allTransactionViolations);
78-
const shouldDisplayReportViolations = ReportUtils.isReportOwner(report) && ReportUtils.hasReportViolations(report.reportID);
75+
const shouldDisplayViolations = shouldDisplayViolationsRBRInLHN(report, allTransactionViolations);
76+
const shouldDisplayReportViolations = isReportOwner(report) && hasReportViolations(report.reportID);
7977
const hasViolations = shouldDisplayViolations || shouldDisplayReportViolations;
8078
if (hasViolations) {
8179
doesReportContainErrors = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
@@ -85,7 +83,7 @@ const getBrickRoadForPolicy = (report: Report, altReportActions?: OnyxCollection
8583
if (oneTransactionThreadReportID && !doesReportContainErrors) {
8684
const oneTransactionThreadReport = reportsCollection?.[`${ONYXKEYS.COLLECTION.REPORT}${oneTransactionThreadReportID}`];
8785

88-
if (ReportUtils.shouldDisplayViolationsRBRInLHN(oneTransactionThreadReport, allTransactionViolations)) {
86+
if (shouldDisplayViolationsRBRInLHN(oneTransactionThreadReport, allTransactionViolations)) {
8987
doesReportContainErrors = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
9088
}
9189
}
@@ -100,8 +98,8 @@ const getBrickRoadForPolicy = (report: Report, altReportActions?: OnyxCollection
10098
const itemParentReportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`] ?? {};
10199
itemParentReportAction = report.parentReportActionID ? itemParentReportActions[report.parentReportActionID] : undefined;
102100
}
103-
const reportOption = {...report, isUnread: ReportUtils.isUnread(report), isUnreadWithMention: ReportUtils.isUnreadWithMention(report)};
104-
const shouldShowGreenDotIndicator = ReportUtils.requiresAttentionFromCurrentUser(reportOption, itemParentReportAction);
101+
const reportOption = {...report, isUnread: isUnread(report), isUnreadWithMention: isUnreadWithMention(report)};
102+
const shouldShowGreenDotIndicator = requiresAttentionFromCurrentUser(reportOption, itemParentReportAction);
105103
return shouldShowGreenDotIndicator ? CONST.BRICK_ROAD_INDICATOR_STATUS.INFO : undefined;
106104
};
107105

@@ -138,23 +136,12 @@ function hasWorkspaceSettingsRBR(policy: Policy) {
138136
);
139137
}
140138

141-
function getChatTabBrickRoadReport(
142-
policyID: string | undefined,
143-
currentReportId: string | undefined,
144-
reports: OnyxCollection<Report>,
145-
betas: OnyxEntry<Beta[]>,
146-
policies: OnyxCollection<PolicySelector>,
147-
priorityMode: OnyxEntry<PriorityMode>,
148-
transactionViolations: OnyxCollection<TransactionViolation[]>,
149-
policyMemberAccountIDs: number[] = [],
150-
): OnyxEntry<Report> {
151-
const reportIDs = SidebarUtils.getOrderedReportIDs(currentReportId, reports, betas, policies, priorityMode, transactionViolations, policyID, policyMemberAccountIDs);
152-
if (!reportIDs.length) {
139+
function getChatTabBrickRoadReport(policyID: string | undefined, orderedReportIDs: string[] = []): OnyxEntry<Report> {
140+
if (!orderedReportIDs.length) {
153141
return undefined;
154142
}
155143

156-
const allReports = reportIDs.map((reportID) => reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]);
157-
144+
const allReports = orderedReportIDs.map((reportID) => reportsCollection?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]);
158145
// If policyID is undefined, then all reports are checked whether they contain any brick road
159146
const policyReports = policyID ? Object.values(allReports).filter((report) => report?.policyID === policyID) : Object.values(allReports);
160147

@@ -180,17 +167,8 @@ function getChatTabBrickRoadReport(
180167
return undefined;
181168
}
182169

183-
function getChatTabBrickRoad(
184-
policyID: string | undefined,
185-
currentReportId: string | undefined,
186-
reports: OnyxCollection<Report>,
187-
betas: OnyxEntry<Beta[]>,
188-
policies: OnyxCollection<PolicySelector>,
189-
priorityMode: OnyxEntry<PriorityMode>,
190-
transactionViolations: OnyxCollection<TransactionViolation[]>,
191-
policyMemberAccountIDs: number[] = [],
192-
): BrickRoad | undefined {
193-
const report = getChatTabBrickRoadReport(policyID, currentReportId, reports, betas, policies, priorityMode, transactionViolations, policyMemberAccountIDs);
170+
function getChatTabBrickRoad(policyID: string | undefined, orderedReportIDs: string[]): BrickRoad | undefined {
171+
const report = getChatTabBrickRoadReport(policyID, orderedReportIDs);
194172
return report ? getBrickRoadForPolicy(report) : undefined;
195173
}
196174

@@ -250,7 +228,7 @@ function getWorkspacesUnreadStatuses(reports: OnyxCollection<Report>): Record<st
250228

251229
// When the only message of a report is deleted lastVisibileActionCreated is not reset leading to wrongly
252230
// setting it Unread so we add additional condition here to avoid read workspace indicator from being bold.
253-
workspacesUnreadStatuses[policyID] = ReportUtils.isUnread(report) && !!report.lastActorAccountID;
231+
workspacesUnreadStatuses[policyID] = isUnread(report) && !!report.lastActorAccountID;
254232
});
255233

256234
return workspacesUnreadStatuses;
@@ -300,7 +278,7 @@ function getOwnershipChecksDisplayText(
300278
title = translate('workspace.changeOwner.ownerOwesAmountTitle');
301279
text = translate('workspace.changeOwner.ownerOwesAmountText', {
302280
email: ownerOwesAmount?.ownerEmail,
303-
amount: CurrencyUtils.convertToDisplayString(ownerOwesAmount?.amount, ownerOwesAmount?.currency),
281+
amount: convertToDisplayString(ownerOwesAmount?.amount, ownerOwesAmount?.currency),
304282
});
305283
buttonText = translate('workspace.changeOwner.ownerOwesAmountButtonText');
306284
break;

0 commit comments

Comments
 (0)