Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ideal nav] Simplify the navigator structure #40342

Merged
merged 12 commits into from
May 14, 2024
Merged

[Ideal nav] Simplify the navigator structure #40342

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e3644d1
Remove SCREENS.WORKSPACES_CENTRAL_PANE
WojtekBoman Apr 12, 2024
bc8db3b
Refactor FullScreenNavigator
WojtekBoman Apr 12, 2024
a451aaf
Refactor styles in FullScreenNavigator
WojtekBoman Apr 12, 2024
4cc1066
Remove WorkspaceSettingsModalStackNavigator
WojtekBoman Apr 12, 2024
0578de4
Remove wrapper for lhp screens
WojtekBoman Apr 12, 2024
1ad5314
Merge pull request #88 from software-mansion-labs/nav/flatten-lhp
WojtekBoman Apr 17, 2024
4ce70a8
Merge branch 'main' into nav/flatten-full-screen-nav
WojtekBoman Apr 17, 2024
edf1435
Merge branch 'main' into nav/flatten-full-screen-nav
WojtekBoman May 9, 2024
46cfbc0
Fix transition between pages on small screens
WojtekBoman May 10, 2024
1acfa46
Merge branch 'main' into nav/flatten-full-screen-nav
WojtekBoman May 13, 2024
135b28d
Refactor LHP and FullScreenNavigator
WojtekBoman May 13, 2024
e42e4d3
Remove CHAT_FINDER_ROOT from SCREENS
WojtekBoman May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/SCREENS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,6 @@ const SCREENS = {
CHAT_FINDER: 'ChatFinder',
WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
},
WORKSPACE_SWITCHER: {
ROOT: 'WorkspaceSwitcher_Root',
},
RIGHT_MODAL: {
SETTINGS: 'Settings',
NEW_CHAT: 'NewChat',
Expand Down
89 changes: 0 additions & 89 deletions ...ibs/Navigation/AppNavigator/ModalStackNavigators/WorkspaceSettingsModalStackNavigator.tsx
View file
Open in desktop

This file was deleted.

18 changes: 2 additions & 16 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import type {
AddPersonalBankAccountNavigatorParamList,
ChatFinderNavigatorParamList,
DetailsNavigatorParamList,
EditRequestNavigatorParamList,
EnablePaymentsNavigatorParamList,
Expand All @@ -30,13 +29,11 @@ import type {
TeachersUniteNavigatorParamList,
TravelNavigatorParamList,
WalletStatementNavigatorParamList,
WorkspaceSwitcherNavigatorParamList,
} from '@navigation/types';
import type {ThemeStyles} from '@styles/index';
import type {Screen} from '@src/SCREENS';
import SCREENS from '@src/SCREENS';
import useModalScreenOptions from './useModalScreenOptions';
import WorkspaceSettingsModalStackNavigator from './WorkspaceSettingsModalStackNavigator';

type Screens = Partial<Record<Screen, () => React.ComponentType>>;

Expand Down Expand Up @@ -152,10 +149,6 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
[SCREENS.ROOM_INVITE_ROOT]: () => require('../../../../pages/RoomInvitePage').default as React.ComponentType,
});

const ChatFinderModalStackNavigator = createModalStackNavigator<ChatFinderNavigatorParamList>({
[SCREENS.CHAT_FINDER_ROOT]: () => require('../../../../pages/ChatFinderPage').default as React.ComponentType,
});

