Merge pull request #40342 from software-mansion-labs/nav/flatten-full…

…-screen-nav [Ideal nav] Simplify the navigator structure
Expensify · May 14, 2024 · dc93d0d · dc93d0d
2 parents 82ecbcd + e42e4d3
commit dc93d0d
Show file tree

Hide file tree

Showing 31 changed files with 128 additions and 294 deletions.
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -27,7 +27,6 @@ const SCREENS = {
         MY_TRIPS: 'Travel_MyTrips',
         TCS: 'Travel_TCS',
     },
-    WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',
     SEARCH: {
         CENTRAL_PANE: 'Search_Central_Pane',
         REPORT_RHP: 'Search_Report_RHP',
@@ -112,9 +111,6 @@ const SCREENS = {
         CHAT_FINDER: 'ChatFinder',
         WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
     },
-    WORKSPACE_SWITCHER: {
-        ROOT: 'WorkspaceSwitcher_Root',
-    },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
         NEW_CHAT: 'NewChat',
@@ -364,7 +360,6 @@ const SCREENS = {
     },
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
     ROOM_INVITE_ROOT: 'RoomInvite_Root',
-    CHAT_FINDER_ROOT: 'ChatFinder_Root',
     FLAG_COMMENT_ROOT: 'FlagComment_Root',
     REIMBURSEMENT_ACCOUNT: 'ReimbursementAccount',
     GET_ASSISTANCE: 'GetAssistance',

diff --git a/...ibs/Navigation/AppNavigator/ModalStackNavigators/WorkspaceSettingsModalStackNavigator.tsx b/...ibs/Navigation/AppNavigator/ModalStackNavigators/WorkspaceSettingsModalStackNavigator.tsx
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -4,7 +4,6 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import type {
     AddPersonalBankAccountNavigatorParamList,
-    ChatFinderNavigatorParamList,
     DetailsNavigatorParamList,
     EditRequestNavigatorParamList,
     EnablePaymentsNavigatorParamList,
@@ -30,13 +29,11 @@ import type {
     TeachersUniteNavigatorParamList,
     TravelNavigatorParamList,
     WalletStatementNavigatorParamList,
-    WorkspaceSwitcherNavigatorParamList,
 } from '@navigation/types';
 import type {ThemeStyles} from '@styles/index';
 import type {Screen} from '@src/SCREENS';
 import SCREENS from '@src/SCREENS';
 import useModalScreenOptions from './useModalScreenOptions';
-import WorkspaceSettingsModalStackNavigator from './WorkspaceSettingsModalStackNavigator';
 
 type Screens = Partial<Record<Screen, () => React.ComponentType>>;
 
@@ -152,10 +149,6 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
     [SCREENS.ROOM_INVITE_ROOT]: () => require('../../../../pages/RoomInvitePage').default as React.ComponentType,
 });
 
