tmp

Expensify · Jul 18, 2024 · cb9d619 · cb9d619
1 parent 52b8fdd
commit cb9d619
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 143 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -5202,6 +5202,16 @@ const CONST = {
             ASC: 'asc',
             DESC: 'desc',
         },
+
+        // TODO_SEARCH: change TABv2 to TAB after current TAB is safely removed.
+        TABv2: {
+            EXPENSE: {
+                ALL: 'type:expense status:all',
+                SHARED: 'type:expense status:shared',
+                DRAFTS: 'type:expense status:drafts',
+                FINISHED: 'type:expense status:finished',
+            },
+        },
         TAB: {
             ALL: 'all',
             SHARED: 'shared',
@@ -5222,6 +5232,12 @@ const CONST = {
             ACTION: 'action',
             TAX_AMOUNT: 'taxAmount',
         },
+        STATUS: {
+            ALL: 'all',
+            SHARED: 'shared',
+            DRAFTS: 'drafts',
+            FINISHED: 'finished',
+        },
         BULK_ACTION_TYPES: {
             DELETE: 'delete',
             HOLD: 'hold',
@@ -5263,6 +5279,11 @@ const CONST = {
             REPORT_ID: 'reportID',
             KEYWORD: 'keyword',
         },
+        QUERY_KIND: {
+            CANNED_QUERY: 'cannedQuery',
+            CUSTOM_QUERY: 'customQuery',
+        },
+        DEFAULT_QUERY: 'type:all sortBy:date sortOrder:desc',
     },
 
     REFERRER: {

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -1,10 +1,9 @@
 import type {TupleToUnion, ValueOf} from 'type-fest';
-import type CONST from './CONST';
+import type {QueryKind, SearchQueryString} from './components/Search/types';
+import CONST from './CONST';
 import type {IOUAction, IOUType} from './CONST';
 import type {IOURequestType} from './libs/actions/IOU';
-import type {AuthScreensParamList} from './libs/Navigation/types';
 import type {ConnectionName, SageIntacctMappingName} from './types/onyx/Policy';
-import type {SearchQuery} from './types/onyx/SearchResults';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
 
 // This is a file containing constants for all the routes we want to be able to go to
@@ -37,16 +36,9 @@ const ROUTES = {
     ALL_SETTINGS: 'all-settings',
 
     SEARCH: {
-        route: '/search/:query',
-        getRoute: (searchQuery: SearchQuery, queryParams?: AuthScreensParamList['Search_Central_Pane']) => {
-            const {sortBy, sortOrder} = queryParams ?? {};
-
-            if (!sortBy && !sortOrder) {
-                return `search/${searchQuery}` as const;
-            }
-
-            return `search/${searchQuery}?sortBy=${sortBy}&sortOrder=${sortOrder}` as const;
-        },
+        route: '/search',
+        getRoute: ({query, queryKind = CONST.SEARCH.QUERY_KIND.CANNED_QUERY, policyIDs}: {query: SearchQueryString; queryKind?: QueryKind; policyIDs?: string}) =>
+            `search?${queryKind === CONST.SEARCH.QUERY_KIND.CANNED_QUERY ? 'q' : 'cq'}=${query}${policyIDs ? `&policyIDs=${policyIDs}` : ''}` as const,
     },
 
     SEARCH_REPORT: {

diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx
@@ -9,6 +9,7 @@ import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRo
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList, RootStackParamList, State} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
+import {buildSearchQueryJSON, getQueryFromSearchParams} from '@libs/SearchUtils';
 import * as ReportActions from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -80,8 +81,9 @@ const PromotedActions = {
                 return;
             }
 
-            const currentQuery = topmostCentralPaneRoute?.params as AuthScreensParamList['Search_Central_Pane'];
-            ReportUtils.changeMoneyRequestHoldStatus(reportAction, ROUTES.SEARCH_REPORT.getRoute(currentQuery?.query ?? CONST.SEARCH.TAB.ALL, reportAction?.childReportID ?? ''));
+            const currentQuery = getQueryFromSearchParams(topmostCentralPaneRoute?.params as AuthScreensParamList['Search_Central_Pane']);
+            const currentStatus = buildSearchQueryJSON(currentQuery)?.status;
+            ReportUtils.changeMoneyRequestHoldStatus(reportAction, ROUTES.SEARCH_REPORT.getRoute(currentStatus ?? CONST.SEARCH.STATUS.ALL, reportAction?.childReportID ?? ''));
         },
     }),
 } satisfies PromotedActionsType;

diff --git a/src/components/Search/SearchListWithHeader.tsx b/src/components/Search/SearchListWithHeader.tsx
@@ -11,12 +11,12 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchActions from '@libs/actions/Search';
 import * as SearchUtils from '@libs/SearchUtils';
 import CONST from '@src/CONST';
