Skip to content

Commit ce55011

Browse files
mountinymountiny
authored
Merge pull request Expensify#67690 from shubham1206agra/refactor-onyx-33
Refactored localeCompare in ReportUtils (part 2)
2 parents 073fa4a + 6a67c05 commit ce55011

19 files changed

Lines changed: 93 additions & 38 deletions

‎src/components/AvatarWithDisplayName.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {View} from 'react-native';
33
import type {ColorValue, TextStyle} from 'react-native';
44
import type {OnyxEntry} from 'react-native-onyx';
55
import type {ValueOf} from 'type-fest';
6+
import useLocalize from '@hooks/useLocalize';
67
import useOnyx from '@hooks/useOnyx';
78
import useStyleUtils from '@hooks/useStyleUtils';
89
import useTheme from '@hooks/useTheme';
@@ -153,6 +154,7 @@ function AvatarWithDisplayName({
153154
openParentReportInCurrentTab = false,
154155
avatarBorderColor: avatarBorderColorProp,
155156
}: AvatarWithDisplayNameProps) {
157+
const {localeCompare} = useLocalize();
156158
const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {canEvict: false, canBeMissing: false});
157159
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}) ?? CONST.EMPTY_OBJECT;
158160
const theme = useTheme();
@@ -170,7 +172,7 @@ function AvatarWithDisplayName({
170172
const parentNavigationSubtitleData = getParentNavigationSubtitle(report);
171173
const isMoneyRequestOrReport = isMoneyRequestReport(report) || isMoneyRequest(report) || isTrackExpenseReport(report) || isInvoiceReport(report);
172174
const ownerPersonalDetails = getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
173-
const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false);
175+
const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false, localeCompare);
174176
const avatarBorderColor = avatarBorderColorProp ?? (isAnonymous ? theme.highlightBG : theme.componentBG);
175177

176178
const actorAccountID = useRef<number | null>(null);

‎src/components/LHNOptionsList/LHNOptionsList.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
6262

6363
const theme = useTheme();
6464
const styles = useThemeStyles();
65-
const {translate, preferredLocale} = useLocalize();
65+
const {translate, preferredLocale, localeCompare} = useLocalize();
6666
const estimatedListSize = useLHNEstimatedListSize();
6767
const isReportsSplitNavigatorLast = useRootNavigationState((state) => state?.routes?.at(-1)?.name === NAVIGATORS.REPORTS_SPLIT_NAVIGATOR);
6868
const shouldShowEmptyLHN = data.length === 0;
@@ -246,6 +246,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
246246
isFullscreenVisible={isFullscreenVisible}
247247
isReportsSplitNavigatorLast={isReportsSplitNavigatorLast}
248248
isScreenFocused={isScreenFocused}
249+
localeCompare={localeCompare}
249250
/>
250251
);
251252
},
@@ -271,6 +272,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
271272
isFullscreenVisible,
272273
isReportsSplitNavigatorLast,
273274
isScreenFocused,
275+
localeCompare,
274276
],
275277
);
276278

