[Search v1] Implement Search navigation logic

src/CONST.ts

@@ -3301,6 +3301,13 @@ const CONST = {
         SCAN: 'scan',
         DISTANCE: 'distance',
     },
+    TAB_SEARCH: {
+        ALL: 'all',
+        SENT: 'sent',
+        DRAFTS: 'drafts',
+        WAITING_ON_YOU: 'waitingOnYou',
+        FINISHED: 'finished',
+    },
     STATUS_TEXT_MAX_LENGTH: 100,
 
     DROPDOWN_BUTTON_SIZE: {

src/ROUTES.ts

@@ -22,6 +22,16 @@ const ROUTES = {
 
     ALL_SETTINGS: 'all-settings',
 
+    SEARCH: {
+        route: '/search/:query',
+        getRoute: (query: string) => `search/${query}` as const,
+    },
+
+    SEARCH_REPORT: {
+        route: '/search/:query/view/:reportID',
+        getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const,
+    },
+
     // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {

src/SCREENS.ts

@@ -23,6 +23,11 @@ const SCREENS = {
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',
+    SEARCH: {
+        CENTRAL_PANE: 'Search_Central_Pane',
+        REPORT: 'Search_Report',
+        BOTTOM_TAB: 'Search_Bottom_Tab',
+    },
     SETTINGS: {
         ROOT: 'Settings_Root',
         SHARE_CODE: 'Settings_Share_Code',
@@ -127,6 +132,7 @@ const SCREENS = {
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
         PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
+        SEARCH_REPORT: 'Search_Report',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',

src/components/TabSelector/TabSelector.tsx

@@ -33,6 +33,16 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate
             return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')};
         case CONST.TAB_REQUEST.DISTANCE:
             return {icon: Expensicons.Car, title: translate('common.distance')};
+        case CONST.TAB_SEARCH.ALL:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'All'};
+        case CONST.TAB_SEARCH.SENT:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Sent'};
+        case CONST.TAB_SEARCH.DRAFTS:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Drafts'};
+        case CONST.TAB_SEARCH.WAITING_ON_YOU:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Waiting on you'};
+        case CONST.TAB_SEARCH.FINISHED:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Finished'};
         default:
             throw new Error(`Route ${route} has no icon nor title set.`);
     }

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.TAB_SEARCH.ALL));
+                    }}
+                />
+            </TestToolRow>
         </>
     );
 }

src/hooks/useActiveRoute.ts

@@ -1,7 +1,8 @@
 import {useContext} from 'react';
 import ActiveRouteContext from '@libs/Navigation/AppNavigator/Navigators/ActiveRouteContext';
+import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types';
 
-function useActiveRoute(): string {
+function useActiveRoute(): NavigationPartialRoute<keyof CentralPaneNavigatorParamList> | undefined {
     return useContext(ActiveRouteContext);
 }
 

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -23,6 +23,7 @@ import type {
     ReportSettingsNavigatorParamList,
     RoomInviteNavigatorParamList,
     RoomMembersNavigatorParamList,
+    SearchReportParamList,
     SettingsNavigatorParamList,
     SignInNavigatorParamList,
     SplitDetailsNavigatorParamList,
@@ -147,6 +148,10 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
     [SCREENS.ROOM_INVITE_ROOT]: () => require('../../../../pages/RoomInvitePage').default as React.ComponentType,
 });
 
+const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
+    [SCREENS.SEARCH.REPORT]: () => require('../../../../pages/home/ReportScreen').default as React.ComponentType,
+});
+
 const ChatFinderModalStackNavigator = createModalStackNavigator<ChatFinderNavigatorParamList>({
     [SCREENS.CHAT_FINDER_ROOT]: () => require('../../../../pages/ChatFinderPage').default as React.ComponentType,
 });
