refactor Consts for Search

Expensify · Jun 25, 2024 · b573e74 · b573e74
1 parent dbb2748
commit b573e74
Show file tree

Hide file tree

Showing 15 changed files with 131 additions and 126 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -943,20 +943,6 @@ const CONST = {
         RESIZE_DEBOUNCE_TIME: 100,
         UNREAD_UPDATE_DEBOUNCE_TIME: 300,
     },
-    SEARCH_TABLE_COLUMNS: {
-        RECEIPT: 'receipt',
-        DATE: 'date',
-        MERCHANT: 'merchant',
-        DESCRIPTION: 'description',
-        FROM: 'from',
-        TO: 'to',
-        CATEGORY: 'category',
-        TAG: 'tag',
-        TOTAL_AMOUNT: 'amount',
-        TYPE: 'type',
-        ACTION: 'action',
-        TAX_AMOUNT: 'taxAmount',
-    },
     PRIORITY_MODE: {
         GSD: 'gsd',
         DEFAULT: 'default',
@@ -3542,12 +3528,7 @@ const CONST = {
         SCAN: 'scan',
         DISTANCE: 'distance',
     },
-    TAB_SEARCH: {
-        ALL: 'all',
-        SHARED: 'shared',
-        DRAFTS: 'drafts',
-        FINISHED: 'finished',
-    },
+
     STATUS_TEXT_MAX_LENGTH: 100,
 
     DROPDOWN_BUTTON_SIZE: {
@@ -4848,28 +4829,52 @@ const CONST = {
         ADHOC: ' AdHoc',
     },
 
-    SEARCH_TRANSACTION_TYPE: {
-        CASH: 'cash',
-        CARD: 'card',
-        DISTANCE: 'distance',
-    },
-
-    SEARCH_RESULTS_PAGE_SIZE: 50,
-
-    SEARCH_DATA_TYPES: {
-        TRANSACTION: 'transaction',
-        REPORT: 'report',
+    SEARCH: {
+        RESULTS_PAGE_SIZE: 50,
+        DATA_TYPES: {
+            TRANSACTION: 'transaction',
+            REPORT: 'report',
+        },
+        ACTION_TYPES: {
+            DONE: 'done',
+            PAID: 'paid',
+            VIEW: 'view',
+        },
+        TRANSACTION_TYPE: {
+            CASH: 'cash',
+            CARD: 'card',
+            DISTANCE: 'distance',
+        },
+        SORT_ORDER: {
+            ASC: 'asc',
+            DESC: 'desc',
+        },
+        TAB: {
+            ALL: 'all',
+            SHARED: 'shared',
+            DRAFTS: 'drafts',
+            FINISHED: 'finished',
+        },
+        TABLE_COLUMNS: {
+            RECEIPT: 'receipt',
+            DATE: 'date',
+            MERCHANT: 'merchant',
+            DESCRIPTION: 'description',
+            FROM: 'from',
+            TO: 'to',
+            CATEGORY: 'category',
+            TAG: 'tag',
+            TOTAL_AMOUNT: 'amount',
+            TYPE: 'type',
+            ACTION: 'action',
+            TAX_AMOUNT: 'taxAmount',
+        },
     },
 
     REFERRER: {
         NOTIFICATION: 'notification',
     },
 
-    SORT_ORDER: {
-        ASC: 'asc',
-        DESC: 'desc',
-    },
-
     SUBSCRIPTION_SIZE_LIMIT: 20000,
 
     PAYMENT_CARD_CURRENCY: {

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -35,7 +35,7 @@ type SearchProps = {
     sortOrder?: SortOrder;
 };
 
-const sortableSearchTabs: SearchQuery[] = [CONST.TAB_SEARCH.ALL];
+const sortableSearchTabs: SearchQuery[] = [CONST.SEARCH.TAB.ALL];
 const transactionItemMobileHeight = 100;
 const reportItemTransactionHeight = 52;
 const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item
@@ -125,7 +125,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             return;
         }
         const currentOffset = searchResults?.search?.offset ?? 0;
-        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE, sortBy, sortOrder});
+        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH.RESULTS_PAGE_SIZE, sortBy, sortOrder});
     };
 
     const type = SearchUtils.getSearchType(searchResults?.search);

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -71,7 +71,7 @@ function ReportListItem<TItem extends ListItem>({
 
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const searchParams = getSearchParams();
-        const currentQuery = searchParams?.query ?? CONST.TAB_SEARCH.ALL;
+        const currentQuery = searchParams?.query ?? CONST.SEARCH.TAB.ALL;
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
     };
 
@@ -158,8 +158,8 @@ function ReportListItem<TItem extends ListItem>({
                     {isLargeScreenWidth && (
                         <>
                             {/** We add an empty view with type style to align the total with the table header */}
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
                                     action={reportItem.action ?? 'view'}
                                     searchHash={searchHash}

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -49,11 +49,11 @@ type TransactionListItemRowProps = {
 
 const getTypeIcon = (type?: SearchTransactionType) => {
     switch (type) {
-        case CONST.SEARCH_TRANSACTION_TYPE.CASH:
+        case CONST.SEARCH.TRANSACTION_TYPE.CASH:
             return Expensicons.Cash;
-        case CONST.SEARCH_TRANSACTION_TYPE.CARD:
+        case CONST.SEARCH.TRANSACTION_TYPE.CARD:
             return Expensicons.CreditCard;
-        case CONST.SEARCH_TRANSACTION_TYPE.DISTANCE:
+        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
             return Expensicons.Car;
         default:
             return Expensicons.Cash;
@@ -269,41 +269,41 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
     return (
         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, containerStyle]}>
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.RECEIPT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
                     <ReceiptCell
                         transactionItem={item}
                         isLargeScreenWidth={false}
                         showTooltip={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
                     <DateCell
                         transactionItem={item}
                         showTooltip={showTooltip}
                         isLargeScreenWidth={isLargeScreenWidth}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.MERCHANT)]}>
                     <MerchantCell
                         transactionItem={item}
                         showTooltip={showTooltip}
                         isLargeScreenWidth={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
                         participant={item.from}
                         displayName={item.formattedFrom}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
                         participant={item.to}
                         displayName={item.formattedTo}
                     />
                 </View>
                 {item.shouldShowCategory && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CATEGORY)]}>
                         <CategoryCell
                             isLargeScreenWidth={isLargeScreenWidth}
                             showTooltip={showTooltip}
@@ -312,7 +312,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
                 {item.shouldShowTag && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAG)]}>
                         <TagCell
                             isLargeScreenWidth={isLargeScreenWidth}
                             showTooltip={showTooltip}
@@ -321,7 +321,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
                 {item.shouldShowTax && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT)]}>
                         <TaxCell
                             transactionItem={item}
                             isLargeScreenWidth={isLargeScreenWidth}
