diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx index 7251fab80..dafbabe76 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx @@ -1,16 +1,16 @@ import { IconFilterOff, MenuItem } from 'twenty-ui'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => { - const { emptyFilterButKeepDefinition } = useFilterDropdown(); + const { emptyRecordFilter } = useEmptyRecordFilter(); const { closeDropdown } = useDropdown(); const handleRemoveFilter = () => { - emptyFilterButKeepDefinition(); + emptyRecordFilter(); closeDropdown(); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx index b0fac7b09..702706ba8 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx @@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; +import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; @@ -30,7 +31,6 @@ export const ObjectFilterDropdownSourceSelect = ({ selectedFilterState, setObjectFilterDropdownSelectedRecordIds, objectFilterDropdownSelectedRecordIdsState, - emptyFilterButKeepDefinition, } = useFilterDropdown(); const { applyRecordFilter } = useApplyRecordFilter(viewComponentId); @@ -65,6 +65,8 @@ export const ObjectFilterDropdownSourceSelect = ({ objectFilterDropdownSelectedRecordIds.includes(option.id), ); + const { emptyRecordFilter } = useEmptyRecordFilter(); + const handleMultipleItemSelectChange = ( itemToSelect: SelectableItem, newSelectedValue: boolean, @@ -76,7 +78,7 @@ export const ObjectFilterDropdownSourceSelect = ({ ); if (newSelectedItemIds.length === 0) { - emptyFilterButKeepDefinition(); + emptyRecordFilter(); deleteCombinedViewFilter(fieldId); return; } diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts new file mode 100644 index 000000000..93e70009c --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts @@ -0,0 +1,42 @@ +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; +import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; +import { useRecoilCallback } from 'recoil'; + +export const useEmptyRecordFilter = (componentInstanceId?: string) => { + const objectFilterDropdownSearchInputCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownSearchInputComponentState, + componentInstanceId, + ); + + const objectFilterDropdownSelectedRecordIdsCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownSelectedRecordIdsComponentState, + componentInstanceId, + ); + + const selectedFilterCallbackState = useRecoilComponentCallbackStateV2( + selectedFilterComponentState, + componentInstanceId, + ); + + const emptyRecordFilter = useRecoilCallback( + ({ set }) => + () => { + set(objectFilterDropdownSearchInputCallbackState, ''); + set(objectFilterDropdownSelectedRecordIdsCallbackState, []); + set(selectedFilterCallbackState, undefined); + }, + [ + objectFilterDropdownSearchInputCallbackState, + objectFilterDropdownSelectedRecordIdsCallbackState, + selectedFilterCallbackState, + ], + ); + + return { + emptyRecordFilter, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts index 42421e0dc..e75b2477d 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts @@ -1,4 +1,4 @@ -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates'; @@ -27,20 +27,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { advancedFilterViewFilterIdState, } = useFilterDropdownStates(componentInstanceId); - const emptyFilterButKeepDefinition = useRecoilCallback( - ({ set }) => - () => { - set(objectFilterDropdownSearchInputState, ''); - set(objectFilterDropdownSelectedRecordIdsState, []); - set(selectedFilterState, undefined); - }, - [ - objectFilterDropdownSearchInputState, - objectFilterDropdownSelectedRecordIdsState, - selectedFilterState, - ], - ); - const setSelectedFilter = useSetRecoilState(selectedFilterState); const setSelectedOperandInDropdown = useSetRecoilState( selectedOperandInDropdownState, @@ -77,7 +63,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { setOnFilterSelect, setAdvancedFilterViewFilterGroupId, setAdvancedFilterViewFilterId, - emptyFilterButKeepDefinition, filterDefinitionUsedInDropdownState, objectFilterDropdownSearchInputState, objectFilterDropdownSelectedRecordIdsState,