diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index 21d407471..739ab783d 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx @@ -1,9 +1,9 @@ import { IconPlus, LightButton } from 'twenty-ui'; import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; type AddObjectFilterFromDetailsButtonProps = { filterDropdownId?: string; }; @@ -13,12 +13,10 @@ export const AddObjectFilterFromDetailsButton = ({ }: AddObjectFilterFromDetailsButtonProps) => { const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID); - const { resetFilter } = useFilterDropdown({ - filterDropdownId: filterDropdownId, - }); + const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId); const handleClick = () => { - resetFilter(); + resetFilterDropdown(); toggleDropdown(); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx index 066cc9fb3..5306d3681 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx @@ -1,10 +1,10 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; export const MultipleFiltersButton = () => { - const { resetFilter } = useFilterDropdown(); + const { resetFilterDropdown } = useResetFilterDropdown(); const { isDropdownOpen, toggleDropdown } = useDropdown( OBJECT_FILTER_DROPDOWN_ID, @@ -12,7 +12,7 @@ export const MultipleFiltersButton = () => { const handleClick = () => { toggleDropdown(); - resetFilter(); + resetFilterDropdown(); }; return ( diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx index 0ba1d9146..2ed3ece59 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx @@ -1,5 +1,5 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useCallback } from 'react'; @@ -14,11 +14,11 @@ type MultipleFiltersDropdownButtonProps = { export const MultipleFiltersDropdownButton = ({ hotkeyScope, }: MultipleFiltersDropdownButtonProps) => { - const { resetFilter } = useFilterDropdown(); + const { resetFilterDropdown } = useResetFilterDropdown(); const handleDropdownClose = useCallback(() => { - resetFilter(); - }, [resetFilter]); + resetFilterDropdown(); + }, [resetFilterDropdown]); return ( { it('should reset filter', async () => { const { result } = renderHook(() => { - const { resetFilter } = useFilterDropdown({ - filterDropdownId, - }); + const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId); const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId); @@ -272,11 +271,12 @@ describe('useFilterDropdown', () => { const [selectedFilter, setSelectedFilter] = useRecoilState(selectedFilterState); + return { selectedFilter, setSelectedFilter, applyRecordFilter, - resetFilter, + resetFilterDropdown, }; }, renderHookConfig); @@ -289,7 +289,7 @@ describe('useFilterDropdown', () => { }); act(() => { - result.current.resetFilter(); + result.current.resetFilterDropdown(); }); await waitFor(() => { 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 fe36bb119..42421e0dc 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 @@ -3,10 +3,7 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates'; import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; -import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; -import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; type UseFilterDropdownProps = { filterDropdownId?: string; @@ -44,43 +41,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { ], ); - const setObjectFilterDropdownFilterIsSelectedCallbackState = - useRecoilComponentCallbackStateV2( - objectFilterDropdownFilterIsSelectedComponentState, - props?.filterDropdownId, - ); - - const setObjectFilterDropdownIsSelectingCompositeFieldCallbackState = - useRecoilComponentCallbackStateV2( - objectFilterDropdownIsSelectingCompositeFieldComponentState, - props?.filterDropdownId, - ); - - const resetFilter = useRecoilCallback( - ({ set }) => - () => { - set(objectFilterDropdownSearchInputState, ''); - set(objectFilterDropdownSelectedRecordIdsState, []); - set(selectedFilterState, undefined); - set(filterDefinitionUsedInDropdownState, null); - set(selectedOperandInDropdownState, null); - set(setObjectFilterDropdownFilterIsSelectedCallbackState, false); - set( - setObjectFilterDropdownIsSelectingCompositeFieldCallbackState, - false, - ); - }, - [ - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - objectFilterDropdownSelectedRecordIdsState, - selectedFilterState, - selectedOperandInDropdownState, - setObjectFilterDropdownFilterIsSelectedCallbackState, - setObjectFilterDropdownIsSelectingCompositeFieldCallbackState, - ], - ); - const setSelectedFilter = useSetRecoilState(selectedFilterState); const setSelectedOperandInDropdown = useSetRecoilState( selectedOperandInDropdownState, @@ -108,7 +68,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { return { componentInstanceId, - resetFilter, setSelectedFilter, setSelectedOperandInDropdown, setFilterDefinitionUsedInDropdown, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts new file mode 100644 index 000000000..2f7b6cdf5 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts @@ -0,0 +1,78 @@ +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; +import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; +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 { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; +import { useRecoilCallback } from 'recoil'; + +export const useResetFilterDropdown = (componentInstanceId?: string) => { + const objectFilterDropdownSearchInputCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownSearchInputComponentState, + componentInstanceId, + ); + + const objectFilterDropdownSelectedRecordIdsCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownSelectedRecordIdsComponentState, + componentInstanceId, + ); + + const selectedFilterCallbackState = useRecoilComponentCallbackStateV2( + selectedFilterComponentState, + componentInstanceId, + ); + + const filterDefinitionUsedInDropdownCallbackState = + useRecoilComponentCallbackStateV2( + filterDefinitionUsedInDropdownComponentState, + componentInstanceId, + ); + + const selectedOperandInDropdownCallbackState = + useRecoilComponentCallbackStateV2( + selectedOperandInDropdownComponentState, + componentInstanceId, + ); + + const objectFilterDropdownFilterIsSelectedCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownFilterIsSelectedComponentState, + componentInstanceId, + ); + + const objectFilterDropdownIsSelectingCompositeFieldCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownIsSelectingCompositeFieldComponentState, + componentInstanceId, + ); + + const resetFilterDropdown = useRecoilCallback( + ({ set }) => + () => { + set(objectFilterDropdownSearchInputCallbackState, ''); + set(objectFilterDropdownSelectedRecordIdsCallbackState, []); + set(selectedFilterCallbackState, undefined); + set(filterDefinitionUsedInDropdownCallbackState, null); + set(selectedOperandInDropdownCallbackState, null); + set(objectFilterDropdownFilterIsSelectedCallbackState, false); + set(objectFilterDropdownIsSelectingCompositeFieldCallbackState, false); + }, + [ + filterDefinitionUsedInDropdownCallbackState, + objectFilterDropdownSearchInputCallbackState, + objectFilterDropdownSelectedRecordIdsCallbackState, + selectedFilterCallbackState, + selectedOperandInDropdownCallbackState, + objectFilterDropdownFilterIsSelectedCallbackState, + objectFilterDropdownIsSelectingCompositeFieldCallbackState, + ], + ); + + return { + resetFilterDropdown, + }; +};