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

Refactored select filter and select filter definition logic (#9519)

Browse Source 
This PR extracts the logic to manage filter and filter definition
setting.

Previously it was ambiguous, we had the same "selectFilter" naming used
for setting filter definition in filter dropdown and for setting the
actual filter value and saving to view filter states.

This is another incremental refactor, which will allow to remove
useFilterDropdown hook.
This commit is contained in:
Lucas Bordeau
2025-01-09 18:54:34 +01:00
committed by GitHub
parent 71a4593ba4
commit 17e2e38812
16 changed files with 138 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
@ -40,9 +41,10 @@ export const ObjectFilterDropdownBooleanSelect = () => {
filterDefinitionUsedInDropdownState,
selectedOperandInDropdownState,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const { closeDropdown } = useDropdown();
const filterDefinitionUsedInDropdown = useRecoilValue(
@ -69,7 +71,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
return;
}
selectFilter({
applyRecordFilter({
id: selectedFilter?.id ?? v4(),
definition: filterDefinitionUsedInDropdown,
operand: selectedOperandInDropdown,

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

@ -1,6 +1,7 @@
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue';
@ -21,9 +22,10 @@ export const ObjectFilterDropdownDateInput = () => {
filterDefinitionUsedInDropdownState,
selectedOperandInDropdownState,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const filterDefinitionUsedInDropdown = useRecoilValue(
filterDefinitionUsedInDropdownState,
);
@ -51,7 +53,7 @@ export const ObjectFilterDropdownDateInput = () => {
if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
selectFilter?.({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : v4(),
fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
value: newDate?.toISOString() ?? '',
@ -83,7 +85,7 @@ export const ObjectFilterDropdownDateInput = () => {
)
: '';
selectFilter?.({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : v4(),
fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
value,

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

@ -7,7 +7,7 @@ import { AdvancedFilterButton } from '@/object-record/object-filter-dropdown/com
import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
@ -121,7 +121,8 @@ export const ObjectFilterDropdownFilterSelect = ({
(item) => item.fieldMetadataId,
);
const { selectFilter } = useSelectFilter();
const { selectFilterDefinitionUsedInDropdown } =
useSelectFilterDefinitionUsedInDropdown();
const { resetSelectedItem } = useSelectableList(OBJECT_FILTER_DROPDOWN_ID);
@ -135,7 +136,11 @@ export const ObjectFilterDropdownFilterSelect = ({
}
resetSelectedItem();
selectFilter({ filterDefinition: selectedFilterDefinition });
selectFilterDefinitionUsedInDropdown({
filterDefinition: selectedFilterDefinition,
});
closeAdvancedFilterDropdown();
};

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

@ -1,4 +1,5 @@
import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState';
@ -55,11 +56,12 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setObjectFilterDropdownSearchInput,
selectFilter,
advancedFilterViewFilterIdState,
advancedFilterViewFilterGroupIdState,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const advancedFilterViewFilterId = useRecoilValue(
advancedFilterViewFilterIdState,
);
@ -84,7 +86,8 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
definition.type,
operand,
);
selectFilter({
applyRecordFilter({
id: advancedFilterViewFilterId,
fieldMetadataId: definition.fieldMetadataId,
value,

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

@ -1,7 +1,7 @@
import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState';
import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
@ -25,7 +25,8 @@ export type ObjectFilterDropdownFilterSelectMenuItemProps = {
export const ObjectFilterDropdownFilterSelectMenuItem = ({
filterDefinition,
}: ObjectFilterDropdownFilterSelectMenuItemProps) => {
const { selectFilter } = useSelectFilter();
const { selectFilterDefinitionUsedInDropdown } =
useSelectFilterDefinitionUsedInDropdown();
const [, setObjectFilterDropdownFirstLevelFilterDefinition] =
useRecoilComponentStateV2(
@ -55,12 +56,8 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
const isACompositeField = isCompositeField(filterDefinition.type);
const {
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setObjectFilterDropdownSearchInput,
advancedFilterViewFilterIdState,
} = useFilterDropdown();
const { setSelectedOperandInDropdown, advancedFilterViewFilterIdState } =
useFilterDropdown();
const setHotkeyScope = useSetHotkeyScope();
@ -72,11 +69,14 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
advancedFilterViewFilterId,
);
const handleSelectFilter = (availableFilterDefinition: FilterDefinition) => {
const handleSelectFilterDefinition = (
availableFilterDefinition: FilterDefinition,
) => {
closeAdvancedFilterDropdown();
selectFilter({ filterDefinition: availableFilterDefinition });
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
selectFilterDefinitionUsedInDropdown({
filterDefinition: availableFilterDefinition,
});
if (
availableFilterDefinition.type === 'RELATION' ||
@ -89,8 +89,6 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
getOperandsForFilterDefinition(availableFilterDefinition)[0],
);
setObjectFilterDropdownSearchInput('');
setObjectFilterDropdownFilterIsSelected(true);
};
@ -107,7 +105,7 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
setObjectFilterDropdownFirstLevelFilterDefinition(filterDefinition);
setObjectFilterDropdownIsSelectingCompositeField(true);
} else {
handleSelectFilter(filterDefinition);
handleSelectFilterDefinition(filterDefinition);
}
};

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

@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@ -10,8 +11,10 @@ export const ObjectFilterDropdownNumberInput = () => {
selectedOperandInDropdownState,
filterDefinitionUsedInDropdownState,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const [hasFocused, setHasFocused] = useState(false);
const filterDefinitionUsedInDropdown = useRecoilValue(
@ -48,8 +51,10 @@ export const ObjectFilterDropdownNumberInput = () => {
placeholder={filterDefinitionUsedInDropdown.label}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value;
setInputValue(newValue);
selectFilter?.({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : v4(),
fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
value: newValue,

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

@ -1,6 +1,7 @@
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -22,9 +23,10 @@ export const ObjectFilterDropdownOperandSelect = () => {
filterDefinitionUsedInDropdownState,
setSelectedOperandInDropdown,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const { closeDropdown } = useDropdown();
const filterDefinitionUsedInDropdown = useRecoilValue(
@ -49,7 +51,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
setSelectedOperandInDropdown(newOperand);
if (isValuelessOperand && isDefined(filterDefinitionUsedInDropdown)) {
selectFilter?.({
applyRecordFilter({
id: v4(),
fieldMetadataId: filterDefinitionUsedInDropdown?.fieldMetadataId ?? '',
displayValue: '',
@ -71,7 +73,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
selectedFilter.displayValue,
);
selectFilter?.({
applyRecordFilter({
id: selectedFilter.id ? selectedFilter.id : v4(),
fieldMetadataId: selectedFilter.fieldMetadataId,
displayValue,

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

@ -14,6 +14,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
@ -32,9 +33,10 @@ export const ObjectFilterDropdownOptionSelect = () => {
selectedOperandInDropdownState,
objectFilterDropdownSelectedOptionValuesState,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter();
const { closeDropdown } = useDropdown();
const { selectedItemIdState } = useSelectableListStates({
@ -128,7 +130,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
? JSON.stringify(selectedOptions.map((option) => option.value))
: EMPTY_FILTER_VALUE;
selectFilter({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : v4(),
definition: filterDefinitionUsedInDropdown,
operand: selectedOperandInDropdown,

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

@ -1,6 +1,7 @@
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
@ -34,7 +35,6 @@ export const ObjectFilterDropdownRatingInput = () => {
selectedOperandInDropdownState,
filterDefinitionUsedInDropdownState,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const filterDefinitionUsedInDropdown = useRecoilValue(
@ -46,6 +46,8 @@ export const ObjectFilterDropdownRatingInput = () => {
const selectedFilter = useRecoilValue(selectedFilterState);
const { applyRecordFilter } = useApplyRecordFilter();
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
@ -57,7 +59,7 @@ export const ObjectFilterDropdownRatingInput = () => {
return;
}
selectFilter?.({
applyRecordFilter?.({
id: selectedFilter?.id ? selectedFilter.id : v4(),
fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
value: convertFieldRatingValueToNumber(newValue),

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

@ -5,6 +5,7 @@ import { v4 } from 'uuid';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectFilterDropdownRecordPinnedItems } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems';
import { CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID } from '@/object-record/object-filter-dropdown/constants/CurrentWorkspaceMemberSelectableItemId';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
@ -37,9 +38,10 @@ export const ObjectFilterDropdownRecordSelect = ({
selectedOperandInDropdownState,
selectedFilterState,
objectFilterDropdownSelectedRecordIdsState,
selectFilter,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter(viewComponentId);
const { currentViewWithCombinedFiltersAndSorts } =
useGetCurrentView(viewComponentId);
@ -187,7 +189,7 @@ export const ObjectFilterDropdownRecordSelect = ({
const filterId = viewFilter?.id ?? fieldId;
selectFilter({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : filterId,
definition: filterDefinitionUsedInDropdown,
operand: selectedOperandInDropdown,

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

@ -2,6 +2,7 @@ import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
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';
@ -29,10 +30,11 @@ export const ObjectFilterDropdownSourceSelect = ({
selectedFilterState,
setObjectFilterDropdownSelectedRecordIds,
objectFilterDropdownSelectedRecordIdsState,
selectFilter,
emptyFilterButKeepDefinition,
} = useFilterDropdown();
const { applyRecordFilter } = useApplyRecordFilter(viewComponentId);
const { deleteCombinedViewFilter } =
useDeleteCombinedViewFilters(viewComponentId);
@ -108,7 +110,7 @@ export const ObjectFilterDropdownSourceSelect = ({
const filterId = viewFilter?.id ?? fieldId;
selectFilter({
applyRecordFilter({
id: selectedFilter?.id ? selectedFilter.id : filterId,
definition: filterDefinitionUsedInDropdown,
operand: selectedOperandInDropdown || ViewFilterOperand.Is,

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

@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@ -12,7 +13,6 @@ export const ObjectFilterDropdownTextSearchInput = () => {
objectFilterDropdownSearchInputState,
setObjectFilterDropdownSearchInput,
selectedFilterState,
selectFilter,
} = useFilterDropdown();
const [filterId] = useState(v4());
@ -29,6 +29,8 @@ export const ObjectFilterDropdownTextSearchInput = () => {
);
const selectedFilter = useRecoilValue(selectedFilterState);
const { applyRecordFilter } = useApplyRecordFilter();
const handleInputRef = useCallback(
(node: HTMLInputElement | null) => {
if (Boolean(node) && !hasFocused) {
@ -51,7 +53,7 @@ export const ObjectFilterDropdownTextSearchInput = () => {
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setObjectFilterDropdownSearchInput(event.target.value);
selectFilter?.({
applyRecordFilter({
id: selectedFilter?.id ?? filterId,
fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
value: event.target.value,

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

@ -2,6 +2,7 @@ import { expect } from '@storybook/test';
import { act, renderHook, waitFor } from '@testing-library/react';
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 { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
@ -261,19 +262,26 @@ describe('useFilterDropdown', () => {
it('should reset filter', async () => {
const { result } = renderHook(() => {
const { resetFilter, selectFilter } = useFilterDropdown({
const { resetFilter } = useFilterDropdown({
filterDropdownId,
});
const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId);
const { selectedFilterState } = useFilterDropdownStates(filterDropdownId);
const [selectedFilter, setSelectedFilter] =
useRecoilState(selectedFilterState);
return { selectedFilter, setSelectedFilter, selectFilter, resetFilter };
return {
selectedFilter,
setSelectedFilter,
applyRecordFilter,
resetFilter,
};
}, renderHookConfig);
act(() => {
result.current.selectFilter(mockFilter);
result.current.applyRecordFilter(mockFilter);
});
await waitFor(() => {
@ -291,12 +299,13 @@ describe('useFilterDropdown', () => {
it('should call onFilterSelect when a filter option is set', async () => {
const { result } = renderHook(() => {
const { selectFilter } = useFilterDropdown({ filterDropdownId });
const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId);
const { onFilterSelectState } = useFilterDropdownStates(filterDropdownId);
const [onFilterSelect, setOnFilterSelect] =
useRecoilState(onFilterSelectState);
return { onFilterSelect, setOnFilterSelect, selectFilter };
return { onFilterSelect, setOnFilterSelect, applyRecordFilter };
}, renderHookConfig);
const onFilterSelectMock = jest.fn();
@ -304,7 +313,7 @@ describe('useFilterDropdown', () => {
act(() => {
result.current.setOnFilterSelect(onFilterSelectMock);
result.current.selectFilter(mockFilter);
result.current.applyRecordFilter(mockFilter);
});
await waitFor(() => {

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

@ -0,0 +1,48 @@
import { onFilterSelectComponentState } from '@/object-record/object-filter-dropdown/states/onFilterSelectComponentState';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-ui';
export const useApplyRecordFilter = (componentInstanceId?: string) => {
const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters();
const selectedFilterCallbackState = useRecoilComponentCallbackStateV2(
selectedFilterComponentState,
componentInstanceId,
);
const onFilterSelectCallbackState = useRecoilComponentCallbackStateV2(
onFilterSelectComponentState,
componentInstanceId,
);
const applyRecordFilter = useRecoilCallback(
({ set, snapshot }) =>
(filter: Filter | null) => {
set(selectedFilterCallbackState, filter);
const onFilterSelect = getSnapshotValue(
snapshot,
onFilterSelectCallbackState,
);
if (isDefined(filter)) {
upsertCombinedViewFilter(filter);
}
onFilterSelect?.(filter);
},
[
selectedFilterCallbackState,
onFilterSelectCallbackState,
upsertCombinedViewFilter,
],
);
return {
applyRecordFilter,
};
};

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

@ -1,16 +1,12 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
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';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { isDefined } from 'twenty-ui';
import { Filter } from '../types/Filter';
type UseFilterDropdownProps = {
filterDropdownId?: string;
@ -34,23 +30,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => {
advancedFilterViewFilterIdState,
} = useFilterDropdownStates(componentInstanceId);
const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters();
const selectFilter = useRecoilCallback(
({ set, snapshot }) =>
(filter: Filter | null) => {
set(selectedFilterState, filter);
const onFilterSelect = getSnapshotValue(snapshot, onFilterSelectState);
if (isDefined(filter)) {
upsertCombinedViewFilter(filter);
}
onFilterSelect?.(filter);
},
[selectedFilterState, onFilterSelectState, upsertCombinedViewFilter],
);
const emptyFilterButKeepDefinition = useRecoilCallback(
({ set }) =>
() => {
@ -129,7 +108,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => {
return {
componentInstanceId,
selectFilter,
resetFilter,
setSelectedFilter,
setSelectedOperandInDropdown,

14
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilter.ts → packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts
View File

@ -1,3 +1,4 @@
import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
@ -12,12 +13,11 @@ type SelectFilterParams = {
filterDefinition: FilterDefinition;
};
export const useSelectFilter = () => {
export const useSelectFilterDefinitionUsedInDropdown = () => {
const {
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setObjectFilterDropdownSearchInput,
selectFilter: filterDropdownSelectFilter,
advancedFilterViewFilterGroupIdState,
advancedFilterViewFilterIdState,
} = useFilterDropdown();
@ -31,7 +31,11 @@ export const useSelectFilter = () => {
const setHotkeyScope = useSetHotkeyScope();
const selectFilter = ({ filterDefinition }: SelectFilterParams) => {
const { applyRecordFilter } = useApplyRecordFilter();
const selectFilterDefinitionUsedInDropdown = ({
filterDefinition,
}: SelectFilterParams) => {
setFilterDefinitionUsedInDropdown(filterDefinition);
if (
@ -53,7 +57,7 @@ export const useSelectFilter = () => {
const isAdvancedFilter = isDefined(advancedFilterViewFilterId);
if (isAdvancedFilter || value !== '') {
filterDropdownSelectFilter({
applyRecordFilter({
id: advancedFilterViewFilterId ?? v4(),
fieldMetadataId: filterDefinition.fieldMetadataId,
displayValue,
@ -68,6 +72,6 @@ export const useSelectFilter = () => {
};
return {
selectFilter,
selectFilterDefinitionUsedInDropdown,
};
};