Refactor FullScreenNavigator

software-mansion-labs · Apr 12, 2024 · bc8db3b · bc8db3b
1 parent e3644d1
commit bc8db3b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 87 deletions.
diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx
@@ -5,12 +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 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 workspacesScreens = {
+    [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]: () => require('../../../../pages/workspace/accounting/WorkspaceAccountingPage').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();
@@ -24,78 +44,13 @@ function FullScreenNavigator() {
                     options={screenOptions.homeScreen}
                     getComponent={loadWorkspaceInitialPage}
                 />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.PROFILE}
-                    name={SCREENS.WORKSPACE.PROFILE}
-                    getComponent={() => require('@pages/workspace/WorkspaceProfilePage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.CARD}
-                    name={SCREENS.WORKSPACE.CARD}
-                    getComponent={() => require('@pages/workspace/card/WorkspaceCardPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.WORKFLOWS}
-                    name={SCREENS.WORKSPACE.WORKFLOWS}
-                    getComponent={() => require('@pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.REIMBURSE}
-                    name={SCREENS.WORKSPACE.REIMBURSE}
-                    getComponent={() => require('@pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.BILLS}
-                    name={SCREENS.WORKSPACE.BILLS}
-                    getComponent={() => require('@pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.INVOICES}
-                    name={SCREENS.WORKSPACE.INVOICES}
-                    getComponent={() => require('@pages/workspace/invoices/WorkspaceInvoicesPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.TRAVEL}
-                    name={SCREENS.WORKSPACE.TRAVEL}
-                    getComponent={() => require('@pages/workspace/travel/WorkspaceTravelPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.MEMBERS}
-                    name={SCREENS.WORKSPACE.MEMBERS}
-                    getComponent={() => require('@pages/workspace/WorkspaceMembersPage').default as React.ComponentType}
-                />
-
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.ACCOUNTING}
-                    name={SCREENS.WORKSPACE.ACCOUNTING}
-                    getComponent={() => require('@pages/workspace/accounting/WorkspaceAccountingPage').default as React.ComponentType}
-                />
-
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.CATEGORIES}
-                    name={SCREENS.WORKSPACE.CATEGORIES}
-                    getComponent={() => require('@pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.MORE_FEATURES}
-                    name={SCREENS.WORKSPACE.MORE_FEATURES}
-                    getComponent={() => require('@pages/workspace/WorkspaceMoreFeaturesPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.TAGS}
-                    name={SCREENS.WORKSPACE.TAGS}
-                    getComponent={() => require('@pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.TAXES}
-                    name={SCREENS.WORKSPACE.TAXES}
-                    getComponent={() => require('@pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType}
-                />
-                <RootStack.Screen
-                    key={SCREENS.WORKSPACE.DISTANCE_RATES}
-                    name={SCREENS.WORKSPACE.DISTANCE_RATES}
-                    getComponent={() => require('@pages/workspace/distanceRates/PolicyDistanceRatesPage').default as React.ComponentType}
-                />
+                {Object.entries(workspacesScreens).map(([screenName, componentGetter]) => (
+                    <RootStack.Screen
+                        key={screenName}
+                        name={screenName as keyof Screens}
+                        getComponent={componentGetter}
+                    />
+                ))}
             </RootStack.Navigator>
         </View>
     );

diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx
@@ -30,7 +30,7 @@ function adaptStateIfNecessary(state: StackState) {
 
     // 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 (state.routes.length === 1 && state.routes[0].name === SCREENS.WORKSPACE.INITIAL) {
             // @ts-expect-error Updating read only property

diff --git a/src/libs/Navigation/getTopmostRouteName.ts b/src/libs/Navigation/getTopmostRouteName.ts
@@ -0,0 +1,12 @@
+import type {NavigationState, PartialState} from '@react-navigation/native';
+
+// Get the name of topmost route in the navigation stack.
+function getTopmostRouteName(state: NavigationState | PartialState<NavigationState>): string | undefined {
+    if (!state) {
+        return;
+    }
+
+    return state.routes.at(-1)?.name;
+}
+
+export default getTopmostRouteName;
diff --git a/src/libs/Navigation/getTopmostWorkspacesCentralPaneName.ts b/src/libs/Navigation/getTopmostWorkspacesCentralPaneName.ts
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -19,7 +19,7 @@ import usePrevious from '@hooks/usePrevious';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
-import getTopmostWorkspacesCentralPaneName from '@libs/Navigation/getTopmostWorkspacesCentralPaneName';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
@@ -68,7 +68,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
     const hasPolicyCreationError = !!(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);
     const waitForNavigate = useWaitForNavigation();
     const {singleExecution, isExecuting} = useSingleExecution();
-    const activeRoute = useNavigationState(getTopmostWorkspacesCentralPaneName);
+    const activeRoute = useNavigationState(getTopmostRouteName);
     const {translate} = useLocalize();
     const {canUseAccountingIntegrations} = usePermissions();