@@ -350,4 +355,5 @@ export {
     WalletStatementStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
     WorkspaceSettingsModalStackNavigator,
+    SearchReportModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types';
 
-const ActiveRouteContext = React.createContext('');
+const ActiveRouteContext = React.createContext<NavigationPartialRoute<keyof CentralPaneNavigatorParamList> | undefined>(undefined);
 
 export default ActiveRouteContext;

src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

@@ -5,6 +5,7 @@ import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/create
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import type {BottomTabNavigatorParamList} from '@libs/Navigation/types';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
+import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab';
 import SCREENS from '@src/SCREENS';
 import ActiveRouteContext from './ActiveRouteContext';
 
@@ -21,12 +22,16 @@ function BottomTabNavigator() {
     const activeRoute = useNavigationState(getTopmostCentralPaneRoute);
 
     return (
-        <ActiveRouteContext.Provider value={activeRoute?.name ?? ''}>
+        <ActiveRouteContext.Provider value={activeRoute}>
             <Tab.Navigator screenOptions={screenOptions}>
                 <Tab.Screen
                     name={SCREENS.HOME}
                     component={SidebarScreen}
                 />
+                <Tab.Screen
+                    name={SCREENS.SEARCH.BOTTOM_TAB}
+                    component={SearchPageBottomTab}
+                />
                 <Tab.Screen
                     name={SCREENS.SETTINGS.ROOT}
                     getComponent={loadInitialSettingsPage}

src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx

@@ -4,6 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
+import SearchPage from '@pages/Search/SearchPage';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
@@ -41,6 +42,12 @@ function BaseCentralPaneNavigator() {
                 initialParams={{openOnAdminRoom: openOnAdminRoom === 'true' || undefined}}
                 component={ReportScreenWrapper}
             />
+            <Stack.Screen
+                name={SCREENS.SEARCH.CENTRAL_PANE}
+                // We do it this way to avoid adding the url params to url
+                component={SearchPage}
+            />
+
             {Object.entries(settingsScreens).map(([screenName, componentGetter]) => (
                 <Stack.Screen
                     key={screenName}

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -137,6 +137,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name="ProcessMoneyRequestHold"
                         component={ModalStackNavigators.ProcessMoneyRequestHoldStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.SEARCH_REPORT}
+                        component={ModalStackNavigators.SearchReportModalStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -13,6 +13,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@libs/actions/Session';
 import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
+import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import type {RootStackParamList, State} from '@libs/Navigation/types';
 import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
@@ -64,6 +65,12 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
 
     // Parent navigator of the bottom tab bar is the root navigator.
     const currentTabName = useNavigationState<RootStackParamList, string | undefined>((state) => {
+        const topmostCentralPaneRoute = getTopmostCentralPaneRoute(state);
+
+        if (topmostCentralPaneRoute && topmostCentralPaneRoute.name === SCREENS.SEARCH.CENTRAL_PANE) {
+            return SCREENS.SEARCH.CENTRAL_PANE;
+        }
+
         const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
         return topmostBottomTabRoute?.name ?? SCREENS.HOME;
     });
@@ -95,7 +102,27 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-
+            {/** @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(CONST.TAB_SEARCH.ALL));
+                    }}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.search')}
+                    wrapperStyle={styles.flex1}
+                    style={styles.bottomTabBarItem}
+                >
+                    <View>
+                        <Icon
+                            src={Expensicons.ReceiptSearch}
+                            fill={currentTabName === SCREENS.SEARCH.CENTRAL_PANE ? theme.iconMenu : theme.icon}
+                            width={variables.iconBottomBar}
+                            height={variables.iconBottomBar}
+                        />
+                    </View>
+                </PressableWithFeedback>
+            </Tooltip> */}
             <BottomTabBarFloatingActionButton />
             <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
         </View>

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx

@@ -3,21 +3,25 @@ import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/na
 import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack';
 import {StackView} from '@react-navigation/stack';
 import React, {useEffect, useMemo} from 'react';
+import {View} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import navigationRef from '@libs/Navigation/navigationRef';
+import type {RootStackParamList, State} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
 
 type Routes = StackNavigationState<ParamListBase>['routes'];
-function reduceReportRoutes(routes: Routes): Routes {
+function reduceCentralPaneRoutes(routes: Routes): Routes {
     const result: Routes = [];
     let count = 0;
     const reverseRoutes = [...routes].reverse();
 
     reverseRoutes.forEach((route) => {
         if (route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR) {
-            // Remove all report routes except the last 3. This will improve performance.
+            // Remove all central pane routes except the last 3. This will improve performance.
             if (count < 3) {
                 result.push(route);
                 count++;
@@ -52,15 +56,34 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
         navigationRef.resetRoot(navigationRef.getRootState());
     }, [isSmallScreenWidth]);
 
-    const stateToRender = useMemo(() => {
-        const result = reduceReportRoutes(state.routes);
+    const {stateToRender, searchRoute} = useMemo(() => {
+        const routes = reduceCentralPaneRoutes(state.routes);
+
+        const lastRoute = routes[routes.length - 1];
+        const isLastRouteSearchRoute = getTopmostCentralPaneRoute({routes: [lastRoute]} as State<RootStackParamList>)?.name === SCREENS.SEARCH.CENTRAL_PANE;
+
+        const firstRoute = routes[0];
+
+        if (isSmallScreenWidth && isLastRouteSearchRoute) {
+            return {
+                stateToRender: {
+                    ...state,
+                    index: 0,
+                    routes: [firstRoute],
+                },
+                searchRoute: lastRoute,
+            };
+        }
 
         return {
-            ...state,
-            index: result.length - 1,
-            routes: [...result],
+            stateToRender: {
+                ...state,
+                index: routes.length - 1,
+                routes: [...routes],
+            },
+            searchRoute: undefined,
         };
-    }, [state]);
+    }, [state, isSmallScreenWidth]);
 
     return (
         <NavigationContent>
@@ -71,6 +94,7 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
                 descriptors={descriptors}
                 navigation={navigation}
             />
+            {searchRoute && <View style={{display: 'none'}}>{descriptors[searchRoute.key].render()}</View>}
         </NavigationContent>
     );
 }

src/libs/Navigation/AppNavigator/getPartialStateDiff.ts

@@ -3,20 +3,9 @@ import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRo
 import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute';
 import type {Metainfo} from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath';
 import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types';
+import shallowCompare from '@libs/ObjectUtils';
 import NAVIGATORS from '@src/NAVIGATORS';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-const shallowCompare = (obj1?: object, obj2?: object) => {
-    if (!obj1 && !obj2) {
-        return true;
-    }
-    if (obj1 && obj2) {
-        // @ts-expect-error we know that obj1 and obj2 are params of a route.
-        return Object.keys(obj1).length === Object.keys(obj2).length && Object.keys(obj1).every((key) => obj1[key] === obj2[key]);
-    }
-    return false;
-};
-
 type GetPartialStateDiffReturnType = {
     [NAVIGATORS.BOTTOM_TAB_NAVIGATOR]?: NavigationPartialRoute;
     [NAVIGATORS.CENTRAL_PANE_NAVIGATOR]?: NavigationPartialRoute;