From fb87e2eea18b815ac0a35194463f95196449ad8f Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 22 May 2024 08:59:12 +0200 Subject: [PATCH 01/20] Move settings to AuthScreens --- .../Navigation/AppNavigator/AuthScreens.tsx | 21 +++++++ .../BaseCentralPaneNavigator.tsx | 20 ------ .../AppNavigator/getActionsFromPartialDiff.ts | 7 +-- src/libs/Navigation/linkTo.ts | 12 ++-- src/libs/Navigation/linkingConfig/config.ts | 62 +++++++++---------- src/libs/Navigation/switchPolicyID.ts | 8 +-- src/libs/Navigation/types.ts | 40 ++++++------ 7 files changed, 80 insertions(+), 90 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index ad437f08523..656f75f23cb 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -273,6 +273,19 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + type Screens = Partial React.ComponentType>>; + + const settingsScreens = { + [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, + [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, + [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, + [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, + [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, + [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, + } satisfies Screens; + return ( @@ -408,6 +421,14 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie options={defaultScreenOptions} component={ConnectionCompletePage} /> + + {Object.entries(settingsScreens).map(([screenName, componentGetter]) => ( + + ))} diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 884cfbeb249..0f273f0fa0e 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -12,18 +12,6 @@ const Stack = createStackNavigator(); const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; -type Screens = Partial React.ComponentType>>; - -const settingsScreens = { - [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, - [SCREENS.SETTINGS.SECURITY]: () => require('../../../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, - [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, - [SCREENS.SETTINGS.ABOUT]: () => require('../../../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, - [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, - [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, -} satisfies Screens; function BaseCentralPaneNavigator() { const styles = useThemeStyles(); @@ -47,14 +35,6 @@ function BaseCentralPaneNavigator() { // We do it this way to avoid adding the url params to url component={SearchPage} /> - - {Object.entries(settingsScreens).map(([screenName, componentGetter]) => ( - - ))} ); } diff --git a/src/libs/Navigation/AppNavigator/getActionsFromPartialDiff.ts b/src/libs/Navigation/AppNavigator/getActionsFromPartialDiff.ts index 1d0e90c041b..9685f4fc033 100644 --- a/src/libs/Navigation/AppNavigator/getActionsFromPartialDiff.ts +++ b/src/libs/Navigation/AppNavigator/getActionsFromPartialDiff.ts @@ -22,12 +22,7 @@ function getActionsFromPartialDiff(diff: GetPartialStateDiffReturnType): Navigat if (centralPaneDiff) { // In this case we have to wrap the inner central pane route with central pane navigator. - actions.push( - StackActions.push(NAVIGATORS.CENTRAL_PANE_NAVIGATOR, { - screen: centralPaneDiff.name, - params: centralPaneDiff.params, - }), - ); + actions.push(StackActions.push(centralPaneDiff.name, centralPaneDiff.params)); } if (fullScreenDiff) { diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 50050e4b8ff..72a1b1522cf 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -128,10 +128,11 @@ export default function linkTo(navigation: NavigationContainerRef; const stateFromPath = getStateFromPath(pathWithoutPolicyID) as PartialState>; - + console.log('stateFromPath', stateFromPath); // Creating path with /w/ included if necessary. const extractedPolicyID = extractPolicyIDFromPath(`/${path}`); const policyIDFromState = getPolicyIDFromState(rootState); @@ -149,6 +150,7 @@ export default function linkTo(navigation: NavigationContainerRef['config'] = { [SCREENS.REPORT_AVATAR]: ROUTES.REPORT_AVATAR.route, [SCREENS.TRANSACTION_RECEIPT]: ROUTES.TRANSACTION_RECEIPT.route, [SCREENS.WORKSPACE_JOIN_USER]: ROUTES.WORKSPACE_JOIN_USER.route, + [SCREENS.SETTINGS.PROFILE.ROOT]: { + path: ROUTES.SETTINGS_PROFILE, + exact: true, + }, + [SCREENS.SETTINGS.PREFERENCES.ROOT]: { + path: ROUTES.SETTINGS_PREFERENCES, + exact: true, + }, + [SCREENS.SETTINGS.SECURITY]: { + path: ROUTES.SETTINGS_SECURITY, + exact: true, + }, + [SCREENS.SETTINGS.WALLET.ROOT]: { + path: ROUTES.SETTINGS_WALLET, + exact: true, + }, + [SCREENS.SETTINGS.ABOUT]: { + path: ROUTES.SETTINGS_ABOUT, + exact: true, + }, + [SCREENS.SETTINGS.TROUBLESHOOT]: { + path: ROUTES.SETTINGS_TROUBLESHOOT, + exact: true, + }, + [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES, + + [SCREENS.REPORT]: ROUTES.REPORT_WITH_ID.route, + + [SCREENS.SEARCH.CENTRAL_PANE]: ROUTES.SEARCH.route, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: ROUTES.SETTINGS_SAVE_THE_WORLD, // Sidebar [NAVIGATORS.BOTTOM_TAB_NAVIGATOR]: { @@ -38,38 +68,6 @@ const config: LinkingOptions['config'] = { }, }, - [NAVIGATORS.CENTRAL_PANE_NAVIGATOR]: { - screens: { - [SCREENS.REPORT]: ROUTES.REPORT_WITH_ID.route, - [SCREENS.SETTINGS.PROFILE.ROOT]: { - path: ROUTES.SETTINGS_PROFILE, - exact: true, - }, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: { - path: ROUTES.SETTINGS_PREFERENCES, - exact: true, - }, - [SCREENS.SETTINGS.SECURITY]: { - path: ROUTES.SETTINGS_SECURITY, - exact: true, - }, - [SCREENS.SETTINGS.WALLET.ROOT]: { - path: ROUTES.SETTINGS_WALLET, - exact: true, - }, - [SCREENS.SETTINGS.ABOUT]: { - path: ROUTES.SETTINGS_ABOUT, - exact: true, - }, - [SCREENS.SETTINGS.TROUBLESHOOT]: { - path: ROUTES.SETTINGS_TROUBLESHOOT, - exact: true, - }, - [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES, - [SCREENS.SEARCH.CENTRAL_PANE]: ROUTES.SEARCH.route, - [SCREENS.SETTINGS.SAVE_THE_WORLD]: ROUTES.SETTINGS_SAVE_THE_WORLD, - }, - }, [SCREENS.NOT_FOUND]: '*', [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: { screens: { diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts index 576e272d0a0..a8aea0eee8f 100644 --- a/src/libs/Navigation/switchPolicyID.ts +++ b/src/libs/Navigation/switchPolicyID.ts @@ -100,7 +100,6 @@ export default function switchPolicyID(navigation: NavigationContainerRef = PartialRoute = NavigationState | PartialState>; -type CentralPaneNavigatorParamList = { - [SCREENS.REPORT]: { - reportActionID: string; - reportID: string; - openOnAdminRoom?: boolean; - referrer?: string; - }; - [SCREENS.SETTINGS.PROFILE.ROOT]: undefined; - [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined; - [SCREENS.SETTINGS.SECURITY]: undefined; - [SCREENS.SETTINGS.WALLET.ROOT]: undefined; - [SCREENS.SETTINGS.ABOUT]: undefined; - [SCREENS.SETTINGS.TROUBLESHOOT]: undefined; - [SCREENS.SETTINGS.WORKSPACES]: undefined; - [SCREENS.SEARCH.CENTRAL_PANE]: { - query: string; - }; - [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined; -}; +type CentralPaneNavigatorParamList = {}; type BackToParams = { backTo?: Routes; @@ -895,6 +877,24 @@ type AuthScreensParamList = SharedScreensParamList & { transactionID: string; }; [SCREENS.CONNECTION_COMPLETE]: undefined; + [SCREENS.REPORT]: { + reportActionID: string; + reportID: string; + openOnAdminRoom?: boolean; + referrer?: string; + }; + + [SCREENS.SEARCH.CENTRAL_PANE]: { + query: string; + }; + [SCREENS.SETTINGS.PROFILE.ROOT]: undefined; + [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined; + [SCREENS.SETTINGS.SECURITY]: undefined; + [SCREENS.SETTINGS.WALLET.ROOT]: undefined; + [SCREENS.SETTINGS.ABOUT]: undefined; + [SCREENS.SETTINGS.TROUBLESHOOT]: undefined; + [SCREENS.SETTINGS.WORKSPACES]: undefined; + [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined; }; type SearchReportParamList = { @@ -908,7 +908,7 @@ type RootStackParamList = PublicScreensParamList & AuthScreensParamList & LeftMo type BottomTabName = keyof BottomTabNavigatorParamList; -type CentralPaneName = keyof CentralPaneNavigatorParamList; +type CentralPaneName = keyof AuthScreensParamList; type FullScreenName = keyof FullScreenNavigatorParamList; From 1411be4cdad4c6f3da8446edff5db71ebd2d9b62 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 22 May 2024 12:34:51 +0200 Subject: [PATCH 02/20] Remove CentralPane --- src/components/ScreenWrapper.tsx | 4 +-- src/hooks/useActiveRoute.ts | 4 +-- .../Navigation/AppNavigator/AuthScreens.tsx | 22 ++++++++---- .../Navigators/ActiveRouteContext.ts | 4 +-- .../BaseCentralPaneNavigator.tsx | 16 ++------- .../AppNavigator/ReportScreenWrapper.tsx | 4 +-- .../linkingConfig/getAdaptedStateFromPath.ts | 35 +++++++------------ .../getMatchingCentralPaneRouteForState.ts | 8 ++--- src/libs/Navigation/types.ts | 4 --- src/pages/Search/SearchPage.tsx | 4 +-- src/pages/home/ReportScreen.tsx | 4 +-- src/pages/home/report/ReportActionsList.tsx | 4 +-- src/pages/home/report/ReportActionsView.tsx | 4 +-- .../home/report/UserTypingEventListener.tsx | 4 +-- src/pages/workspace/withPolicy.tsx | 10 ++---- tests/perf-test/ReportScreen.perf-test.tsx | 6 ++-- 16 files changed, 58 insertions(+), 79 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index e53823860ce..303b60c8734 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -14,7 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import type {CentralPaneNavigatorParamList, RootStackParamList} from '@libs/Navigation/types'; +import type {RootStackParamList} from '@libs/Navigation/types'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; import CustomDevMenu from './CustomDevMenu'; @@ -93,7 +93,7 @@ type ScreenWrapperProps = { * * This is required because transitionEnd event doesn't trigger in the testing environment. */ - navigation?: StackNavigationProp | StackNavigationProp; + navigation?: StackNavigationProp; /** Whether to show offline indicator on wide screens */ shouldShowOfflineIndicatorInWideScreen?: boolean; diff --git a/src/hooks/useActiveRoute.ts b/src/hooks/useActiveRoute.ts index afccc28f824..812e7c634ee 100644 --- a/src/hooks/useActiveRoute.ts +++ b/src/hooks/useActiveRoute.ts @@ -1,8 +1,8 @@ import {useContext} from 'react'; import ActiveRouteContext from '@libs/Navigation/AppNavigator/Navigators/ActiveRouteContext'; -import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types'; +import type {AuthScreensParamList, NavigationPartialRoute} from '@libs/Navigation/types'; -function useActiveRoute(): NavigationPartialRoute | undefined { +function useActiveRoute(): NavigationPartialRoute | undefined { return useContext(ActiveRouteContext); } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 656f75f23cb..b43d51ed129 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -19,6 +19,7 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as SessionUtils from '@libs/SessionUtils'; import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; +import SearchPage from '@pages/Search/SearchPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import SearchInputManager from '@pages/workspace/SearchInputManager'; import * as App from '@userActions/App'; @@ -49,6 +50,7 @@ import LeftModalNavigator from './Navigators/LeftModalNavigator'; import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator'; +import ReportScreenWrapper from './ReportScreenWrapper'; type AuthScreensProps = { /** Session of currently logged in user */ @@ -157,6 +159,9 @@ const modalScreenListeners = { }, }; +const url = getCurrentUrl(); +const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; + function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -295,11 +300,6 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie options={screenOptions.bottomTab} component={BottomTabNavigator} /> - - {Object.entries(settingsScreens).map(([screenName, componentGetter]) => ( ))} + + diff --git a/src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts b/src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts index 6d0de3211e7..c319aeca3e0 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts +++ b/src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts @@ -1,6 +1,6 @@ import React from 'react'; -import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types'; +import type {AuthScreensParamList, NavigationPartialRoute} from '@libs/Navigation/types'; -const ActiveRouteContext = React.createContext | undefined>(undefined); +const ActiveRouteContext = React.createContext | undefined>(undefined); export default ActiveRouteContext; diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 0f273f0fa0e..f3fe22630e8 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -3,11 +3,11 @@ import React from 'react'; 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 type {AuthScreensParamList} from '@navigation/types'; import SearchPage from '@pages/Search/SearchPage'; import SCREENS from '@src/SCREENS'; -const Stack = createStackNavigator(); +const Stack = createStackNavigator(); const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; @@ -24,17 +24,7 @@ function BaseCentralPaneNavigator() { }; return ( - - + ); } diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx index 5d710afa69e..692bbf8edde 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx +++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx @@ -1,11 +1,11 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; -import type {CentralPaneNavigatorParamList} from '@navigation/types'; +import type {AuthScreensParamList} from '@navigation/types'; import ReportScreen from '@pages/home/ReportScreen'; import type SCREENS from '@src/SCREENS'; import ReportScreenIDSetter from './ReportScreenIDSetter'; -type ReportScreenWrapperProps = StackScreenProps; +type ReportScreenWrapperProps = StackScreenProps; function ReportScreenWrapper({route, navigation}: ReportScreenWrapperProps) { // The ReportScreen without the reportID set will display a skeleton diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 686b790cfb7..3c64611d37b 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -67,13 +67,6 @@ function createBottomTabNavigator(route: NavigationPartialRoute, }; } -function createCentralPaneNavigator(route: NavigationPartialRoute): NavigationPartialRoute { - return { - name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR, - state: getRoutesWithIndex([route]), - }; -} - function createFullScreenNavigator(route?: NavigationPartialRoute): NavigationPartialRoute { const routes = []; @@ -134,7 +127,7 @@ function getMatchingRootRouteForRHPRoute( if (centralPaneName === SCREENS.SEARCH.CENTRAL_PANE) { delete (params as Record)?.reportID; } - return createCentralPaneNavigator({name: centralPaneName as CentralPaneName, params}); + return {name: centralPaneName as CentralPaneName, params}; } } @@ -187,7 +180,7 @@ function getAdaptedState(state: PartialState metainfo.isCentralPaneAndBottomTabMandatory = false; metainfo.isFullScreenNavigatorMandatory = false; // If matchingRootRoute is undefined and it's a narrow layout, don't add a report screen under the RHP. - matchingRootRoute = matchingRootRoute ?? (!isNarrowLayout ? createCentralPaneNavigator({name: SCREENS.REPORT}) : undefined); + matchingRootRoute = matchingRootRoute ?? (!isNarrowLayout ? {name: SCREENS.REPORT} : undefined); } // If the root route is type of FullScreenNavigator, the default bottom tab will be added. @@ -196,7 +189,7 @@ function getAdaptedState(state: PartialState // When we open a screen in RHP from FullScreenNavigator, we need to add the appropriate screen in CentralPane. // Then, when we close FullScreenNavigator, we will be redirected to the correct page in CentralPane. if (matchingRootRoute?.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) { - routes.push(createCentralPaneNavigator({name: SCREENS.SETTINGS.WORKSPACES})); + routes.push({name: SCREENS.SETTINGS.WORKSPACES}); } if (matchingRootRoute && (!isNarrowLayout || !isRHPScreenOpenedFromLHN)) { @@ -229,11 +222,9 @@ function getAdaptedState(state: PartialState ), ); if (!isNarrowLayout) { - routes.push( - createCentralPaneNavigator({ - name: SCREENS.REPORT, - }), - ); + routes.push({ + name: SCREENS.REPORT, + }); } // Separate ifs are necessary for typescript to see that we are not pushing undefined to the array. @@ -274,11 +265,9 @@ function getAdaptedState(state: PartialState ), ); - routes.push( - createCentralPaneNavigator({ - name: SCREENS.SETTINGS.WORKSPACES, - }), - ); + routes.push({ + name: SCREENS.SETTINGS.WORKSPACES, + }); routes.push(fullScreenNavigator); @@ -312,7 +301,7 @@ function getAdaptedState(state: PartialState const matchingBottomTabRoute = getMatchingBottomTabRouteForState(state); routes.push(createBottomTabNavigator(matchingBottomTabRoute, policyID)); if (!isNarrowLayout) { - routes.push(createCentralPaneNavigator({name: SCREENS.REPORT, params: {reportID: reportAttachments.params?.reportID ?? ''}})); + routes.push({name: SCREENS.REPORT, params: {reportID: reportAttachments.params?.reportID ?? ''}}); } routes.push(reportAttachments); @@ -339,11 +328,11 @@ function getAdaptedState(state: PartialState const routes = [...state.routes]; const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state); if (matchingCentralPaneRoute) { - routes.push(createCentralPaneNavigator(matchingCentralPaneRoute)); + routes.push(matchingCentralPaneRoute); } else { // If there is no matching central pane, we want to add the default one. metainfo.isCentralPaneAndBottomTabMandatory = false; - routes.push(createCentralPaneNavigator({name: SCREENS.REPORT})); + routes.push({name: SCREENS.REPORT}); } return { diff --git a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts index 51cb9e3aa9a..2c5d39c9a0b 100644 --- a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts +++ b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts @@ -1,5 +1,5 @@ import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; -import type {CentralPaneName, CentralPaneNavigatorParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; +import type {CentralPaneName, AuthScreensParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import TAB_TO_CENTRAL_PANE_MAPPING from './TAB_TO_CENTRAL_PANE_MAPPING'; @@ -48,7 +48,7 @@ function hasRouteMatchingPolicyID(route: NavigationPartialRoute } // Get already opened settings screen within the policy -function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): keyof CentralPaneNavigatorParamList | undefined { +function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): keyof AuthScreensParamList | undefined { if (!rootState) { return undefined; } @@ -57,7 +57,7 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k // A screen from the navigation state can be pushed to the navigation state again only if it has a matching policyID with the currently selected workspace. // Otherwise, when we switch the workspace, we want to display the initial screen in the settings tab. const alreadyOpenedSettingsTab = rootState.routes - .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.params.screen as keyof CentralPaneNavigatorParamList)) + .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.params.screen as keyof AuthScreensParamList)) .at(-1); if (!hasRouteMatchingPolicyID(alreadyOpenedSettingsTab as NavigationPartialRoute, policyID)) { @@ -65,7 +65,7 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k } const settingsScreen = - alreadyOpenedSettingsTab?.params && 'screen' in alreadyOpenedSettingsTab.params ? (alreadyOpenedSettingsTab?.params?.screen as keyof CentralPaneNavigatorParamList) : undefined; + alreadyOpenedSettingsTab?.params && 'screen' in alreadyOpenedSettingsTab.params ? (alreadyOpenedSettingsTab?.params?.screen as keyof AuthScreensParamList) : undefined; return settingsScreen; } diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 01cb192cd98..13a60d6f58c 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -48,8 +48,6 @@ type NavigationPartialRoute = PartialRoute = NavigationState | PartialState>; -type CentralPaneNavigatorParamList = {}; - type BackToParams = { backTo?: Routes; }; @@ -845,7 +843,6 @@ type PublicScreensParamList = SharedScreensParamList & { }; type AuthScreensParamList = SharedScreensParamList & { - [NAVIGATORS.CENTRAL_PANE_NAVIGATOR]: NavigatorScreenParams; [SCREENS.CONCIERGE]: undefined; [SCREENS.REPORT_ATTACHMENTS]: { reportID: string; @@ -925,7 +922,6 @@ export type { BottomTabName, BottomTabNavigatorParamList, CentralPaneName, - CentralPaneNavigatorParamList, DetailsNavigatorParamList, EditRequestNavigatorParamList, EnablePaymentsNavigatorParamList, diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index bc36b7bd2d2..e1f32661859 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -9,14 +9,14 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; -import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {SearchQuery} from '@src/types/onyx/SearchResults'; import type IconAsset from '@src/types/utils/IconAsset'; -type SearchPageProps = StackScreenProps; +type SearchPageProps = StackScreenProps; function SearchPage({route}: SearchPageProps) { const {translate} = useLocalize(); diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 8620d8d4866..13f9be52819 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -37,7 +37,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import shouldFetchReport from '@libs/shouldFetchReport'; -import type {CentralPaneNavigatorParamList} from '@navigation/types'; +import type {AuthScreensParamList} from '@navigation/types'; import variables from '@styles/variables'; import * as ComposerActions from '@userActions/Composer'; import * as Report from '@userActions/Report'; @@ -92,7 +92,7 @@ type OnyxHOCProps = { markReadyForHydration?: () => void; }; -type ReportScreenNavigationProps = StackScreenProps; +type ReportScreenNavigationProps = StackScreenProps; type ReportScreenPropsWithoutParentReportAction = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxPropsWithoutParentReportAction & ReportScreenNavigationProps; diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index d8aed24e3b1..6f3383d8679 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -22,7 +22,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import Visibility from '@libs/Visibility'; -import type {CentralPaneNavigatorParamList} from '@navigation/types'; +import type {AuthScreensParamList} from '@navigation/types'; import variables from '@styles/variables'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; @@ -166,7 +166,7 @@ function ReportActionsList({ const {translate} = useLocalize(); const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); const {isOffline} = useNetwork(); - const route = useRoute>(); + const route = useRoute>(); const opacity = useSharedValue(0); const reportScrollManager = useReportScrollManager(); const userActiveSince = useRef(null); diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index d1e45f3998c..a6c89fb2f09 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -13,7 +13,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; import getIsReportFullyVisible from '@libs/getIsReportFullyVisible'; import Log from '@libs/Log'; -import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as NumberUtils from '@libs/NumberUtils'; import {generateNewRandomInt} from '@libs/NumberUtils'; import Performance from '@libs/Performance'; @@ -100,7 +100,7 @@ function ReportActionsView({ }: ReportActionsViewProps) { useCopySelectionHelper(); const reactionListRef = useContext(ReactionListContext); - const route = useRoute>(); + const route = useRoute>(); const reportActionID = route?.params?.reportActionID; const didLayout = useRef(false); const didLoadOlderChats = useRef(false); diff --git a/src/pages/home/report/UserTypingEventListener.tsx b/src/pages/home/report/UserTypingEventListener.tsx index 45e56cfe7ff..5b0f0236b76 100644 --- a/src/pages/home/report/UserTypingEventListener.tsx +++ b/src/pages/home/report/UserTypingEventListener.tsx @@ -4,7 +4,7 @@ import {useEffect, useRef} from 'react'; import {InteractionManager} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import Navigation from '@libs/Navigation/Navigation'; -import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; @@ -23,7 +23,7 @@ function UserTypingEventListener({report, lastVisitedPath}: UserTypingEventListe const didSubscribeToReportTypingEvents = useRef(false); const reportID = report.reportID; const isFocused = useIsFocused(); - const route = useRoute>(); + const route = useRoute>(); useEffect(() => { // Ensures any optimistic report that is being created (ex: a thread report) gets created and initialized successfully before subscribing if (route?.params?.reportID !== reportID) { diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index 23d19f45849..98f9376046e 100644 --- a/src/pages/workspace/withPolicy.tsx +++ b/src/pages/workspace/withPolicy.tsx @@ -6,20 +6,14 @@ import React, {forwardRef} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import {translatableTextPropTypes} from '@libs/Localize'; -import type { - BottomTabNavigatorParamList, - CentralPaneNavigatorParamList, - FullScreenNavigatorParamList, - ReimbursementAccountNavigatorParamList, - SettingsNavigatorParamList, -} from '@navigation/types'; +import type {AuthScreensParamList, BottomTabNavigatorParamList, FullScreenNavigatorParamList, ReimbursementAccountNavigatorParamList, SettingsNavigatorParamList} from '@navigation/types'; import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -type NavigatorsParamList = BottomTabNavigatorParamList & CentralPaneNavigatorParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList & FullScreenNavigatorParamList; +type NavigatorsParamList = BottomTabNavigatorParamList & AuthScreensParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList & FullScreenNavigatorParamList; type PolicyRoute = RouteProp< NavigatorsParamList, diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 379dc34489e..76a3e307081 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -7,7 +7,7 @@ import type Animated from 'react-native-reanimated'; import {measurePerformance} from 'reassure'; import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; import type Navigation from '@libs/Navigation/Navigation'; -import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; import ComposeProviders from '@src/components/ComposeProviders'; import DragAndDropProvider from '@src/components/DragAndDrop/Provider'; import {LocaleContextProvider} from '@src/components/LocaleContextProvider'; @@ -33,7 +33,7 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -type ReportScreenWrapperProps = StackScreenProps; +type ReportScreenWrapperProps = StackScreenProps; jest.mock('@src/libs/API', () => ({ write: jest.fn(), @@ -184,7 +184,7 @@ test('[ReportScreen] should render ReportScreen', () => { await screen.findByTestId('report-actions-list'); }; - const navigation = {addListener} as unknown as StackNavigationProp; + const navigation = {addListener} as unknown as StackNavigationProp; return waitForBatchedUpdates() .then(() => { From aa779dbb5de9a7568df708569ee36b360df38bc5 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 23 May 2024 16:13:14 +0200 Subject: [PATCH 03/20] Add adjustments for new nav structure --- .../Navigation/AppNavigator/AuthScreens.tsx | 56 ++++++++++--------- .../Navigators/BottomTabNavigator.tsx | 7 ++- .../Navigators/CENTRAL_PANE_SCREEN_NAMES.ts | 16 ++++++ .../Navigation/getTopmostCentralPaneRoute.ts | 18 ++---- src/libs/Navigation/getTopmostReportId.ts | 2 +- src/libs/Navigation/getTopmostRoute.ts | 12 ++++ src/libs/Navigation/linkTo.ts | 12 ++-- src/pages/settings/InitialSettingsPage.tsx | 4 +- 8 files changed, 77 insertions(+), 50 deletions(-) create mode 100644 src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts create mode 100644 src/libs/Navigation/getTopmostRoute.ts diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index b43d51ed129..323d48c3ca7 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -162,6 +162,35 @@ const modalScreenListeners = { const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; +type Screens = Partial React.ComponentType>>; + +const centralPaneScreens = { + [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, + [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, + [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, + [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, + [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, + [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, + [SCREENS.SEARCH.CENTRAL_PANE]: () => require('../../../pages/search/SearchPage').default as React.ComponentType, + [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType, +} satisfies Screens; + +type CentralPaneName = keyof typeof centralPaneScreens; + +const CENTRAL_PANE_SCREEN_NAMES = [ + SCREENS.SETTINGS.WORKSPACES, + SCREENS.SETTINGS.PREFERENCES.ROOT, + SCREENS.SETTINGS.SECURITY, + SCREENS.SETTINGS.PROFILE.ROOT, + SCREENS.SETTINGS.WALLET.ROOT, + SCREENS.SETTINGS.ABOUT, + SCREENS.SETTINGS.TROUBLESHOOT, + SCREENS.SETTINGS.SAVE_THE_WORLD, + SCREENS.REPORT, +]; + function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -278,19 +307,6 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - type Screens = Partial React.ComponentType>>; - - const settingsScreens = { - [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, - [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, - [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, - [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, - [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, - [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, - } satisfies Screens; - return ( @@ -421,24 +437,14 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie options={defaultScreenOptions} component={ConnectionCompletePage} /> - {Object.entries(settingsScreens).map(([screenName, componentGetter]) => ( + {Object.entries(centralPaneScreens).map(([screenName, componentGetter]) => ( ))} - - diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 6e1d154ff35..1cc51c26f31 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -2,8 +2,9 @@ import {useNavigationState} from '@react-navigation/native'; import type {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; -import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; -import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import getTopmostRoute from '@libs/Navigation/getTopmostRoute'; +import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName'; +import type {AuthScreensParamList, BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SidebarScreen from '@pages/home/sidebar/SidebarScreen'; import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab'; import SCREENS from '@src/SCREENS'; @@ -19,7 +20,7 @@ const screenOptions: StackNavigationOptions = { }; function BottomTabNavigator() { - const activeRoute = useNavigationState | undefined>(getTopmostCentralPaneRoute); + const activeRoute = useNavigationState | undefined>(getTopmostRoute); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts b/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts new file mode 100644 index 00000000000..8a073f62dca --- /dev/null +++ b/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts @@ -0,0 +1,16 @@ +import SCREENS from '@src/SCREENS'; + +const CENTRAL_PANE_SCREEN_NAMES = [ + SCREENS.SETTINGS.WORKSPACES, + SCREENS.SETTINGS.PREFERENCES.ROOT, + SCREENS.SETTINGS.SECURITY, + SCREENS.SETTINGS.PROFILE.ROOT, + SCREENS.SETTINGS.WALLET.ROOT, + SCREENS.SETTINGS.ABOUT, + SCREENS.SETTINGS.TROUBLESHOOT, + SCREENS.SETTINGS.SAVE_THE_WORLD, + SCREENS.REPORT, + SCREENS.SEARCH.CENTRAL_PANE, +]; + +export default CENTRAL_PANE_SCREEN_NAMES; diff --git a/src/libs/Navigation/getTopmostCentralPaneRoute.ts b/src/libs/Navigation/getTopmostCentralPaneRoute.ts index 934cca1a673..c9f2255d9f8 100644 --- a/src/libs/Navigation/getTopmostCentralPaneRoute.ts +++ b/src/libs/Navigation/getTopmostCentralPaneRoute.ts @@ -1,4 +1,5 @@ import NAVIGATORS from '@src/NAVIGATORS'; +import CENTRAL_PANE_SCREEN_NAMES from './AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES'; import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from './types'; // Get the name of topmost central pane route in the navigation stack. @@ -7,24 +8,13 @@ function getTopmostCentralPaneRoute(state: State): Navigatio return; } - const topmostCentralPane = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1); + const topmostCentralPane = state.routes.filter((route) => CENTRAL_PANE_SCREEN_NAMES.includes(route.name)).at(-1); if (!topmostCentralPane) { return; } - - if (!!topmostCentralPane.params && 'screen' in topmostCentralPane.params) { - return {name: topmostCentralPane.params.screen as CentralPaneName, params: topmostCentralPane.params.params}; - } - - if (!topmostCentralPane.state) { - return; - } - - // There will be at least one route in the central pane navigator. - const {name, params} = topmostCentralPane.state.routes.at(-1) as NavigationPartialRoute; - - return {name, params}; + console.log('topmostCentralPane', topmostCentralPane); + return topmostCentralPane; } export default getTopmostCentralPaneRoute; diff --git a/src/libs/Navigation/getTopmostReportId.ts b/src/libs/Navigation/getTopmostReportId.ts index aac8e765486..f31a6c89a34 100644 --- a/src/libs/Navigation/getTopmostReportId.ts +++ b/src/libs/Navigation/getTopmostReportId.ts @@ -21,7 +21,7 @@ function getTopmostReportId(state: NavigationState | NavigationState) { + if (!state) { + return; + } + + return state.routes.at(-1); +} + +export default getTopmostRoute; diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 72a1b1522cf..48fdd681eaa 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -11,6 +11,7 @@ import type {Route} from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import getActionsFromPartialDiff from './AppNavigator/getActionsFromPartialDiff'; import getPartialStateDiff from './AppNavigator/getPartialStateDiff'; +import CENTRAL_PANE_SCREEN_NAMES from './AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES'; import dismissModal from './dismissModal'; import getPolicyIDFromState from './getPolicyIDFromState'; import getStateFromPath from './getStateFromPath'; @@ -128,7 +129,7 @@ export default function linkTo(navigation: NavigationContainerRef; const stateFromPath = getStateFromPath(pathWithoutPolicyID) as PartialState>; @@ -157,26 +158,29 @@ export default function linkTo(navigation: NavigationContainerRef | undefined, (value) => value === undefined), omitBy(action.payload.params?.params as Record | undefined, (value) => value === undefined), ); + console.log('bools', isTargetScreenDifferentThanCurrent, areParamsDifferent); // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack if (type === CONST.NAVIGATION.TYPE.FORCED_UP) { action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE; // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack - } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && (isTargetScreenDifferentThanCurrent || areParamsDifferent)) { + } else if (CENTRAL_PANE_SCREEN_NAMES.includes(action.payload.name) && (isTargetScreenDifferentThanCurrent || areParamsDifferent)) { // We need to push a tab if the tab doesn't match the central pane route that we are going to push. const topmostBottomTabRoute = getTopmostBottomTabRoute(rootState); const matchingBottomTabRoute = getMatchingBottomTabRouteForState(stateFromPath, policyID); + const isNewPolicyID = (topmostBottomTabRoute?.params as Record)?.policyID !== (matchingBottomTabRoute?.params as Record)?.policyID; if (topmostBottomTabRoute && (topmostBottomTabRoute.name !== matchingBottomTabRoute.name || isNewPolicyID)) { + console.log('matchingBottomTabRoute', matchingBottomTabRoute); root.dispatch({ type: CONST.NAVIGATION.ACTION_TYPE.PUSH, payload: matchingBottomTabRoute, diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 2dfeb1841a7..76fe88700a4 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -326,9 +326,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa hoverAndPressStyle={styles.hoveredComponentBG} shouldBlockSelection={Boolean(item.link)} onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined} - focused={ - !!activeRoute?.name && !!item.routeName && !!(activeRoute?.name.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')) - } + focused={!!activeRoute && !!item.routeName && !!(activeRoute?.name?.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', ''))} isPaneMenu iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} From 87ccd3ed8288b49e8a240086e25e3a0179d28a67 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 24 May 2024 13:45:22 +0200 Subject: [PATCH 04/20] Add CENTRAL_PANE_SCREENS --- src/components/ScreenWrapper.tsx | 4 +- .../Navigation/AppNavigator/AuthScreens.tsx | 54 +++++++------------ .../AppNavigator/CENTRAL_PANE_SCREENS.ts | 25 +++++++++ .../Navigators/BottomTabNavigator.tsx | 8 +-- .../Navigators/CENTRAL_PANE_SCREEN_NAMES.ts | 16 ------ .../BaseCentralPaneNavigator.tsx | 32 ----------- .../CentralPaneNavigator/index.native.tsx | 13 ----- .../Navigators/CentralPaneNavigator/index.tsx | 10 ---- .../BottomTabBar.tsx | 3 +- .../CustomRouter.ts | 5 +- .../createCustomStackNavigator/index.tsx | 4 +- src/libs/Navigation/Navigation.ts | 3 +- src/libs/Navigation/dismissModalWithReport.ts | 3 +- .../Navigation/getTopmostCentralPaneRoute.ts | 14 ++--- .../Navigation/getTopmostReportActionID.ts | 6 +-- src/libs/Navigation/getTopmostReportId.ts | 6 +-- src/libs/Navigation/linkTo.ts | 9 +--- .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 4 +- .../TAB_TO_CENTRAL_PANE_MAPPING.ts | 17 +++--- .../linkingConfig/getAdaptedStateFromPath.ts | 16 +++--- .../getMatchingCentralPaneRouteForState.ts | 13 ++--- src/libs/Navigation/switchPolicyID.ts | 1 - src/libs/Navigation/types.ts | 3 -- src/libs/NavigationUtils.ts | 12 +++++ .../FloatingActionButtonAndPopover.tsx | 5 +- 25 files changed, 117 insertions(+), 169 deletions(-) create mode 100644 src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts delete mode 100644 src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts delete mode 100644 src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx delete mode 100644 src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.native.tsx delete mode 100644 src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.tsx create mode 100644 src/libs/NavigationUtils.ts diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 303b60c8734..6c58cd6b28e 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -14,7 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import type {RootStackParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; import CustomDevMenu from './CustomDevMenu'; @@ -93,7 +93,7 @@ type ScreenWrapperProps = { * * This is required because transitionEnd event doesn't trigger in the testing environment. */ - navigation?: StackNavigationProp; + navigation?: StackNavigationProp | StackNavigationProp; /** Whether to show offline indicator on wide screens */ shouldShowOfflineIndicatorInWideScreen?: boolean; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 323d48c3ca7..cf3803ea617 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -19,7 +19,6 @@ import PusherConnectionManager from '@libs/PusherConnectionManager'; import * as SessionUtils from '@libs/SessionUtils'; import ConnectionCompletePage from '@pages/ConnectionCompletePage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; -import SearchPage from '@pages/Search/SearchPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import SearchInputManager from '@pages/workspace/SearchInputManager'; import * as App from '@userActions/App'; @@ -39,18 +38,18 @@ import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; +import {CENTRAL_PANE_SCREENS} from './CENTRAL_PANE_SCREENS'; +import type {CentralPaneScreen} from './CENTRAL_PANE_SCREENS'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import BottomTabNavigator from './Navigators/BottomTabNavigator'; -import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; import FeatureTrainingModalNavigator from './Navigators/FeatureTrainingModalNavigator'; import FullScreenNavigator from './Navigators/FullScreenNavigator'; import LeftModalNavigator from './Navigators/LeftModalNavigator'; import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator'; -import ReportScreenWrapper from './ReportScreenWrapper'; type AuthScreensProps = { /** Session of currently logged in user */ @@ -162,35 +161,6 @@ const modalScreenListeners = { const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; -type Screens = Partial React.ComponentType>>; - -const centralPaneScreens = { - [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, - [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, - [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, - [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, - [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, - [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, - [SCREENS.SEARCH.CENTRAL_PANE]: () => require('../../../pages/search/SearchPage').default as React.ComponentType, - [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType, -} satisfies Screens; - -type CentralPaneName = keyof typeof centralPaneScreens; - -const CENTRAL_PANE_SCREEN_NAMES = [ - SCREENS.SETTINGS.WORKSPACES, - SCREENS.SETTINGS.PREFERENCES.ROOT, - SCREENS.SETTINGS.SECURITY, - SCREENS.SETTINGS.PROFILE.ROOT, - SCREENS.SETTINGS.WALLET.ROOT, - SCREENS.SETTINGS.ABOUT, - SCREENS.SETTINGS.TROUBLESHOOT, - SCREENS.SETTINGS.SAVE_THE_WORLD, - SCREENS.REPORT, -]; - function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -307,10 +277,23 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const centralPaneScreenOptions = { + headerShown: false, + title: 'New Expensify', + + // Prevent unnecessary scrolling + cardStyle: styles.cardStyleNavigator, + }; + + // @TODO: Check whether CENTRAL_PANE_SCREENS should be wrapped by FreezeWrapper on native platforms + return ( - + - {Object.entries(centralPaneScreens).map(([screenName, componentGetter]) => ( + {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => ( ))} diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts new file mode 100644 index 00000000000..2086ad04db4 --- /dev/null +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts @@ -0,0 +1,25 @@ +import type {AuthScreensParamList} from '@libs/Navigation/types'; +import SCREENS from '@src/SCREENS'; + +type Screens = Partial React.ComponentType>>; + +const CENTRAL_PANE_SCREENS = { + [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, + [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, + [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, + [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, + [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, + [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, + [SCREENS.SEARCH.CENTRAL_PANE]: () => require('../../../pages/Search/SearchPage').default as React.ComponentType, + [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType, +} satisfies Screens; + +const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS); + +type CentralPaneScreen = keyof typeof CENTRAL_PANE_SCREENS; + +export type {CentralPaneScreen}; + +export {CENTRAL_PANE_SCREENS, CENTRAL_PANE_SCREEN_NAMES}; diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 1cc51c26f31..dda0b32bc17 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -1,10 +1,10 @@ import {useNavigationState} from '@react-navigation/native'; import type {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; +import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; -import getTopmostRoute from '@libs/Navigation/getTopmostRoute'; -import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName'; -import type {AuthScreensParamList, BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; +import type {BottomTabNavigatorParamList, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SidebarScreen from '@pages/home/sidebar/SidebarScreen'; import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab'; import SCREENS from '@src/SCREENS'; @@ -20,7 +20,7 @@ const screenOptions: StackNavigationOptions = { }; function BottomTabNavigator() { - const activeRoute = useNavigationState | undefined>(getTopmostRoute); + const activeRoute = useNavigationState | undefined>(getTopmostCentralPaneRoute); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts b/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts deleted file mode 100644 index 8a073f62dca..00000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES.ts +++ /dev/null @@ -1,16 +0,0 @@ -import SCREENS from '@src/SCREENS'; - -const CENTRAL_PANE_SCREEN_NAMES = [ - SCREENS.SETTINGS.WORKSPACES, - SCREENS.SETTINGS.PREFERENCES.ROOT, - SCREENS.SETTINGS.SECURITY, - SCREENS.SETTINGS.PROFILE.ROOT, - SCREENS.SETTINGS.WALLET.ROOT, - SCREENS.SETTINGS.ABOUT, - SCREENS.SETTINGS.TROUBLESHOOT, - SCREENS.SETTINGS.SAVE_THE_WORLD, - SCREENS.REPORT, - SCREENS.SEARCH.CENTRAL_PANE, -]; - -export default CENTRAL_PANE_SCREEN_NAMES; diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx deleted file mode 100644 index f3fe22630e8..00000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import {createStackNavigator} from '@react-navigation/stack'; -import React from 'react'; -import useThemeStyles from '@hooks/useThemeStyles'; -import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper'; -import getCurrentUrl from '@libs/Navigation/currentUrl'; -import type {AuthScreensParamList} from '@navigation/types'; -import SearchPage from '@pages/Search/SearchPage'; -import SCREENS from '@src/SCREENS'; - -const Stack = createStackNavigator(); - -const url = getCurrentUrl(); -const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; - - -function BaseCentralPaneNavigator() { - const styles = useThemeStyles(); - const options = { - headerShown: false, - title: 'New Expensify', - - // Prevent unnecessary scrolling - cardStyle: styles.cardStyleNavigator, - }; - return ( - - - - ); -} - -export default BaseCentralPaneNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.native.tsx deleted file mode 100644 index 45ab2f07071..00000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.native.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; -import BaseCentralPaneNavigator from './BaseCentralPaneNavigator'; - -function CentralPaneNavigator() { - return ( - - - - ); -} - -export default CentralPaneNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.tsx deleted file mode 100644 index 711dd468c77..00000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import BaseCentralPaneNavigator from './BaseCentralPaneNavigator'; - -// We don't need to use freeze wraper on web because we don't render all report routes anyway. -// You can see this optimalization in the customStackNavigator. -function CentralPaneNavigator() { - return ; -} - -export default CentralPaneNavigator; diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index 7f26177eeb0..302eec246f2 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -16,6 +16,7 @@ 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 isCentralPaneScreen from '@libs/NavigationUtils'; import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils'; import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar'; import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton'; @@ -46,7 +47,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps const currentRoute = routes?.[navigationState?.index ?? 0]; // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method. // To prevent this, the value of the bottomTabRoute?.name is checked here - if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && currentRoute.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) || Session.isAnonymousUser()) { + if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneScreen(currentRoute.name)) || Session.isAnonymousUser()) { return; } diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 50480302699..51ec1651ce7 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -7,6 +7,7 @@ import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRo import linkingConfig from '@libs/Navigation/linkingConfig'; import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath'; import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import type {ResponsiveStackNavigatorRouterOptions} from './types'; @@ -66,8 +67,8 @@ function compareAndAdaptState(state: StackNavigationState) { return; } - const topmostCentralPaneRoute = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1); - const templateCentralPaneRoute = templateState.routes.find((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + const topmostCentralPaneRoute = state.routes.filter((route) => isCentralPaneScreen(route.name)).at(-1); + const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneScreen(route.name)); const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state); const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State); diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 29b9b1072d3..f19fadcc654 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -9,7 +9,7 @@ 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 isCentralPaneScreen from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import CustomRouter from './CustomRouter'; import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types'; @@ -21,7 +21,7 @@ function reduceCentralPaneRoutes(routes: Routes): Routes { const reverseRoutes = [...routes].reverse(); reverseRoutes.forEach((route) => { - if (route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR) { + if (isCentralPaneScreen(route.name)) { // Remove all central pane routes except the last 3. This will improve performance. if (count < 3) { result.push(route); diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 6f5e86f057d..1b8511ba127 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -2,6 +2,7 @@ import {findFocusedRoute} from '@react-navigation/core'; import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native'; import Log from '@libs/Log'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import * as ReportUtils from '@libs/ReportUtils'; import {getReport} from '@libs/ReportUtils'; import CONST from '@src/CONST'; @@ -220,7 +221,7 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT return; } - const isCentralPaneFocused = findFocusedRoute(navigationRef.current.getState())?.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR; + const isCentralPaneFocused = isCentralPaneScreen(findFocusedRoute(navigationRef.current.getState())?.name); const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute ?? ''); // Allow CentralPane to use UP with fallback route if the path is not found in root navigator. diff --git a/src/libs/Navigation/dismissModalWithReport.ts b/src/libs/Navigation/dismissModalWithReport.ts index c0405c2c9da..a0e11806ea6 100644 --- a/src/libs/Navigation/dismissModalWithReport.ts +++ b/src/libs/Navigation/dismissModalWithReport.ts @@ -3,6 +3,7 @@ import type {NavigationContainerRef} from '@react-navigation/native'; import {StackActions} from '@react-navigation/native'; import {findLastIndex} from 'lodash'; import Log from '@libs/Log'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils'; import {doesReportBelongToWorkspace} from '@libs/ReportUtils'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -64,7 +65,7 @@ function dismissModalWithReport(targetReport: Report | EmptyObject, navigationRe // If not-found page is in the route stack, we need to close it } else if (state.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { const lastRouteIndex = state.routes.length - 1; - const centralRouteIndex = findLastIndex(state.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + const centralRouteIndex = findLastIndex(state.routes, (route) => isCentralPaneScreen(route.name)); navigationRef.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: state.key}); } else { navigationRef.dispatch({...StackActions.pop(), target: state.key}); diff --git a/src/libs/Navigation/getTopmostCentralPaneRoute.ts b/src/libs/Navigation/getTopmostCentralPaneRoute.ts index c9f2255d9f8..5770d08741a 100644 --- a/src/libs/Navigation/getTopmostCentralPaneRoute.ts +++ b/src/libs/Navigation/getTopmostCentralPaneRoute.ts @@ -1,20 +1,20 @@ -import NAVIGATORS from '@src/NAVIGATORS'; -import CENTRAL_PANE_SCREEN_NAMES from './AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES'; -import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from './types'; +import isCentralPaneScreen from '@libs/NavigationUtils'; +import type {CentralPaneScreen} from './AppNavigator/CENTRAL_PANE_SCREENS'; +import type {NavigationPartialRoute, RootStackParamList, State} from './types'; // Get the name of topmost central pane route in the navigation stack. -function getTopmostCentralPaneRoute(state: State): NavigationPartialRoute | undefined { +function getTopmostCentralPaneRoute(state: State): NavigationPartialRoute | undefined { if (!state) { return; } - const topmostCentralPane = state.routes.filter((route) => CENTRAL_PANE_SCREEN_NAMES.includes(route.name)).at(-1); + const topmostCentralPane = state.routes.filter((route) => isCentralPaneScreen(route.name)).at(-1); if (!topmostCentralPane) { return; } - console.log('topmostCentralPane', topmostCentralPane); - return topmostCentralPane; + + return topmostCentralPane as NavigationPartialRoute; } export default getTopmostCentralPaneRoute; diff --git a/src/libs/Navigation/getTopmostReportActionID.ts b/src/libs/Navigation/getTopmostReportActionID.ts index a1527a5f36b..55fea8073c3 100644 --- a/src/libs/Navigation/getTopmostReportActionID.ts +++ b/src/libs/Navigation/getTopmostReportActionID.ts @@ -1,5 +1,5 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; -import NAVIGATORS from '@src/NAVIGATORS'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import type {RootStackParamList} from './types'; @@ -16,12 +16,12 @@ function getTopmostReportActionID(state: NavigationState | NavigationState route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1); + const topmostCentralPane = state.routes.filter((route) => isCentralPaneScreen(route.name)).at(-1); if (!topmostCentralPane) { return; } - const directReportParams = topmostCentralPane.params && 'params' in topmostCentralPane.params && topmostCentralPane?.params?.params; + const directReportParams = topmostCentralPane.params; const directReportActionIDParam = directReportParams && 'reportActionID' in directReportParams && directReportParams?.reportActionID; if (!topmostCentralPane.state && !directReportActionIDParam) { diff --git a/src/libs/Navigation/getTopmostReportId.ts b/src/libs/Navigation/getTopmostReportId.ts index f31a6c89a34..08ca3b9b319 100644 --- a/src/libs/Navigation/getTopmostReportId.ts +++ b/src/libs/Navigation/getTopmostReportId.ts @@ -1,5 +1,5 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; -import NAVIGATORS from '@src/NAVIGATORS'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import type {RootStackParamList} from './types'; @@ -16,12 +16,12 @@ function getTopmostReportId(state: NavigationState | NavigationState route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1); + const topmostCentralPane = state.routes?.filter((route) => isCentralPaneScreen(route.name)).at(-1); if (!topmostCentralPane) { return; } - const directReportParams = topmostCentralPane.params + const directReportParams = topmostCentralPane.params; const directReportIdParam = directReportParams && 'reportID' in directReportParams && directReportParams?.reportID; if (!topmostCentralPane.state && !directReportIdParam) { diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 48fdd681eaa..23742e52af1 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -3,6 +3,7 @@ import type {NavigationAction, NavigationContainerRef, NavigationState, PartialS import {omitBy} from 'lodash'; import type {Writable} from 'type-fest'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import shallowCompare from '@libs/ObjectUtils'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import CONST from '@src/CONST'; @@ -11,7 +12,6 @@ import type {Route} from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import getActionsFromPartialDiff from './AppNavigator/getActionsFromPartialDiff'; import getPartialStateDiff from './AppNavigator/getPartialStateDiff'; -import CENTRAL_PANE_SCREEN_NAMES from './AppNavigator/Navigators/CENTRAL_PANE_SCREEN_NAMES'; import dismissModal from './dismissModal'; import getPolicyIDFromState from './getPolicyIDFromState'; import getStateFromPath from './getStateFromPath'; @@ -133,7 +133,6 @@ export default function linkTo(navigation: NavigationContainerRef; const stateFromPath = getStateFromPath(pathWithoutPolicyID) as PartialState>; - console.log('stateFromPath', stateFromPath); // Creating path with /w/ included if necessary. const extractedPolicyID = extractPolicyIDFromPath(`/${path}`); const policyIDFromState = getPolicyIDFromState(rootState); @@ -151,7 +150,6 @@ export default function linkTo(navigation: NavigationContainerRef | undefined, (value) => value === undefined), omitBy(action.payload.params?.params as Record | undefined, (value) => value === undefined), ); - console.log('bools', isTargetScreenDifferentThanCurrent, areParamsDifferent); // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack if (type === CONST.NAVIGATION.TYPE.FORCED_UP) { action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE; // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack - } else if (CENTRAL_PANE_SCREEN_NAMES.includes(action.payload.name) && (isTargetScreenDifferentThanCurrent || areParamsDifferent)) { + } else if (isCentralPaneScreen(action.payload.name) && (isTargetScreenDifferentThanCurrent || areParamsDifferent)) { // We need to push a tab if the tab doesn't match the central pane route that we are going to push. const topmostBottomTabRoute = getTopmostBottomTabRoute(rootState); const matchingBottomTabRoute = getMatchingBottomTabRouteForState(stateFromPath, policyID); @@ -180,7 +177,6 @@ export default function linkTo(navigation: NavigationContainerRef)?.policyID !== (matchingBottomTabRoute?.params as Record)?.policyID; if (topmostBottomTabRoute && (topmostBottomTabRoute.name !== matchingBottomTabRoute.name || isNewPolicyID)) { - console.log('matchingBottomTabRoute', matchingBottomTabRoute); root.dispatch({ type: CONST.NAVIGATION.ACTION_TYPE.PUSH, payload: matchingBottomTabRoute, @@ -233,7 +229,6 @@ export default function linkTo(navigation: NavigationContainerRef> = { +const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = { [SCREENS.SETTINGS.PROFILE.ROOT]: [ SCREENS.SETTINGS.PROFILE.DISPLAY_NAME, SCREENS.SETTINGS.PROFILE.CONTACT_METHODS, diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts index 9e40a3dc0d4..67f07e005f9 100755 --- a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -1,7 +1,8 @@ -import type {BottomTabName, CentralPaneName} from '@navigation/types'; +import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {BottomTabName} from '@navigation/types'; import SCREENS from '@src/SCREENS'; -const TAB_TO_CENTRAL_PANE_MAPPING: Record = { +const TAB_TO_CENTRAL_PANE_MAPPING: Record = { [SCREENS.HOME]: [SCREENS.REPORT], [SCREENS.SEARCH.BOTTOM_TAB]: [SCREENS.SEARCH.CENTRAL_PANE], [SCREENS.SETTINGS.ROOT]: [ @@ -16,17 +17,17 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record = { ], }; -const generateCentralPaneToTabMapping = (): Record => { - const mapping: Record = {} as Record; - for (const [tabName, centralPaneNames] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { - for (const centralPaneName of centralPaneNames) { - mapping[centralPaneName] = tabName as BottomTabName; +const generateCentralPaneToTabMapping = (): Record => { + const mapping: Record = {} as Record; + for (const [tabName, CentralPaneScreens] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { + for (const CentralPaneScreen of CentralPaneScreens) { + mapping[CentralPaneScreen] = tabName as BottomTabName; } } return mapping; }; -const CENTRAL_PANE_TO_TAB_MAPPING: Record = generateCentralPaneToTabMapping(); +const CENTRAL_PANE_TO_TAB_MAPPING: Record = generateCentralPaneToTabMapping(); export {CENTRAL_PANE_TO_TAB_MAPPING}; export default TAB_TO_CENTRAL_PANE_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 3c64611d37b..4e7e1cb8166 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -2,8 +2,10 @@ import type {NavigationState, PartialState, Route} from '@react-navigation/nativ import {getStateFromPath} from '@react-navigation/native'; import {isAnonymousUser} from '@libs/actions/Session'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostNestedRHPRoute from '@libs/Navigation/getTopmostNestedRHPRoute'; -import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import type {BottomTabName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import isCentralPaneScreen from '@libs/NavigationUtils'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; @@ -90,9 +92,7 @@ function createFullScreenNavigator(route?: NavigationPartialRoute | undefined { +function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): NavigationPartialRoute | undefined { // Check for backTo param. One screen with different backTo value may need diferent screens visible under the overlay. if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') { const stateForBackTo = getStateFromPath(route.params.backTo, config); @@ -102,7 +102,7 @@ function getMatchingRootRouteForRHPRoute( const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find( // eslint-disable-next-line @typescript-eslint/no-shadow - (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR, + (route) => isCentralPaneScreen(route.name) || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR, ); // If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen. @@ -115,7 +115,7 @@ function getMatchingRootRouteForRHPRoute( // If we know that backTo targets the root route (central pane or full screen) we want to use it. if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) { - return centralPaneOrFullScreenNavigator as NavigationPartialRoute; + return centralPaneOrFullScreenNavigator as NavigationPartialRoute; } } } @@ -127,7 +127,7 @@ function getMatchingRootRouteForRHPRoute( if (centralPaneName === SCREENS.SEARCH.CENTRAL_PANE) { delete (params as Record)?.reportID; } - return {name: centralPaneName as CentralPaneName, params}; + return {name: centralPaneName as CentralPaneScreen, params}; } } @@ -148,7 +148,7 @@ function getAdaptedState(state: PartialState // We need to check what is defined to know what we need to add. const bottomTabNavigator = state.routes.find((route) => route.name === NAVIGATORS.BOTTOM_TAB_NAVIGATOR); - const centralPaneNavigator = state.routes.find((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + const centralPaneNavigator = state.routes.find((route) => isCentralPaneScreen(route.name)); const fullScreenNavigator = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); const rhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); const lhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR); diff --git a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts index 2c5d39c9a0b..422af09718d 100644 --- a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts +++ b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts @@ -1,5 +1,6 @@ +import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; -import type {CentralPaneName, AuthScreensParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; +import type {AuthScreensParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import TAB_TO_CENTRAL_PANE_MAPPING from './TAB_TO_CENTRAL_PANE_MAPPING'; @@ -32,7 +33,7 @@ const getTopMostReportIDFromRHP = (state: State): string => { }; // Check if the given route has a policyID equal to the id provided in the function params -function hasRouteMatchingPolicyID(route: NavigationPartialRoute, policyID?: string) { +function hasRouteMatchingPolicyID(route: NavigationPartialRoute, policyID?: string) { if (!route?.params) { return false; } @@ -57,10 +58,10 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k // A screen from the navigation state can be pushed to the navigation state again only if it has a matching policyID with the currently selected workspace. // Otherwise, when we switch the workspace, we want to display the initial screen in the settings tab. const alreadyOpenedSettingsTab = rootState.routes - .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.params.screen as keyof AuthScreensParamList)) + .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.name as CentralPaneScreen)) .at(-1); - if (!hasRouteMatchingPolicyID(alreadyOpenedSettingsTab as NavigationPartialRoute, policyID)) { + if (!hasRouteMatchingPolicyID(alreadyOpenedSettingsTab as NavigationPartialRoute, policyID)) { return undefined; } @@ -71,7 +72,7 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k } // Get matching central pane route for bottom tab navigator. e.g HOME -> REPORT -function getMatchingCentralPaneRouteForState(state: State, rootState?: State): NavigationPartialRoute | undefined { +function getMatchingCentralPaneRouteForState(state: State, rootState?: State): NavigationPartialRoute | undefined { const topmostBottomTabRoute = getTopmostBottomTabRoute(state); if (!topmostBottomTabRoute) { @@ -84,7 +85,7 @@ function getMatchingCentralPaneRouteForState(state: State, r // When we go back to the settings tab without switching the workspace id, we want to return to the previously opened screen const policyID = topmostBottomTabRoute?.params && 'policyID' in topmostBottomTabRoute.params ? (topmostBottomTabRoute.params.policyID as string) : undefined; const screen = getAlreadyOpenedSettingsScreen(rootState, policyID) ?? centralPaneName; - return {name: screen, params: topmostBottomTabRoute.params}; + return {name: screen as CentralPaneScreen, params: topmostBottomTabRoute.params}; } if (topmostBottomTabRoute.name === SCREENS.HOME) { diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts index a8aea0eee8f..b22509fa331 100644 --- a/src/libs/Navigation/switchPolicyID.ts +++ b/src/libs/Navigation/switchPolicyID.ts @@ -4,7 +4,6 @@ import {getPathFromState} from '@react-navigation/native'; import type {Writable} from 'type-fest'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; import CONST from '@src/CONST'; -import NAVIGATORS from '@src/NAVIGATORS'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 13a60d6f58c..4b2c42a08c1 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -905,8 +905,6 @@ type RootStackParamList = PublicScreensParamList & AuthScreensParamList & LeftMo type BottomTabName = keyof BottomTabNavigatorParamList; -type CentralPaneName = keyof AuthScreensParamList; - type FullScreenName = keyof FullScreenNavigatorParamList; type SwitchPolicyIDParams = { @@ -921,7 +919,6 @@ export type { BackToParams, BottomTabName, BottomTabNavigatorParamList, - CentralPaneName, DetailsNavigatorParamList, EditRequestNavigatorParamList, EnablePaymentsNavigatorParamList, diff --git a/src/libs/NavigationUtils.ts b/src/libs/NavigationUtils.ts new file mode 100644 index 00000000000..ea561f10b49 --- /dev/null +++ b/src/libs/NavigationUtils.ts @@ -0,0 +1,12 @@ +import type {CentralPaneScreen} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import {CENTRAL_PANE_SCREEN_NAMES} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; + +function isCentralPaneScreen(screen: string | undefined): screen is CentralPaneScreen { + if (!screen) { + return false; + } + + return CENTRAL_PANE_SCREEN_NAMES.includes(screen); +} + +export default isCentralPaneScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 76e756f6a7b..9bd33e41522 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -17,9 +17,10 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getIconForAction from '@libs/getIconForAction'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; +import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import Navigation from '@libs/Navigation/Navigation'; -import type {CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import type {NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as App from '@userActions/App'; @@ -41,7 +42,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; const useIsFocused = () => { const {isSmallScreenWidth} = useWindowDimensions(); const isFocused = useIsFocusedOriginal(); - const topmostCentralPane = useNavigationState | undefined>(getTopmostCentralPaneRoute); + const topmostCentralPane = useNavigationState | undefined>(getTopmostCentralPaneRoute); return isFocused || (topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE && isSmallScreenWidth); }; From a38192453770712cabc8201bb47a88ca6dada036 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 24 May 2024 13:51:06 +0200 Subject: [PATCH 05/20] Rename CentralPaneScreen to CentralPaneName --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 8 ++++---- .../AppNavigator/CENTRAL_PANE_SCREENS.ts | 4 ++-- .../Navigators/BottomTabNavigator.tsx | 4 ++-- .../BottomTabBar.tsx | 4 ++-- .../createCustomStackNavigator/CustomRouter.ts | 6 +++--- .../createCustomStackNavigator/index.tsx | 4 ++-- src/libs/Navigation/Navigation.ts | 4 ++-- src/libs/Navigation/dismissModalWithReport.ts | 4 ++-- .../Navigation/getTopmostCentralPaneRoute.ts | 10 +++++----- src/libs/Navigation/getTopmostReportActionID.ts | 4 ++-- src/libs/Navigation/getTopmostReportId.ts | 4 ++-- src/libs/Navigation/linkTo.ts | 4 ++-- .../linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts | 4 ++-- .../linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts | 16 ++++++++-------- .../linkingConfig/getAdaptedStateFromPath.ts | 14 +++++++------- .../getMatchingCentralPaneRouteForState.ts | 12 ++++++------ src/libs/NavigationUtils.ts | 6 +++--- .../FloatingActionButtonAndPopover.tsx | 4 ++-- 18 files changed, 58 insertions(+), 58 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index cf3803ea617..beb6fcd8d16 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -39,7 +39,7 @@ import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; import {CENTRAL_PANE_SCREENS} from './CENTRAL_PANE_SCREENS'; -import type {CentralPaneScreen} from './CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from './CENTRAL_PANE_SCREENS'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; @@ -277,7 +277,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const centralPaneScreenOptions = { + const CentralPaneNameOptions = { headerShown: false, title: 'New Expensify', @@ -423,10 +423,10 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => ( ))} diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts index 2086ad04db4..a418d6ba0a2 100644 --- a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts @@ -18,8 +18,8 @@ const CENTRAL_PANE_SCREENS = { const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS); -type CentralPaneScreen = keyof typeof CENTRAL_PANE_SCREENS; +type CentralPaneName = keyof typeof CENTRAL_PANE_SCREENS; -export type {CentralPaneScreen}; +export type {CentralPaneName}; export {CENTRAL_PANE_SCREENS, CENTRAL_PANE_SCREEN_NAMES}; diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index dda0b32bc17..4917be89c89 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -1,7 +1,7 @@ import {useNavigationState} from '@react-navigation/native'; import type {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; -import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import type {BottomTabNavigatorParamList, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; @@ -20,7 +20,7 @@ const screenOptions: StackNavigationOptions = { }; function BottomTabNavigator() { - const activeRoute = useNavigationState | undefined>(getTopmostCentralPaneRoute); + const activeRoute = useNavigationState | undefined>(getTopmostCentralPaneRoute); return ( diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index 302eec246f2..269ec65df98 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -16,7 +16,7 @@ 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 isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils'; import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar'; import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton'; @@ -47,7 +47,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps const currentRoute = routes?.[navigationState?.index ?? 0]; // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method. // To prevent this, the value of the bottomTabRoute?.name is checked here - if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneScreen(currentRoute.name)) || Session.isAnonymousUser()) { + if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) { return; } diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 51ec1651ce7..fa7e8a55d1f 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -7,7 +7,7 @@ import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRo import linkingConfig from '@libs/Navigation/linkingConfig'; import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath'; import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import type {ResponsiveStackNavigatorRouterOptions} from './types'; @@ -67,8 +67,8 @@ function compareAndAdaptState(state: StackNavigationState) { return; } - const topmostCentralPaneRoute = state.routes.filter((route) => isCentralPaneScreen(route.name)).at(-1); - const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneScreen(route.name)); + const topmostCentralPaneRoute = state.routes.filter((route) => isCentralPaneName(route.name)).at(-1); + const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneName(route.name)); const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state); const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State); diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index f19fadcc654..41794fd2e24 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -9,7 +9,7 @@ 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 isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import CustomRouter from './CustomRouter'; import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types'; @@ -21,7 +21,7 @@ function reduceCentralPaneRoutes(routes: Routes): Routes { const reverseRoutes = [...routes].reverse(); reverseRoutes.forEach((route) => { - if (isCentralPaneScreen(route.name)) { + if (isCentralPaneName(route.name)) { // Remove all central pane routes except the last 3. This will improve performance. if (count < 3) { result.push(route); diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 1b8511ba127..c8b08a48ac6 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -2,7 +2,7 @@ import {findFocusedRoute} from '@react-navigation/core'; import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native'; import Log from '@libs/Log'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import * as ReportUtils from '@libs/ReportUtils'; import {getReport} from '@libs/ReportUtils'; import CONST from '@src/CONST'; @@ -221,7 +221,7 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT return; } - const isCentralPaneFocused = isCentralPaneScreen(findFocusedRoute(navigationRef.current.getState())?.name); + const isCentralPaneFocused = isCentralPaneName(findFocusedRoute(navigationRef.current.getState())?.name); const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute ?? ''); // Allow CentralPane to use UP with fallback route if the path is not found in root navigator. diff --git a/src/libs/Navigation/dismissModalWithReport.ts b/src/libs/Navigation/dismissModalWithReport.ts index a0e11806ea6..73a6f97b539 100644 --- a/src/libs/Navigation/dismissModalWithReport.ts +++ b/src/libs/Navigation/dismissModalWithReport.ts @@ -3,7 +3,7 @@ import type {NavigationContainerRef} from '@react-navigation/native'; import {StackActions} from '@react-navigation/native'; import {findLastIndex} from 'lodash'; import Log from '@libs/Log'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils'; import {doesReportBelongToWorkspace} from '@libs/ReportUtils'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -65,7 +65,7 @@ function dismissModalWithReport(targetReport: Report | EmptyObject, navigationRe // If not-found page is in the route stack, we need to close it } else if (state.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { const lastRouteIndex = state.routes.length - 1; - const centralRouteIndex = findLastIndex(state.routes, (route) => isCentralPaneScreen(route.name)); + const centralRouteIndex = findLastIndex(state.routes, (route) => isCentralPaneName(route.name)); navigationRef.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: state.key}); } else { navigationRef.dispatch({...StackActions.pop(), target: state.key}); diff --git a/src/libs/Navigation/getTopmostCentralPaneRoute.ts b/src/libs/Navigation/getTopmostCentralPaneRoute.ts index 5770d08741a..485a0c0fb0f 100644 --- a/src/libs/Navigation/getTopmostCentralPaneRoute.ts +++ b/src/libs/Navigation/getTopmostCentralPaneRoute.ts @@ -1,20 +1,20 @@ -import isCentralPaneScreen from '@libs/NavigationUtils'; -import type {CentralPaneScreen} from './AppNavigator/CENTRAL_PANE_SCREENS'; +import isCentralPaneName from '@libs/NavigationUtils'; +import type {CentralPaneName} from './AppNavigator/CENTRAL_PANE_SCREENS'; import type {NavigationPartialRoute, RootStackParamList, State} from './types'; // Get the name of topmost central pane route in the navigation stack. -function getTopmostCentralPaneRoute(state: State): NavigationPartialRoute | undefined { +function getTopmostCentralPaneRoute(state: State): NavigationPartialRoute | undefined { if (!state) { return; } - const topmostCentralPane = state.routes.filter((route) => isCentralPaneScreen(route.name)).at(-1); + const topmostCentralPane = state.routes.filter((route) => isCentralPaneName(route.name)).at(-1); if (!topmostCentralPane) { return; } - return topmostCentralPane as NavigationPartialRoute; + return topmostCentralPane as NavigationPartialRoute; } export default getTopmostCentralPaneRoute; diff --git a/src/libs/Navigation/getTopmostReportActionID.ts b/src/libs/Navigation/getTopmostReportActionID.ts index 55fea8073c3..ade982c87b7 100644 --- a/src/libs/Navigation/getTopmostReportActionID.ts +++ b/src/libs/Navigation/getTopmostReportActionID.ts @@ -1,5 +1,5 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import type {RootStackParamList} from './types'; @@ -16,7 +16,7 @@ function getTopmostReportActionID(state: NavigationState | NavigationState isCentralPaneScreen(route.name)).at(-1); + const topmostCentralPane = state.routes.filter((route) => isCentralPaneName(route.name)).at(-1); if (!topmostCentralPane) { return; } diff --git a/src/libs/Navigation/getTopmostReportId.ts b/src/libs/Navigation/getTopmostReportId.ts index 08ca3b9b319..19bf24f1ba7 100644 --- a/src/libs/Navigation/getTopmostReportId.ts +++ b/src/libs/Navigation/getTopmostReportId.ts @@ -1,5 +1,5 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import SCREENS from '@src/SCREENS'; import type {RootStackParamList} from './types'; @@ -16,7 +16,7 @@ function getTopmostReportId(state: NavigationState | NavigationState isCentralPaneScreen(route.name)).at(-1); + const topmostCentralPane = state.routes?.filter((route) => isCentralPaneName(route.name)).at(-1); if (!topmostCentralPane) { return; } diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 23742e52af1..8ea2d256cb3 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -3,7 +3,7 @@ import type {NavigationAction, NavigationContainerRef, NavigationState, PartialS import {omitBy} from 'lodash'; import type {Writable} from 'type-fest'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import shallowCompare from '@libs/ObjectUtils'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import CONST from '@src/CONST'; @@ -169,7 +169,7 @@ export default function linkTo(navigation: NavigationContainerRef> = { +const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = { [SCREENS.SETTINGS.PROFILE.ROOT]: [ SCREENS.SETTINGS.PROFILE.DISPLAY_NAME, SCREENS.SETTINGS.PROFILE.CONTACT_METHODS, diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts index 67f07e005f9..91a92890930 100755 --- a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -1,8 +1,8 @@ -import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import type {BottomTabName} from '@navigation/types'; import SCREENS from '@src/SCREENS'; -const TAB_TO_CENTRAL_PANE_MAPPING: Record = { +const TAB_TO_CENTRAL_PANE_MAPPING: Record = { [SCREENS.HOME]: [SCREENS.REPORT], [SCREENS.SEARCH.BOTTOM_TAB]: [SCREENS.SEARCH.CENTRAL_PANE], [SCREENS.SETTINGS.ROOT]: [ @@ -17,17 +17,17 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record = ], }; -const generateCentralPaneToTabMapping = (): Record => { - const mapping: Record = {} as Record; - for (const [tabName, CentralPaneScreens] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { - for (const CentralPaneScreen of CentralPaneScreens) { - mapping[CentralPaneScreen] = tabName as BottomTabName; +const generateCentralPaneToTabMapping = (): Record => { + const mapping: Record = {} as Record; + for (const [tabName, CentralPaneNames] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { + for (const CentralPaneName of CentralPaneNames) { + mapping[CentralPaneName] = tabName as BottomTabName; } } return mapping; }; -const CENTRAL_PANE_TO_TAB_MAPPING: Record = generateCentralPaneToTabMapping(); +const CENTRAL_PANE_TO_TAB_MAPPING: Record = generateCentralPaneToTabMapping(); export {CENTRAL_PANE_TO_TAB_MAPPING}; export default TAB_TO_CENTRAL_PANE_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 4e7e1cb8166..3797f0f2998 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -2,10 +2,10 @@ import type {NavigationState, PartialState, Route} from '@react-navigation/nativ import {getStateFromPath} from '@react-navigation/native'; import {isAnonymousUser} from '@libs/actions/Session'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; -import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostNestedRHPRoute from '@libs/Navigation/getTopmostNestedRHPRoute'; import type {BottomTabName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; -import isCentralPaneScreen from '@libs/NavigationUtils'; +import isCentralPaneName from '@libs/NavigationUtils'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; @@ -92,7 +92,7 @@ function createFullScreenNavigator(route?: NavigationPartialRoute | undefined { +function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): NavigationPartialRoute | undefined { // Check for backTo param. One screen with different backTo value may need diferent screens visible under the overlay. if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') { const stateForBackTo = getStateFromPath(route.params.backTo, config); @@ -102,7 +102,7 @@ function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): Navigat const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find( // eslint-disable-next-line @typescript-eslint/no-shadow - (route) => isCentralPaneScreen(route.name) || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR, + (route) => isCentralPaneName(route.name) || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR, ); // If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen. @@ -115,7 +115,7 @@ function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): Navigat // If we know that backTo targets the root route (central pane or full screen) we want to use it. if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) { - return centralPaneOrFullScreenNavigator as NavigationPartialRoute; + return centralPaneOrFullScreenNavigator as NavigationPartialRoute; } } } @@ -127,7 +127,7 @@ function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): Navigat if (centralPaneName === SCREENS.SEARCH.CENTRAL_PANE) { delete (params as Record)?.reportID; } - return {name: centralPaneName as CentralPaneScreen, params}; + return {name: centralPaneName as CentralPaneName, params}; } } @@ -148,7 +148,7 @@ function getAdaptedState(state: PartialState // We need to check what is defined to know what we need to add. const bottomTabNavigator = state.routes.find((route) => route.name === NAVIGATORS.BOTTOM_TAB_NAVIGATOR); - const centralPaneNavigator = state.routes.find((route) => isCentralPaneScreen(route.name)); + const centralPaneNavigator = state.routes.find((route) => isCentralPaneName(route.name)); const fullScreenNavigator = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); const rhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); const lhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR); diff --git a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts index 422af09718d..cb8fa56afe5 100644 --- a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts +++ b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts @@ -1,4 +1,4 @@ -import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; import type {AuthScreensParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -33,7 +33,7 @@ const getTopMostReportIDFromRHP = (state: State): string => { }; // Check if the given route has a policyID equal to the id provided in the function params -function hasRouteMatchingPolicyID(route: NavigationPartialRoute, policyID?: string) { +function hasRouteMatchingPolicyID(route: NavigationPartialRoute, policyID?: string) { if (!route?.params) { return false; } @@ -58,10 +58,10 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k // A screen from the navigation state can be pushed to the navigation state again only if it has a matching policyID with the currently selected workspace. // Otherwise, when we switch the workspace, we want to display the initial screen in the settings tab. const alreadyOpenedSettingsTab = rootState.routes - .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.name as CentralPaneScreen)) + .filter((item) => item.params && 'screen' in item.params && TAB_TO_CENTRAL_PANE_MAPPING[SCREENS.SETTINGS.ROOT].includes(item.name as CentralPaneName)) .at(-1); - if (!hasRouteMatchingPolicyID(alreadyOpenedSettingsTab as NavigationPartialRoute, policyID)) { + if (!hasRouteMatchingPolicyID(alreadyOpenedSettingsTab as NavigationPartialRoute, policyID)) { return undefined; } @@ -72,7 +72,7 @@ function getAlreadyOpenedSettingsScreen(rootState?: State, policyID?: string): k } // Get matching central pane route for bottom tab navigator. e.g HOME -> REPORT -function getMatchingCentralPaneRouteForState(state: State, rootState?: State): NavigationPartialRoute | undefined { +function getMatchingCentralPaneRouteForState(state: State, rootState?: State): NavigationPartialRoute | undefined { const topmostBottomTabRoute = getTopmostBottomTabRoute(state); if (!topmostBottomTabRoute) { @@ -85,7 +85,7 @@ function getMatchingCentralPaneRouteForState(state: State, r // When we go back to the settings tab without switching the workspace id, we want to return to the previously opened screen const policyID = topmostBottomTabRoute?.params && 'policyID' in topmostBottomTabRoute.params ? (topmostBottomTabRoute.params.policyID as string) : undefined; const screen = getAlreadyOpenedSettingsScreen(rootState, policyID) ?? centralPaneName; - return {name: screen as CentralPaneScreen, params: topmostBottomTabRoute.params}; + return {name: screen as CentralPaneName, params: topmostBottomTabRoute.params}; } if (topmostBottomTabRoute.name === SCREENS.HOME) { diff --git a/src/libs/NavigationUtils.ts b/src/libs/NavigationUtils.ts index ea561f10b49..cf9efba3dd5 100644 --- a/src/libs/NavigationUtils.ts +++ b/src/libs/NavigationUtils.ts @@ -1,7 +1,7 @@ -import type {CentralPaneScreen} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import {CENTRAL_PANE_SCREEN_NAMES} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; -function isCentralPaneScreen(screen: string | undefined): screen is CentralPaneScreen { +function isCentralPaneName(screen: string | undefined): screen is CentralPaneName { if (!screen) { return false; } @@ -9,4 +9,4 @@ function isCentralPaneScreen(screen: string | undefined): screen is CentralPaneS return CENTRAL_PANE_SCREEN_NAMES.includes(screen); } -export default isCentralPaneScreen; +export default isCentralPaneName; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 9bd33e41522..5c64ff14d35 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -17,7 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getIconForAction from '@libs/getIconForAction'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; -import type {CentralPaneScreen} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import Navigation from '@libs/Navigation/Navigation'; import type {NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; @@ -42,7 +42,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; const useIsFocused = () => { const {isSmallScreenWidth} = useWindowDimensions(); const isFocused = useIsFocusedOriginal(); - const topmostCentralPane = useNavigationState | undefined>(getTopmostCentralPaneRoute); + const topmostCentralPane = useNavigationState | undefined>(getTopmostCentralPaneRoute); return isFocused || (topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE && isSmallScreenWidth); }; From da6c4fb3e7e7caa34a5d7adb8d79929972feb8ec Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 24 May 2024 14:29:35 +0200 Subject: [PATCH 06/20] Adjust switchPolicyID to new nav structure --- src/libs/Navigation/switchPolicyID.ts | 28 +++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts index b22509fa331..d3a09937d3a 100644 --- a/src/libs/Navigation/switchPolicyID.ts +++ b/src/libs/Navigation/switchPolicyID.ts @@ -3,6 +3,7 @@ import type {NavigationAction, NavigationContainerRef, NavigationState, PartialS import {getPathFromState} from '@react-navigation/native'; import type {Writable} from 'type-fest'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import isCentralPaneName from '@libs/NavigationUtils'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; @@ -31,25 +32,32 @@ function getActionForBottomTabNavigator(action: StackNavigationAction, state: Na return; } - const params = action.payload.params as ActionPayloadParams; - let payloadParams = params?.params as Record; - let screen = params.screen; + let name; + let params; + if (isCentralPaneName(action.payload.name)) { + name = action.payload.name; + params = action.payload.params; + } else { + const actionPayloadParams = action.payload.params as ActionPayloadParams; + name = actionPayloadParams.screen; + params = actionPayloadParams?.params as Record; + } - if (screen === SCREENS.SEARCH.CENTRAL_PANE) { - screen = SCREENS.SEARCH.BOTTOM_TAB; + if (name === SCREENS.SEARCH.CENTRAL_PANE) { + name = SCREENS.SEARCH.BOTTOM_TAB; } - if (!payloadParams) { - payloadParams = {policyID}; + if (!params) { + params = {policyID}; } else { - payloadParams.policyID = policyID; + params.policyID = policyID; } return { type: CONST.NAVIGATION.ACTION_TYPE.PUSH, payload: { - name: screen, - params: payloadParams, + name, + params, }, target: bottomTabNavigatorRoute.state.key, }; From 43d4ca028f4cd269d6130490dd7cb51103a1b856 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 24 May 2024 15:47:56 +0200 Subject: [PATCH 07/20] Remove getTopmostRoute --- src/libs/Navigation/getTopmostRoute.ts | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 src/libs/Navigation/getTopmostRoute.ts diff --git a/src/libs/Navigation/getTopmostRoute.ts b/src/libs/Navigation/getTopmostRoute.ts deleted file mode 100644 index 5d519d722b6..00000000000 --- a/src/libs/Navigation/getTopmostRoute.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {NavigationState, PartialState} from '@react-navigation/native'; - -// Get the name of topmost route in the navigation stack. -function getTopmostRoute(state: NavigationState | PartialState) { - if (!state) { - return; - } - - return state.routes.at(-1); -} - -export default getTopmostRoute; From 7eef0330bdcc31cb4e8f309f74689983df1497a1 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 28 May 2024 17:38:32 +0200 Subject: [PATCH 08/20] Add withPrepareCentralPaneScreen --- .../index.native.tsx | 23 +++++++++++++++++++ .../withPrepareCentralPaneScreen/index.tsx | 5 ++++ .../Navigation/AppNavigator/AuthScreens.tsx | 7 +++--- src/libs/Navigation/linkTo.ts | 1 - 4 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 src/components/withPrepareCentralPaneScreen/index.native.tsx create mode 100644 src/components/withPrepareCentralPaneScreen/index.tsx diff --git a/src/components/withPrepareCentralPaneScreen/index.native.tsx b/src/components/withPrepareCentralPaneScreen/index.native.tsx new file mode 100644 index 00000000000..0f90baf6a87 --- /dev/null +++ b/src/components/withPrepareCentralPaneScreen/index.native.tsx @@ -0,0 +1,23 @@ +import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import React from 'react'; +import getComponentDisplayName from '@libs/getComponentDisplayName'; +import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; + +export default function withPrepareCentralPaneScreen( + WrappedComponent: ComponentType>, +): (props: TProps & React.RefAttributes) => React.ReactElement | null { + function WithPrepareCentralPaneScreen(props: TProps, ref: ForwardedRef) { + return ( + + + + ); + } + + WithPrepareCentralPaneScreen.displayName = `WithPrepareCentralPaneScreen(${getComponentDisplayName(WrappedComponent)})`; + return React.forwardRef(WithPrepareCentralPaneScreen); +} diff --git a/src/components/withPrepareCentralPaneScreen/index.tsx b/src/components/withPrepareCentralPaneScreen/index.tsx new file mode 100644 index 00000000000..e8e0d60d8d9 --- /dev/null +++ b/src/components/withPrepareCentralPaneScreen/index.tsx @@ -0,0 +1,5 @@ +import type {ComponentType} from 'react'; + +export default function withPrepareCentralPaneScreen(WrappedComponent: ComponentType) { + return WrappedComponent; +} diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index beb6fcd8d16..e71fa8872fb 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {withOnyx} from 'react-native-onyx'; import OptionsListContextProvider from '@components/OptionListContextProvider'; +import withPrepareCentralPaneScreen from '@components/withPrepareCentralPaneScreen'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -38,8 +39,8 @@ import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; -import {CENTRAL_PANE_SCREENS} from './CENTRAL_PANE_SCREENS'; import type {CentralPaneName} from './CENTRAL_PANE_SCREENS'; +import {CENTRAL_PANE_SCREENS} from './CENTRAL_PANE_SCREENS'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; @@ -285,8 +286,6 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie cardStyle: styles.cardStyleNavigator, }; - // @TODO: Check whether CENTRAL_PANE_SCREENS should be wrapped by FreezeWrapper on native platforms - return ( @@ -425,7 +424,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie key={screenName} name={screenName as CentralPaneName} initialParams={{openOnAdminRoom: (screenName === SCREENS.REPORT && openOnAdminRoom === 'true') || undefined}} - getComponent={componentGetter} + getComponent={() => withPrepareCentralPaneScreen(componentGetter())} options={CentralPaneNameOptions} /> ))} diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 8ea2d256cb3..15941fd3111 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -129,7 +129,6 @@ export default function linkTo(navigation: NavigationContainerRef; const stateFromPath = getStateFromPath(pathWithoutPolicyID) as PartialState>; From eb2473d0abb14a1598631660c1be8b6d7c0b7786 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 3 Jun 2024 14:02:12 +0200 Subject: [PATCH 09/20] Add ts fixes --- src/ROUTES.ts | 4 ++-- src/components/Search.tsx | 4 ++-- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 +- src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 82acc26e310..1b7ecc09391 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest'; import type CONST from './CONST'; import type {IOUAction, IOUType} from './CONST'; import type {IOURequestType} from './libs/actions/IOU'; -import type {CentralPaneNavigatorParamList} from './libs/Navigation/types'; +import type {AuthScreensParamList} from './libs/Navigation/types'; import type {SearchQuery} from './types/onyx/SearchResults'; import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual'; @@ -37,7 +37,7 @@ const ROUTES = { SEARCH: { route: '/search/:query', - getRoute: (searchQuery: SearchQuery, queryParams?: CentralPaneNavigatorParamList['Search_Central_Pane']) => { + getRoute: (searchQuery: SearchQuery, queryParams?: AuthScreensParamList['Search_Central_Pane']) => { const {sortBy, sortOrder} = queryParams ?? {}; if (!sortBy && !sortOrder) { diff --git a/src/components/Search.tsx b/src/components/Search.tsx index fcb91537918..3a3cc92cb0e 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -11,7 +11,7 @@ import Log from '@libs/Log'; import * as SearchUtils from '@libs/SearchUtils'; import type {SearchColumnType, SortOrder} from '@libs/SearchUtils'; import Navigation from '@navigation/Navigation'; -import type {CentralPaneNavigatorParamList} from '@navigation/types'; +import type {AuthScreensParamList} from '@navigation/types'; import EmptySearchView from '@pages/Search/EmptySearchView'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -40,7 +40,7 @@ function isReportListItemType(item: TransactionListItemType | ReportListItemType function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) { const {isOffline} = useNetwork(); const styles = useThemeStyles(); - const navigation = useNavigation>(); + const navigation = useNavigation>(); const lastSearchResultsRef = useRef>(); const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder); diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 6d992f74dad..2771a2781c4 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -431,7 +431,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie getCentralPaneScreenInitialParams(screenName as CentralPaneName)} + initialParams={getCentralPaneScreenInitialParams(screenName as CentralPaneName)} getComponent={() => withPrepareCentralPaneScreen(componentGetter())} options={CentralPaneNameOptions} /> diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts index c67ddb1c6b9..edbdf534f5d 100644 --- a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts @@ -24,7 +24,7 @@ const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS); type CentralPaneName = keyof typeof CENTRAL_PANE_SCREENS; -const getCentralPaneScreenInitialParams = (screenName: CentralPaneName): Partial> => { +function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial> { const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; @@ -37,7 +37,7 @@ const getCentralPaneScreenInitialParams = (screenName: CentralPaneName): Partial } return undefined; -}; +} export type {CentralPaneName}; From e87c30a97c52396d375a773364d9bab44599b2ee Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 3 Jun 2024 15:03:40 +0200 Subject: [PATCH 10/20] AuthScreens and CENTRAL_PANE_SCREENS cleanup --- .../Navigation/AppNavigator/AuthScreens.tsx | 21 +++++++++++-------- .../AppNavigator/CENTRAL_PANE_SCREENS.ts | 8 +++---- src/pages/home/report/ReportActionsView.tsx | 1 - 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 2771a2781c4..2a5610d82c9 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -427,15 +427,18 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie options={defaultScreenOptions} component={ConnectionCompletePage} /> - {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => ( - withPrepareCentralPaneScreen(componentGetter())} - options={CentralPaneNameOptions} - /> - ))} + {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => { + const centralPaneName = screenName as CentralPaneName; + return ( + withPrepareCentralPaneScreen(componentGetter())} + options={CentralPaneNameOptions} + /> + ); + })} diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts index edbdf534f5d..2c92343e63e 100644 --- a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts @@ -1,10 +1,12 @@ import type {ValueOf} from 'type-fest'; import getCurrentUrl from '@libs/Navigation/currentUrl'; -import type {AuthScreensParamList, CentralPaneScreensParamList} from '@libs/Navigation/types'; +import type {CentralPaneScreensParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import SCREENS from '@src/SCREENS'; -type Screens = Partial React.ComponentType>>; +type CentralPaneName = keyof CentralPaneScreensParamList; + +type Screens = Partial React.ComponentType>>; const CENTRAL_PANE_SCREENS = { [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, @@ -22,8 +24,6 @@ const CENTRAL_PANE_SCREENS = { const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS); -type CentralPaneName = keyof typeof CENTRAL_PANE_SCREENS; - function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial> { const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index da9049f1309..d7a8f79f84e 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -12,7 +12,6 @@ import usePrevious from '@hooks/usePrevious'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; import getIsReportFullyVisible from '@libs/getIsReportFullyVisible'; -import Log from '@libs/Log'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as NumberUtils from '@libs/NumberUtils'; import {generateNewRandomInt} from '@libs/NumberUtils'; From c06c5dc403e816a811b055800ebb1eb3bb92c2d9 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 4 Jun 2024 13:28:46 +0200 Subject: [PATCH 11/20] Fix storybook tests --- .../Navigation/AppNavigator/AuthScreens.tsx | 21 ++++++++++++-- ...NE_SCREENS.ts => CENTRAL_PANE_SCREENS.tsx} | 28 ++----------------- .../Navigators/BottomTabNavigator.tsx | 3 +- .../Navigation/getTopmostCentralPaneRoute.ts | 3 +- .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 2 +- .../TAB_TO_CENTRAL_PANE_MAPPING.ts | 3 +- .../linkingConfig/getAdaptedStateFromPath.ts | 3 +- .../getMatchingCentralPaneRouteForState.ts | 3 +- src/libs/Navigation/types.ts | 3 ++ src/libs/NavigationUtils.ts | 20 +++++++++++-- .../FloatingActionButtonAndPopover.tsx | 3 +- 11 files changed, 47 insertions(+), 45 deletions(-) rename src/libs/Navigation/AppNavigator/{CENTRAL_PANE_SCREENS.ts => CENTRAL_PANE_SCREENS.tsx} (61%) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 2a5610d82c9..c86708d753f 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -2,6 +2,7 @@ import React, {memo, useEffect, useMemo, useRef} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {withOnyx} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import OptionsListContextProvider from '@components/OptionListContextProvider'; import withPrepareCentralPaneScreen from '@components/withPrepareCentralPaneScreen'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; @@ -15,7 +16,7 @@ import Log from '@libs/Log'; import getCurrentUrl from '@libs/Navigation/currentUrl'; import getOnboardingModalScreenOptions from '@libs/Navigation/getOnboardingModalScreenOptions'; import Navigation from '@libs/Navigation/Navigation'; -import type {AuthScreensParamList} from '@libs/Navigation/types'; +import type {AuthScreensParamList, CentralPaneName, CentralPaneScreensParamList} from '@libs/Navigation/types'; import NetworkConnection from '@libs/NetworkConnection'; import * as Pusher from '@libs/Pusher/pusher'; import PusherConnectionManager from '@libs/PusherConnectionManager'; @@ -41,8 +42,7 @@ import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; -import type {CentralPaneName} from './CENTRAL_PANE_SCREENS'; -import {CENTRAL_PANE_SCREENS, getCentralPaneScreenInitialParams} from './CENTRAL_PANE_SCREENS'; +import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS'; import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; @@ -75,6 +75,21 @@ const loadReportAvatar = () => require('../../../pages/ReportAvatar').default as const loadReceiptView = () => require('../../../pages/TransactionReceiptPage').default as React.ComponentType; const loadWorkspaceJoinUser = () => require('@pages/workspace/WorkspaceJoinUserPage').default as React.ComponentType; +function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial> { + const url = getCurrentUrl(); + const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; + + if (screenName === SCREENS.SEARCH.CENTRAL_PANE) { + return {sortBy: CONST.SEARCH_TABLE_COLUMNS.DATE, sortOrder: CONST.SORT_ORDER.DESC}; + } + + if (screenName === SCREENS.REPORT && openOnAdminRoom === 'true') { + return {openOnAdminRoom: true}; + } + + return undefined; +} + let timezone: Timezone | null; let currentAccountID = -1; let isLoadingApp = false; diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx similarity index 61% rename from src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts rename to src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx index 2c92343e63e..09811b4f18a 100644 --- a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx @@ -1,11 +1,6 @@ -import type {ValueOf} from 'type-fest'; -import getCurrentUrl from '@libs/Navigation/currentUrl'; -import type {CentralPaneScreensParamList} from '@libs/Navigation/types'; -import CONST from '@src/CONST'; +import type {CentralPaneName} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; -type CentralPaneName = keyof CentralPaneScreensParamList; - type Screens = Partial React.ComponentType>>; const CENTRAL_PANE_SCREENS = { @@ -22,23 +17,4 @@ const CENTRAL_PANE_SCREENS = { [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType, } satisfies Screens; -const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS); - -function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial> { - const url = getCurrentUrl(); - const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; - - if (screenName === SCREENS.SEARCH.CENTRAL_PANE) { - return {sortBy: CONST.SEARCH_TABLE_COLUMNS.DATE, sortOrder: CONST.SORT_ORDER.DESC}; - } - - if (screenName === SCREENS.REPORT && openOnAdminRoom === 'true') { - return {openOnAdminRoom: true}; - } - - return undefined; -} - -export type {CentralPaneName}; - -export {CENTRAL_PANE_SCREENS, CENTRAL_PANE_SCREEN_NAMES, getCentralPaneScreenInitialParams}; +export default CENTRAL_PANE_SCREENS; diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 4917be89c89..6e1d154ff35 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -1,10 +1,9 @@ import {useNavigationState} from '@react-navigation/native'; import type {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; -import type {BottomTabNavigatorParamList, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SidebarScreen from '@pages/home/sidebar/SidebarScreen'; import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab'; import SCREENS from '@src/SCREENS'; diff --git a/src/libs/Navigation/getTopmostCentralPaneRoute.ts b/src/libs/Navigation/getTopmostCentralPaneRoute.ts index 485a0c0fb0f..977f23cd3cd 100644 --- a/src/libs/Navigation/getTopmostCentralPaneRoute.ts +++ b/src/libs/Navigation/getTopmostCentralPaneRoute.ts @@ -1,6 +1,5 @@ import isCentralPaneName from '@libs/NavigationUtils'; -import type {CentralPaneName} from './AppNavigator/CENTRAL_PANE_SCREENS'; -import type {NavigationPartialRoute, RootStackParamList, State} from './types'; +import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from './types'; // Get the name of topmost central pane route in the navigation stack. function getTopmostCentralPaneRoute(state: State): NavigationPartialRoute | undefined { diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index f4802bbe161..4e77edeaa63 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -1,4 +1,4 @@ -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import type {CentralPaneName} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = { diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts index 8352a583852..a68959ae7d0 100755 --- a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -1,5 +1,4 @@ -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; -import type {BottomTabName} from '@navigation/types'; +import type {BottomTabName, CentralPaneName} from '@navigation/types'; import SCREENS from '@src/SCREENS'; const TAB_TO_CENTRAL_PANE_MAPPING: Record = { diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 4c55b8b5dfe..50a143c6857 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -2,8 +2,7 @@ import type {NavigationState, PartialState, Route} from '@react-navigation/nativ import {findFocusedRoute, getStateFromPath} from '@react-navigation/native'; import {isAnonymousUser} from '@libs/actions/Session'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; -import type {BottomTabName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import isCentralPaneName from '@libs/NavigationUtils'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import CONST from '@src/CONST'; diff --git a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts index cb8fa56afe5..0788f930985 100644 --- a/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts +++ b/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts @@ -1,6 +1,5 @@ -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute'; -import type {AuthScreensParamList, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; +import type {AuthScreensParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import TAB_TO_CENTRAL_PANE_MAPPING from './TAB_TO_CENTRAL_PANE_MAPPING'; diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 2f6be34a356..7a1e852d151 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -928,6 +928,8 @@ type BottomTabName = keyof BottomTabNavigatorParamList; type FullScreenName = keyof FullScreenNavigatorParamList; +type CentralPaneName = keyof CentralPaneScreensParamList; + type SwitchPolicyIDParams = { policyID?: string; route?: Routes; @@ -938,6 +940,7 @@ export type { AddPersonalBankAccountNavigatorParamList, AuthScreensParamList, CentralPaneScreensParamList, + CentralPaneName, BackToParams, BottomTabName, BottomTabNavigatorParamList, diff --git a/src/libs/NavigationUtils.ts b/src/libs/NavigationUtils.ts index cf9efba3dd5..f0442e4995d 100644 --- a/src/libs/NavigationUtils.ts +++ b/src/libs/NavigationUtils.ts @@ -1,12 +1,26 @@ -import type {CentralPaneName} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; -import {CENTRAL_PANE_SCREEN_NAMES} from './Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; +import SCREENS from '@src/SCREENS'; +import type {CentralPaneName} from './Navigation/types'; + +const CENTRAL_PANE_SCREEN_NAMES = [ + SCREENS.SETTINGS.WORKSPACES, + SCREENS.SETTINGS.PREFERENCES.ROOT, + SCREENS.SETTINGS.SECURITY, + SCREENS.SETTINGS.PROFILE.ROOT, + SCREENS.SETTINGS.WALLET.ROOT, + SCREENS.SETTINGS.ABOUT, + SCREENS.SETTINGS.TROUBLESHOOT, + SCREENS.SETTINGS.SAVE_THE_WORLD, + SCREENS.SETTINGS.SUBSCRIPTION.ROOT, + SCREENS.SEARCH.CENTRAL_PANE, + SCREENS.REPORT, +]; function isCentralPaneName(screen: string | undefined): screen is CentralPaneName { if (!screen) { return false; } - return CENTRAL_PANE_SCREEN_NAMES.includes(screen); + return CENTRAL_PANE_SCREEN_NAMES.includes(screen as CentralPaneName); } export default isCentralPaneName; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 9f255e45d2b..2e55405d3ca 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -17,10 +17,9 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getIconForAction from '@libs/getIconForAction'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; -import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import Navigation from '@libs/Navigation/Navigation'; -import type {NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; +import type {CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as App from '@userActions/App'; From 09ba2713897fc11e8a05f877344212b9bf498137 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 4 Jun 2024 14:08:57 +0200 Subject: [PATCH 12/20] Add docs for withPrepareCentralPaneScreen --- src/components/withPrepareCentralPaneScreen/index.native.tsx | 4 ++++ src/components/withPrepareCentralPaneScreen/index.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/withPrepareCentralPaneScreen/index.native.tsx b/src/components/withPrepareCentralPaneScreen/index.native.tsx index 0f90baf6a87..c7ace2aa82f 100644 --- a/src/components/withPrepareCentralPaneScreen/index.native.tsx +++ b/src/components/withPrepareCentralPaneScreen/index.native.tsx @@ -3,6 +3,10 @@ import React from 'react'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; +/** + * This HOC is dependent on platform. On native platforms screens that aren't already dipslayed in the navigation stack should be freezed to prevent from unnecessary rendering. + * It's handled this way only on mobile platforms, because on web more than one screen is displayed in a wide layout, so these screens shouldn't be freezed. + */ export default function withPrepareCentralPaneScreen( WrappedComponent: ComponentType>, ): (props: TProps & React.RefAttributes) => React.ReactElement | null { diff --git a/src/components/withPrepareCentralPaneScreen/index.tsx b/src/components/withPrepareCentralPaneScreen/index.tsx index e8e0d60d8d9..c0550188abc 100644 --- a/src/components/withPrepareCentralPaneScreen/index.tsx +++ b/src/components/withPrepareCentralPaneScreen/index.tsx @@ -1,5 +1,9 @@ import type {ComponentType} from 'react'; +/** + * This HOC is dependent on platform. On native platforms screens that aren't already dipslayed in the navigation stack should be freezed to prevent from unnecessary rendering. + * It's handled this way only on mobile platforms, because on web more than one screen is displayed in a wide layout, so these screens shouldn't be freezed. + */ export default function withPrepareCentralPaneScreen(WrappedComponent: ComponentType) { return WrappedComponent; } From 28c7a3f4960093ab8b3a2a56044bfc376f69aa6b Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 4 Jun 2024 14:09:31 +0200 Subject: [PATCH 13/20] Rename CentralPaneNameOptions --- src/libs/Navigation/AppNavigator/AuthScreens.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index c86708d753f..e84c9038bb5 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -301,7 +301,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const CentralPaneNameOptions = { + const CentralPaneScreenOptions = { headerShown: false, title: 'New Expensify', @@ -450,7 +450,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie name={centralPaneName} initialParams={getCentralPaneScreenInitialParams(centralPaneName)} getComponent={() => withPrepareCentralPaneScreen(componentGetter())} - options={CentralPaneNameOptions} + options={CentralPaneScreenOptions} /> ); })} From 99d552361af91c5f5fd78171c3b9ff0d9d1120fa Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 5 Jun 2024 17:52:27 +0200 Subject: [PATCH 14/20] fix tests --- tests/ui/UnreadIndicatorsTest.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index 0f13062b2e9..61f2e6a7e38 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -618,7 +618,9 @@ describe('Unread Indicators', () => { const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); const alternateText = screen.queryAllByLabelText(hintText); expect(alternateText).toHaveLength(1); - expect(screen.getByText('Current User Comment 1')).toBeOnTheScreen(); + + // This message is visible on the sidebar and the report screen, so there are two occurrences. + expect(screen.getAllByText('Current User Comment 1')[0]).toBeOnTheScreen(); if (lastReportAction) { Report.deleteReportComment(REPORT_ID, lastReportAction); From 19e05dd7368f68b949a39a4abb1f0f78792dc7fb Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 7 Jun 2024 13:59:14 +0200 Subject: [PATCH 15/20] fix types --- src/libs/SearchUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index a5d2ac1d9df..f8f25c69b81 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -8,7 +8,7 @@ import type * as OnyxTypes from '@src/types/onyx'; import type {SearchAccountDetails, SearchDataTypes, SearchPersonalDetails, SearchTransaction, SearchTypeToItemMap, SectionsType} from '@src/types/onyx/SearchResults'; import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute'; import navigationRef from './Navigation/navigationRef'; -import type {CentralPaneNavigatorParamList, RootStackParamList, State} from './Navigation/types'; +import type {AuthScreensParamList, RootStackParamList, State} from './Navigation/types'; import * as TransactionUtils from './TransactionUtils'; import * as UserUtils from './UserUtils'; @@ -227,7 +227,7 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear function getSearchParams() { const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State); - return topmostCentralPaneRoute?.params as CentralPaneNavigatorParamList['Search_Central_Pane']; + return topmostCentralPaneRoute?.params as AuthScreensParamList['Search_Central_Pane']; } export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams}; From be4d3493143b498189ebeaeafe639090d8592c3f Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 12 Jun 2024 08:05:10 +0200 Subject: [PATCH 16/20] Fix types for central pane screens --- .../BottomTabBar/index.website.tsx | 3 ++- .../Navigation/setupCustomAndroidBackHandler/index.android.ts | 4 ++-- src/pages/Search/SearchPageBottomTab.tsx | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx index 4fecfdcb0e3..eb478afbda2 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx @@ -17,6 +17,7 @@ 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 isCentralPaneName from '@libs/NavigationUtils'; import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils'; import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar'; import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton'; @@ -48,7 +49,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps const currentRoute = routes?.[navigationState?.index ?? 0]; // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method. // To prevent this, the value of the bottomTabRoute?.name is checked here - if (!!(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && currentRoute.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) || Session.isAnonymousUser()) { + if (!!(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) { return; } diff --git a/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts b/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts index ac272155289..4b33ae03b22 100644 --- a/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts +++ b/src/libs/Navigation/setupCustomAndroidBackHandler/index.android.ts @@ -41,7 +41,7 @@ function setupCustomAndroidBackHandler() { (!centralPaneRouteAfterPop || centralPaneRouteAfterPop.name !== SCREENS.SEARCH.CENTRAL_PANE) ) { const {policyID, ...restParams} = bottomTabRoutes[bottomTabRoutes.length - 2].params as SearchPageProps['route']['params']; - navigationRef.dispatch({...StackActions.push(NAVIGATORS.CENTRAL_PANE_NAVIGATOR, {screen: SCREENS.SEARCH.CENTRAL_PANE, params: {...restParams, policyIDs: policyID}})}); + navigationRef.dispatch({...StackActions.push(SCREENS.SEARCH.CENTRAL_PANE, {...restParams, policyIDs: policyID})}); } return true; @@ -53,7 +53,7 @@ function setupCustomAndroidBackHandler() { // In that case we have to push the proper one. if (bottomTabRoutes && bottomTabRoutes?.length >= 2 && bottomTabRoutes[bottomTabRoutes.length - 2].name === SCREENS.SEARCH.BOTTOM_TAB && rootState.routes.length === 1) { const {policyID, ...restParams} = bottomTabRoutes[bottomTabRoutes.length - 2].params as SearchPageProps['route']['params']; - navigationRef.dispatch({...StackActions.push(NAVIGATORS.CENTRAL_PANE_NAVIGATOR, {screen: SCREENS.SEARCH.CENTRAL_PANE, params: {...restParams, policyIDs: policyID}})}); + navigationRef.dispatch({...StackActions.push(SCREENS.SEARCH.CENTRAL_PANE, {...restParams, policyIDs: policyID})}); navigationRef.dispatch({...StackActions.pop(), target: bottomTabRoute?.state?.key}); return true; } diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx index 663a01ba02b..c21e79109ce 100644 --- a/src/pages/Search/SearchPageBottomTab.tsx +++ b/src/pages/Search/SearchPageBottomTab.tsx @@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; -import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import type {CentralPaneScreensParamList} from '@libs/Navigation/types'; import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; @@ -16,7 +16,7 @@ import SCREENS from '@src/SCREENS'; import type {SearchQuery} from '@src/types/onyx/SearchResults'; import SearchFilters from './SearchFilters'; -type SearchPageProps = StackScreenProps; +type SearchPageProps = StackScreenProps; const defaultSearchProps = { query: '' as SearchQuery, From baaf21423137664cc2ded0aba3e501f55afd1691 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Wed, 12 Jun 2024 16:26:04 +0200 Subject: [PATCH 17/20] fix central pane blinking on android --- .../Navigation/AppNavigator/AuthScreens.tsx | 3 +-- .../AppNavigator/CENTRAL_PANE_SCREENS.tsx | 23 ++++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index e84c9038bb5..385f3918911 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -4,7 +4,6 @@ import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {withOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import OptionsListContextProvider from '@components/OptionListContextProvider'; -import withPrepareCentralPaneScreen from '@components/withPrepareCentralPaneScreen'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -449,7 +448,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie key={centralPaneName} name={centralPaneName} initialParams={getCentralPaneScreenInitialParams(centralPaneName)} - getComponent={() => withPrepareCentralPaneScreen(componentGetter())} + getComponent={componentGetter} options={CentralPaneScreenOptions} /> ); diff --git a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx index 09811b4f18a..7439b8e6dc7 100644 --- a/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx +++ b/src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.tsx @@ -1,20 +1,21 @@ import type {CentralPaneName} from '@libs/Navigation/types'; +import withPrepareCentralPaneScreen from '@src/components/withPrepareCentralPaneScreen'; import SCREENS from '@src/SCREENS'; type Screens = Partial React.ComponentType>>; const CENTRAL_PANE_SCREENS = { - [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, - [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, - [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, - [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, - [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, - [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, - [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: () => require('../../../pages/settings/Subscription/SubscriptionSettingsPage').default as React.ComponentType, - [SCREENS.SEARCH.CENTRAL_PANE]: () => require('../../../pages/Search/SearchPage').default as React.ComponentType, - [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType, + [SCREENS.SETTINGS.WORKSPACES]: () => withPrepareCentralPaneScreen(require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType), + [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType), + [SCREENS.SETTINGS.SECURITY]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType), + [SCREENS.SETTINGS.PROFILE.ROOT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType), + [SCREENS.SETTINGS.WALLET.ROOT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType), + [SCREENS.SETTINGS.ABOUT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType), + [SCREENS.SETTINGS.TROUBLESHOOT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType), + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => withPrepareCentralPaneScreen(require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType), + [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: () => withPrepareCentralPaneScreen(require('../../../pages/settings/Subscription/SubscriptionSettingsPage').default as React.ComponentType), + [SCREENS.SEARCH.CENTRAL_PANE]: () => withPrepareCentralPaneScreen(require('../../../pages/Search/SearchPage').default as React.ComponentType), + [SCREENS.REPORT]: () => withPrepareCentralPaneScreen(require('./ReportScreenWrapper').default as React.ComponentType), } satisfies Screens; export default CENTRAL_PANE_SCREENS; From e92622ab463e87ba826570cef30f9e60faed18d5 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 13 Jun 2024 10:51:01 +0200 Subject: [PATCH 18/20] fix accessing route params object in report screen --- src/pages/home/ReportScreen.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index b4d4b1be8c3..5bb08edb87b 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -350,11 +350,11 @@ function ReportScreen({ } useEffect(() => { - if (!transactionThreadReportID || !route.params.reportActionID) { + if (!transactionThreadReportID || !route?.params?.reportActionID) { return; } - Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route.params.reportID)); - }, [transactionThreadReportID, route.params.reportActionID, route.params.reportID]); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID)); + }, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]); if (ReportUtils.isMoneyRequestReport(report) || ReportUtils.isInvoiceReport(report)) { headerView = ( From 70254e561cf138632c54377ad4170c5d5bd9fa5b Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 21 Jun 2024 09:08:43 +0200 Subject: [PATCH 19/20] Cleaunp flatten central pane code --- src/components/withPrepareCentralPaneScreen/index.native.tsx | 4 ++-- src/components/withPrepareCentralPaneScreen/index.tsx | 4 ++-- .../BottomTabBar/index.website.tsx | 2 +- src/pages/settings/InitialSettingsPage.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/withPrepareCentralPaneScreen/index.native.tsx b/src/components/withPrepareCentralPaneScreen/index.native.tsx index c7ace2aa82f..4ebf7448c3b 100644 --- a/src/components/withPrepareCentralPaneScreen/index.native.tsx +++ b/src/components/withPrepareCentralPaneScreen/index.native.tsx @@ -4,8 +4,8 @@ import getComponentDisplayName from '@libs/getComponentDisplayName'; import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; /** - * This HOC is dependent on platform. On native platforms screens that aren't already dipslayed in the navigation stack should be freezed to prevent from unnecessary rendering. - * It's handled this way only on mobile platforms, because on web more than one screen is displayed in a wide layout, so these screens shouldn't be freezed. + * This HOC is dependent on the platform. On native platforms, screens that aren't already displayed in the navigation stack should be frozen to prevent unnecessary rendering. + * It's handled this way only on mobile platforms because on the web, more than one screen is displayed in a wide layout, so these screens shouldn't be frozen. */ export default function withPrepareCentralPaneScreen( WrappedComponent: ComponentType>, diff --git a/src/components/withPrepareCentralPaneScreen/index.tsx b/src/components/withPrepareCentralPaneScreen/index.tsx index c0550188abc..fe31b9fa7ec 100644 --- a/src/components/withPrepareCentralPaneScreen/index.tsx +++ b/src/components/withPrepareCentralPaneScreen/index.tsx @@ -1,8 +1,8 @@ import type {ComponentType} from 'react'; /** - * This HOC is dependent on platform. On native platforms screens that aren't already dipslayed in the navigation stack should be freezed to prevent from unnecessary rendering. - * It's handled this way only on mobile platforms, because on web more than one screen is displayed in a wide layout, so these screens shouldn't be freezed. + * This HOC is dependent on the platform. On native platforms, screens that aren't already displayed in the navigation stack should be frozen to prevent unnecessary rendering. + * It's handled this way only on mobile platforms because on the web, more than one screen is displayed in a wide layout, so these screens shouldn't be frozen. */ export default function withPrepareCentralPaneScreen(WrappedComponent: ComponentType) { return WrappedComponent; diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx index eb478afbda2..150784c54f0 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx @@ -49,7 +49,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps const currentRoute = routes?.[navigationState?.index ?? 0]; // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method. // To prevent this, the value of the bottomTabRoute?.name is checked here - if (!!(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) { + if (!!(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) { return; } diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 00e82fa2b70..58d17903373 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -325,7 +325,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa hoverAndPressStyle={styles.hoveredComponentBG} shouldBlockSelection={!!item.link} onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined} - focused={!!activeRoute && !!item.routeName && !!(activeRoute?.name?.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', ''))} + focused={!!activeRoute && !!item.routeName && !!(activeRoute.name.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', ''))} isPaneMenu iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} From becff5195f272d0146be47f5a5e270ea3115fa67 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 25 Jun 2024 12:42:03 +0200 Subject: [PATCH 20/20] Fix lint in switchPolicyID --- src/libs/Navigation/switchPolicyID.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts index 2c13b6b54c6..59461bfc3c8 100644 --- a/src/libs/Navigation/switchPolicyID.ts +++ b/src/libs/Navigation/switchPolicyID.ts @@ -33,7 +33,7 @@ function getActionForBottomTabNavigator(action: StackNavigationAction, state: Na } let name; - let params; + let params: Record; if (isCentralPaneName(action.payload.name)) { name = action.payload.name; params = action.payload.params;