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 f1094fa70..42393dd68 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 280fc3f4b..f7d1993a4 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 b579beec6..000000000 --- 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 35b666c3e..1517757f6 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 bc8cd0376..d411d037f 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], );