Merge pull request #46 from software-mansion-labs/w8/ideal-nav-fixes-v3

Fixes 203, 207

src/components/WorkspaceSwitcherButton.tsx

@@ -1,32 +1,39 @@
 import React, {useMemo} from 'react';
-import useActiveWorkspace from '@hooks/useActiveWorkspace';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import Navigation from '@libs/Navigation/Navigation';
-import {getDefaultWorkspaceAvatar, getPolicy} from '@libs/ReportUtils';
+import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Policy} from '@src/types/onyx';
 import * as Expensicons from './Icon/Expensicons';
 import {PressableWithFeedback} from './Pressable';
 import SubscriptAvatar from './SubscriptAvatar';
 
-function WorkspaceSwitcherButton() {
+type WorkspaceSwitcherButtonOnyxProps = {
+    policy: OnyxEntry<Policy>;
+};
+
+type WorkspaceSwitcherButtonProps = {activeWorkspaceID?: string} & WorkspaceSwitcherButtonOnyxProps;
+
+function WorkspaceSwitcherButton({activeWorkspaceID, policy}: WorkspaceSwitcherButtonProps) {
     const {translate} = useLocalize();
-    const {activeWorkspaceID} = useActiveWorkspace();
 
     const {source, name, type} = useMemo(() => {
         if (!activeWorkspaceID) {
             return {source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR};
         }
 
-        const policy = getPolicy(activeWorkspaceID);
         const avatar = policy?.avatar ? policy.avatar : getDefaultWorkspaceAvatar(policy?.name);
         return {
             source: avatar,
-            name: policy?.name,
+            name: policy?.name ?? '',
             type: CONST.ICON_TYPE_WORKSPACE,
         };
-    }, [activeWorkspaceID]);
+    }, [policy, activeWorkspaceID]);
 
     return (
         <PressableWithFeedback
@@ -51,4 +58,8 @@ function WorkspaceSwitcherButton() {
 
 WorkspaceSwitcherButton.displayName = 'WorkspaceSwitcherButton';
 
-export default WorkspaceSwitcherButton;
+export default withOnyx<WorkspaceSwitcherButtonProps, WorkspaceSwitcherButtonOnyxProps>({
+    policy: {
+        key: ({activeWorkspaceID}) => `${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID}`,
+    },
+})(WorkspaceSwitcherButton);

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

@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Search from '@components/Search';
 import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
+import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -12,13 +13,14 @@ import ROUTES from '@src/ROUTES';
 function TopBar() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {activeWorkspaceID} = useActiveWorkspace();
 
     return (
         <View
             style={[styles.gap4, styles.flexRow, styles.ph5, styles.pv5, styles.justifyContentBetween, styles.alignItemsCenter]}
             dataSet={{dragArea: true}}
         >
-            <WorkspaceSwitcherButton />
+            <WorkspaceSwitcherButton activeWorkspaceID={activeWorkspaceID} />
             <Search
                 placeholder={translate('sidebarScreen.buttonSearch')}
                 onPress={Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.SEARCH))}

src/libs/Navigation/linkTo.ts

@@ -128,7 +128,6 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
     while ((current = root.getParent())) {
         root = current;
     }
-
     const pathWithoutPolicyID = getPathWithoutPolicyID(`/${path}`) as Route;
     const rootState = navigation.getRootState() as NavigationState<RootStackParamList>;
     const stateFromPath = getStateFromPath(pathWithoutPolicyID) as PartialState<NavigationState<RootStackParamList>>;
@@ -167,8 +166,10 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
         ) {
             // 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);
-            if (topmostBottomTabRoute && topmostBottomTabRoute.name !== matchingBottomTabRoute.name) {
+            const matchingBottomTabRoute = getMatchingBottomTabRouteForState(stateFromPath, policyID);
+            const isNewPolicyID =
+                (topmostBottomTabRoute?.params as Record<string, string | undefined>)?.policyID !== (matchingBottomTabRoute?.params as Record<string, string | undefined>)?.policyID;
+            if (topmostBottomTabRoute && (topmostBottomTabRoute.name !== matchingBottomTabRoute.name || isNewPolicyID)) {
                 root.dispatch({
                     type: CONST.NAVIGATION.ACTION_TYPE.PUSH,
                     payload: matchingBottomTabRoute,

src/libs/Navigation/linkingConfig/getMatchingBottomTabRouteForState.ts

@@ -4,8 +4,9 @@ import SCREENS from '@src/SCREENS';
 import {CENTRAL_PANE_TO_TAB_MAPPING} from './TAB_TO_CENTRAL_PANE_MAPPING';
 
 // Get the route that matches the topmost central pane route in the navigation stack. e.g REPORT -> HOME
-function getMatchingBottomTabRouteForState(state: State<RootStackParamList>): NavigationPartialRoute<BottomTabName> {
-    const defaultRoute = {name: SCREENS.HOME};
+function getMatchingBottomTabRouteForState(state: State<RootStackParamList>, policyID?: string): NavigationPartialRoute<BottomTabName> {
+    const paramsWithPolicyID = policyID ? {policyID} : undefined;
+    const defaultRoute = {name: SCREENS.HOME, params: paramsWithPolicyID};
     const topmostCentralPaneRoute = getTopmostCentralPaneRoute(state);
 
     if (topmostCentralPaneRoute === undefined) {
@@ -16,7 +17,7 @@ function getMatchingBottomTabRouteForState(state: State<RootStackParamList>): Na
     if (tabName === SCREENS.WORKSPACE.INITIAL) {
         return {name: tabName, params: topmostCentralPaneRoute.params};
     }
-    return {name: tabName};
+    return {name: tabName, params: paramsWithPolicyID};
 }
 
 export default getMatchingBottomTabRouteForState;