Clean up record filter refactor (#11884)

This PR cleans up after the refactor of selected filter state and apply
filter logic on record filter.

Since everything is now using the new
objectFilterDropdownCurrentRecordFilter state to derive the value for
all types, we don't need to maintain states for selected record ids and
selected options and the ViewBarFilterEffect that was initializing them.

Details :
- Removed objectFilterDropdownSelectedRecordIdsComponentState
- Removed objectFilterDropdownSelectedOptionValuesComponentState
- Removed ViewBarFilterEffect

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts

@@ -1,6 +1,5 @@
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
-import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilCallback } from 'recoil';
 
@@ -11,12 +10,6 @@ export const useEmptyRecordFilter = (componentInstanceId?: string) => {
       componentInstanceId,
     );
 
-  const objectFilterDropdownSelectedRecordIdsCallbackState =
-    useRecoilComponentCallbackStateV2(
-      objectFilterDropdownSelectedRecordIdsComponentState,
-      componentInstanceId,
-    );
-
   const objectFilterDropdownCurrentRecordFilter =
     useRecoilComponentCallbackStateV2(
       objectFilterDropdownCurrentRecordFilterComponentState,
@@ -27,12 +20,10 @@ export const useEmptyRecordFilter = (componentInstanceId?: string) => {
     ({ set }) =>
       () => {
         set(objectFilterDropdownSearchInputCallbackState, '');
-        set(objectFilterDropdownSelectedRecordIdsCallbackState, []);
         set(objectFilterDropdownCurrentRecordFilter, undefined);
       },
     [
       objectFilterDropdownSearchInputCallbackState,
-      objectFilterDropdownSelectedRecordIdsCallbackState,
       objectFilterDropdownCurrentRecordFilter,
     ],
   );

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts

@@ -3,7 +3,6 @@ import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-
 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 { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilCallback } from 'recoil';
@@ -21,12 +20,6 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
       componentInstanceId,
     );
 