-const ChatFinderModalStackNavigator = createModalStackNavigator<ChatFinderNavigatorParamList>({
-    [SCREENS.CHAT_FINDER_ROOT]: () => require('../../../../pages/ChatFinderPage').default as React.ComponentType,
-});
-
 const NewChatModalStackNavigator = createModalStackNavigator<NewChatNavigatorParamList>({
     [SCREENS.NEW_CHAT.ROOT]: () => require('../../../../pages/NewChatSelectorPage').default as React.ComponentType,
     [SCREENS.NEW_CHAT.NEW_CHAT_CONFIRM]: () => require('../../../../pages/NewChatConfirmPage').default as React.ComponentType,
@@ -178,10 +171,6 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
     [SCREENS.I_AM_A_TEACHER]: () => require('../../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
 });
 
-const WorkspaceSwitcherModalStackNavigator = createModalStackNavigator<WorkspaceSwitcherNavigatorParamList>({
-    [SCREENS.WORKSPACE_SWITCHER.ROOT]: () => require('../../../../pages/WorkspaceSwitcherPage').default as React.ComponentType,
-});
-
 const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
     [SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../../pages/ShareCodePage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.PRONOUNS]: () => require('../../../../pages/settings/Profile/PronounsPage').default as React.ComponentType,
@@ -391,24 +380,21 @@ export {
     NewTaskModalStackNavigator,
     NewTeachersUniteNavigator,
     PrivateNotesModalStackNavigator,
+    ProcessMoneyRequestHoldStackNavigator,
     ProfileModalStackNavigator,
     ReferralModalStackNavigator,
     TravelModalStackNavigator,
-    WorkspaceSwitcherModalStackNavigator,
     ReimbursementAccountModalStackNavigator,
+    ReportDescriptionModalStackNavigator,
     ReportDetailsModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     ReportSettingsModalStackNavigator,
-    ReportDescriptionModalStackNavigator,
     RoomInviteModalStackNavigator,
     RoomMembersModalStackNavigator,
-    ChatFinderModalStackNavigator,
     SettingsModalStackNavigator,
     SignInModalStackNavigator,
     SplitDetailsModalStackNavigator,
     TaskModalStackNavigator,
     WalletStatementStackNavigator,
-    ProcessMoneyRequestHoldStackNavigator,
-    WorkspaceSettingsModalStackNavigator,
     SearchReportModalStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx
@@ -5,13 +5,32 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import createCustomFullScreenNavigator from '@libs/Navigation/AppNavigator/createCustomFullScreenNavigator';
 import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
-import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
 
 const loadWorkspaceInitialPage = () => require('../../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType;
 
 const RootStack = createCustomFullScreenNavigator();
 
+type Screens = Partial<Record<keyof FullScreenNavigatorParamList, () => React.ComponentType>>;
+
+const centralPaneWorkspaceScreens = {
+    [SCREENS.WORKSPACE.PROFILE]: () => require('../../../../pages/workspace/WorkspaceProfilePage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.CARD]: () => require('../../../../pages/workspace/card/WorkspaceCardPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.WORKFLOWS]: () => require('../../../../pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.REIMBURSE]: () => require('../../../../pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.BILLS]: () => require('../../../../pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.INVOICES]: () => require('../../../../pages/workspace/invoices/WorkspaceInvoicesPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.TRAVEL]: () => require('../../../../pages/workspace/travel/WorkspaceTravelPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.MEMBERS]: () => require('../../../../pages/workspace/WorkspaceMembersPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require('../../../../pages/workspace/accounting/PolicyAccountingPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.CATEGORIES]: () => require('../../../../pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.MORE_FEATURES]: () => require('../../../../pages/workspace/WorkspaceMoreFeaturesPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.TAGS]: () => require('../../../../pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.TAXES]: () => require('../../../../pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.DISTANCE_RATES]: () => require('../../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default as React.ComponentType,
+} satisfies Screens;
+
 function FullScreenNavigator() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -20,17 +39,19 @@ function FullScreenNavigator() {
 
     return (
         <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
-            <RootStack.Navigator>
+            <RootStack.Navigator screenOptions={screenOptions.centralPaneNavigator}>
                 <RootStack.Screen
                     name={SCREENS.WORKSPACE.INITIAL}
                     options={screenOptions.homeScreen}
                     getComponent={loadWorkspaceInitialPage}
                 />
-                <RootStack.Screen
-                    name={SCREENS.WORKSPACES_CENTRAL_PANE}
-                    options={screenOptions.centralPaneNavigator}
-                    component={ModalStackNavigators.WorkspaceSettingsModalStackNavigator}
-                />
+                {Object.entries(centralPaneWorkspaceScreens).map(([screenName, componentGetter]) => (
+                    <RootStack.Screen
+                        key={screenName}
+                        name={screenName as keyof Screens}
+                        getComponent={componentGetter}
+                    />
+                ))}
             </RootStack.Navigator>
         </View>
     );

diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx
@@ -6,14 +6,16 @@ import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
-import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types';
 import type NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import Overlay from './Overlay';
 
 type LeftModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.LEFT_MODAL_NAVIGATOR>;
 
+const loadChatFinder = () => require('../../../../pages/ChatFinderPage').default as React.ComponentType;
+const loadWorkspaceSwitcherPage = () => require('../../../../pages/WorkspaceSwitcherPage').default as React.ComponentType;
+
 const Stack = createStackNavigator<LeftModalNavigatorParamList>();
 
 function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
@@ -33,11 +35,11 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
                 <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name={SCREENS.LEFT_MODAL.CHAT_FINDER}
-                        component={ModalStackNavigators.ChatFinderModalStackNavigator}
+                        getComponent={loadChatFinder}
                     />
                     <Stack.Screen
                         name={SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER}
-                        component={ModalStackNavigators.WorkspaceSwitcherModalStackNavigator}
+                        getComponent={loadWorkspaceSwitcherPage}
                     />
                 </Stack.Navigator>
             </View>

diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx
@@ -11,11 +11,6 @@ const isAtLeastOneInState = (state: StackState, screenName: string): boolean =>
 function adaptStateIfNecessary(state: StackState) {
     const isNarrowLayout = getIsNarrowLayout();
     const workspaceCentralPane = state.routes.at(-1);
-    const topmostWorkspaceCentralPaneRoute = workspaceCentralPane?.state?.routes[0];
-
-    // When a screen from the FullScreenNavigator is opened from the deeplink then params should be passed to SCREENS.WORKSPACE.INITIAL from the variable defined below.
-    const workspacesCentralPaneParams =
-        workspaceCentralPane?.params && 'params' in workspaceCentralPane.params ? (workspaceCentralPane.params.params as Record<string, string | undefined>) : undefined;
 
     // There should always be WORKSPACE.INITIAL screen in the state to make sure go back works properly if we deeplinkg to a subpage of settings.
     if (!isAtLeastOneInState(state, SCREENS.WORKSPACE.INITIAL)) {
@@ -28,31 +23,24 @@ function adaptStateIfNecessary(state: StackState) {
             // Unshift the root screen to fill left pane.
             state.routes.unshift({
                 name: SCREENS.WORKSPACE.INITIAL,
-                params: topmostWorkspaceCentralPaneRoute?.params ?? workspacesCentralPaneParams,
+                params: workspaceCentralPane?.params,
             });
         }
     }
 
     // If the screen is wide, there should be at least two screens inside:
     // - WORKSPACE.INITIAL to cover left pane.
-    // - WORKSPACES_CENTRAL_PANE to cover central pane.
+    // - WORKSPACE.PROFILE (first workspace settings screen) to cover central pane.
     if (!isNarrowLayout) {
-        if (!isAtLeastOneInState(state, SCREENS.WORKSPACES_CENTRAL_PANE)) {
+        if (state.routes.length === 1 && state.routes[0].name === SCREENS.WORKSPACE.INITIAL) {
             // @ts-expect-error Updating read only property
             // noinspection JSConstantReassignment
             state.stale = true; // eslint-disable-line
             // Push the default settings central pane screen.
             if (state.stale === true) {
                 state.routes.push({
-                    name: SCREENS.WORKSPACES_CENTRAL_PANE,
-                    state: {
-                        routes: [
-                            {
-                                name: SCREENS.WORKSPACE.PROFILE,
-                                params: state.routes[0]?.params,
-                            },
-                        ],
-                    },
+                    name: SCREENS.WORKSPACE.PROFILE,
+                    params: state.routes[0]?.params,
                 });
             }
         }

diff --git a/src/libs/Navigation/getTopmostWorkspacesCentralPaneName.ts b/src/libs/Navigation/getTopmostWorkspacesCentralPaneName.ts