From 00f2e569258d0a6793df5c83fcb2e5d5abe7a9ce Mon Sep 17 00:00:00 2001 From: Abdul Rahman Date: Mon, 2 Mar 2026 07:19:12 +0530 Subject: [PATCH] Refactor navigation menu components to streamline state management by removing objectMetadataItems and views props. Introduced local state retrieval for object metadata and core views, enhancing code clarity and reducing prop drilling across components. --- .../WorkspaceNavigationMenuItemFolderSubItem.tsx | 16 ++++++++-------- .../WorkspaceNavigationMenuItemsFolder.tsx | 10 ---------- ...ationDrawerSectionForWorkspaceItemContent.tsx | 8 ++++++-- .../NavigationDrawerSectionForWorkspaceItems.tsx | 4 ---- ...nDrawerSectionForWorkspaceItemsListDndKit.tsx | 4 ---- ...erSectionForWorkspaceItemsListHelloPangea.tsx | 4 ---- ...igationDrawerSectionForWorkspaceItemsTypes.ts | 5 ----- 7 files changed, 14 insertions(+), 37 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx index c8dd916b832..d6a045fbf46 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx @@ -3,24 +3,23 @@ import { isDefined } from 'twenty-shared/utils'; import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon'; import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType'; import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems'; +import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState'; import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel'; import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem'; import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems'; -import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState'; -import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; -import { type View } from '@/views/types/View'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { coreViewsState } from '@/views/states/coreViewState'; import { ViewKey } from '@/views/types/ViewKey'; +import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView'; type WorkspaceNavigationMenuItemFolderSubItemProps = { navigationMenuItem: ProcessedNavigationMenuItem; index: number; arrayLength: number; selectedNavigationMenuItemIndex: number; - objectMetadataItems: ObjectMetadataItem[]; - views: View[]; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; selectedNavigationMenuItemId: string | null; isContextDragging: boolean; @@ -31,8 +30,6 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({ index, arrayLength, selectedNavigationMenuItemIndex, - objectMetadataItems, - views, onNavigationMenuItemClick, selectedNavigationMenuItemId, isContextDragging, @@ -40,6 +37,9 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({ const isNavigationMenuInEditMode = useAtomStateValue( isNavigationMenuInEditModeState, ); + const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); + const coreViews = useAtomStateValue(coreViewsState); + const views = coreViews.map(convertCoreViewToView); const objectMetadataItem = navigationMenuItem.itemType === NavigationMenuItemType.VIEW || navigationMenuItem.itemType === NavigationMenuItemType.RECORD diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx index f94f772be14..d5924a871ff 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx @@ -35,7 +35,6 @@ import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/sta import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem'; import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems'; import { WorkspaceDndKitContext } from '@/navigation/contexts/WorkspaceDndKitContext'; -import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer'; @@ -45,8 +44,6 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr 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 { coreViewsState } from '@/views/states/coreViewState'; -import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView'; const StyledFolderContainer = styled.div<{ $isSelectedInEditMode: boolean }>` border: ${({ theme, $isSelectedInEditMode }) => @@ -104,9 +101,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({ const theme = useTheme(); const { getIcon } = useIcons(); const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT); - const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); - const coreViews = useAtomStateValue(coreViewsState); - const views = coreViews.map(convertCoreViewToView); const location = useLocation(); const navigate = useNavigate(); const currentPath = location.pathname; @@ -261,8 +255,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({ selectedNavigationMenuItemIndex={ selectedNavigationMenuItemIndex } - objectMetadataItems={objectMetadataItems} - views={views} onNavigationMenuItemClick={onNavigationMenuItemClick} selectedNavigationMenuItemId={ selectedNavigationMenuItemId ?? null @@ -349,8 +341,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({ selectedNavigationMenuItemIndex={ selectedNavigationMenuItemIndex } - objectMetadataItems={objectMetadataItems} - views={views} onNavigationMenuItemClick={onNavigationMenuItemClick} selectedNavigationMenuItemId={ selectedNavigationMenuItemId ?? null diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent.tsx index b9b4e2ed3de..2c58438bb32 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent.tsx @@ -4,6 +4,9 @@ import { WorkspaceNavigationMenuItemsFolder } from '@/navigation-menu-item/compo import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState'; import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor'; import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem'; +import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; +import { coreViewsState } from '@/views/states/coreViewState'; +import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView'; import type { ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems'; import { NavigationDrawerItemForObjectMetadataItem } from '@/object-metadata/components/NavigationDrawerItemForObjectMetadataItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; @@ -20,12 +23,13 @@ export const WorkspaceSectionItemContent = ({ selectedNavigationMenuItemId, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, - objectMetadataItems, - views, }: WorkspaceSectionItemContentProps) => { const isNavigationMenuInEditMode = useAtomStateValue( isNavigationMenuInEditModeState, ); + const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); + const coreViews = useAtomStateValue(coreViewsState); + const views = coreViews.map(convertCoreViewToView); const type = item.itemType; if (type === 'folder') { diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx index 2f1d871763f..87d00563f43 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx @@ -173,8 +173,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} - objectMetadataItems={objectMetadataItems} - views={views} isAddMenuItemButtonVisible={isAddMenuItemButtonVisible} addToNavigationFallbackDestination={ addToNavigationFallbackDestination @@ -193,8 +191,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} - objectMetadataItems={objectMetadataItems} - views={views} isAddMenuItemButtonVisible={isAddMenuItemButtonVisible} addToNavigationFallbackDestination={ addToNavigationFallbackDestination diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx index 27ae9cb5225..8c1f763b093 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx @@ -29,8 +29,6 @@ export const WorkspaceSectionListDndKit = ({ selectedNavigationMenuItemId, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, - objectMetadataItems, - views, isAddMenuItemButtonVisible, addToNavigationFallbackDestination, onAddMenuItem, @@ -65,8 +63,6 @@ export const WorkspaceSectionListDndKit = ({ selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} - objectMetadataItems={objectMetadataItems} - views={views} /> diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea.tsx index f39631959f2..8cc4240b883 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea.tsx @@ -29,8 +29,6 @@ export const WorkspaceSectionListHelloPangea = ({ selectedNavigationMenuItemId, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, - objectMetadataItems, - views, isAddMenuItemButtonVisible, addToNavigationFallbackDestination, onAddMenuItem, @@ -77,8 +75,6 @@ export const WorkspaceSectionListHelloPangea = ({ onActiveObjectMetadataItemClick={ onActiveObjectMetadataItemClick } - objectMetadataItems={objectMetadataItems} - views={views} /> } /> diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes.ts b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes.ts index b65e188f88f..40e98fea826 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes.ts +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes.ts @@ -4,7 +4,6 @@ import type { } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems'; import type { ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems'; import type { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import type { View } from '@/views/types/View'; export type EditModeProps = { isSelectedInEditMode: boolean; @@ -23,8 +22,6 @@ export type WorkspaceSectionItemContentProps = { objectMetadataItem: ObjectMetadataItem, navigationMenuItemId: string, ) => void; - objectMetadataItems: ObjectMetadataItem[]; - views: View[]; }; export type WorkspaceSectionListCommonProps = { @@ -40,8 +37,6 @@ export type WorkspaceSectionListCommonProps = { objectMetadataItem: ObjectMetadataItem, navigationMenuItemId: string, ) => void; - objectMetadataItems: ObjectMetadataItem[]; - views: View[]; isAddMenuItemButtonVisible: boolean; addToNavigationFallbackDestination: { droppableId: string;