From 5e2df81211271f89d15d840ff502124a500fd1df Mon Sep 17 00:00:00 2001 From: ZiaCodes <72739794+Khaan25@users.noreply.github.com> Date: Tue, 22 Oct 2024 00:28:01 +0500 Subject: [PATCH] fix: hidden settings menu affects settings layout (#7769) This PR fixes #6746 --------- Co-authored-by: Charles Bochet --- .../app/components/AppRouterProviders.tsx | 4 +- .../GoToHotkeyItemEffect.tsx | 2 +- .../effect-components/GotoHotkeysEffect.tsx | 19 ---------- .../GotoHotkeysEffectsProvider.tsx | 37 +++++++++++++++++++ .../components/AppNavigationDrawer.tsx | 14 +------ .../hooks/__tests__/useGoToHotkeys.test.tsx | 4 +- .../utilities/hotkey/hooks/useGoToHotkeys.ts | 13 ++++++- 7 files changed, 56 insertions(+), 37 deletions(-) delete mode 100644 packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx create mode 100644 packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx index 80b02508f736..df7bb083f9dc 100644 --- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx +++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx @@ -1,6 +1,6 @@ import { ApolloProvider } from '@/apollo/components/ApolloProvider'; import { CommandMenuEffect } from '@/app/effect-components/CommandMenuEffect'; -import { GotoHotkeys } from '@/app/effect-components/GotoHotkeysEffect'; +import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider'; import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect'; import { AuthProvider } from '@/auth/components/AuthProvider'; import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect'; @@ -45,7 +45,7 @@ export const AppRouterProviders = () => { - + diff --git a/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx index a0b545302501..d6f9f70d7a72 100644 --- a/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx @@ -6,7 +6,7 @@ export const GoToHotkeyItemEffect = (props: { }) => { const { hotkey, pathToNavigateTo } = props; - useGoToHotkeys(hotkey, pathToNavigateTo); + useGoToHotkeys({ key: hotkey, location: pathToNavigateTo }); return <>; }; diff --git a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx deleted file mode 100644 index 202b58b963e5..000000000000 --- a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect'; -import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems'; -import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys'; - -export const GotoHotkeys = () => { - const { nonSystemActiveObjectMetadataItems } = - useNonSystemActiveObjectMetadataItems(); - - // Hardcoded since settings is static - useGoToHotkeys('s', '/settings/profile'); - - return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => ( - - )); -}; diff --git a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx new file mode 100644 index 000000000000..44267f5c34e3 --- /dev/null +++ b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx @@ -0,0 +1,37 @@ +import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect'; +import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems'; +import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; +import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; +import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys'; +import { useLocation } from 'react-router-dom'; +import { useRecoilCallback } from 'recoil'; + +export const GotoHotkeysEffectsProvider = () => { + const { nonSystemActiveObjectMetadataItems } = + useNonSystemActiveObjectMetadataItems(); + + const location = useLocation(); + + useGoToHotkeys({ + key: 's', + location: '/settings/profile', + preNavigateFunction: useRecoilCallback( + ({ set }) => + () => { + set(isNavigationDrawerExpandedState, true); + set(navigationDrawerExpandedMemorizedState, true); + set(navigationMemorizedUrlState, location.pathname + location.search); + }, + [location.pathname, location.search], + ), + }); + + return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => ( + + )); +}; diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx index 258473603420..b286b4e91d63 100644 --- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx @@ -1,5 +1,4 @@ -import { useEffect } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems'; @@ -9,13 +8,11 @@ import { NavigationDrawerProps, } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; -import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI'; import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle'; -import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { MainNavigationDrawerItems } from './MainNavigationDrawerItems'; export type AppNavigationDrawerProps = { @@ -25,11 +22,8 @@ export type AppNavigationDrawerProps = { export const AppNavigationDrawer = ({ className, }: AppNavigationDrawerProps) => { - const isMobile = useIsMobile(); const isSettingsDrawer = useIsSettingsDrawer(); - const setIsNavigationDrawerExpanded = useSetRecoilState( - isNavigationDrawerExpandedState, - ); + const currentWorkspace = useRecoilValue(currentWorkspaceState); const drawerProps: NavigationDrawerProps = isSettingsDrawer @@ -48,10 +42,6 @@ export const AppNavigationDrawer = ({ footer: , }; - useEffect(() => { - setIsNavigationDrawerExpanded(!isMobile); - }, [isMobile, setIsNavigationDrawerExpanded]); - return ( { it('should navigate on hotkey trigger', () => { const { result } = renderHook(() => { - useGoToHotkeys('a', '/three'); + useGoToHotkeys({ key: 'a', location: '/three' }); const setHotkeyScope = useSetHotkeyScope(); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts index aeb485b4c02f..d8e62312cfeb 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts @@ -5,13 +5,24 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope'; import { useSequenceHotkeys } from './useSequenceScopedHotkeys'; -export const useGoToHotkeys = (key: Keys, location: string) => { +type GoToHotkeysProps = { + key: Keys; + location: string; + preNavigateFunction?: () => void; +}; + +export const useGoToHotkeys = ({ + key, + location, + preNavigateFunction, +}: GoToHotkeysProps) => { const navigate = useNavigate(); useSequenceHotkeys( 'g', key, () => { + preNavigateFunction?.(); navigate(location); }, AppHotkeyScope.Goto,