-import type {SearchDataTypes, SearchQuery} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import SearchPageHeader from './SearchPageHeader';
-import type {SelectedTransactionInfo, SelectedTransactions} from './types';
+import type {SearchStatus, SelectedTransactionInfo, SelectedTransactions} from './types';
 
 type SearchListWithHeaderProps = Omit<BaseSelectionListProps<ReportListItemType | TransactionListItemType>, 'onSelectAll' | 'onCheckboxPress' | 'sections'> & {
-    query: SearchQuery;
+    status: SearchStatus;
     hash: number;
     data: TransactionListItemType[] | ReportListItemType[];
     searchType: SearchDataTypes;
@@ -43,7 +43,7 @@ function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListIt
 }
 
 function SearchListWithHeader(
-    {ListItem, onSelectRow, query, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, ...props}: SearchListWithHeaderProps,
+    {ListItem, onSelectRow, status, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, ...props}: SearchListWithHeaderProps,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -173,7 +173,7 @@ function SearchListWithHeader(
             <SearchPageHeader
                 selectedItems={selectedItems}
                 clearSelectedItems={clearSelectedItems}
-                query={query}
+                status={status}
                 hash={hash}
                 onSelectDeleteOption={handleOnSelectDeleteOption}
                 isMobileSelectionModeActive={isMobileSelectionModeActive}

diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
@@ -13,13 +13,12 @@ import * as SearchActions from '@libs/actions/Search';
 import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {SearchQuery} from '@src/types/onyx/SearchResults';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
-import type {SelectedTransactions} from './types';
+import type {SearchStatus, SelectedTransactions} from './types';
 
 type SearchPageHeaderProps = {
-    query: SearchQuery;
+    status: SearchStatus;
     selectedItems?: SelectedTransactions;
     clearSelectedItems?: () => void;
     hash: number;
@@ -30,13 +29,13 @@ type SearchPageHeaderProps = {
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems, onSelectDeleteOption, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchPageHeaderProps) {
+function SearchPageHeader({status, selectedItems = {}, hash, clearSelectedItems, onSelectDeleteOption, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
+    const headerContent: {[key in SearchStatus]: {icon: IconAsset; title: string}} = {
         all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')},
         shared: {icon: Illustrations.SendMoney, title: translate('common.shared')},
         drafts: {icon: Illustrations.Pencil, title: translate('common.drafts')},
@@ -146,8 +145,8 @@ function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems,
 
     return (
         <HeaderWithBackButton
-            title={headerContent[query]?.title}
-            icon={headerContent[query]?.icon}
+            title={headerContent[status]?.title}
+            icon={headerContent[status]?.icon}
             shouldShowBackButton={false}
         >
             {headerButtonsOptions.length > 0 && (

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -23,35 +23,34 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SearchResults from '@src/types/onyx/SearchResults';
-import type {SearchDataTypes, SearchQuery} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import {useSearchContext} from './SearchContext';
 import SearchListWithHeader from './SearchListWithHeader';
 import SearchPageHeader from './SearchPageHeader';
-import type {SearchColumnType, SortOrder} from './types';
+import type {SearchColumnType, SearchQueryJSON, SearchStatus, SortOrder} from './types';
 
 type SearchProps = {
-    query: SearchQuery;
+    queryJSON: SearchQueryJSON;
     policyIDs?: string;
-    sortBy?: SearchColumnType;
-    sortOrder?: SortOrder;
     isMobileSelectionModeActive?: boolean;
     setIsMobileSelectionModeActive?: (isMobileSelectionModeActive: boolean) => void;
 };
 
-const sortableSearchTabs: SearchQuery[] = [CONST.SEARCH.TAB.ALL];
+const sortableSearchTabs: SearchStatus[] = [CONST.SEARCH.STATUS.ALL];
 const transactionItemMobileHeight = 100;
 const reportItemTransactionHeight = 52;
 const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item
 const searchHeaderHeight = 54;
-function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchProps) {
+function Search({queryJSON, policyIDs, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchProps) {
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
     const {isLargeScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
     const {setCurrentSearchHash} = useSearchContext();
 
-    const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder);
+    const {status, sortBy, sortOrder, hash} = queryJSON;
+
     const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
 
     const getItemHeight = useCallback(
@@ -97,7 +96,9 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
         }
 
         setCurrentSearchHash(hash);
-        SearchActions.search({hash, query, policyIDs, offset: 0, sortBy, sortOrder});
+
+        // TODO_SEARCH: Function below will be deprecated soon. No point in refactoring to use status instead of query.
+        SearchActions.search({hash, query: status, policyIDs, offset: 0, sortBy, sortOrder});
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [hash, isOffline]);
 
@@ -108,7 +109,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
         return (
             <>
                 <SearchPageHeader
-                    query={query}
+                    status={status}
                     hash={hash}
                 />
                 <SearchRowSkeleton shouldAnimate />
@@ -122,7 +123,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
         return (
             <>
                 <SearchPageHeader
-                    query={query}
+                    status={status}
                     hash={hash}
                 />
                 <EmptySearchView />
@@ -143,15 +144,17 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
             SearchActions.createTransactionThread(hash, item.transactionID, reportID, item.moneyRequestReportActionID);
         }
 
-        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(query, reportID));
+        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(status, reportID));
     };
 
     const fetchMoreResults = () => {
         if (!searchResults?.search?.hasMoreResults || isLoadingItems || isLoadingMoreItems) {
             return;
         }
         const currentOffset = searchResults?.search?.offset ?? 0;
-        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH.RESULTS_PAGE_SIZE, sortBy, sortOrder});
+
+        // TODO_SEARCH: Function below will be deprecated soon. No point in refactoring to use status instead of query.
+        SearchActions.search({hash, query: status, offset: currentOffset + CONST.SEARCH.RESULTS_PAGE_SIZE, sortBy, sortOrder});
     };
 
     const type = SearchUtils.getSearchType(searchResults?.search);
@@ -167,21 +170,24 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
     const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
 
     const onSortPress = (column: SearchColumnType, order: SortOrder) => {
+        const tmp = SearchUtils.buildSearchQueryJSON(undefined);
+        console.log({tmp});
+
+        const newQuery = SearchUtils.buildSearchQueryString({sortBy: column, sortOrder: order});
         navigation.setParams({
-            sortBy: column,
-            sortOrder: order,
+            q: newQuery,
         });
     };
 
-    const isSortingAllowed = sortableSearchTabs.includes(query);
+    const isSortingAllowed = sortableSearchTabs.includes(status);
 
     const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);
 
     const canSelectMultiple = isSmallScreenWidth ? isMobileSelectionModeActive : true;
 
     return (
         <SearchListWithHeader
-            query={query}
+            status={status}
             hash={hash}
             data={sortedData}
             searchType={searchResults?.search?.type as SearchDataTypes}

diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
@@ -18,6 +18,7 @@ type SelectedTransactions = Record<string, SelectedTransactionInfo>;
 
 type SortOrder = ValueOf<typeof CONST.SEARCH.SORT_ORDER>;
 type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
+type SearchStatus = ValueOf<typeof CONST.SEARCH.STATUS>;
 
 type SearchContext = {
     currentSearchHash: number;
@@ -43,4 +44,37 @@ type QueryFilters = {
     [K in AllFieldKeys]: QueryFilter | QueryFilter[];
 };
 
-export type {SelectedTransactionInfo, SelectedTransactions, SearchColumnType, SortOrder, SearchContext, ASTNode, QueryFilter, QueryFilters, AllFieldKeys};
+type QueryKind = ValueOf<typeof CONST.SEARCH.QUERY_KIND>;
+
+type SearchQueryString = string;
+
+type SearchQueryAST = {
+    type: string;
+    status: SearchStatus;
+    sortBy: SearchColumnType;
+    sortOrder: SortOrder;
+    offset: number;
+    filters: ASTNode;
+};
+
+type SearchQueryJSON = {
+    input: string;
+    hash: number;
+} & SearchQueryAST;
+
+export type {
+    QueryKind,
+    SelectedTransactionInfo,
+    SelectedTransactions,
+    SearchColumnType,
+    SearchStatus,
+    SearchQueryAST,
+    SearchQueryJSON,
+    SearchQueryString,
+    SortOrder,
+    SearchContext,
+    ASTNode,
+    QueryFilter,
+    QueryFilters,
+    AllFieldKeys,
+};
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
@@ -57,7 +57,7 @@ function ActionCell({
         }
 
         if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
-            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute(CONST.SEARCH.TAB.ALL, transactionID));
+            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute(CONST.SEARCH.STATUS.ALL, transactionID));
         } else if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
             SearchActions.unholdMoneyRequestOnSearch(currentSearchHash, [transactionID]);
         }

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -10,7 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {getSearchParams} from '@libs/SearchUtils';
+import {getQueryFromSearchParams, getSearchParams} from '@libs/SearchUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ActionCell from './ActionCell';
@@ -79,7 +79,7 @@ function ReportListItem<TItem extends ListItem>({
 
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const searchParams = getSearchParams();
-        const currentQuery = searchParams?.query ?? CONST.SEARCH.TAB.ALL;
+        const currentQuery = getQueryFromSearchParams(searchParams);
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
     };
 

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -84,7 +84,8 @@ function shouldOpenOnAdminRoom() {
 
 function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial<ValueOf<CentralPaneScreensParamList>> {
     if (screenName === SCREENS.SEARCH.CENTRAL_PANE) {
-        return {sortBy: CONST.SEARCH.TABLE_COLUMNS.DATE, sortOrder: CONST.SEARCH.SORT_ORDER.DESC};
+        // TODO_SEARCH: normalize this query
+        return {q: CONST.SEARCH.DEFAULT_QUERY};
     }
 
     if (screenName === SCREENS.REPORT) {

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
@@ -112,7 +112,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                         if (currentTabName === SCREENS.SEARCH.BOTTOM_TAB || currentTabName === SCREENS.SEARCH.CENTRAL_PANE) {
                             return;
                         }
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute({query: CONST.SEARCH.TABv2.EXPENSE.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
@@ -112,7 +112,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                         if (isSearchTabName(activeBottomTabRoute?.name)) {
                             return;
                         }
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute({query: CONST.SEARCH.TABv2.EXPENSE.ALL})));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}