-  const objectFilterDropdownSelectedRecordIdsCallbackState =
-    useRecoilComponentCallbackStateV2(
-      objectFilterDropdownSelectedRecordIdsComponentState,
-      componentInstanceId,
-    );
-
   const selectedOperandInDropdownCallbackState =
     useRecoilComponentCallbackStateV2(
       selectedOperandInDropdownComponentState,
@@ -55,7 +48,6 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
     ({ set }) =>
       () => {
         set(objectFilterDropdownSearchInputCallbackState, '');
-        set(objectFilterDropdownSelectedRecordIdsCallbackState, []);
         set(selectedOperandInDropdownCallbackState, null);
         set(objectFilterDropdownFilterIsSelectedCallbackState, false);
         set(objectFilterDropdownIsSelectingCompositeFieldCallbackState, false);
@@ -64,7 +56,6 @@ export const useResetFilterDropdown = (componentInstanceId?: string) => {
       },
     [
       objectFilterDropdownSearchInputCallbackState,
-      objectFilterDropdownSelectedRecordIdsCallbackState,
       selectedOperandInDropdownCallbackState,
       objectFilterDropdownFilterIsSelectedCallbackState,
       objectFilterDropdownIsSelectingCompositeFieldCallbackState,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState.ts

@@ -1,9 +0,0 @@
-import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-
-export const objectFilterDropdownSelectedRecordIdsComponentState =
-  createComponentStateV2<string[]>({
-    key: 'objectFilterDropdownSelectedRecordIdsComponentState',
-    defaultValue: [],
-    componentInstanceContext: ObjectFilterDropdownComponentInstanceContext,
-  });

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -6,7 +6,6 @@ import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/c
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 import { TopBar } from '@/ui/layout/top-bar/components/TopBar';
 import { QueryParamsFiltersEffect } from '@/views/components/QueryParamsFiltersEffect';
-import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
 import { ViewBarPageTitle } from '@/views/components/ViewBarPageTitle';
 import { ViewBarSkeletonLoader } from '@/views/components/ViewBarSkeletonLoader';
 import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDropdown';
@@ -38,8 +37,6 @@ export const ViewBar = ({
 }: ViewBarProps) => {
   const { objectNamePlural } = useParams();
 
-  const filterDropdownId = 'view-filter';
-
   const loading = useIsPrefetchLoading();
 
   if (!objectNamePlural) {
@@ -53,7 +50,6 @@ export const ViewBar = ({
       <ViewBarRecordFilterGroupEffect />
       <ViewBarRecordFilterEffect />
       <ViewBarRecordSortEffect />
-      <ViewBarFilterEffect filterDropdownId={filterDropdownId} />
       <QueryParamsFiltersEffect />
       <ViewBarPageTitle />
       <TopBar

packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx

@@ -1,83 +0,0 @@
-import { isNonEmptyString } from '@sniptt/guards';
-import { useEffect } from 'react';
-
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-
-import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
-import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
-import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
-import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
-import { jsonRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/jsonRelationFilterValueSchema';
-import { simpleRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/simpleRelationFilterValueSchema';
-import { isDefined } from 'twenty-shared/utils';
-
-type ViewBarFilterEffectProps = {
-  filterDropdownId: string;
-};
-
-export const ViewBarFilterEffect = ({
-  filterDropdownId,
-}: ViewBarFilterEffectProps) => {
-  const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
-    fieldMetadataItemUsedInDropdownComponentSelector,
-    filterDropdownId,
-  );
-
-  const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2(
-    objectFilterDropdownSelectedRecordIdsComponentState,
-    filterDropdownId,
-  );
-
-  const setObjectFilterDropdownSelectedOptionValues =
-    useSetRecoilComponentStateV2(
-      objectFilterDropdownSelectedOptionValuesComponentState,
-      filterDropdownId,
-    );
-
-  const currentRecordFilters = useRecoilComponentValueV2(
-    currentRecordFiltersComponentState,
-  );
-
-  useEffect(() => {
-    if (fieldMetadataItemUsedInDropdown?.type === 'RELATION') {
-      const recordFilterUsedInDropdown = currentRecordFilters.find(
-        (filter) =>
-          filter.fieldMetadataId === fieldMetadataItemUsedInDropdown?.id,
-      );
-
-      const { selectedRecordIds } = jsonRelationFilterValueSchema
-        .catch({
-          isCurrentWorkspaceMemberSelected: false,
-          selectedRecordIds: simpleRelationFilterValueSchema.parse(
-            recordFilterUsedInDropdown?.value,
-          ),
-        })
-        .parse(recordFilterUsedInDropdown?.value);
-
-      setObjectFilterDropdownSelectedRecordIds(selectedRecordIds);
-    } else if (
-      isDefined(fieldMetadataItemUsedInDropdown) &&
-      ['SELECT', 'MULTI_SELECT'].includes(fieldMetadataItemUsedInDropdown.type)
-    ) {
-      const recordFilterUsedInDropdown = currentRecordFilters.find(
-        (filter) =>
-          filter.fieldMetadataId === fieldMetadataItemUsedInDropdown?.id,
-      );
-
-      const recordFilterSelectedRecords = isNonEmptyString(
-        recordFilterUsedInDropdown?.value,
-      )
-        ? JSON.parse(recordFilterUsedInDropdown.value)
-        : [];
-      setObjectFilterDropdownSelectedOptionValues(recordFilterSelectedRecords);
-    }
-  }, [
-    fieldMetadataItemUsedInDropdown,
-    setObjectFilterDropdownSelectedRecordIds,
-    setObjectFilterDropdownSelectedOptionValues,
-    currentRecordFilters,
-  ]);
-
-  return <></>;
-};

packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts

@@ -1,13 +1,9 @@
 import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
-import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
-import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
 import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
 import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
-import { jsonRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/jsonRelationFilterValueSchema';
-import { simpleRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/simpleRelationFilterValueSchema';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -54,46 +50,6 @@ export const useSetEditableFilterChipDropdownStates = () => {
           }),
           recordFilter.subFieldName,
         );
-
-        if (recordFilter.type === 'RELATION') {
-          const { selectedRecordIds } = jsonRelationFilterValueSchema
-            .catch({
-              isCurrentWorkspaceMemberSelected: false,
-              selectedRecordIds: simpleRelationFilterValueSchema.parse(
-                recordFilter.value,
-              ),
-            })
-            .parse(recordFilter.value);
-
-          set(
-            objectFilterDropdownSelectedRecordIdsComponentState.atomFamily({
-              instanceId: recordFilter.id,
-            }),
-            selectedRecordIds,
-          );
-        } else if (['SELECT', 'MULTI_SELECT'].includes(recordFilter.type)) {
-          try {
-            const selectedOptions = JSON.parse(recordFilter.value);
-
-            set(
-              objectFilterDropdownSelectedOptionValuesComponentState.atomFamily(
-                {
-                  instanceId: recordFilter.id,
-                },
-              ),
-              selectedOptions,
-            );
-          } catch {
-            set(
-              objectFilterDropdownSelectedOptionValuesComponentState.atomFamily(
-                {
-                  instanceId: recordFilter.id,
-                },
-              ),
-              [],
-            );
-          }
-        }
       },
     [filterableFieldMetadataItems],
   );