Skip to content

Commit 0cd630d

Browse files
tgolentgolen
authored
Merge pull request Expensify#67404 from shubham1206agra/refactor-onyx-14
Refactored localeCompare in SearchUIUtils
2 parents 53883d3 + e419acb commit 0cd630d

4 files changed

Lines changed: 41 additions & 33 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ function MoneyRequestReportTransactionList({
103103
useCopySelectionHelper();
104104
const styles = useThemeStyles();
105105
const StyleUtils = useStyleUtils();
106-
const {translate} = useLocalize();
106+
const {translate, localeCompare} = useLocalize();
107107
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
108108
const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
109109
const [isModalVisible, setIsModalVisible] = useState(false);
@@ -157,12 +157,12 @@ function MoneyRequestReportTransactionList({
157157

158158
const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => {
159159
return [...transactions]
160-
.sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy))
160+
.sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy, localeCompare))
161161
.map((transaction) => ({
162162
...transaction,
163163
shouldBeHighlighted: newTransactions?.includes(transaction),
164164
}));
165-
}, [newTransactions, sortBy, sortOrder, transactions]);
165+
}, [newTransactions, sortBy, sortOrder, transactions, localeCompare]);
166166

167167
const navigateToTransaction = useCallback(
168168
(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(
@@ -549,7 +549,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
549549
const ListItem = getListItem(type, status, groupBy);
550550
const sortedSelectedData = useMemo(
551551
() =>
552-
getSortedSections(type, status, data, sortBy, sortOrder, groupBy).map((item) => {
552+
getSortedSections(type, status, data, localeCompare, sortBy, sortOrder, groupBy).map((item) => {
553553
const baseKey = isChat
554554
? `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(item as ReportActionListItemType).reportActionID}`
555555
: `${ONYXKEYS.COLLECTION.TRANSACTION}${(item as TransactionListItemType).transactionID}`;
@@ -570,7 +570,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
570570

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

576576
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';
@@ -1291,38 +1291,39 @@ function getSortedSections(
12911291
type: SearchDataTypes,
12921292
status: SearchStatus,
12931293
data: ListItemDataType<typeof type, typeof status>,
1294+
localeCompare: LocaleContextProps['localeCompare'],
12941295
sortBy?: SearchColumnType,
12951296
sortOrder?: SortOrder,
12961297
groupBy?: SearchGroupBy,
12971298
) {
12981299
if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
1299-
return getSortedReportActionData(data as ReportActionListItemType[]);
1300+
return getSortedReportActionData(data as ReportActionListItemType[], localeCompare);
13001301
}
13011302
if (type === CONST.SEARCH.DATA_TYPES.TASK) {
1302-
return getSortedTaskData(data as TaskListItemType[], sortBy, sortOrder);
1303+
return getSortedTaskData(data as TaskListItemType[], localeCompare, sortBy, sortOrder);
13031304
}
13041305

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

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

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

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

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

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

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

13871388
/**
13881389
* @private
13891390
* Sorts report sections based on a specified column and sort order.
13901391
*/
1391-
function getSortedReportData(data: TransactionReportGroupListItemType[]) {
1392+
function getSortedReportData(data: TransactionReportGroupListItemType[], localeCompare: LocaleContextProps['localeCompare']) {
13921393
for (const report of data) {
1393-
report.transactions = getSortedTransactionData(report.transactions, CONST.SEARCH.TABLE_COLUMNS.DATE, CONST.SEARCH.SORT_ORDER.DESC);
1394+
report.transactions = getSortedTransactionData(report.transactions, localeCompare, CONST.SEARCH.TABLE_COLUMNS.DATE, CONST.SEARCH.SORT_ORDER.DESC);
13941395
}
13951396
return data.sort((a, b) => {
13961397
const aNewestTransaction = a.transactions?.at(0)?.modifiedCreated ? a.transactions?.at(0)?.modifiedCreated : a.transactions?.at(0)?.created;
@@ -1424,7 +1425,7 @@ function getSortedCardData(data: TransactionCardGroupListItemType[]) {
14241425
* @private
14251426
* Sorts report actions sections based on a specified column and sort order.
14261427
*/
1427-
function getSortedReportActionData(data: ReportActionListItemType[]) {
1428+
function getSortedReportActionData(data: ReportActionListItemType[], localeCompare: LocaleContextProps['localeCompare']) {
14281429
return data.sort((a, b) => {
14291430
const aValue = a?.created;
14301431
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

0 commit comments

Comments
 (0)