Skip to content

Commit

Permalink
Merge pull request #44622 from software-mansion-labs/fix/navigating-b…
Browse files Browse the repository at this point in the history
…ack-settings

Fix navigating back from Settings screens and refreshing SearchPage with policyIDs in the url
  • Loading branch information
mountiny authored Jul 2, 2024
2 parents adb04ff + eb55e34 commit 551c6cb
Show file tree
Hide file tree
Showing 16 changed files with 33 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +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 {isCentralPaneName} from '@libs/NavigationUtils';
import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar';
import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +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 {isCentralPaneName} from '@libs/NavigationUtils';
import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar';
import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import NAVIGATORS from '@src/NAVIGATORS';
import SCREENS from '@src/SCREENS';
import type {ResponsiveStackNavigatorRouterOptions} from './types';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import SCREENS from '@src/SCREENS';
import CustomRouter from './CustomRouter';
import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
Expand Down
6 changes: 4 additions & 2 deletions src/libs/Navigation/Navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {CommonActions, getPathFromState, StackActions} from '@react-navigation/n
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import Onyx from 'react-native-onyx';
import Log from '@libs/Log';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName, removePolicyIDParamFromState} from '@libs/NavigationUtils';
import * as ReportUtils from '@libs/ReportUtils';
import CONST from '@src/CONST';
import NAVIGATORS from '@src/NAVIGATORS';
Expand Down Expand Up @@ -129,7 +129,9 @@ function getDistanceFromPathInRootNavigator(path?: string): number {
break;
}

const pathFromState = getPathFromState(currentState, linkingConfig.config);
// When comparing path and pathFromState, the policyID parameter isn't included in the comparison
const currentStateWithoutPolicyID = removePolicyIDParamFromState(currentState as State<RootStackParamList>);
const pathFromState = getPathFromState(currentStateWithoutPolicyID, linkingConfig.config);
if (path === pathFromState.substring(1)) {
return index;
}
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/dismissModalWithReport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {StackActions} from '@react-navigation/native';
import {findLastIndex} from 'lodash';
import type {OnyxEntry} from 'react-native-onyx';
import Log from '@libs/Log';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
import {doesReportBelongToWorkspace} from '@libs/ReportUtils';
import NAVIGATORS from '@src/NAVIGATORS';
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/getTopmostCentralPaneRoute.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import type {CentralPaneName, NavigationPartialRoute, RootStackParamList, State} from './types';

// Get the name of topmost central pane route in the navigation stack.
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/getTopmostReportActionID.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {NavigationState, PartialState} from '@react-navigation/native';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import SCREENS from '@src/SCREENS';
import type {RootStackParamList} from './types';

Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/getTopmostReportId.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {NavigationState, PartialState} from '@react-navigation/native';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import SCREENS from '@src/SCREENS';
import type {RootStackParamList} from './types';

