vynte-infra/twenty
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: improve item type handling and component logic in CommandMenu

Browse Source 
Refactored the CommandMenuNavigationMenuItemEditPage and related hooks to enhance item type checks and streamline component logic. Updated imports for better organization and clarity, ensuring consistent handling of navigation menu item types. This change simplifies the logic for rendering components based on selected item types, improving overall code readability and maintainability.
This commit is contained in:
Abdul Rahman
2026-02-10 14:08:37 +05:30
parent d24264a302
commit fa9dba834f
3 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx
+15 -12
View File
@@ -1,20 +1,20 @@
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
import { CommandMenuEditFolderPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView';
import { CommandMenuEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
import { CommandMenuEditLinkItemView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView';
import { CommandMenuEditObjectViewBase } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase';
import { CommandMenuEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection';
import { useNavigationMenuItemEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions';
import { useNavigationMenuItemEditSubView } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditSubView';
import { useSelectedNavigationMenuItemEditData } from '@/command-menu/pages/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditData';
import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
import { NAVIGATION_MENU_ITEM_TYPE } from '@/navigation-menu-item/types/navigation-menu-item-type';
import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
const StyledCommandMenuPlaceholder = styled.p`
color: ${({ theme }) => theme.font.color.tertiary};
@@ -89,14 +89,13 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
);
}
if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK && !selectedItem) {
return null;
}
if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK) {
if (
isDefined(selectedItem) &&
selectedItem.itemType === NAVIGATION_MENU_ITEM_TYPE.LINK
) {
return (
<CommandMenuEditLinkItemView
selectedItem={selectedItem as ProcessedNavigationMenuItem}
selectedItem={selectedItem}
onUpdateLink={(linkId, link) => updateLinkInDraft(linkId, { link })}
onOpenFolderPicker={setFolderPicker}
canMoveUp={canMoveUp}
@@ -110,6 +109,10 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
);
}
if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK) {
return null;
}
if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.FOLDER) {
return (
<CommandMenuList
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditData.ts
+6 -4
View File
@@ -2,9 +2,8 @@ import { useRecoilValue } from 'recoil';
import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
import { NAVIGATION_MENU_ITEM_TYPE } from '@/navigation-menu-item/types/navigation-menu-item-type';
import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { coreViewsState } from '@/views/states/coreViewState';
import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
@@ -25,7 +24,7 @@ export const useSelectedNavigationMenuItemEditData = () => {
const selectedItemType = selectedItem?.itemType ?? null;
const selectedItemObjectMetadata = selectedItem
? getObjectMetadataForNavigationMenuItem(
selectedItem as ProcessedNavigationMenuItem,
selectedItem,
objectMetadataItems,
views,
)
@@ -38,7 +37,10 @@ export const useSelectedNavigationMenuItemEditData = () => {
: (selectedItemObjectMetadata?.labelPlural ?? '')
: null;
const processedItem = selectedItem as ProcessedNavigationMenuItem | undefined;
const processedItem =
selectedItem && selectedItem.itemType !== NAVIGATION_MENU_ITEM_TYPE.FOLDER
? selectedItem
: undefined;
return {
selectedItem,
packages/twenty-front/src/modules/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem.ts
+7 -2
View File
@@ -1,11 +1,16 @@
import { isDefined } from 'twenty-shared/utils';
import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { type View } from '@/views/types/View';
type NavigationMenuItemWithItemType = Pick<
ProcessedNavigationMenuItem,
'itemType' | 'viewId' | 'targetObjectMetadataId'
>;
export const getObjectMetadataForNavigationMenuItem = (
navigationMenuItem: ProcessedNavigationMenuItem,
navigationMenuItem: NavigationMenuItemWithItemType,
objectMetadataItems: ObjectMetadataItem[],
views: View[],
): ObjectMetadataItem | null => {