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

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.
twentyhq · Jan 9, 2025 · 17e2e38 · 17e2e38
1 parent 71a4593
commit 17e2e38
Show file tree

Hide file tree

Showing 16 changed files with 138 additions and 72 deletions.
diff --git a/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
@@ -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,

diff --git a/...modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/...modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
@@ -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,

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -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();
   };
 

diff --git a/...ject-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/...ject-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx
@@ -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,

diff --git a/...ect-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/...ect-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx
@@ -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);
     }
   };
 

diff --git a/...dules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/...dules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
@@ -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,

diff --git a/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
@@ -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,

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
@@ -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,

diff --git a/...dules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx b/...dules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx
@@ -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),

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx
@@ -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,

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx
@@ -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,