Skip to content

Commit

Permalink
Move switcher to LHP
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateuuszzzzz
mateuuszzzzz committed Dec 21, 2023
1 parent daa8597 commit 476eeda
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 53 deletions.
2 changes: 1 addition & 1 deletion src/SCREENS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const SCREENS = {
},
LEFT_MODAL: {
SEARCH: 'Search',
WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
},
WORKSPACE_SWITCHER: {
ROOT: 'WorkspaceSwitcher_Root',
Expand Down Expand Up @@ -113,7 +114,6 @@ const SCREENS = {
ROOM_MEMBERS: 'RoomMembers',
ROOM_INVITE: 'RoomInvite',
REFERRAL: 'Referral',
WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
},
SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
Expand Down
5 changes: 0 additions & 5 deletions src/components/EnvironmentBadge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import React from 'react';
import useEnvironment from '@hooks/useEnvironment';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Environment from '@libs/Environment/Environment';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import pkg from '../../package.json';
import Badge from './Badge';

Expand Down Expand Up @@ -35,9 +33,6 @@ function EnvironmentBadge() {
textStyles={[styles.headerEnvBadgeText]}
environment={environment}
pressable
onPress={() => {
Navigation.navigate(ROUTES.WORKSPACE_SWITCHER);
}}
/>
);
}
Expand Down
4 changes: 4 additions & 0 deletions src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
name={SCREENS.LEFT_MODAL.SEARCH}
component={ModalStackNavigators.SearchModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER}
component={ModalStackNavigators.WorkspaceSwitcherModalStackNavigator}
/>
</Stack.Navigator>
</View>
</NoDropZone>
Expand Down
4 changes: 0 additions & 4 deletions src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
name={SCREENS.RIGHT_MODAL.SETTINGS}
component={ModalStackNavigators.SettingsModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.RIGHT_MODAL.WORKSPACE_SWITCHER}
component={ModalStackNavigators.WorkspaceSwitcherModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.RIGHT_MODAL.NEW_CHAT}
component={ModalStackNavigators.NewChatModalStackNavigator}
Expand Down
7 changes: 6 additions & 1 deletion src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ function TopBar({isCreateMenuOpen = false}) {
style={[styles.gap4, styles.flexRow, styles.ph5, styles.pv5, styles.justifyContentBetween, styles.alignItemsCenter]}
dataSet={{dragArea: true}}
>
<PressableWithFeedback role={CONST.ROLE.BUTTON}>
<PressableWithFeedback
role={CONST.ROLE.BUTTON}
onPress={() => {
Navigation.navigate(ROUTES.WORKSPACE_SWITCHER);
}}
>
<SubscriptAvatar
mainAvatar={{source: Expensicons.ExpensifyAppIcon, name: 'Expensify', type: CONST.ICON_TYPE_AVATAR}}
subscriptIcon={{source: Expensicons.DownArrow, width: 8, height: 8}}
Expand Down
16 changes: 8 additions & 8 deletions src/libs/Navigation/linkingConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,13 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
[SCREENS.SEARCH_ROOT]: ROUTES.SEARCH,
},
},
[SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: {
screens: {
[SCREENS.WORKSPACE_SWITCHER.ROOT]: {
path: ROUTES.WORKSPACE_SWITCHER,
},
},
},
},
},
[NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {
Expand Down Expand Up @@ -256,14 +263,7 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
},
[SCREENS.WORKSPACE.NAME]: ROUTES.WORKSPACE_NAME.route,
},
},
[SCREENS.RIGHT_MODAL.WORKSPACE_SWITCHER]: {
screens: {
[SCREENS.WORKSPACE_SWITCHER.ROOT]: {
path: ROUTES.WORKSPACE_SWITCHER,
},
},
},
},
[SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: {
screens: {
[SCREENS.PRIVATE_NOTES.VIEW]: ROUTES.PRIVATE_NOTES_VIEW.route,
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,7 @@ type PrivateNotesNavigatorParamList = {

type LeftModalNavigatorParamList = {
[SCREENS.LEFT_MODAL.SEARCH]: NavigatorScreenParams<SearchNavigatorParamList>;
[SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: NavigatorScreenParams<WorkspaceSwitcherNavigatorParamList>;
};

type RightModalNavigatorParamList = {
Expand All @@ -381,7 +382,6 @@ type RightModalNavigatorParamList = {
[SCREENS.RIGHT_MODAL.SIGN_IN]: NavigatorScreenParams<SignInNavigatorParamList>;
[SCREENS.RIGHT_MODAL.REFERRAL]: NavigatorScreenParams<ReferralDetailsNavigatorParamList>;
[SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
[SCREENS.RIGHT_MODAL.WORKSPACE_SWITCHER]: NavigatorScreenParams<WorkspaceSwitcherNavigatorParamList>;
};

type SettingsCentralPaneNavigatorParamList = {
Expand Down
95 changes: 62 additions & 33 deletions src/pages/WorkspaceSwitcherPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import OptionsSelector from '@components/OptionsSelector';
import Text from '@components/Text';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useNetwork from '@hooks/useNetwork';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import * as Policy from '@userActions/Policy';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
Expand Down Expand Up @@ -65,8 +65,8 @@ function WorkspaceSwitcherPage({policies, activeWorkspaceID}) {
const hasUnreadData = useCallback(
// TO DO: Implement checking if policy has some unread data
// eslint-disable-next-line no-unused-vars
(policyId) => false,
[]
(policyId) => false,
[],
);

const selectPolicy = useCallback((option) => {
Expand All @@ -83,7 +83,7 @@ function WorkspaceSwitcherPage({policies, activeWorkspaceID}) {
const onChangeText = useCallback((newSearchTerm) => {
// TO DO: Handle searching logic
setSearchTerm(newSearchTerm);
}, [])
}, []);

const usersWorkspaces = useMemo(
() =>
Expand All @@ -110,10 +110,10 @@ function WorkspaceSwitcherPage({policies, activeWorkspaceID}) {

const usersWorkspacesSectionData = useMemo(
() => ({
data: usersWorkspaces,
shouldShow: true,
indexOffset: 0,
}),
data: usersWorkspaces,
shouldShow: true,
indexOffset: 0,
}),
[usersWorkspaces],
);

Expand Down Expand Up @@ -153,44 +153,73 @@ function WorkspaceSwitcherPage({policies, activeWorkspaceID}) {
</View>
</>
);
}, [activeWorkspaceID, getIndicatorTypeForPolicy, hasUnreadData, selectPolicy, styles.alignItemsCenter, styles.flexRow, styles.justifyContentBetween, styles.label, styles.mb3, styles.mh4, theme.textSupporting]);
}, [
activeWorkspaceID,
getIndicatorTypeForPolicy,
hasUnreadData,
selectPolicy,
styles.alignItemsCenter,
styles.flexRow,
styles.justifyContentBetween,
styles.label,
styles.mb3,
styles.mh4,
theme.textSupporting,
]);

const inputCallbackRef = useAutoFocusInput();
const workspacesSection = useMemo(
() => (
<>
<View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb1]}>
<View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb1]}>
<Text
style={[styles.mt3, styles.label]}
color={theme.textSupporting}
>
Workspaces
</Text>
</View>
{/* TO DO: Display breadcrumb */}
{usersWorkspacesSectionData.data.length === 0 && <View/>}
<OptionsSelector
ref={inputCallbackRef}
sections={[usersWorkspacesSectionData]}
value={searchTerm}
shouldShowTextInput={usersWorkspacesSectionData.data.length > 8}
onChangeText={onChangeText}
selectedOptions={selectedOption ? [selectedOption] : []}
onSelectRow={selectPolicy}
boldStyle
shouldPreventDefaultFocusOnSelectRow
highlightSelectedOptions
shouldShowOptions
autoFocus={false}
disableFocusOptions
canSelectMultipleOptions={false}
shouldShowSubscript={false}
showTitleTooltip={false}
contentContainerStyles={[styles.pt0, styles.mt0]}
{/* TO DO: Display breadcrumb */}
{usersWorkspacesSectionData.data.length === 0 && <View />}
<OptionsSelector
ref={inputCallbackRef}
sections={[usersWorkspacesSectionData]}
value={searchTerm}
shouldShowTextInput={usersWorkspacesSectionData.data.length > 8}
onChangeText={onChangeText}
selectedOptions={selectedOption ? [selectedOption] : []}
onSelectRow={selectPolicy}
boldStyle
shouldPreventDefaultFocusOnSelectRow
highlightSelectedOptions
shouldShowOptions
autoFocus={false}
disableFocusOptions
canSelectMultipleOptions={false}
shouldShowSubscript={false}
showTitleTooltip={false}
contentContainerStyles={[styles.pt0, styles.mt0]}
/>
</>
</>
),
[inputCallbackRef, onChangeText, searchTerm, selectPolicy, selectedOption, styles.alignItemsCenter, styles.flexRow, styles.justifyContentBetween, styles.label, styles.mb1, styles.mh4, styles.mt0, styles.mt3, styles.pt0, theme.textSupporting, usersWorkspacesSectionData],
[
inputCallbackRef,
onChangeText,
searchTerm,
selectPolicy,
selectedOption,
styles.alignItemsCenter,
styles.flexRow,
styles.justifyContentBetween,
styles.label,
styles.mb1,
styles.mh4,
styles.mt0,
styles.mt3,
styles.pt0,
theme.textSupporting,
usersWorkspacesSectionData,
],
);

useEffect(() => {
Expand Down

0 comments on commit 476eeda

Please sign in to comment.