Fix sorting by merchant column

Expensify · May 28, 2024 · fea6522 · fea6522
1 parent 5a71c3f
commit fea6522
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/src/components/SelectionList/TransactionListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import Avatar from '@components/Avatar';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
@@ -16,7 +15,6 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {Transaction} from '@src/types/onyx';
 import type {SearchAccountDetails, SearchTransactionType} from '@src/types/onyx/SearchResults';
 import BaseListItem from './BaseListItem';
 import TextWithIconCell from './TextWithIconCell';
@@ -54,17 +52,11 @@ function TransactionListItem<TItem extends ListItem>({
     const {isLargeScreenWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
 
-    function getMerchant() {
-        const merchant = TransactionUtils.getMerchant(transactionItem as OnyxEntry<Transaction>);
-        return merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT ? '' : merchant;
-    }
-
     const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
     const date = TransactionUtils.getCreated(transactionItem, CONST.DATE.MONTH_DAY_ABBR_FORMAT);
     const taxAmount = TransactionUtils.getTaxAmount(transactionItem, isFromExpenseReport);
     const currency = TransactionUtils.getCurrency(transactionItem);
     const description = TransactionUtils.getDescription(transactionItem);
-    const merchant = getMerchant();
     const typeIcon = getTypeIcon(transactionItem.type);
 
     const dateCell = (
@@ -78,7 +70,7 @@ function TransactionListItem<TItem extends ListItem>({
     const merchantCell = (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={transactionItem.shouldShowMerchant ? merchant : description}
+            text={transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description}
             style={[styles.label, styles.pre, styles.justifyContentCenter]}
         />
     );

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -144,6 +144,9 @@ type TransactionListItemType = ListItem &
         /** final and formatted "total" value used for displaying and sorting */
         formattedTotal: number;
 
+        /** final and formatted "merchant" value used for displaying and sorting */
+        formattedMerchant: string;
+
         /** final "date" value used for sorting */
         date: string;
 

diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
@@ -16,7 +16,7 @@ const columnNamesToSortingProperty = {
     [CONST.SEARCH_TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
     [CONST.SEARCH_TABLE_COLUMNS.DATE]: 'date' as const,
     [CONST.SEARCH_TABLE_COLUMNS.TAG]: 'tag' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.MERCHANT]: 'merchant' as const,
+    [CONST.SEARCH_TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
     [CONST.SEARCH_TABLE_COLUMNS.TOTAL]: 'formattedTotal' as const,
     [CONST.SEARCH_TABLE_COLUMNS.CATEGORY]: 'category' as const,
     [CONST.SEARCH_TABLE_COLUMNS.TYPE]: 'type' as const,
@@ -61,9 +61,11 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
                 : (data.personalDetailsList?.[transactionItem.managerID] as SearchAccountDetails);
 
             const formattedFrom = from.displayName ?? from.login ?? '';
-            const formattedTo = to.name ?? to.displayName ?? to.login ?? '';
+            const formattedTo = to?.name ?? to?.displayName ?? to?.login ?? '';
             const formattedTotal = TransactionUtils.getAmount(transactionItem, isExpenseReport);
             const date = transactionItem?.modifiedCreated ? transactionItem.modifiedCreated : transactionItem?.created;
+            const merchant = TransactionUtils.getMerchant(transactionItem);
+            const formattedMerchant = merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || merchant === CONST.TRANSACTION.DEFAULT_MERCHANT ? '' : merchant;
 
             return {
                 ...transactionItem,
@@ -73,6 +75,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
                 formattedTo,
                 date,
                 formattedTotal,
+                formattedMerchant,
                 shouldShowMerchant,
                 shouldShowCategory,
                 shouldShowTag,
@@ -117,7 +120,7 @@ function getSortedData(data: TransactionListItemType[], sortBy?: SearchColumnTyp
         const aValue = a[sortingProperty];
         const bValue = b[sortingProperty];
 
-        if (!aValue || !bValue) {
+        if (aValue === undefined || bValue === undefined) {
             return 0;
         }