Add SEARCH_QUERIES consts, hide new features

Expensify · Apr 16, 2024 · f84911b · f84911b
1 parent 1de5ce3
commit f84911b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 12 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -4345,6 +4345,12 @@ const CONST = {
 
     MAX_TAX_RATE_INTEGER_PLACES: 4,
     MAX_TAX_RATE_DECIMAL_PLACES: 4,
+
+    SEARCH_QUERIES: {
+        ALL: 'all',
+        SENT: 'sent',
+        DRAFTS: 'drafts'
+    }
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
@@ -10,6 +10,7 @@ import * as Network from '@userActions/Network';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx';
@@ -103,6 +104,16 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
                     }}
                 />
             </TestToolRow>
+            {/* Navigate to the new Search Page. This button is temporary and should be removed after passing QA tests. */}
+            <TestToolRow title="New Search Page">
+                <Button
+                    small
+                    text="Navigate"
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.ALL));
+                    }}
+                />
+            </TestToolRow>
         </>
     );
 }

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -102,10 +102,11 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-            <Tooltip text={translate('common.search')}>
+            {/** @TODO: Uncomment this code and change order of the items according to the designs once the new search tab is ready */}
+            {/* <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        Navigation.navigate(ROUTES.SEARCH.getRoute('all'));
+                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.ALL));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}
@@ -121,9 +122,9 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                         />
                     </View>
                 </PressableWithFeedback>
-            </Tooltip>
-            <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
+            </Tooltip> */}
             <BottomTabBarFloatingActionButton />
+            <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
         </View>
     );
 }

diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
@@ -13,7 +13,7 @@ function SearchPage({route}: SearchPageProps) {
 
     return (
         <ScreenWrapper testID="testPage">
-            <SearchResults filter={route.params.query} />
+            <SearchResults query={route.params.query} />
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
@@ -7,6 +7,7 @@ import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Expensicons from '@src/components/Icon/Expensicons';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type IconAsset from '@src/types/utils/IconAsset';
 
@@ -20,23 +21,23 @@ function SearchPageBottomTab() {
     const styles = useThemeStyles();
     const {singleExecution} = useSingleExecution();
     const activeRoute = useActiveRoute();
-    const currentQuery = activeRoute?.params?.query;
+    const currentQuery = activeRoute?.params && 'query' in activeRoute.params ? activeRoute?.params?.query : '';
 
     const searchMenuItems: SearchMenuItem[] = [
         {
             title: 'All',
             icon: Expensicons.ExpensifyLogoNew,
-            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('all'))),
+            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.ALL))),
         },
         {
             title: 'Sent',
             icon: Expensicons.ExpensifyLogoNew,
-            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('sent'))),
+            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.SENT))),
         },
         {
             title: 'Drafts',
             icon: Expensicons.ExpensifyLogoNew,
-            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('drafts'))),
+            action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.DRAFTS))),
         },
     ];
 

diff --git a/src/pages/Search/SearchResults.tsx b/src/pages/Search/SearchResults.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type SearchResultsProps = {
-    filter: string;
+    query: string;
 };
 
-function SearchResults({filter}: SearchResultsProps) {
-    return <Text style={{color: 'white', fontSize: 30}}>Search results for: |{filter}| filter</Text>;
+function SearchResults({query}: SearchResultsProps) {
+    const styles = useThemeStyles();
+
+    return <Text style={styles.textHeadlineH1}>Search results for: |{query}| filter</Text>;
 }
 
 SearchResults.displayName = 'SearchResults';