@@ -330,22 +330,22 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
 
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT)]}>
                     <TotalCell
                         showTooltip={showTooltip}
                         transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
                         isChildListItem={isChildListItem}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
                     <TypeCell
                         transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
                         showTooltip={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
                         transactionIDs={[item.transactionID]}

diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
@@ -20,65 +20,65 @@ type SearchColumnConfig = {
 
 const SearchColumns: SearchColumnConfig[] = [
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.RECEIPT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.RECEIPT,
         translationKey: 'common.receipt',
         shouldShow: () => true,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.DATE,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
         translationKey: 'common.date',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.MERCHANT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
         translationKey: 'common.merchant',
         shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowMerchant(data),
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION,
         translationKey: 'common.description',
         shouldShow: (data: OnyxTypes.SearchResults['data']) => !SearchUtils.getShouldShowMerchant(data),
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.FROM,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.FROM,
         translationKey: 'common.from',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TO,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TO,
         translationKey: 'common.to',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.CATEGORY,
         translationKey: 'common.category',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowCategoryColumn ?? false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TAG,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
         translationKey: 'common.tag',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTagColumn ?? false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
         translationKey: 'common.tax',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTaxColumn ?? false,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
         translationKey: 'common.total',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TYPE,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
         translationKey: 'common.type',
         shouldShow: () => true,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.ACTION,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',
         shouldShow: () => true,
         isColumnSortable: false,
@@ -115,15 +115,15 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed,
                     }
 
                     const isActive = sortBy === columnName;
-                    const textStyle = columnName === CONST.SEARCH_TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
+                    const textStyle = columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
                     const isSortable = isSortingAllowed && isColumnSortable;
 
                     return (
                         <SortableHeaderText
                             key={translationKey}
                             text={translate(translationKey)}
                             textStyle={textStyle}
-                            sortOrder={sortOrder ?? CONST.SORT_ORDER.ASC}
+                            sortOrder={sortOrder ?? CONST.SEARCH.SORT_ORDER.ASC}
                             isActive={isActive}
                             containerStyle={[StyleUtils.getSearchTableColumnStyles(columnName, shouldShowYear)]}
                             isSortable={isSortable}

diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
@@ -39,11 +39,11 @@ export default function SortableHeaderText({text, sortOrder, isActive, textStyle
         );
     }
 
-    const icon = sortOrder === CONST.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
+    const icon = sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
     const displayIcon = isActive;
     const activeColumnStyle = isSortable && isActive && styles.searchTableHeaderActive;
 
-    const nextSortOrder = isActive && sortOrder === CONST.SORT_ORDER.DESC ? CONST.SORT_ORDER.ASC : CONST.SORT_ORDER.DESC;
+    const nextSortOrder = isActive && sortOrder === CONST.SEARCH.SORT_ORDER.DESC ? CONST.SEARCH.SORT_ORDER.ASC : CONST.SEARCH.SORT_ORDER.DESC;
 
     return (
         <View style={containerStyle}>

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
@@ -100,7 +100,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}

diff --git a/...ibs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/...ibs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
@@ -101,7 +101,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}

diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts
@@ -77,7 +77,7 @@ export default function switchPolicyID(navigation: NavigationContainerRef<RootSt
     // Here's the configuration: src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
     const isOpeningSearchFromBottomTab = !route && topmostCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE;
     if (isOpeningSearchFromBottomTab) {
-        newPath = ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL);
+        newPath = ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL);
     }
     const stateFromPath = getStateFromPath(newPath as Route) as PartialState<NavigationState<RootStackParamList>>;
     const action: StackNavigationAction = getActionFromState(stateFromPath, linkingConfig.config);