From e394f7a2b827765fba9038951c7aca3b5ab8bf31 Mon Sep 17 00:00:00 2001 From: ZiaCodes Date: Thu, 17 Oct 2024 10:07:07 +0500 Subject: [PATCH 1/5] fix: hidden settings menu affects settings layout --- .../src/modules/ui/layout/page/PageHeader.tsx | 4 +++- packages/twenty-front/src/utils/currentPage.ts | 11 +++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 packages/twenty-front/src/utils/currentPage.ts diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index ed9586bf969a..11a6e1b47513 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -15,6 +15,7 @@ import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { useIsRoute } from '~/utils/currentPage'; export const PAGE_BAR_MIN_HEIGHT = 40; @@ -109,11 +110,12 @@ export const PageHeader = ({ const isMobile = useIsMobile(); const theme = useTheme(); const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState); + const isSettingsPage = useIsRoute('/settings/profile'); return ( - {!isMobile && !isNavigationDrawerOpen && ( + {!isMobile && !isNavigationDrawerOpen && !isSettingsPage && ( diff --git a/packages/twenty-front/src/utils/currentPage.ts b/packages/twenty-front/src/utils/currentPage.ts new file mode 100644 index 000000000000..42794d790c94 --- /dev/null +++ b/packages/twenty-front/src/utils/currentPage.ts @@ -0,0 +1,11 @@ +import { useLocation } from 'react-router-dom'; + +/** + * Custom hook to check if the current route matches the given path. + * @param path The route to match. + * @returns True if the current route matches the given path, false otherwise. + */ +export const useIsRoute = (path: string): boolean => { + const location = useLocation(); + return location.pathname === path; +}; From fa7c1ef78b73f95a93fe492a9f2e2d88fd2245cf Mon Sep 17 00:00:00 2001 From: ZiaCodes Date: Fri, 18 Oct 2024 09:26:58 +0500 Subject: [PATCH 2/5] feat: improved the code --- .../src/modules/ui/layout/page/PageHeader.tsx | 5 +++-- packages/twenty-front/src/utils/currentPage.ts | 11 ----------- 2 files changed, 3 insertions(+), 13 deletions(-) delete mode 100644 packages/twenty-front/src/utils/currentPage.ts diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index 11a6e1b47513..cb1e4be0a08d 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -15,7 +15,7 @@ import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { useIsRoute } from '~/utils/currentPage'; +import { matchPath, useLocation } from 'react-router-dom'; export const PAGE_BAR_MIN_HEIGHT = 40; @@ -110,7 +110,8 @@ export const PageHeader = ({ const isMobile = useIsMobile(); const theme = useTheme(); const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState); - const isSettingsPage = useIsRoute('/settings/profile'); + const { pathname } = useLocation(); + const isSettingsPage = matchPath('/settings/*', pathname); return ( diff --git a/packages/twenty-front/src/utils/currentPage.ts b/packages/twenty-front/src/utils/currentPage.ts deleted file mode 100644 index 42794d790c94..000000000000 --- a/packages/twenty-front/src/utils/currentPage.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useLocation } from 'react-router-dom'; - -/** - * Custom hook to check if the current route matches the given path. - * @param path The route to match. - * @returns True if the current route matches the given path, false otherwise. - */ -export const useIsRoute = (path: string): boolean => { - const location = useLocation(); - return location.pathname === path; -}; From c0c8f2db6e32d5e4867b674224a90be69b42c8cd Mon Sep 17 00:00:00 2001 From: ZiaCodes Date: Fri, 18 Oct 2024 23:16:18 +0500 Subject: [PATCH 3/5] fix: side menu navigation --- .../src/modules/ui/layout/page/PageHeader.tsx | 9 ++++----- .../NavigationDrawerCollapseButton.tsx | 17 ++++++++++++++++- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index b25f00ae9ac5..4243a2d285f8 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -110,15 +110,14 @@ export const PageHeader = ({ }: PageHeaderProps) => { const isMobile = useIsMobile(); const theme = useTheme(); - const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState); - const { pathname } = useLocation(); - const isSettingsPage = matchPath('/settings/*', pathname); - + const isNavigationDrawerExpanded = useRecoilValue( + isNavigationDrawerExpandedState, + ); return ( - {!isMobile && !isNavigationDrawerOpen && !isSettingsPage && ( + {!isMobile && !isNavigationDrawerExpanded && ( diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx index 9be3547320b4..8c6aa838cd39 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx @@ -1,7 +1,9 @@ +import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { IconButton } from '@/ui/input/button/components/IconButton'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import styled from '@emotion/styled'; -import { useSetRecoilState } from 'recoil'; +import { useEffect } from 'react'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, @@ -28,9 +30,22 @@ export const NavigationDrawerCollapseButton = ({ className, direction = 'left', }: NavigationDrawerCollapseButtonProps) => { + const isSettingsPage = useIsSettingsPage(); + const setIsNavigationDrawerExpanded = useSetRecoilState( isNavigationDrawerExpandedState, ); + const isNavigationDrawerExpanded = useRecoilValue( + isNavigationDrawerExpandedState, + ); + + // Check if the user is on the settings page and the navigation drawer is not expanded + // Then open it automatically + useEffect(() => { + if (!isNavigationDrawerExpanded && isSettingsPage) { + setIsNavigationDrawerExpanded(true); + } + }, [isSettingsPage]); return ( Date: Mon, 21 Oct 2024 20:26:07 +0200 Subject: [PATCH 4/5] Remove useEffects --- .../GoToHotkeyItemEffect.tsx | 2 +- .../effect-components/GotoHotkeysEffect.tsx | 22 +++++++++++++++++-- .../components/AppNavigationDrawer.tsx | 14 ++---------- .../ui/layout/page/components/PageHeader.tsx | 1 - .../NavigationDrawerCollapseButton.tsx | 17 +------------- .../hooks/__tests__/useGoToHotkeys.test.tsx | 4 ++-- .../utilities/hotkey/hooks/useGoToHotkeys.ts | 13 ++++++++++- 7 files changed, 38 insertions(+), 35 deletions(-) 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 index 202b58b963e5..0ea244ecd5a8 100644 --- a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx @@ -1,13 +1,31 @@ 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 GotoHotkeys = () => { const { nonSystemActiveObjectMetadataItems } = useNonSystemActiveObjectMetadataItems(); - // Hardcoded since settings is static - useGoToHotkeys('s', '/settings/profile'); + const location = useLocation(); + + useGoToHotkeys({ + key: 's', + location: '/settings/profile', + preNavigateFunction: useRecoilCallback( + ({ set }) => + () => { + set(isNavigationDrawerExpandedState, true); + set(navigationDrawerExpandedMemorizedState, true); + set(navigationMemorizedUrlState, location.pathname + location.search); + }, + [], + ), + }); return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => ( { - 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 ( { - const isSettingsPage = useIsSettingsPage(); - const setIsNavigationDrawerExpanded = useSetRecoilState( isNavigationDrawerExpandedState, ); - const isNavigationDrawerExpanded = useRecoilValue( - isNavigationDrawerExpandedState, - ); - - // Check if the user is on the settings page and the navigation drawer is not expanded - // Then open it automatically - useEffect(() => { - if (!isNavigationDrawerExpanded && isSettingsPage) { - setIsNavigationDrawerExpanded(true); - } - }, [isSettingsPage]); 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, From 1cf742e5d6d59bb6218ec2fd9f0ebf10b52d7094 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 21 Oct 2024 20:30:36 +0200 Subject: [PATCH 5/5] Fix --- .../src/modules/app/components/AppRouterProviders.tsx | 4 ++-- .../{GotoHotkeysEffect.tsx => GotoHotkeysEffectsProvider.tsx} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename packages/twenty-front/src/modules/app/effect-components/{GotoHotkeysEffect.tsx => GotoHotkeysEffectsProvider.tsx} (94%) 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/GotoHotkeysEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx similarity index 94% rename from packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx rename to packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx index 0ea244ecd5a8..44267f5c34e3 100644 --- a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx @@ -7,7 +7,7 @@ import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys'; import { useLocation } from 'react-router-dom'; import { useRecoilCallback } from 'recoil'; -export const GotoHotkeys = () => { +export const GotoHotkeysEffectsProvider = () => { const { nonSystemActiveObjectMetadataItems } = useNonSystemActiveObjectMetadataItems(); @@ -23,7 +23,7 @@ export const GotoHotkeys = () => { set(navigationDrawerExpandedMemorizedState, true); set(navigationMemorizedUrlState, location.pathname + location.search); }, - [], + [location.pathname, location.search], ), });