Move account settings to BottomTab

software-mansion-labs · Feb 21, 2024 · f619dd5 · f619dd5
1 parent 3059751
commit f619dd5
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 100 deletions.
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -340,11 +340,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
                     component={RightModalNavigator}
                     listeners={modalScreenListeners}
                 />
-                <RootStack.Screen
+                {/* <RootStack.Screen
                     name={NAVIGATORS.FULL_SCREEN_NAVIGATOR}
                     options={screenOptions.fullScreen}
                     component={FullScreenNavigator}
-                />
+                /> */}
                 <RootStack.Screen
                     name={NAVIGATORS.LEFT_MODAL_NAVIGATOR}
                     options={screenOptions.leftModalNavigator}
@@ -356,6 +356,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
                     options={screenOptions.fullScreen}
                     component={DesktopSignInRedirectPage}
                 />
+                {/* <RootStack.Screen
+                    name={SCREENS.SETTINGS_CENTRAL_PANE}
+                    options={screenOptions.centralPaneNavigator}
+                    component={ModalStackNavigators.AccountSettingsModalStackNavigator}
+                /> */}
             </RootStack.Navigator>
         </View>
     );

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -186,16 +186,16 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
     [SCREENS.I_AM_A_TEACHER]: () => require('../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
 });
 
-const AccountSettingsModalStackNavigator = createModalStackNavigator(
-    {
-        [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,
-    },
-    (styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
-);
+// const AccountSettingsModalStackNavigator = createModalStackNavigator(
+//     {
+//         [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,
+//     },
+//     (styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
+// );
 
 const WorkspaceSwitcherModalStackNavigator = createModalStackNavigator<WorkspaceSwitcherNavigatorParamList>({
     [SCREENS.WORKSPACE_SWITCHER.ROOT]: () => require('../../../pages/WorkspaceSwitcherPage').default as React.ComponentType,
@@ -298,7 +298,7 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
 });
 
 export {
-    AccountSettingsModalStackNavigator,
+    // AccountSettingsModalStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
     DetailsModalStackNavigator,
     OnboardEngagementModalStackNavigator,

diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import type {BottomTabNavigatorParamList} from '@libs/Navigation/types';
-import AllSettingsScreen from '@pages/home/sidebar/AllSettingsScreen';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
 import SCREENS from '@src/SCREENS';
 import ActiveRouteContext from './ActiveRouteContext';
 
 const loadWorkspaceInitialPage = () => require('../../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType;
+const loadInitialSettingsPage = () => require('../../../../pages/settings/InitialSettingsPage').default as React.ComponentType;
 
 const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();
 
@@ -23,14 +23,15 @@ function BottomTabNavigator() {
     return (
         <ActiveRouteContext.Provider value={activeRoute?.name ?? ''}>
             <Tab.Navigator screenOptions={screenOptions}>
+            <Tab.Screen
+                    name={SCREENS.SETTINGS.ROOT}
+                    // options={screenOptions.homeScreen}
+                    getComponent={loadInitialSettingsPage}
+                />
                 <Tab.Screen
                     name={SCREENS.HOME}
                     component={SidebarScreen}
                 />
-                <Tab.Screen
-                    name={SCREENS.ALL_SETTINGS}
-                    component={AllSettingsScreen}
-                />
                 <Tab.Screen
                     name={SCREENS.WORKSPACE.INITIAL}
                     getComponent={loadWorkspaceInitialPage}

diff --git a/...libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/...libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
@@ -24,6 +24,14 @@ const workspaceSettingsScreens = {
     [SCREENS.WORKSPACE.MEMBERS]: () => require('../../../../../pages/workspace/WorkspaceMembersPage').default as React.ComponentType,
 } satisfies Screens;
 
+const settingsScreens = {
+    [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,
+};
+
 function BaseCentralPaneNavigator() {
     const styles = useThemeStyles();
     const options = {
@@ -41,7 +49,18 @@ function BaseCentralPaneNavigator() {
                 initialParams={{openOnAdminRoom: openOnAdminRoom === 'true' || undefined}}
                 component={ReportScreenWrapper}
             />
-
+            {/* <Stack.Screen
+                name={SCREENS.SETTINGS_CENTRAL_PANE}
+                // options={screenOptions.centralPaneNavigator}
+                component={ModalStackNavigators.AccountSettingsModalStackNavigator}
+            /> */}
+            {Object.entries(settingsScreens).map(([screenName, componentGetter]) => (
+                <Stack.Screen
+                    key={screenName}
+                    name={screenName as keyof Screens}
+                    getComponent={componentGetter}
+                />
+            ))}
             {Object.entries(workspaceSettingsScreens).map(([screenName, componentGetter]) => (
                 <Stack.Screen
                     key={screenName}

diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx
@@ -18,6 +18,9 @@ function FullScreenNavigator() {
     const {isSmallScreenWidth} = useWindowDimensions();
     const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils);
 
+    // TODO: DISPLAY IN THIS NAVIGATOR WORKSPACE SETTINGS SCREENS
+    return null;
+
     return (
         <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
             <RootStack.Navigator>

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx
@@ -5,12 +5,10 @@ import {StackView} from '@react-navigation/stack';
 import React from 'react';
 import {View} from 'react-native';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {NavigationStateRoute} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
 import BottomTabBar from './BottomTabBar';
-import TopBar from './TopBar';
 
 type CustomNavigatorProps = DefaultNavigatorOptions<ParamListBase, StackNavigationState<ParamListBase>, StackNavigationOptions, StackNavigationEventMap> & {
     initialRouteName: string;
@@ -46,15 +44,13 @@ function CustomBottomTabNavigator({initialRouteName, children, screenOptions, ..
 
     const styles = useThemeStyles();
     const stateToRender = getStateToRender(state);
-    const {activeWorkspaceID} = useActiveWorkspace();
 
     return (
         <ScreenWrapper
             testID={CustomBottomTabNavigator.displayName}
             shouldShowOfflineIndicator={false}
         >
             <View style={styles.flex1}>
-                <TopBar activeWorkspaceID={activeWorkspaceID} />
                 <NavigationContent>
                     <StackView
                         // eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts
@@ -3,7 +3,14 @@ import SCREENS from '@src/SCREENS';
 
 const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
     [SCREENS.HOME]: [SCREENS.REPORT],
-    [SCREENS.ALL_SETTINGS]: [SCREENS.SETTINGS.WORKSPACES],
+    [SCREENS.SETTINGS.ROOT]: [
+        SCREENS.SETTINGS.PROFILE.ROOT,
+        SCREENS.SETTINGS.PREFERENCES.ROOT,
+        SCREENS.SETTINGS.SECURITY,
+        SCREENS.SETTINGS.WALLET.ROOT,
+        SCREENS.SETTINGS.ABOUT,
+        SCREENS.SETTINGS.WORKSPACES,
+    ],
     [SCREENS.WORKSPACE.INITIAL]: [
         SCREENS.WORKSPACE.PROFILE,
         SCREENS.WORKSPACE.CARD,

diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -29,11 +29,13 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
             initialRouteName: SCREENS.HOME,
             screens: {
                 [SCREENS.HOME]: ROUTES.HOME,
-                [SCREENS.ALL_SETTINGS]: ROUTES.ALL_SETTINGS,
                 [SCREENS.WORKSPACE.INITIAL]: {
                     path: ROUTES.WORKSPACE_INITIAL.route,
                     exact: true,
                 },
+                [SCREENS.SETTINGS.ROOT]: {
+                    path: ROUTES.SETTINGS,
+                },
             },
         },
 
@@ -61,6 +63,50 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                 [SCREENS.WORKSPACE.MEMBERS]: {
                     path: ROUTES.WORKSPACE_MEMBERS.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_CENTRAL_PANE]: {
+                //     screens: {
+                //         [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.NOT_FOUND]: '*',
@@ -492,35 +538,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         },
 
         [NAVIGATORS.FULL_SCREEN_NAVIGATOR]: {
-            screens: {
-                [SCREENS.SETTINGS.ROOT]: {
-                    path: ROUTES.SETTINGS,
-                },
-                [SCREENS.SETTINGS_CENTRAL_PANE]: {
-                    screens: {
-                        [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: {},
         },
     },
 };

diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
@@ -124,11 +124,11 @@ function getMatchingRootRouteForRHPRoute(
     }
 
     // Check for FullScreenNavigator
-    for (const [fullScreenName, RHPNames] of Object.entries(FULL_SCREEN_TO_RHP_MAPPING)) {
-        if (RHPNames && RHPNames.includes(route.name)) {
-            return createFullScreenNavigator({name: fullScreenName as FullScreenName, params: route.params});
-        }
-    }
+    // for (const [fullScreenName, RHPNames] of Object.entries(FULL_SCREEN_TO_RHP_MAPPING)) {
+    //     if (RHPNames && RHPNames.includes(route.name)) {
+    //         return createFullScreenNavigator({name: fullScreenName as FullScreenName, params: route.params});
+    //     }
+    // }
 }
 
 function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>>, policyID?: string): GetAdaptedStateReturnType {

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -74,6 +74,11 @@ type CentralPaneNavigatorParamList = {
     [SCREENS.WORKSPACE.MEMBERS]: {
         policyID: string;
     };
+    [SCREENS.SETTINGS.PROFILE.ROOT]: undefined;
+    [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined;
+    [SCREENS.SETTINGS.SECURITY]: undefined;
+    [SCREENS.SETTINGS.WALLET.ROOT]: undefined;
+    [SCREENS.SETTINGS.ABOUT]: undefined;
 };
 
 type WorkspaceSwitcherNavigatorParamList = {
@@ -440,22 +445,19 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
 };
 
-type SettingsCentralPaneNavigatorParamList = {
-    [SCREENS.SETTINGS.PROFILE.ROOT]: undefined;
-    [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined;
-    [SCREENS.SETTINGS.SECURITY]: undefined;
-    [SCREENS.SETTINGS.WALLET.ROOT]: undefined;
-    [SCREENS.SETTINGS.ABOUT]: undefined;
-};
+// type SettingsCentralPaneNavigatorParamList = {
+//     [SCREENS.SETTINGS.PROFILE.ROOT]: undefined;
+//     [SCREENS.SETTINGS.PREFERENCES.ROOT]: undefined;
+//     [SCREENS.SETTINGS.SECURITY]: undefined;
+//     [SCREENS.SETTINGS.WALLET.ROOT]: undefined;
+//     [SCREENS.SETTINGS.ABOUT]: undefined;
+// };
 
-type FullScreenNavigatorParamList = {
-    [SCREENS.SETTINGS.ROOT]: undefined;
-    [SCREENS.SETTINGS_CENTRAL_PANE]: NavigatorScreenParams<SettingsCentralPaneNavigatorParamList>;
-};
+type FullScreenNavigatorParamList = {};
 
 type BottomTabNavigatorParamList = {
     [SCREENS.HOME]: undefined;
-    [SCREENS.ALL_SETTINGS]: undefined;
+    [SCREENS.SETTINGS.ROOT]: undefined;
     [SCREENS.WORKSPACE.INITIAL]: undefined;
 };
 

diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -1,8 +1,10 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
+import TopBar from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
 import Performance from '@libs/Performance';
 import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData';
 import Timing from '@userActions/Timing';
@@ -19,6 +21,7 @@ const startTimer = () => {
 
 function BaseSidebarScreen(props) {
     const styles = useThemeStyles();
+    const {activeWorkspaceID} = useActiveWorkspace();
     useEffect(() => {
         Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
         Timing.start(CONST.TIMING.SIDEBAR_LOADED, true);
@@ -33,13 +36,16 @@ function BaseSidebarScreen(props) {
             includePaddingTop={false}
         >
             {({insets}) => (
-                <View style={[styles.flex1]}>
-                    <SidebarLinksData
-                        onLinkClick={startTimer}
-                        insets={insets}
-                        onLayout={props.onLayout}
-                    />
-                </View>
+                <>
+                    <TopBar activeWorkspaceID={activeWorkspaceID} />
+                    <View style={[styles.flex1]}>
+                        <SidebarLinksData
+                            onLinkClick={startTimer}
+                            insets={insets}
+                            onLayout={props.onLayout}
+                        />
+                    </View>
+                </>
             )}
         </ScreenWrapper>
     );