Skip to content

Commit ae32047

Browse files
shubham1206agrashubham1206agra
committed
Refactored localeCompare in SearchUIUtils
1 parent b73ebe2 commit ae32047

5 files changed

Lines changed: 52 additions & 33 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function MoneyRequestReportTransactionList({
9898
useCopySelectionHelper();
9999
const styles = useThemeStyles();
100100
const StyleUtils = useStyleUtils();
101-
const {translate} = useLocalize();
101+
const {translate, localeCompare} = useLocalize();
102102
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
103103
const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
104104
const [isModalVisible, setIsModalVisible] = useState(false);
@@ -152,12 +152,12 @@ function MoneyRequestReportTransactionList({
152152

153153
const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => {
154154
return [...transactions]
155-
.sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy))
155+
.sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy, localeCompare))
156156
.map((transaction) => ({
157157
...transaction,
158158
shouldBeHighlighted: newTransactions?.includes(transaction),
159159
}));
160-
}, [newTransactions, sortBy, sortOrder, transactions]);
160+
}, [newTransactions, sortBy, sortOrder, transactions, localeCompare]);
161161

162162
const navigateToTransaction = useCallback(
163163
(activeTransactionID: string) => {

‎src/components/Search/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
207207
.flatMap((filteredReportActions) => Object.values(filteredReportActions ?? {})),
208208
[reportActions],
209209
);
210-
const {translate} = useLocalize();
210+
const {translate, localeCompare} = useLocalize();
211211
const searchListRef = useRef<SelectionListHandle | null>(null);
212212

213213
useFocusEffect(
@@ -546,7 +546,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
546546
const ListItem = getListItem(type, status, groupBy);
547547
const sortedSelectedData = useMemo(
548548
() =>
549-
getSortedSections(type, status, data, sortBy, sortOrder, groupBy).map((item) => {
549+
getSortedSections(type, status, data, localeCompare, sortBy, sortOrder, groupBy).map((item) => {
550550
const baseKey = isChat
551551
? `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(item as ReportActionListItemType).reportActionID}`
552552
: `${ONYXKEYS.COLLECTION.TRANSACTION}${(item as TransactionListItemType).transactionID}`;
@@ -567,7 +567,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
567567

568568
return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight);
569569
}),
570-
[type, status, data, sortBy, sortOrder, groupBy, isChat, newSearchResultKey, selectedTransactions, canSelectMultiple],
570+
[type, status, data, sortBy, sortOrder, groupBy, isChat, newSearchResultKey, selectedTransactions, canSelectMultiple, localeCompare],
571571
);
572572

573573
const hasErrors = Object.keys(searchResults?.errors ?? {}).length > 0 && !isOffline;

‎src/libs/SearchUIUtils.ts‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type {TextStyle, ViewStyle} from 'react-native';
22
import Onyx from 'react-native-onyx';
33
import type {OnyxCollection} from 'react-native-onyx';
44
import type {ValueOf} from 'type-fest';
5+
import type {LocaleContextProps} from '@components/LocaleContextProvider';
56
import DotLottieAnimations from '@components/LottieAnimations';
67
import type DotLottieAnimation from '@components/LottieAnimations/types';
78
import type {MenuItemWithLink} from '@components/MenuItemList';
@@ -51,7 +52,6 @@ import {convertToDisplayString} from './CurrencyUtils';
5152
import DateUtils from './DateUtils';
5253
import {isDevelopment} from './Environment/Environment';
5354
import interceptAnonymousUser from './interceptAnonymousUser';
54-
import localeCompare from './LocaleCompare';
5555
import {formatPhoneNumber} from './LocalePhoneNumber';
5656
import {translateLocal} from './Localize';
5757
import Navigation from './Navigation/Navigation';
@@ -1292,38 +1292,39 @@ function getSortedSections(
12921292
type: SearchDataTypes,
12931293
status: SearchStatus,
12941294
data: ListItemDataType<typeof type, typeof status>,
1295+
localeCompare: LocaleContextProps['localeCompare'],
12951296
sortBy?: SearchColumnType,
12961297
sortOrder?: SortOrder,
12971298
groupBy?: SearchGroupBy,
12981299
) {
12991300
if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
1300-
return getSortedReportActionData(data as ReportActionListItemType[]);
1301+
return getSortedReportActionData(data as ReportActionListItemType[], localeCompare);
13011302
}
13021303
if (type === CONST.SEARCH.DATA_TYPES.TASK) {
1303-
return getSortedTaskData(data as TaskListItemType[], sortBy, sortOrder);
1304+
return getSortedTaskData(data as TaskListItemType[], localeCompare, sortBy, sortOrder);
13041305
}
13051306

13061307
if (groupBy) {
13071308
// Disabling the default-case lint rule here is actually safer as this forces us to make the switch cases exhaustive
13081309
// eslint-disable-next-line default-case
13091310
switch (groupBy) {
13101311
case CONST.SEARCH.GROUP_BY.REPORTS:
1311-
return getSortedReportData(data as TransactionReportGroupListItemType[]);
1312+
return getSortedReportData(data as TransactionReportGroupListItemType[], localeCompare);
13121313
case CONST.SEARCH.GROUP_BY.MEMBERS:
13131314
return getSortedMemberData(data as TransactionMemberGroupListItemType[]);
13141315
case CONST.SEARCH.GROUP_BY.CARDS:
13151316
return getSortedCardData(data as TransactionCardGroupListItemType[]);
13161317
}
13171318
}
13181319

1319-
return getSortedTransactionData(data as TransactionListItemType[], sortBy, sortOrder);
1320+
return getSortedTransactionData(data as TransactionListItemType[], localeCompare, sortBy, sortOrder);
13201321
}
13211322

13221323
/**
13231324
* Compares two values based on a specified sorting order and column.
13241325
* Handles both string and numeric comparisons, with special handling for absolute values when sorting by total amount.
13251326
*/
1326-
function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: string): number {
1327+
function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: string, localeCompare: LocaleContextProps['localeCompare']): number {
13271328
const isAsc = sortOrder === CONST.SEARCH.SORT_ORDER.ASC;
13281329

13291330
if (a === undefined || b === undefined) {
@@ -1347,7 +1348,7 @@ function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: str
13471348
* @private
13481349
* Sorts transaction sections based on a specified column and sort order.
13491350
*/
1350-
function getSortedTransactionData(data: TransactionListItemType[], sortBy?: SearchColumnType, sortOrder?: SortOrder) {
1351+
function getSortedTransactionData(data: TransactionListItemType[], localeCompare: LocaleContextProps['localeCompare'], sortBy?: SearchColumnType, sortOrder?: SortOrder) {
13511352
if (!sortBy || !sortOrder) {
13521353
return data;
13531354
}
@@ -1362,11 +1363,11 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
13621363
const aValue = sortingProperty === 'comment' ? a.comment?.comment : a[sortingProperty as keyof TransactionListItemType];
13631364
const bValue = sortingProperty === 'comment' ? b.comment?.comment : b[sortingProperty as keyof TransactionListItemType];
13641365

1365-
return compareValues(aValue, bValue, sortOrder, sortingProperty);
1366+
return compareValues(aValue, bValue, sortOrder, sortingProperty, localeCompare);
13661367
});
13671368
}
13681369

1369-
function getSortedTaskData(data: TaskListItemType[], sortBy?: SearchColumnType, sortOrder?: SortOrder) {
1370+
function getSortedTaskData(data: TaskListItemType[], localeCompare: LocaleContextProps['localeCompare'], sortBy?: SearchColumnType, sortOrder?: SortOrder) {
13701371
if (!sortBy || !sortOrder) {
13711372
return data;
13721373
}
@@ -1381,17 +1382,17 @@ function getSortedTaskData(data: TaskListItemType[], sortBy?: SearchColumnType,
13811382
const aValue = a[sortingProperty as keyof TaskListItemType];
13821383
const bValue = b[sortingProperty as keyof TaskListItemType];
13831384

1384-
return compareValues(aValue, bValue, sortOrder, sortingProperty);
1385+
return compareValues(aValue, bValue, sortOrder, sortingProperty, localeCompare);
13851386
});
13861387
}
13871388

13881389
/**
13891390
* @private
13901391
* Sorts report sections based on a specified column and sort order.
13911392
*/
1392-
function getSortedReportData(data: TransactionReportGroupListItemType[]) {
1393+
function getSortedReportData(data: TransactionReportGroupListItemType[], localeCompare: LocaleContextProps['localeCompare']) {
13931394
for (const report of data) {
1394-
report.transactions = getSortedTransactionData(report.transactions, CONST.SEARCH.TABLE_COLUMNS.DATE, CONST.SEARCH.SORT_ORDER.DESC);
1395+
report.transactions = getSortedTransactionData(report.transactions, localeCompare, CONST.SEARCH.TABLE_COLUMNS.DATE, CONST.SEARCH.SORT_ORDER.DESC);
13951396
}
13961397
return data.sort((a, b) => {
13971398
const aNewestTransaction = a.transactions?.at(0)?.modifiedCreated ? a.transactions?.at(0)?.modifiedCreated : a.transactions?.at(0)?.created;
@@ -1425,7 +1426,7 @@ function getSortedCardData(data: TransactionCardGroupListItemType[]) {
14251426
* @private
14261427
* Sorts report actions sections based on a specified column and sort order.
14271428
*/
1428-
function getSortedReportActionData(data: ReportActionListItemType[]) {
1429+
function getSortedReportActionData(data: ReportActionListItemType[], localeCompare: LocaleContextProps['localeCompare']) {
14291430
return data.sort((a, b) => {
14301431
const aValue = a?.created;
14311432
const bValue = b?.created;

‎tests/unit/Search/SearchUIUtilsTest.ts‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as SearchUIUtils from '@src/libs/SearchUIUtils';
1010
import ONYXKEYS from '@src/ONYXKEYS';
1111
import type * as OnyxTypes from '@src/types/onyx';
1212
import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
13+
import {localeCompare} from '../../utils/TestHelper';
1314
import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates';
1415

1516
jest.mock('@src/components/ConfirmedRoute.tsx');
@@ -1265,7 +1266,7 @@ describe('SearchUIUtils', () => {
12651266

12661267
describe('Test getSortedSections', () => {
12671268
it('should return getSortedReportActionData result when type is CHAT', () => {
1268-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.EXPENSE.ALL, reportActionListItems)).toStrictEqual([
1269+
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.EXPENSE.ALL, reportActionListItems, localeCompare)).toStrictEqual([
12691270
{
12701271
accountID: 18439984,
12711272
actionName: 'ADDCOMMENT',
@@ -1300,37 +1301,43 @@ describe('SearchUIUtils', () => {
13001301
});
13011302

13021303
it('should return getSortedTransactionData result when groupBy is undefined', () => {
1303-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionsListItems, 'date', 'asc', undefined)).toStrictEqual(transactionsListItems);
1304+
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionsListItems, localeCompare, 'date', 'asc', undefined)).toStrictEqual(transactionsListItems);
13041305
});
13051306

13061307
it('should return getSortedReportData result when type is EXPENSE and groupBy is report', () => {
1307-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual(
1308-
transactionReportGroupListItems,
1309-
);
1308+
expect(
1309+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS),
1310+
).toStrictEqual(transactionReportGroupListItems);
13101311
});
13111312

13121313
it('should return getSortedReportData result when type is TRIP and groupBy is report', () => {
1313-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.TRIP, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual(
1314-
transactionReportGroupListItems,
1315-
);
1314+
expect(
1315+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.TRIP, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS),
1316+
).toStrictEqual(transactionReportGroupListItems);
13161317
});
13171318

13181319
it('should return getSortedReportData result when type is INVOICE and groupBy is report', () => {
1319-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.INVOICE, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS)).toStrictEqual(
1320-
transactionReportGroupListItems,
1321-
);
1320+
expect(
1321+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.INVOICE, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.REPORTS),
1322+
).toStrictEqual(transactionReportGroupListItems);
13221323
});
13231324

13241325
it('should return getSortedMemberData result when type is EXPENSE and groupBy is member', () => {
1325-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test
1326+
expect(
1327+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.EXPENSE, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS),
1328+
).toStrictEqual([]); // s77rt update test
13261329
});
13271330

13281331
it('should return getSortedMemberData result when type is TRIP and groupBy is member', () => {
1329-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.TRIP, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test
1332+
expect(
1333+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.TRIP, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS),
1334+
).toStrictEqual([]); // s77rt update test
13301335
});
13311336

13321337
it('should return getSortedMemberData result when type is INVOICE and groupBy is member', () => {
1333-
expect(SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.INVOICE, '', transactionReportGroupListItems, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS)).toStrictEqual([]); // s77rt update test
1338+
expect(
1339+
SearchUIUtils.getSortedSections(CONST.SEARCH.DATA_TYPES.INVOICE, '', transactionReportGroupListItems, localeCompare, 'date', 'asc', CONST.SEARCH.GROUP_BY.MEMBERS),
1340+
).toStrictEqual([]); // s77rt update test
13341341
});
13351342

13361343
// s77rt add test for group by card

‎tests/utils/TestHelper.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,16 @@ async function navigateToSidebarOption(index: number): Promise<void> {
346346
await waitForBatchedUpdatesWithAct();
347347
}
348348

349+
/**
350+
* @private
351+
* This is a custom collator only for testing purposes.
352+
*/
353+
const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
354+
355+
function localeCompare(a: string, b: string): number {
356+
return customCollator.compare(a, b);
357+
}
358+
349359
export type {MockFetch, FormData};
350360
export {
351361
assertFormDataMatchesObject,
@@ -363,4 +373,5 @@ export {
363373
navigateToSidebarOption,
364374
getOnyxData,
365375
getNavigateToChatHintRegex,
376+
localeCompare,
366377
};

0 commit comments

Comments
 (0)