const NewChatModalStackNavigator = createModalStackNavigator<NewChatNavigatorParamList>({
[SCREENS.NEW_CHAT.ROOT]: () => require('../../../../pages/NewChatSelectorPage').default as React.ComponentType,
[SCREENS.NEW_CHAT.NEW_CHAT_CONFIRM]: () => require('../../../../pages/NewChatConfirmPage').default as React.ComponentType,
Expand All @@ -178,10 +171,6 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
[SCREENS.I_AM_A_TEACHER]: () => require('../../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
});

const WorkspaceSwitcherModalStackNavigator = createModalStackNavigator<WorkspaceSwitcherNavigatorParamList>({
[SCREENS.WORKSPACE_SWITCHER.ROOT]: () => require('../../../../pages/WorkspaceSwitcherPage').default as React.ComponentType,
});

const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
[SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../../pages/ShareCodePage').default as React.ComponentType,
[SCREENS.SETTINGS.PROFILE.PRONOUNS]: () => require('../../../../pages/settings/Profile/PronounsPage').default as React.ComponentType,
Expand Down Expand Up @@ -378,24 +367,21 @@ export {
NewTaskModalStackNavigator,
NewTeachersUniteNavigator,
PrivateNotesModalStackNavigator,
ProcessMoneyRequestHoldStackNavigator,
ProfileModalStackNavigator,
ReferralModalStackNavigator,
TravelModalStackNavigator,
WorkspaceSwitcherModalStackNavigator,
ReimbursementAccountModalStackNavigator,
ReportDescriptionModalStackNavigator,
ReportDetailsModalStackNavigator,
ReportParticipantsModalStackNavigator,
ReportSettingsModalStackNavigator,
ReportDescriptionModalStackNavigator,
RoomInviteModalStackNavigator,
RoomMembersModalStackNavigator,
ChatFinderModalStackNavigator,
SettingsModalStackNavigator,
SignInModalStackNavigator,
SplitDetailsModalStackNavigator,
TaskModalStackNavigator,
WalletStatementStackNavigator,
ProcessMoneyRequestHoldStackNavigator,
WorkspaceSettingsModalStackNavigator,
SearchReportModalStackNavigator,
};
35 changes: 28 additions & 7 deletions src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,32 @@ import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import createCustomFullScreenNavigator from '@libs/Navigation/AppNavigator/createCustomFullScreenNavigator';
import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
import SCREENS from '@src/SCREENS';

const loadWorkspaceInitialPage = () => require('../../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType;

const RootStack = createCustomFullScreenNavigator();

type Screens = Partial<Record<keyof FullScreenNavigatorParamList, () => React.ComponentType>>;

const centralPaneWorkspaceScreens = {
[SCREENS.WORKSPACE.PROFILE]: () => require('../../../../pages/workspace/WorkspaceProfilePage').default as React.ComponentType,
[SCREENS.WORKSPACE.CARD]: () => require('../../../../pages/workspace/card/WorkspaceCardPage').default as React.ComponentType,
[SCREENS.WORKSPACE.WORKFLOWS]: () => require('../../../../pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.REIMBURSE]: () => require('../../../../pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType,
[SCREENS.WORKSPACE.BILLS]: () => require('../../../../pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.INVOICES]: () => require('../../../../pages/workspace/invoices/WorkspaceInvoicesPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TRAVEL]: () => require('../../../../pages/workspace/travel/WorkspaceTravelPage').default as React.ComponentType,
[SCREENS.WORKSPACE.MEMBERS]: () => require('../../../../pages/workspace/WorkspaceMembersPage').default as React.ComponentType,
[SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require('../../../../pages/workspace/accounting/PolicyAccountingPage').default as React.ComponentType,
[SCREENS.WORKSPACE.CATEGORIES]: () => require('../../../../pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType,
[SCREENS.WORKSPACE.MORE_FEATURES]: () => require('../../../../pages/workspace/WorkspaceMoreFeaturesPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TAGS]: () => require('../../../../pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TAXES]: () => require('../../../../pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType,
[SCREENS.WORKSPACE.DISTANCE_RATES]: () => require('../../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default as React.ComponentType,
} satisfies Screens;

function FullScreenNavigator() {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand All @@ -20,17 +39,19 @@ function FullScreenNavigator() {

return (
<View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
<RootStack.Navigator>
<RootStack.Navigator screenOptions={screenOptions.fullScreenInner}>
<RootStack.Screen
name={SCREENS.WORKSPACE.INITIAL}
options={screenOptions.homeScreen}
getComponent={loadWorkspaceInitialPage}
/>
<RootStack.Screen
name={SCREENS.WORKSPACES_CENTRAL_PANE}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we also need to remove WORKSPACES_CENTRAL_PANE from SCREENS.ts as there is no usage for it now

options={screenOptions.centralPaneNavigator}
component={ModalStackNavigators.WorkspaceSettingsModalStackNavigator}
/>
{Object.entries(centralPaneWorkspaceScreens).map(([screenName, componentGetter]) => (
<RootStack.Screen
key={screenName}
name={screenName as keyof Screens}
getComponent={componentGetter}
/>
))}
</RootStack.Navigator>
</View>
);
Expand Down
8 changes: 5 additions & 3 deletions src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@ import NoDropZone from '@components/DragAndDrop/NoDropZone';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types';
import ChatFinderPage from '@pages/ChatFinderPage';
import type NAVIGATORS from '@src/NAVIGATORS';
import SCREENS from '@src/SCREENS';
import Overlay from './Overlay';

type LeftModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.LEFT_MODAL_NAVIGATOR>;

const loadWorkspaceSwitcherPage = () => require('../../../../pages/WorkspaceSwitcherPage').default as React.ComponentType;

const Stack = createStackNavigator<LeftModalNavigatorParamList>();

function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
Expand All @@ -33,11 +35,11 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen
name={SCREENS.LEFT_MODAL.CHAT_FINDER}
component={ModalStackNavigators.ChatFinderModalStackNavigator}
component={ChatFinderPage}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think getComponent here is more performance than component like you do below

/>
<Stack.Screen
name={SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER}
component={ModalStackNavigators.WorkspaceSwitcherModalStackNavigator}
getComponent={loadWorkspaceSwitcherPage}
/>
</Stack.Navigator>
</View>
Expand Down
22 changes: 5 additions & 17 deletions src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ const isAtLeastOneInState = (state: StackState, screenName: string): boolean =>
function adaptStateIfNecessary(state: StackState) {
const isNarrowLayout = getIsNarrowLayout();
const workspaceCentralPane = state.routes.at(-1);
const topmostWorkspaceCentralPaneRoute = workspaceCentralPane?.state?.routes[0];

// When a screen from the FullScreenNavigator is opened from the deeplink then params should be passed to SCREENS.WORKSPACE.INITIAL from the variable defined below.
const workspacesCentralPaneParams =
workspaceCentralPane?.params && 'params' in workspaceCentralPane.params ? (workspaceCentralPane.params.params as Record<string, string | undefined>) : undefined;

// There should always be WORKSPACE.INITIAL screen in the state to make sure go back works properly if we deeplinkg to a subpage of settings.
if (!isAtLeastOneInState(state, SCREENS.WORKSPACE.INITIAL)) {
Expand All @@ -28,31 +23,24 @@ function adaptStateIfNecessary(state: StackState) {
// Unshift the root screen to fill left pane.
state.routes.unshift({
name: SCREENS.WORKSPACE.INITIAL,
params: topmostWorkspaceCentralPaneRoute?.params ?? workspacesCentralPaneParams,
params: workspaceCentralPane?.params,
});
}
}

// If the screen is wide, there should be at least two screens inside:
// - WORKSPACE.INITIAL to cover left pane.
// - WORKSPACES_CENTRAL_PANE to cover central pane.
// - WORKSPACE.PROFILE (first workspace settings screen) to cover central pane.
if (!isNarrowLayout) {
if (!isAtLeastOneInState(state, SCREENS.WORKSPACES_CENTRAL_PANE)) {
if (state.routes.length === 1 && state.routes[0].name === SCREENS.WORKSPACE.INITIAL) {
// @ts-expect-error Updating read only property
// noinspection JSConstantReassignment
state.stale = true; // eslint-disable-line
// Push the default settings central pane screen.
if (state.stale === true) {
state.routes.push({
name: SCREENS.WORKSPACES_CENTRAL_PANE,
state: {
routes: [
{
name: SCREENS.WORKSPACE.PROFILE,
params: state.routes[0]?.params,
},
],
},
name: SCREENS.WORKSPACE.PROFILE,
params: state.routes[0]?.params,
});
}
}
Expand Down
7 changes: 7 additions & 0 deletions src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type ScreenOptions = {
leftModalNavigator: StackNavigationOptions;
homeScreen: StackNavigationOptions;
fullScreen: StackNavigationOptions;
fullScreenInner: StackNavigationOptions;
centralPaneNavigator: StackNavigationOptions;
bottomTab: StackNavigationOptions;
};
Expand Down Expand Up @@ -108,6 +109,12 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
},
},
// The style object used in src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx to display properly an animation when navigating between screens.
fullScreenInner: {
...commonScreenOptions,
cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, false, props),
cardStyle: StyleUtils.getNavigationModalCardStyle(),
},

centralPaneNavigator: {
title: CONFIG.SITE_TITLE,
Expand Down
27 changes: 0 additions & 27 deletions src/libs/Navigation/getTopmostWorkspacesCentralPaneName.ts
View file
Open in desktop

This file was deleted.

Loading
Loading