From f34b59b6b627a086b8bfb298171318d8b574cabd Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 5 Mar 2025 15:52:37 +0100 Subject: [PATCH] Fix view open in settings not saving (#10674) This PR removes the legacy useGetCurrentView hook that still returned view with combined filters and sorts, which we don't use anymore. This allows to remove a bug where we couldn't select the "open in" settings of a view. --- .../AdvancedFilterAddFilterRuleSelect.tsx | 9 +-- ...jectOptionsDropdownViewSettingsContent.tsx | 8 +- ...tionsDropdownViewSettingsOpenInContent.tsx | 8 +- .../modules/views/hooks/useGetCurrentView.ts | 77 ------------------- .../components/ViewPickerListContent.tsx | 13 +++- .../hooks/useDeleteViewFromCurrentState.ts | 23 ++++-- 6 files changed, 38 insertions(+), 100 deletions(-) delete mode 100644 packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx index 7680af8c6..e6f9e0234 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx @@ -11,7 +11,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; -import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { useCallback } from 'react'; import { useRecoilValue } from 'recoil'; @@ -32,7 +31,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({ recordFilterGroup.id, ); - const { currentViewId } = useGetCurrentView(); + const { currentView } = useGetCurrentViewOnly(); const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup(); @@ -42,8 +41,6 @@ export const AdvancedFilterAddFilterRuleSelect = ({ const { closeDropdown } = useDropdown(dropdownId); - const { currentView } = useGetCurrentViewOnly(); - const objectMetadataId = currentView?.objectMetadataId; if (!isDefined(objectMetadataId)) { @@ -108,8 +105,8 @@ export const AdvancedFilterAddFilterRuleSelect = ({ const handleAddFilterGroup = () => { closeDropdown(); - if (!currentViewId) { - throw new Error('Missing view id'); + if (!isDefined(currentView)) { + throw new Error('Missing view'); } const newRecordFilterGroupId = v4(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx index 269ce4c40..e18488ca2 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx @@ -12,17 +12,17 @@ import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hook import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; +import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import { ViewType } from '@/views/types/ViewType'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; +import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; -import { useLingui } from '@lingui/react/macro'; export const ObjectOptionsDropdownViewSettingsContent = () => { const { t } = useLingui(); - const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); + const { currentView } = useGetCurrentViewOnly(); const { recordIndexId, @@ -74,7 +74,7 @@ export const ObjectOptionsDropdownViewSettingsContent = () => { onToggleChange={() => setAndPersistIsCompactModeActive( !isCompactModeActive, - currentViewWithCombinedFiltersAndSorts, + currentView, ) } toggled={isCompactModeActive} diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent.tsx index b10b371f4..3cc19acf3 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent.tsx @@ -10,7 +10,7 @@ import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hook import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; +import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType'; import { t } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; @@ -18,7 +18,7 @@ import { useRecoilValue } from 'recoil'; export const ObjectOptionsDropdownViewSettingsOpenInContent = () => { const { onContentChange } = useOptionsDropdown(); const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState); - const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); + const { currentView } = useGetCurrentViewOnly(); const { setAndPersistOpenRecordIn } = useObjectOptions(); return ( @@ -37,7 +37,7 @@ export const ObjectOptionsDropdownViewSettingsOpenInContent = () => { onClick={() => setAndPersistOpenRecordIn( ViewOpenRecordInType.SIDE_PANEL, - currentViewWithCombinedFiltersAndSorts, + currentView, ) } /> @@ -50,7 +50,7 @@ export const ObjectOptionsDropdownViewSettingsOpenInContent = () => { onClick={() => setAndPersistOpenRecordIn( ViewOpenRecordInType.RECORD_PAGE, - currentViewWithCombinedFiltersAndSorts, + currentView, ) } /> diff --git a/packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts b/packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts deleted file mode 100644 index c9b728f92..000000000 --- a/packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { useEffect } from 'react'; - -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; -import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; -import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector'; -import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector'; -import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; -import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; -import { isCurrentViewKeyIndexComponentState } from '@/views/states/isCurrentViewIndexComponentState'; -import { useRecoilValue } from 'recoil'; -import { isDefined } from 'twenty-shared'; - -export const useGetCurrentView = (viewBarInstanceId?: string) => { - const instanceId = useAvailableComponentInstanceIdOrThrow( - ViewComponentInstanceContext, - viewBarInstanceId, - ); - - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); - - const currentViewId = useRecoilComponentValueV2( - contextStoreCurrentViewIdComponentState, - ); - - const indexViewId = useRecoilValue( - prefetchIndexViewIdFromObjectMetadataItemFamilySelector({ - objectMetadataItemId: objectMetadataItem.id, - }), - ); - - const currentViewFromViewId = useRecoilValue( - prefetchViewFromViewIdFamilySelector({ - viewId: currentViewId ?? '', - }), - ); - - const indexView = useRecoilValue( - prefetchViewFromViewIdFamilySelector({ - viewId: indexViewId ?? '', - }), - ); - - const setIsCurrentViewKeyIndex = useSetRecoilComponentStateV2( - isCurrentViewKeyIndexComponentState, - instanceId, - ); - - const currentView = currentViewFromViewId ?? indexView; - - useEffect(() => { - setIsCurrentViewKeyIndex(currentView?.key === 'INDEX'); - }, [currentView, setIsCurrentViewKeyIndex]); - - const viewsOnCurrentObject = useRecoilValue( - prefetchViewsFromObjectMetadataItemFamilySelector({ - objectMetadataItemId: objectMetadataItem.id, - }), - ); - - if (!isDefined(currentView)) { - return { - instanceId, - currentViewWithSavedFiltersAndSorts: undefined, - currentViewWithCombinedFiltersAndSorts: undefined, - viewsOnCurrentObject: viewsOnCurrentObject ?? [], - }; - } - - return { - instanceId, - viewsOnCurrentObject: viewsOnCurrentObject ?? [], - currentViewId, - }; -}; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx index 46445c4dd..2bdcf02bd 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx @@ -3,19 +3,21 @@ import { DropResult } from '@hello-pangea/dnd'; import { MouseEvent, useCallback } from 'react'; import { IconPlus, MenuItem } from 'twenty-ui'; +import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; +import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useChangeView } from '@/views/hooks/useChangeView'; -import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { useUpdateView } from '@/views/hooks/useUpdateView'; import { ViewPickerOptionDropdown } from '@/views/view-picker/components/ViewPickerOptionDropdown'; import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode'; import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState'; import { useLingui } from '@lingui/react/macro'; +import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; import { moveArrayItem } from '~/utils/array/moveArrayItem'; @@ -25,7 +27,14 @@ const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)` export const ViewPickerListContent = () => { const { t } = useLingui(); - const { viewsOnCurrentObject } = useGetCurrentView(); + + const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + + const viewsOnCurrentObject = useRecoilValue( + prefetchViewsFromObjectMetadataItemFamilySelector({ + objectMetadataItemId: objectMetadataItem.id, + }), + ); const { currentView } = useGetCurrentViewOnly(); diff --git a/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts b/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts index cc80ba1ae..f6fad860d 100644 --- a/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts +++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts @@ -1,19 +1,18 @@ -import { useRecoilCallback } from 'recoil'; +import { useRecoilCallback, useRecoilValue } from 'recoil'; +import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; +import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { useChangeView } from '@/views/hooks/useChangeView'; import { useDeleteView } from '@/views/hooks/useDeleteView'; -import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; +import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker'; import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState'; import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState'; import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState'; export const useDeleteViewFromCurrentState = (viewBarInstanceId?: string) => { - const { viewsOnCurrentObject, currentViewId } = - useGetCurrentView(viewBarInstanceId); - const { closeAndResetViewPicker } = useCloseAndResetViewPicker(); const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackStateV2( @@ -32,6 +31,16 @@ export const useDeleteViewFromCurrentState = (viewBarInstanceId?: string) => { viewBarInstanceId, ); + const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + + const viewsOnCurrentObject = useRecoilValue( + prefetchViewsFromObjectMetadataItemFamilySelector({ + objectMetadataItemId: objectMetadataItem.id, + }), + ); + + const { currentView } = useGetCurrentViewOnly(); + const { changeView } = useChangeView(); const { deleteView } = useDeleteView(); @@ -48,7 +57,7 @@ export const useDeleteViewFromCurrentState = (viewBarInstanceId?: string) => { viewPickerReferenceViewIdCallbackState, ); - const shouldChangeView = viewPickerReferenceViewId === currentViewId; + const shouldChangeView = viewPickerReferenceViewId === currentView?.id; if (shouldChangeView) { changeView( @@ -61,7 +70,7 @@ export const useDeleteViewFromCurrentState = (viewBarInstanceId?: string) => { await deleteView(viewPickerReferenceViewId); }, [ - currentViewId, + currentView, closeAndResetViewPicker, changeView, deleteView,