Merge pull request Expensify#64999 from software-mansion-labs/@szymczak/fix-showing-empty-category-row

Fix showing category row when it's empty

Author: mountiny

src/components/TransactionItemRow/DataCells/CategoryCell.tsx

@@ -3,16 +3,13 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import TextWithIconCell from '@components/SelectionList/Search/TextWithIconCell';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
+import {isCategoryMissing} from '@libs/CategoryUtils';
 import type TransactionDataCellProps from './TransactionDataCellProps';
 
 function CategoryCell({shouldUseNarrowLayout, shouldShowTooltip, transactionItem}: TransactionDataCellProps) {
     const styles = useThemeStyles();
 
-    const emptyCategories = CONST.SEARCH.CATEGORY_EMPTY_VALUE.split(',');
-
-    const category = transactionItem?.category ?? '';
-    const categoryForDisplay = emptyCategories.includes(category) ? '' : category;
+    const categoryForDisplay = isCategoryMissing(transactionItem?.category) ? '' : (transactionItem?.category ?? '');
 
     return shouldUseNarrowLayout ? (
         <TextWithIconCell

src/components/TransactionItemRow/index.tsx

@@ -17,6 +17,7 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isCategoryMissing} from '@libs/CategoryUtils';
 import Parser from '@libs/Parser';
 import StringUtils from '@libs/StringUtils';
 import {
@@ -149,7 +150,7 @@ function TransactionItemRow({
     const isPendingDelete = isTransactionPendingDelete(transactionItem);
     const viewRef = useRef<View>(null);
 
-    const hasCategoryOrTag = !!transactionItem.category || !!transactionItem.tag;
+    const hasCategoryOrTag = !isCategoryMissing(transactionItem?.category) || !!transactionItem.tag;
     const createdAt = getTransactionCreated(transactionItem);
 
     const isDateColumnWide = dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;

src/libs/CategoryUtils.ts

@@ -93,6 +93,15 @@ function getEnabledCategoriesCount(policyCategories: PolicyCategories | undefine
     return Object.values(policyCategories).filter((policyCategory) => policyCategory.enabled).length;
 }
 
+function isCategoryMissing(category: string | undefined): boolean {
+    if (!category) {
+        return true;
+    }
+    const emptyCategories = CONST.SEARCH.CATEGORY_EMPTY_VALUE.split(',');
+
+    return emptyCategories.includes(category ?? '');
+}
+
 export {
     formatDefaultTaxRateText,
     formatRequireReceiptsOverText,
@@ -101,4 +110,5 @@ export {
     getCategoryDefaultTaxRate,
     updateCategoryInMccGroup,
     getEnabledCategoriesCount,
+    isCategoryMissing,
 };