Refactored reset filter dropdown (#9523)

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>

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({
+  const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId);
-    filterDropdownId: filterDropdownId,
-  });
 
   const handleClick = () => {
-    resetFilter();
+    resetFilterDropdown();
     toggleDropdown();
   };
 

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 (

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();
+    resetFilterDropdown();
-  }, [resetFilter]);
+  }, [resetFilterDropdown]);
 
   return (
     <Dropdown

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

@@ -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({
+      const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId);
-        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(() => {

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,

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