From 31f29582d0fc1bd031260a253470faec204fbb4f Mon Sep 17 00:00:00 2001 From: Kanav Arora Date: Sat, 2 Dec 2023 04:15:42 +0530 Subject: [PATCH] 2727-fix(front): CommandMenu and KeyboardMenu invoke handled (#2783) * 2727-fix(front): CommandMenu and KeyboardMenu invoke handled * Fix Command Menu and bug on metadata re-render --------- Co-authored-by: Charles Bochet --- .../command-menu/components/CommandMenu.tsx | 4 ++++ .../components/KeyboardShortcutMenu.tsx | 5 ++++- .../ObjectMetadataItemsLoadEffect.tsx | 18 ++++++++++++++- .../ObjectMetadataItemsProvider.tsx | 22 ++++++++++++------- .../hooks/useFindManyObjectMetadataItems.ts | 21 ------------------ 5 files changed, 39 insertions(+), 31 deletions(-) diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index 5f765750b..0fdda52a1 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/front/src/modules/command-menu/components/CommandMenu.tsx @@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil'; import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer'; import { CommandMenuSelectableListEffect } from '@/command-menu/components/CommandMenuSelectableListEffect'; +import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { Person } from '@/people/types/Person'; import { IconNotes } from '@/ui/display/icon'; @@ -89,6 +90,7 @@ export const CommandMenu = () => { const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); const [search, setSearch] = useState(''); const commandMenuCommands = useRecoilValue(commandMenuCommandsState); + const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu(); const handleSearchChange = (event: React.ChangeEvent) => { setSearch(event.target.value); @@ -97,6 +99,7 @@ export const CommandMenu = () => { useScopedHotkeys( 'ctrl+k,meta+k', () => { + closeKeyboardShortcutMenu(); setSearch(''); toggleCommandMenu(); }, @@ -108,6 +111,7 @@ export const CommandMenu = () => { 'esc', () => { setSearch(''); + closeKeyboardShortcutMenu(); closeCommandMenu(); }, AppHotkeyScope.CommandMenu, diff --git a/front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx b/front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx index a01baff11..6021ea84b 100644 --- a/front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx +++ b/front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx @@ -1,5 +1,6 @@ import { useRecoilValue } from 'recoil'; +import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; @@ -20,9 +21,11 @@ export const KeyboardShortcutMenu = () => { const isKeyboardShortcutMenuOpened = useRecoilValue( isKeyboardShortcutMenuOpenedState, ); + const { closeCommandMenu } = useCommandMenu(); useScopedHotkeys( 'shift+?,meta+?', () => { + closeCommandMenu(); toggleKeyboardShortcutMenu(); }, AppHotkeyScope.KeyboardShortcutMenu, @@ -30,7 +33,7 @@ export const KeyboardShortcutMenu = () => { ); useScopedHotkeys( - 'Esc', + 'esc', () => { closeKeyboardShortcutMenu(); }, diff --git a/front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx b/front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx index a0100ca58..9288ec017 100644 --- a/front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx +++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx @@ -1,7 +1,23 @@ +import { useEffect } from 'react'; +import { useRecoilState } from 'recoil'; + import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems'; +import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; export const ObjectMetadataItemsLoadEffect = () => { - useFindManyObjectMetadataItems(); + const { objectMetadataItems: newObjectMetadataItems } = + useFindManyObjectMetadataItems(); + + const [objectMetadataItems, setObjectMetadataItems] = useRecoilState( + objectMetadataItemsState, + ); + + useEffect(() => { + if (!isDeeplyEqual(objectMetadataItems, newObjectMetadataItems)) { + setObjectMetadataItems(newObjectMetadataItems); + } + }, [newObjectMetadataItems, objectMetadataItems, setObjectMetadataItems]); return <>; }; diff --git a/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx b/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx index 31d393d93..faef40fe2 100644 --- a/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx +++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx @@ -3,25 +3,31 @@ import { useRecoilValue } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect'; import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect'; +import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope'; export const ObjectMetadataItemsProvider = ({ children, }: React.PropsWithChildren) => { + useFindManyObjectMetadataItems(); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState); const currentWorkspace = useRecoilValue(currentWorkspaceState); - return objectMetadataItems.length < 1 && currentWorkspace ? ( + return ( <> - - ) : ( - <> - - - {children} - + {objectMetadataItems.length < 1 && currentWorkspace ? ( + <> + ) : ( + <> + + + {children} + + + )} ); }; diff --git a/front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts b/front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts index 784bea88d..b90dd55c3 100644 --- a/front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts +++ b/front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts @@ -1,8 +1,6 @@ import { useMemo } from 'react'; import { useQuery } from '@apollo/client'; -import { useRecoilCallback } from 'recoil'; -import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { FieldFilter, @@ -10,7 +8,6 @@ import { ObjectMetadataItemsQuery, ObjectMetadataItemsQueryVariables, } from '~/generated-metadata/graphql'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; import { logError } from '~/utils/logError'; import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries'; @@ -50,24 +47,6 @@ export const useFindManyObjectMetadataItems = ({ }, ); }, - onCompleted: useRecoilCallback( - ({ snapshot, set }) => - (data) => { - const objectMetadataItems = - mapPaginatedObjectMetadataItemsToObjectMetadataItems({ - pagedObjectMetadataItems: data, - }); - - const actualObjectMetadataItems = snapshot - .getLoadable(objectMetadataItemsState) - .getValue(); - - if (!isDeeplyEqual(objectMetadataItems, actualObjectMetadataItems)) { - set(objectMetadataItemsState, objectMetadataItems); - } - }, - [], - ), }); const objectMetadataItems = useMemo(() => {