Expand Down
7 changes: 3 additions & 4 deletions src/libs/Navigation/linkTo/getActionForBottomTabNavigator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ function getActionForBottomTabNavigator(
shouldNavigate?: boolean,
): Writable<NavigationAction> | undefined {
const bottomTabNavigatorRoute = state.routes.at(0);

if (!bottomTabNavigatorRoute || bottomTabNavigatorRoute.state === undefined || !action || action.type !== CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
return;
}
Expand All @@ -22,10 +21,10 @@ function getActionForBottomTabNavigator(
let payloadParams = params.params as Record<string, string | undefined>;
const screen = params.screen;

if (!payloadParams) {
payloadParams = {policyID};
} else if (!('policyID' in payloadParams && !!payloadParams?.policyID)) {
if (policyID && !payloadParams?.policyID) {
payloadParams = {...payloadParams, policyID};
} else if (!policyID) {
delete payloadParams?.policyID;
}

// Check if the current bottom tab is the same as the one we want to navigate to. If it is, we don't need to do anything.
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/linkTo/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {findFocusedRoute} from '@react-navigation/native';
import {omitBy} from 'lodash';
import getIsNarrowLayout from '@libs/getIsNarrowLayout';
import extractPolicyIDsFromState from '@libs/Navigation/linkingConfig/extractPolicyIDsFromState';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import shallowCompare from '@libs/ObjectUtils';
import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils';
import getActionsFromPartialDiff from '@navigation/AppNavigator/getActionsFromPartialDiff';
Expand Down
11 changes: 1 addition & 10 deletions src/libs/Navigation/linkingConfig/customGetPathFromState.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,13 @@
import {getPathFromState} from '@react-navigation/native';
import _ from 'lodash';
import getPolicyIDFromState from '@libs/Navigation/getPolicyIDFromState';
import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
import type {BottomTabName, RootStackParamList, State} from '@libs/Navigation/types';
import {removePolicyIDParamFromState} from '@libs/NavigationUtils';
import SCREENS from '@src/SCREENS';

// The policy ID parameter should be included in the URL when any of these pages is opened in the bottom tab.
const SCREENS_WITH_POLICY_ID_IN_URL: BottomTabName[] = [SCREENS.HOME] as const;

const removePolicyIDParamFromState = (state: State<RootStackParamList>) => {
const stateCopy = _.cloneDeep(state);
const bottomTabRoute = getTopmostBottomTabRoute(stateCopy);
if (bottomTabRoute?.params && 'policyID' in bottomTabRoute.params) {
delete bottomTabRoute.params.policyID;
}
return stateCopy;
};

const customGetPathFromState: typeof getPathFromState = (state, options) => {
// For the Home and Settings pages we should remove policyID from the params, because on small screens it's displayed twice in the URL
const stateWithoutPolicyID = removePolicyIDParamFromState(state as State<RootStackParamList>);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type {TupleToUnion} from 'type-fest';
import {isAnonymousUser} from '@libs/actions/Session';
import getIsNarrowLayout from '@libs/getIsNarrowLayout';
import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
import isCentralPaneName from '@libs/NavigationUtils';
import {isCentralPaneName} from '@libs/NavigationUtils';
import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils';
import CONST from '@src/CONST';
import NAVIGATORS from '@src/NAVIGATORS';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function getMatchingBottomTabRouteForState(state: State<RootStackParamList>, pol
const tabName = CENTRAL_PANE_TO_TAB_MAPPING[topmostCentralPaneRoute.name];

if (tabName === SCREENS.SEARCH.BOTTOM_TAB) {
const topmostCentralPaneRouteParams = topmostCentralPaneRoute.params as Record<string, string | undefined>;
const topmostCentralPaneRouteParams = {...topmostCentralPaneRoute.params} as Record<string, string | undefined>;
delete topmostCentralPaneRouteParams?.policyIDs;
if (policyID) {
topmostCentralPaneRouteParams.policyID = policyID;
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/switchPolicyID.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +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 {isCentralPaneName} from '@libs/NavigationUtils';
import CONST from '@src/CONST';
import type {Route} from '@src/ROUTES';
import ROUTES from '@src/ROUTES';
Expand Down
15 changes: 13 additions & 2 deletions src/libs/NavigationUtils.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import cloneDeep from 'lodash/cloneDeep';
import SCREENS from '@src/SCREENS';
import type {CentralPaneName} from './Navigation/types';
import getTopmostBottomTabRoute from './Navigation/getTopmostBottomTabRoute';
import type {CentralPaneName, RootStackParamList, State} from './Navigation/types';

const CENTRAL_PANE_SCREEN_NAMES = new Set([
SCREENS.SETTINGS.WORKSPACES,
Expand All @@ -23,4 +25,13 @@ function isCentralPaneName(screen: string | undefined): screen is CentralPaneNam
return CENTRAL_PANE_SCREEN_NAMES.has(screen as CentralPaneName);
}

export default isCentralPaneName;
const removePolicyIDParamFromState = (state: State<RootStackParamList>) => {
const stateCopy = cloneDeep(state);
const bottomTabRoute = getTopmostBottomTabRoute(stateCopy);
if (bottomTabRoute?.params && 'policyID' in bottomTabRoute.params) {
delete bottomTabRoute.params.policyID;
}
return stateCopy;
};

export {isCentralPaneName, removePolicyIDParamFromState};

0 comments on commit 551c6cb

Please sign in to comment.