diff --git a/packages/twenty-front/src/hooks/useNavigateSettings.ts b/packages/twenty-front/src/hooks/useNavigateSettings.ts index 3fdb987f2d..291524bf63 100644 --- a/packages/twenty-front/src/hooks/useNavigateSettings.ts +++ b/packages/twenty-front/src/hooks/useNavigateSettings.ts @@ -1,9 +1,11 @@ +import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { useNavigate } from 'react-router-dom'; import { type SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; export const useNavigateSettings = () => { const navigate = useNavigate(); + const { openSettingsMenu } = useOpenSettingsMenu(); return ( to: T, @@ -14,6 +16,8 @@ export const useNavigateSettings = () => { state?: any; }, ) => { + openSettingsMenu(); + const path = getSettingsPath(to, params, queryParams); return navigate(path, options); }; diff --git a/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx b/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx index 6ed5ca9402..640ad9bb0e 100644 --- a/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx +++ b/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx @@ -1,19 +1,11 @@ import { useLingui } from '@lingui/react/macro'; -import { useLocation, useNavigate } from 'react-router-dom'; import { SettingsPath } from 'twenty-shared/types'; -import { getSettingsPath } from 'twenty-shared/utils'; import { IconHelpCircle, IconSettings } from 'twenty-ui/display'; import { AnimatedExpandableContainer } from 'twenty-ui/layout'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; -import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl'; -import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; -import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; -import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; -import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; @@ -22,22 +14,12 @@ import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/ import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection'; import { isNavigationSectionOpenFamilyState } from '@/ui/navigation/navigation-drawer/states/isNavigationSectionOpenFamilyState'; import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue'; +import { useNavigateSettings } from '~/hooks/useNavigateSettings'; export const NavigationDrawerOtherSection = () => { const { t } = useLingui(); - const location = useLocation(); - const navigate = useNavigate(); + const navigateSettings = useNavigateSettings(); const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState); - const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] = - useAtomState(isNavigationDrawerExpandedState); - const setNavigationDrawerExpandedMemorized = useSetAtomState( - navigationDrawerExpandedMemorizedState, - ); - const setNavigationMemorizedUrl = useSetAtomState( - navigationMemorizedUrlState, - ); - - const { openSettingsMenu } = useOpenSettingsMenu(); const { toggleNavigationSection } = useNavigationSection('Other'); const isNavigationSectionOpen = useAtomFamilyStateValue( @@ -46,11 +28,7 @@ export const NavigationDrawerOtherSection = () => { ); const handleSettingsClick = () => { - setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded); - setIsNavigationDrawerExpanded(true); - setNavigationMemorizedUrl(location.pathname + location.search); - openSettingsMenu(); - navigate(getSettingsPath(SettingsPath.ProfilePage)); + navigateSettings(SettingsPath.ProfilePage); }; return ( diff --git a/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts b/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts index 92ee5c1de9..ebbc6c7a68 100644 --- a/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts +++ b/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts @@ -1,17 +1,35 @@ +import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; +import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { useLocation } from 'react-router-dom'; export const useOpenSettingsMenu = () => { - const setIsNavigationDrawerExpanded = useSetAtomState( - isNavigationDrawerExpandedState, + const location = useLocation(); + const isSettingsPage = useIsSettingsPage(); + const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] = + useAtomState(isNavigationDrawerExpandedState); + const setNavigationDrawerExpandedMemorized = useSetAtomState( + navigationDrawerExpandedMemorizedState, + ); + const setNavigationMemorizedUrl = useSetAtomState( + navigationMemorizedUrlState, ); const setCurrentMobileNavigationDrawer = useSetAtomState( currentMobileNavigationDrawerState, ); const openSettingsMenu = () => { + if (isSettingsPage) { + return; + } + + setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded); setIsNavigationDrawerExpanded(true); + setNavigationMemorizedUrl(location.pathname + location.search); setCurrentMobileNavigationDrawer('settings'); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx index 9f4f259e27..90f70827a2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx @@ -15,13 +15,10 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; +import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MultiWorkspaceDropdownId'; import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState'; -import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; -import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; -import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useColorScheme } from '@/ui/theme/hooks/useColorScheme'; -import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { CombinedGraphQLErrors } from '@apollo/client/errors'; @@ -29,7 +26,6 @@ import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { themeCssVariables } from 'twenty-ui/theme-constants'; import { isNonEmptyString } from '@sniptt/guards'; -import { useLocation } from 'react-router-dom'; import { AppPath, SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { @@ -85,15 +81,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => { multiWorkspaceDropdownState, ); - const location = useLocation(); - const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] = - useAtomState(isNavigationDrawerExpandedState); - const setNavigationDrawerExpandedMemorized = useSetAtomState( - navigationDrawerExpandedMemorizedState, - ); - const setNavigationMemorizedUrl = useSetAtomState( - navigationMemorizedUrlState, - ); + const { openSettingsMenu } = useOpenSettingsMenu(); const handleSupport = () => { window.FrontChat?.('show'); @@ -239,9 +227,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => { { - setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded); - setIsNavigationDrawerExpanded(true); - setNavigationMemorizedUrl(location.pathname + location.search); + openSettingsMenu(); closeDropdown(MULTI_WORKSPACE_DROPDOWN_ID); }} >