Refactored empty filter (#9532)

Refactored empty filter function and removed it from useFilterDropdown
hook

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

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

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

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,