diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts index 734dc61c86c9..405d637e2d15 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts @@ -1,15 +1,10 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; -import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState'; -import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; -import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups'; -import { mapRecordGroupDefinitionsToViewGroups } from '@/views/utils/mapRecordGroupDefinitionsToViewGroups'; import { recordGroupDefinitionToViewGroup } from '@/views/utils/recordGroupDefinitionToViewGroup'; import { useRecoilCallback } from 'recoil'; -import { isDefined } from '~/utils/isDefined'; type UseRecordGroupVisibilityParams = { viewBarId: string; @@ -18,20 +13,10 @@ type UseRecordGroupVisibilityParams = { export const useRecordGroupVisibility = ({ viewBarId, }: UseRecordGroupVisibilityParams) => { - const recordIndexRecordGroupIdsState = useRecoilComponentCallbackStateV2( - recordGroupIdsComponentState, - ); - - const recordIndexRecordIdsByGroupFamilyState = - useRecoilComponentCallbackStateV2( - recordIndexRecordIdsByGroupComponentFamilyState, - viewBarId, - ); - const objectOptionsDropdownRecordGroupHideState = useRecoilComponentCallbackStateV2(recordIndexRecordGroupHideComponentState); - const { saveViewGroup, saveViewGroups } = useSaveCurrentViewGroups(viewBarId); + const { saveViewGroup } = useSaveCurrentViewGroups(viewBarId); const handleVisibilityChange = useRecoilCallback( ({ set }) => @@ -50,66 +35,14 @@ export const useRecordGroupVisibility = ({ ); const handleHideEmptyRecordGroupChange = useRecoilCallback( - ({ snapshot, set }) => + ({ set }) => async () => { - const updatedRecordGroupDefinitions: RecordGroupDefinition[] = []; - const recordGroupIds = getSnapshotValue( - snapshot, - recordIndexRecordGroupIdsState, - ); - - const currentHideState = getSnapshotValue( - snapshot, + set( objectOptionsDropdownRecordGroupHideState, - ); - const newHideState = !currentHideState; - - set(objectOptionsDropdownRecordGroupHideState, newHideState); - - for (const recordGroupId of recordGroupIds) { - const recordGroup = getSnapshotValue( - snapshot, - recordGroupDefinitionFamilyState(recordGroupId), - ); - - if (!isDefined(recordGroup)) { - throw new Error( - `Record group with id ${recordGroupId} not found in snapshot`, - ); - } - - const recordGroupRowIds = getSnapshotValue( - snapshot, - recordIndexRecordIdsByGroupFamilyState(recordGroupId), - ); - - if (recordGroupRowIds.length > 0) { - continue; - } - - const updatedRecordGroup = { - ...recordGroup, - isVisible: !newHideState, - }; - - set( - recordGroupDefinitionFamilyState(recordGroupId), - updatedRecordGroup, - ); - - updatedRecordGroupDefinitions.push(updatedRecordGroup); - } - - saveViewGroups( - mapRecordGroupDefinitionsToViewGroups(updatedRecordGroupDefinitions), + (currentHideState) => !currentHideState, ); }, - [ - recordIndexRecordGroupIdsState, - objectOptionsDropdownRecordGroupHideState, - saveViewGroups, - recordIndexRecordIdsByGroupFamilyState, - ], + [objectOptionsDropdownRecordGroupHideState], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts index 9ff30316c246..abd766868eee 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts @@ -3,7 +3,9 @@ import { recordGroupIdsComponentState } from '@/object-record/record-group/state import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupSort'; import { recordGroupSortedInsert } from '@/object-record/record-group/utils/recordGroupSortedInsert'; +import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState'; import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; @@ -27,6 +29,11 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2< instanceId, }), ); + const hideEmptyRecordGroup = get( + recordIndexRecordGroupHideComponentState.atomFamily({ + instanceId, + }), + ); const result: RecordGroupDefinition[] = []; @@ -49,13 +56,26 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2< const recordGroupDefinition = get( recordGroupDefinitionFamilyState(recordGroupId), ); + const recordIds = get( + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey: recordGroupId, + }), + ); - if ( - isDefined(recordGroupDefinition) && - recordGroupDefinition.isVisible - ) { - recordGroupSortedInsert(result, recordGroupDefinition, comparator); + if (!isDefined(recordGroupDefinition)) { + continue; } + + if (hideEmptyRecordGroup && recordIds.length === 0) { + continue; + } + + if (!recordGroupDefinition.isVisible) { + continue; + } + + recordGroupSortedInsert(result, recordGroupDefinition, comparator); } return result.map(({ id }) => id); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx index e8bd37d0534a..9c189ee05c0d 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx @@ -1,7 +1,7 @@ import { useRecoilValue } from 'recoil'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; -import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; +import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; import { RecordIndexBoardColumnLoaderEffect } from '@/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect'; import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -19,8 +19,8 @@ export const RecordIndexBoardDataLoader = ({ objectNameSingular, }); - const visibleRecordGroupIds = useRecoilComponentValueV2( - visibleRecordGroupIdsComponentSelector, + const recordGroupIds = useRecoilComponentValueV2( + recordGroupIdsComponentState, ); const recordIndexKanbanFieldMetadataId = useRecoilValue( @@ -33,7 +33,7 @@ export const RecordIndexBoardDataLoader = ({ return ( <> - {visibleRecordGroupIds.map((recordGroupId, index) => ( + {recordGroupIds.map((recordGroupId, index) => ( ({ key: 'recordIndexRecordGroupHideComponentState', - defaultValue: false, + defaultValue: true, componentInstanceContext: ViewComponentInstanceContext, });