admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactored reset filter dropdown (#9523)

Browse Source 
This PR extracts reset filter logic from useFilterDropdown hook.

The goal is to remove useFilterDropdown hook by incrementally removing
each sub hook one by one.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2025-01-09 18:56:21 +01:00
committed by GitHub
parent 17e2e38812
commit 21774c60c7
6 changed files with 93 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx
View File

@ -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();
};

6
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx
View File

@ -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 (

8
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx
View File

@ -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 (
<Dropdown

10
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx
View File

@ -5,6 +5,7 @@ import { RecoilRoot, useRecoilState } from 'recoil';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
@ -262,9 +263,7 @@ describe('useFilterDropdown', () => {
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(() => {

41
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts
View File

@ -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,

78
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts Normal file
View File

@ -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,
};
};