From 9435d525cf35edef830474d9729f92d210204ace Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 6 May 2025 10:28:20 +0200 Subject: [PATCH] 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 --- .../hooks/useEmptyRecordFilter.ts | 9 -- .../hooks/useResetFilterDropdown.ts | 9 -- ...DropdownSelectedRecordIdsComponentState.ts | 9 -- .../src/modules/views/components/ViewBar.tsx | 4 - .../views/components/ViewBarFilterEffect.tsx | 83 ------------------- .../useSetEditableFilterChipDropdownStates.ts | 44 ---------- 6 files changed, 158 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState.ts delete mode 100644 packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts index f1094fa70c0..42393dd68c5 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter.ts +++ b/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, ], ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts index 280fc3f4bd3..f7d1993a410 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useResetFilterDropdown.ts +++ b/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, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState.ts deleted file mode 100644 index b579beec63b..00000000000 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState.ts +++ /dev/null @@ -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({ - key: 'objectFilterDropdownSelectedRecordIdsComponentState', - defaultValue: [], - componentInstanceContext: ObjectFilterDropdownComponentInstanceContext, - }); diff --git a/packages/twenty-front/src/modules/views/components/ViewBar.tsx b/packages/twenty-front/src/modules/views/components/ViewBar.tsx index 35b666c3eae..1517757f65d 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBar.tsx +++ b/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 = ({ - { - 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 <>; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts b/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts index bc8cd037632..d411d037fc6 100644 --- a/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts +++ b/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], );