‎src/components/LHNOptionsList/OptionRowLHNData.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function OptionRowLHNData({
3131
lastReportActionTransaction,
3232
transactionViolations,
3333
lastMessageTextFromReport,
34+
localeCompare,
3435
...propsToForward
3536
}: OptionRowLHNDataProps) {
3637
const reportID = propsToForward.reportID;
@@ -50,6 +51,7 @@ function OptionRowLHNData({
5051
parentReportAction,
5152
lastMessageTextFromReport,
5253
invoiceReceiverPolicy,
54+
localeCompare,
5355
});
5456
// eslint-disable-next-line react-compiler/react-compiler
5557
if (deepEqual(item, optionItemRef.current)) {
@@ -82,6 +84,7 @@ function OptionRowLHNData({
8284
invoiceReceiverPolicy,
8385
lastMessageTextFromReport,
8486
reportAttributes,
87+
localeCompare,
8588
]);
8689

8790
return (

‎src/components/LHNOptionsList/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type {RefObject} from 'react';
33
import type {LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
44
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
55
import type {ValueOf} from 'type-fest';
6+
import type {LocaleContextProps} from '@components/LocaleContextProvider';
67
import type CONST from '@src/CONST';
78
import type {OptionData} from '@src/libs/ReportUtils';
89
import type {Locale, OnboardingPurpose, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, ReportNameValuePairs, Transaction, TransactionViolation} from '@src/types/onyx';
@@ -124,6 +125,9 @@ type OptionRowLHNDataProps = {
124125

125126
/** Whether the screen is focused */
126127
isScreenFocused?: boolean;
128+
129+
/** Function to compare locale strings */
130+
localeCompare: LocaleContextProps['localeCompare'];
127131
};
128132

129133
type OptionRowLHNProps = {

‎src/components/OptionRow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ function OptionRow({
109109
const theme = useTheme();
110110
const styles = useThemeStyles();
111111
const StyleUtils = useStyleUtils();
112-
const {translate} = useLocalize();
112+
const {translate, localeCompare} = useLocalize();
113113
const pressableRef = useRef<View | HTMLDivElement>(null);
114114
const [isDisabled, setIsDisabled] = useState(isOptionDisabled);
115115

@@ -148,7 +148,7 @@ function OptionRow({
148148
const firstIcon = option?.icons?.at(0);
149149

150150
// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
151-
const displayNamesWithTooltips = getDisplayNamesWithTooltips((option.participantsList ?? (option.accountID ? [option] : [])).slice(0, 10), shouldUseShortFormInTooltip);
151+
const displayNamesWithTooltips = getDisplayNamesWithTooltips((option.participantsList ?? (option.accountID ? [option] : [])).slice(0, 10), shouldUseShortFormInTooltip, localeCompare);
152152
let subscriptColor = theme.appBG;
153153
if (optionIsFocused) {
154154
subscriptColor = focusedBackgroundColor;

‎src/components/ReportActionItem/TaskView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ type TaskViewProps = {
4444
};
4545

4646
function TaskView({report, parentReport, action}: TaskViewProps) {
47+
const {translate, localeCompare} = useLocalize();
4748
const styles = useThemeStyles();
4849
const StyleUtils = useStyleUtils();
4950
const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -57,7 +58,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
5758
const titleWithoutImage = Parser.replace(Parser.htmlToMarkdown(taskTitleWithoutPre), {disabledRules: [...CONST.TASK_TITLE_DISABLED_RULES]});
5859
const taskTitle = `<task-title>${titleWithoutImage}</task-title>`;
5960

60-
const assigneeTooltipDetails = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(report?.managerID ? [report?.managerID] : [], personalDetails), false);
61+
const assigneeTooltipDetails = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(report?.managerID ? [report?.managerID] : [], personalDetails), false, localeCompare);
6162

6263
const isOpen = isOpenTaskReport(report);
6364
const isCompleted = isCompletedTaskReport(report);
@@ -67,7 +68,6 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
6768

6869
const disableState = !isTaskModifiable;
6970
const isDisableInteractive = disableState || !isOpen;
70-
const {translate} = useLocalize();
7171
const accountID = currentUserPersonalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID;
7272
const contextValue = useMemo(
7373
() => ({

‎src/components/ReportWelcomeText.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ type ReportWelcomeTextProps = {
4141
};
4242

4343
function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
44-
const {translate} = useLocalize();
44+
const {translate, localeCompare} = useLocalize();
4545
const styles = useThemeStyles();
4646
const {environmentURL} = useEnvironment();
4747
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
@@ -56,7 +56,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
5656
const isDefault = !(isChatRoom || isPolicyExpenseChat || isSelfDM || isSystemChat);
5757
const participantAccountIDs = getParticipantsAccountIDsForDisplay(report, undefined, true, true, reportMetadata);
5858
const isMultipleParticipant = participantAccountIDs.length > 1;
59-
const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant);
59+
const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant, localeCompare);
6060
const moneyRequestOptions = temporary_getMoneyRequestOptions(report, policy, participantAccountIDs, isReportArchived);
6161
const policyName = getPolicyName({report});
6262

@@ -115,7 +115,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
115115
return translate('reportActionsView.sayHello');
116116
}, [isChatRoom, isInvoiceRoom, isPolicyExpenseChat, isSelfDM, isSystemChat, translate, policyName, reportName]);
117117

118-
const welcomeMessage = SidebarUtils.getWelcomeMessage(report, policy, isReportArchived, reportDetailsLink);
118+
const welcomeMessage = SidebarUtils.getWelcomeMessage(report, policy, localeCompare, isReportArchived, reportDetailsLink);
119119

120120
return (
121121
<>

‎src/libs/ReportUtils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3323,6 +3323,7 @@ function getIcons(
33233323
function getDisplayNamesWithTooltips(
33243324
personalDetailsList: PersonalDetails[] | PersonalDetailsList | OptionData[],
33253325
shouldUseShortForm: boolean,
3326+
localeCompare: LocaleContextProps['localeCompare'],
33263327
shouldFallbackToHidden = true,
33273328
shouldAddCurrentUserPostfix = false,
33283329
): DisplayNameWithTooltips {
@@ -3351,7 +3352,7 @@ function getDisplayNamesWithTooltips(
33513352
})
33523353
.sort((first, second) => {
33533354
// First sort by displayName/login
3354-
const displayNameLoginOrder = localeCompareLibs(first.displayName, second.displayName);
3355+
const displayNameLoginOrder = localeCompare(first.displayName, second.displayName);
33553356
if (displayNameLoginOrder !== 0) {
33563357
return displayNameLoginOrder;
33573358
}

‎src/libs/SidebarUtils.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,7 @@ function getOptionData({
511511
parentReportAction,
512512
lastMessageTextFromReport: lastMessageTextFromReportProp,
513513
invoiceReceiverPolicy,
514+
localeCompare,
514515
}: {
515516
report: OnyxEntry<Report>;
516517
oneTransactionThreadReport: OnyxEntry<Report>;
@@ -521,6 +522,7 @@ function getOptionData({
521522
lastMessageTextFromReport?: string;
522523
invoiceReceiverPolicy?: OnyxEntry<Policy>;
523524
reportAttributes: OnyxEntry<ReportAttributes>;
525+
localeCompare: LocaleContextProps['localeCompare'];
524526
}): OptionData | undefined {
525527
// When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
526528
// this method to be called after the Onyx data has been cleared out. In that case, it's fine to do
@@ -614,7 +616,7 @@ function getOptionData({
614616
const status = personalDetail?.status ?? '';
615617

616618
// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
617-
const displayNamesWithTooltips = getDisplayNamesWithTooltips((participantPersonalDetailList || []).slice(0, 10), hasMultipleParticipants, undefined, isSelfDM(report));
619+
const displayNamesWithTooltips = getDisplayNamesWithTooltips((participantPersonalDetailList || []).slice(0, 10), hasMultipleParticipants, localeCompare, undefined, isSelfDM(report));
618620

619621
const lastAction = visibleReportActionItems[report.reportID];
620622
// lastActorAccountID can be an empty string
@@ -790,14 +792,18 @@ function getOptionData({
790792
: getLastVisibleMessage(report.reportID, result.isAllowedToComment, {}, lastAction)?.lastMessageText;
791793

792794
if (!result.alternateText) {
793-
result.alternateText = formatReportLastMessageText(getWelcomeMessage(report, policy, !!result.private_isArchived).messageText ?? translateLocal('report.noActivityYet'));
795+
result.alternateText = formatReportLastMessageText(
796+
getWelcomeMessage(report, policy, localeCompare, !!result.private_isArchived).messageText ?? translateLocal('report.noActivityYet'),
797+
);
794798
}
795799
}
796800
result.alternateText = prefix + result.alternateText;
797801
} else {
798802
if (!lastMessageText) {
799-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
800-
lastMessageText = formatReportLastMessageText(getWelcomeMessage(report, policy, !!result.private_isArchived).messageText || translateLocal('report.noActivityYet'));
803+
lastMessageText = formatReportLastMessageText(
804+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
805+
getWelcomeMessage(report, policy, localeCompare, !!result.private_isArchived).messageText || translateLocal('report.noActivityYet'),
806+
);
801807
}
802808
if (shouldShowLastActorDisplayName(report, lastActorDetails, lastAction) && !isArchivedReport(reportNameValuePairs)) {
803809
result.alternateText = `${lastActorDisplayName}: ${formatReportLastMessageText(Parser.htmlToText(lastMessageText))}`;
@@ -844,7 +850,13 @@ function getOptionData({
844850
return result;
845851
}
846852

847-
function getWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>, isReportArchived = false, reportDetailsLink = ''): WelcomeMessage {
853+
function getWelcomeMessage(
854+
report: OnyxEntry<Report>,
855+
policy: OnyxEntry<Policy>,
856+
localeCompare: LocaleContextProps['localeCompare'],
857+
isReportArchived = false,
858+
reportDetailsLink = '',
859+
): WelcomeMessage {
848860
const welcomeMessage: WelcomeMessage = {};
849861
if (isChatThread(report) || isTaskReport(report)) {
850862
return welcomeMessage;
@@ -881,7 +893,7 @@ function getWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>,
881893
welcomeMessage.phrase1 = translateLocal('reportActionsView.beginningOfChatHistory');
882894
const participantAccountIDs = getParticipantsAccountIDsForDisplay(report, undefined, undefined, true);
883895
const isMultipleParticipant = participantAccountIDs.length > 1;
884-
const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, allPersonalDetails), isMultipleParticipant);
896+
const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, allPersonalDetails), isMultipleParticipant, localeCompare);
885897
const displayNamesWithTooltipsText = displayNamesWithTooltips
886898
.map(({displayName}, index) => {
887899
if (index === displayNamesWithTooltips.length - 1) {

‎src/libs/actions/Task.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {InteractionManager} from 'react-native';
22
import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
33
import Onyx from 'react-native-onyx';
44
import * as Expensicons from '@components/Icon/Expensicons';
5+
import type {LocaleContextProps} from '@components/LocaleContextProvider';
56
import * as API from '@libs/API';
67
import type {CancelTaskParams, CompleteTaskParams, CreateTaskParams, EditTaskAssigneeParams, EditTaskParams, ReopenTaskParams} from '@libs/API/parameters';
78
import {WRITE_COMMANDS} from '@libs/API/types';
@@ -979,15 +980,24 @@ function getAssignee(assigneeAccountID: number | undefined, personalDetails: Ony
979980
/**
980981
* Get the share destination data
981982
* */
982-
function getShareDestination(reportID: string, reports: OnyxCollection<OnyxTypes.Report>, personalDetails: OnyxEntry<OnyxTypes.PersonalDetailsList>): ShareDestination {
983-
const report = reports?.[`report_${reportID}`];
983+
function getShareDestination(
984+
reportID: string,
985+
reports: OnyxCollection<OnyxTypes.Report>,
986+
personalDetails: OnyxEntry<OnyxTypes.PersonalDetailsList>,
987+
localeCompare: LocaleContextProps['localeCompare'],
988+
): ShareDestination {
989+
const report = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
984990

985991
const isOneOnOneChat = ReportUtils.isOneOnOneChat(report);
986992

987993
const participants = ReportUtils.getParticipantsAccountIDsForDisplay(report);
988994

989995
const isMultipleParticipant = participants.length > 1;
990-
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails), isMultipleParticipant);
996+
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
997+
OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails),
998+
isMultipleParticipant,
999+
localeCompare,
1000+
);
9911001

9921002
let subtitle = '';
9931003
if (isOneOnOneChat) {

0 commit comments

Comments
 (0)