From e58edc3bc1bf226eeb6b0ba0bb3ed7e49c91f736 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 10 Jan 2025 14:45:17 +0100 Subject: [PATCH] Removed useFilterDropdown hook (#9537) Removed useFilterDropdown hook and its many calls which were only exporting states. The test has been removed because it was used to do the equivalent of testing Recoil states, so it wasn't useful anymore. --- .../AdvancedFilterViewFilterFieldSelect.tsx | 13 +- .../AdvancedFilterViewFilterValueInput.tsx | 21 +- .../MultipleFiltersDropdownContent.tsx | 14 +- .../ObjectFilterDropdownBooleanSelect.tsx | 30 +- .../ObjectFilterDropdownDateInput.tsx | 35 +- .../ObjectFilterDropdownFilterInput.tsx | 22 +- .../ObjectFilterDropdownFilterSelect.tsx | 25 +- ...pdownFilterSelectCompositeFieldSubMenu.tsx | 42 ++- ...jectFilterDropdownFilterSelectMenuItem.tsx | 18 +- .../ObjectFilterDropdownNumberInput.tsx | 31 +- .../ObjectFilterDropdownOperandDropdown.tsx | 10 +- .../ObjectFilterDropdownOperandSelect.tsx | 29 +- .../ObjectFilterDropdownOptionSelect.tsx | 47 +-- .../ObjectFilterDropdownRatingInput.tsx | 27 +- .../ObjectFilterDropdownRecordSelect.tsx | 48 +-- .../ObjectFilterDropdownSearchInput.tsx | 33 +- .../ObjectFilterDropdownSourceSelect.tsx | 54 +-- .../ObjectFilterDropdownTextSearchInput.tsx | 39 +- ...SingleEntityObjectFilterDropdownButton.tsx | 23 +- .../__tests__/useFilterDropdown.test.tsx | 346 ------------------ .../hooks/useFilterDropdown.ts | 76 ---- ...useSelectFilterDefinitionUsedInDropdown.ts | 38 +- .../EditableFilterDropdownButton.tsx | 26 +- .../views/components/ViewBarFilterEffect.tsx | 34 +- 24 files changed, 366 insertions(+), 715 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx delete mode 100644 packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx index ad679c293..290aa037d 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx @@ -2,11 +2,13 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter'; import { ObjectFilterDropdownFilterSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect'; import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState'; +import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState'; import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; import { SelectControl } from '@/ui/input/components/SelectControl'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; import styled from '@emotion/styled'; @@ -27,8 +29,13 @@ export const AdvancedFilterViewFilterFieldSelect = ({ const selectedFieldLabel = filter?.definition.label ?? ''; - const { setAdvancedFilterViewFilterGroupId, setAdvancedFilterViewFilterId } = - useFilterDropdown(); + const setAdvancedFilterViewFilterId = useSetRecoilComponentStateV2( + advancedFilterViewFilterIdComponentState, + ); + + const setAdvancedFilterViewFilterGroupId = useSetRecoilComponentStateV2( + advancedFilterViewFilterGroupIdComponentState, + ); const [objectFilterDropdownIsSelectingCompositeField] = useRecoilComponentStateV2( diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx index 7ad454afa..e40191418 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx @@ -1,9 +1,12 @@ import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter'; import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { SelectControl } from '@/ui/input/components/SelectControl'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; type AdvancedFilterViewFilterValueInputProps = { @@ -19,11 +22,17 @@ export const AdvancedFilterViewFilterValueInput = ({ const isDisabled = !filter?.fieldMetadataId || !filter.operand; - const { - setFilterDefinitionUsedInDropdown, - setSelectedOperandInDropdown, - setSelectedFilter, - } = useFilterDropdown(); + const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); + + const setSelectedFilter = useSetRecoilComponentStateV2( + selectedFilterComponentState, + ); if (isDisabled) { return ( diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx index 43f9e4faf..08c3d8b06 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx @@ -1,11 +1,10 @@ -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; - import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu'; import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput'; +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 { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; -import { useRecoilValue } from 'recoil'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect'; import { ObjectFilterDropdownFilterSelect } from './ObjectFilterDropdownFilterSelect'; @@ -16,9 +15,10 @@ type MultipleFiltersDropdownContentProps = { export const MultipleFiltersDropdownContent = ({ filterDropdownId, }: MultipleFiltersDropdownContentProps) => { - const { filterDefinitionUsedInDropdownState } = useFilterDropdown({ + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, filterDropdownId, - }); + ); const [objectFilterDropdownIsSelectingCompositeField] = useRecoilComponentStateV2( @@ -31,10 +31,6 @@ export const MultipleFiltersDropdownContent = ({ filterDropdownId, ); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const shouldShowCompositeSelectionSubMenu = objectFilterDropdownIsSelectingCompositeField; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx index e8fa38cbe..1fb194eb2 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx @@ -1,16 +1,18 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { IconCheck } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; @@ -37,24 +39,22 @@ export const ObjectFilterDropdownBooleanSelect = () => { const theme = useTheme(); const options = [true, false]; - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - selectedFilterState, - } = useFilterDropdown(); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); const { closeDropdown } = useDropdown(); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - const selectedFilter = useRecoilValue(selectedFilterState); - const [selectedValue, setSelectedValue] = useState( selectedFilter?.value === 'true', ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx index a7a061bdf..3a443812c 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx @@ -1,11 +1,12 @@ -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; -import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue'; import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/utils/computeVariableDateViewFilterValue'; import { @@ -18,26 +19,20 @@ import { isDefined } from 'twenty-ui'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export const ObjectFilterDropdownDateInput = () => { - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - selectedFilterState, - } = useFilterDropdown(); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - - const selectedFilter = useRecoilValue(selectedFilterState) as - | (Filter & { definition: { type: 'DATE' | 'DATE_TIME' } }) - | null - | undefined; - const initialFilterValue = selectedFilter ? resolveDateViewFilterValue(selectedFilter) : null; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx index 7664504bb..6d792baa8 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx @@ -1,5 +1,3 @@ -import { useRecoilValue } from 'recoil'; - import { ObjectFilterDropdownDateInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput'; import { ObjectFilterDropdownNumberInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput'; import { ObjectFilterDropdownOptionSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect'; @@ -8,7 +6,6 @@ import { ObjectFilterDropdownRecordSelect } from '@/object-record/object-filter- import { ObjectFilterDropdownSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput'; import { ObjectFilterDropdownSourceSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect'; import { ObjectFilterDropdownTextSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { isActorSourceCompositeFilter } from '@/object-record/object-filter-dropdown/utils/isActorSourceCompositeFilter'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; @@ -18,6 +15,9 @@ import { ObjectFilterDropdownBooleanSelect } from '@/object-record/object-filter import { DATE_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/DateFilterTypes'; import { NUMBER_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/NumberFilterTypes'; import { TEXT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/TextFilterTypes'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; type ObjectFilterDropdownFilterInputProps = { filterDropdownId?: string; @@ -26,17 +26,13 @@ type ObjectFilterDropdownFilterInputProps = { export const ObjectFilterDropdownFilterInput = ({ filterDropdownId, }: ObjectFilterDropdownFilterInputProps) => { - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - } = useFilterDropdown({ filterDropdownId }); - - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + filterDropdownId, ); - - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + filterDropdownId, ); const isConfigurable = diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx index 649032fe0..cedf0da9c 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx @@ -6,8 +6,8 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks import { AdvancedFilterButton } from '@/object-record/object-filter-dropdown/components/AdvancedFilterButton'; import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem'; import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector'; @@ -17,13 +17,14 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated/graphql'; +import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState'; export const StyledInput = styled.input` background: transparent; border: none; @@ -59,24 +60,22 @@ export const ObjectFilterDropdownFilterSelect = ({ }: ObjectFilterDropdownFilterSelectProps) => { const { recordIndexId } = useRecordIndexContextOrThrow(); - const { - setObjectFilterDropdownSearchInput, - objectFilterDropdownSearchInputState, - advancedFilterViewFilterIdState, - } = useFilterDropdown(); + const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2( + objectFilterDropdownSearchInputComponentState, + ); - const advancedFilterViewFilterId = useRecoilValue( - advancedFilterViewFilterIdState, + const advancedFilterViewFilterId = useRecoilComponentValueV2( + advancedFilterViewFilterIdComponentState, + ); + + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, ); const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown( advancedFilterViewFilterId, ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, - ); - const availableFilterDefinitions = useRecoilComponentValueV2( availableFilterDefinitionsComponentState, ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx index 9dbd2d110..e3c938f56 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx @@ -1,10 +1,14 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState'; +import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState'; import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel'; import { getFilterableFieldTypeLabel } from '@/object-record/object-filter-dropdown/utils/getFilterableFieldTypeLabel'; @@ -14,8 +18,9 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { IconApps, IconChevronLeft, @@ -52,23 +57,28 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { objectFilterDropdownSubMenuFieldTypeComponentState, ); - const { - setFilterDefinitionUsedInDropdown, - setSelectedOperandInDropdown, - setObjectFilterDropdownSearchInput, - advancedFilterViewFilterIdState, - advancedFilterViewFilterGroupIdState, - } = useFilterDropdown(); + const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); + + const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2( + objectFilterDropdownSearchInputComponentState, + ); + + const advancedFilterViewFilterId = useRecoilComponentValueV2( + advancedFilterViewFilterIdComponentState, + ); + + const advancedFilterViewFilterGroupId = useRecoilComponentValueV2( + advancedFilterViewFilterGroupIdComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); - const advancedFilterViewFilterId = useRecoilValue( - advancedFilterViewFilterIdState, - ); - const advancedFilterViewFilterGroupId = useRecoilValue( - advancedFilterViewFilterGroupIdState, - ); - const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown( advancedFilterViewFilterId, ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx index d933f2f27..c65b23011 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx @@ -1,11 +1,12 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown'; import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown'; +import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState'; import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState'; import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { CompositeFilterableFieldType } from '@/object-record/object-filter-dropdown/types/CompositeFilterableFieldType'; import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; @@ -15,6 +16,8 @@ import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useRecoilValue } from 'recoil'; import { MenuItemSelect, useIcons } from 'twenty-ui'; @@ -56,15 +59,16 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({ const isACompositeField = isCompositeField(filterDefinition.type); - const { setSelectedOperandInDropdown, advancedFilterViewFilterIdState } = - useFilterDropdown(); + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); + + const advancedFilterViewFilterId = useRecoilComponentValueV2( + advancedFilterViewFilterIdComponentState, + ); const setHotkeyScope = useSetHotkeyScope(); - const advancedFilterViewFilterId = useRecoilValue( - advancedFilterViewFilterIdState, - ); - const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown( advancedFilterViewFilterId, ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx index 5222e6156..6baf9b1c7 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx @@ -1,31 +1,30 @@ import { ChangeEvent, useCallback, useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const ObjectFilterDropdownNumberInput = () => { - const { - selectedOperandInDropdownState, - filterDefinitionUsedInDropdownState, - selectedFilterState, - } = useFilterDropdown(); + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); + + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); const [hasFocused, setHasFocused] = useState(false); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - - const selectedFilter = useRecoilValue(selectedFilterState); - const [inputValue, setInputValue] = useState( () => selectedFilter?.value || '', ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx index 840d87ab9..61295cbc2 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx @@ -1,12 +1,12 @@ -import { useRecoilValue } from 'recoil'; import { IconChevronDown } from 'twenty-ui'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { getOperandLabel } from '../utils/getOperandLabel'; @@ -20,10 +20,8 @@ export const ObjectFilterDropdownOperandDropdown = ({ }: { filterDropdownId?: string; }) => { - const { selectedOperandInDropdownState } = useFilterDropdown(); - - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, ); const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx index ba59dc97e..edf121677 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx @@ -1,11 +1,14 @@ -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import styled from '@emotion/styled'; import { MenuItem } from 'twenty-ui'; @@ -19,22 +22,22 @@ const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)` `; export const ObjectFilterDropdownOperandSelect = () => { - const { - filterDefinitionUsedInDropdownState, - setSelectedOperandInDropdown, - selectedFilterState, - } = useFilterDropdown(); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); const { closeDropdown } = useDropdown(); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - - const selectedFilter = useRecoilValue(selectedFilterState); - const operandsForFilterType = isDefined(filterDefinitionUsedInDropdown) ? getOperandsForFilterDefinition(filterDefinitionUsedInDropdown) : []; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx index 0eb803525..76e9ef3fb 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx @@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum'; import { v4 } from 'uuid'; import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect'; import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; @@ -15,7 +14,13 @@ import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/inter import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; +import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { MenuItem, MenuItemMultiSelect } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; @@ -27,13 +32,25 @@ type SelectOptionForFilter = FieldMetadataItemOption & { }; export const ObjectFilterDropdownOptionSelect = () => { - const { - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - selectedOperandInDropdownState, - objectFilterDropdownSelectedOptionValuesState, - selectedFilterState, - } = useFilterDropdown(); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const objectFilterDropdownSelectedOptionValues = useRecoilComponentValueV2( + objectFilterDropdownSelectedOptionValuesComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); + + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, + ); + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); @@ -48,20 +65,6 @@ export const ObjectFilterDropdownOptionSelect = () => { ); const selectedItemId = useRecoilValue(selectedItemIdState); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, - ); - const objectFilterDropdownSelectedOptionValues = useRecoilValue( - objectFilterDropdownSelectedOptionValuesState, - ); - - const selectedFilter = useRecoilValue(selectedFilterState); const fieldMetaDataId = filterDefinitionUsedInDropdown?.fieldMetadataId ?? ''; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx index 598279705..5026922e8 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx @@ -1,13 +1,15 @@ -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues'; import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata'; import { RatingInput } from '@/ui/field/input/components/RatingInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; const convertFieldRatingValueToNumber = ( rating: Exclude, ): string => { @@ -31,20 +33,17 @@ export const convertRatingToRatingValue = (rating: number) => { }; export const ObjectFilterDropdownRatingInput = () => { - const { - selectedOperandInDropdownState, - filterDefinitionUsedInDropdownState, - selectedFilterState, - } = useFilterDropdown(); - - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, ); - const selectedFilter = useRecoilValue(selectedFilterState); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx index 1c5046a30..2f95c0873 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx @@ -1,17 +1,21 @@ import { useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { ObjectFilterDropdownRecordPinnedItems } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems'; import { CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID } from '@/object-record/object-filter-dropdown/constants/CurrentWorkspaceMemberSelectableItemId'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +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 { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown'; import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect'; import { SelectableItem } from '@/object-record/select/types/SelectableItem'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { RelationFilterValue } from '@/views/view-filter-value/types/RelationFilterValue'; import { relationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/relationFilterValueSchema'; @@ -32,35 +36,33 @@ type ObjectFilterDropdownRecordSelectProps = { export const ObjectFilterDropdownRecordSelect = ({ viewComponentId, }: ObjectFilterDropdownRecordSelectProps) => { - const { - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - selectedOperandInDropdownState, - selectedFilterState, - objectFilterDropdownSelectedRecordIdsState, - } = useFilterDropdown(); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); + + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, + ); + + const objectFilterDropdownSelectedRecordIds = useRecoilComponentValueV2( + objectFilterDropdownSelectedRecordIdsComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(viewComponentId); const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(viewComponentId); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - const objectFilterDropdownSelectedRecordIds = useRecoilValue( - objectFilterDropdownSelectedRecordIdsState, - ); const [fieldId] = useState(v4()); - const selectedFilter = useRecoilValue(selectedFilterState); - const { isCurrentWorkspaceMemberSelected } = relationFilterValueSchema .catch({ isCurrentWorkspaceMemberSelected: false, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx index 757dca89b..6f0c8b19a 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx @@ -1,28 +1,31 @@ import { ChangeEvent, useCallback, useState } from 'react'; -import { useRecoilValue } from 'recoil'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; export const ObjectFilterDropdownSearchInput = () => { - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - objectFilterDropdownSearchInputState, - setObjectFilterDropdownSearchInput, - } = useFilterDropdown(); - const [hasFocused, setHasFocused] = useState(false); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, + + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, + + const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2( + objectFilterDropdownSearchInputComponentState, ); + const [hasFocused, setHasFocused] = useState(false); + const handleInputRef = useCallback( (node: HTMLInputElement | null) => { if (Boolean(node) && !hasFocused) { diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx index 702706ba8..b6144584b 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx @@ -1,14 +1,19 @@ import { useState } from 'react'; -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 { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +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 { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown'; import { SelectableItem } from '@/object-record/select/types/SelectableItem'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; @@ -24,14 +29,29 @@ type ObjectFilterDropdownSourceSelectProps = { export const ObjectFilterDropdownSourceSelect = ({ viewComponentId, }: ObjectFilterDropdownSourceSelectProps) => { - const { - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - selectedOperandInDropdownState, - selectedFilterState, - setObjectFilterDropdownSelectedRecordIds, - objectFilterDropdownSelectedRecordIdsState, - } = useFilterDropdown(); + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, + ); + + const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2( + objectFilterDropdownSelectedRecordIdsComponentState, + ); + + const objectFilterDropdownSelectedRecordIds = useRecoilComponentValueV2( + objectFilterDropdownSelectedRecordIdsComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, + ); + + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + ); const { applyRecordFilter } = useApplyRecordFilter(viewComponentId); @@ -41,22 +61,8 @@ export const ObjectFilterDropdownSourceSelect = ({ const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(viewComponentId); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, - ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, - ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); - const objectFilterDropdownSelectedRecordIds = useRecoilValue( - objectFilterDropdownSelectedRecordIdsState, - ); const [fieldId] = useState(v4()); - const selectedFilter = useRecoilValue(selectedFilterState); - const sourceTypes = getActorSourceMultiSelectOptions( objectFilterDropdownSelectedRecordIds, ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx index 9f7c13af7..e9a790271 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx @@ -1,33 +1,38 @@ import { ChangeEvent, useCallback, useState } from 'react'; -import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; export const ObjectFilterDropdownTextSearchInput = () => { - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - objectFilterDropdownSearchInputState, - setObjectFilterDropdownSearchInput, - selectedFilterState, - } = useFilterDropdown(); - const [filterId] = useState(v4()); const [hasFocused, setHasFocused] = useState(false); - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, + + const selectedOperandInDropdown = useRecoilComponentValueV2( + selectedOperandInDropdownComponentState, ); - const objectFilterDropdownSearchInput = useRecoilValue( - objectFilterDropdownSearchInputState, + + const objectFilterDropdownSearchInput = useRecoilComponentValueV2( + objectFilterDropdownSearchInputComponentState, + ); + + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); + + const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2( + objectFilterDropdownSearchInputComponentState, ); - const selectedFilter = useRecoilValue(selectedFilterState); const { applyRecordFilter } = useApplyRecordFilter(); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx index 571645a5c..8719d1bc7 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx @@ -1,17 +1,19 @@ import { useTheme } from '@emotion/react'; import React from 'react'; -import { useRecoilValue } from 'recoil'; import { IconChevronDown } from 'twenty-ui'; import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; import { getOperandsForFilterDefinition } from '../utils/getOperandsForFilterType'; import { GenericEntityFilterChip } from './GenericEntityFilterChip'; @@ -25,16 +27,21 @@ export const SingleEntityObjectFilterDropdownButton = ({ }: { hotkeyScope: HotkeyScope; }) => { - const { - selectedFilterState, - setFilterDefinitionUsedInDropdown, - setSelectedOperandInDropdown, - } = useFilterDropdown(); + const selectedFilter = useRecoilComponentValueV2( + selectedFilterComponentState, + ); + + const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2( + filterDefinitionUsedInDropdownComponentState, + ); + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); const availableFilterDefinitions = useRecoilComponentValueV2( availableFilterDefinitionsComponentState, ); - const selectedFilter = useRecoilValue(selectedFilterState); const availableFilterDefinition = availableFilterDefinitions[0]; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx deleted file mode 100644 index 0ad4c528e..000000000 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx +++ /dev/null @@ -1,346 +0,0 @@ -import { expect } from '@storybook/test'; -import { act, renderHook, waitFor } from '@testing-library/react'; -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'; -import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; -import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; -import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; -import { MockedProvider } from '@apollo/client/testing'; -import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter'; - -const filterDropdownId = 'filterDropdownId'; -const renderHookConfig = { - wrapper: ({ children }: any) => ( - - - - - {children} - - - - - ), -}; - -const filterDefinitions: FilterDefinition[] = [ - { - fieldMetadataId: 'id', - label: 'definition label', - iconName: 'icon', - type: 'TEXT', - }, -]; - -const mockFilter: Filter = { - id: 'id', - definition: filterDefinitions[0], - displayValue: '', - fieldMetadataId: '', - operand: ViewFilterOperand.Is, - value: '', -}; - -describe('useFilterDropdown', () => { - it('should set availableFilterDefinitions', async () => { - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - - const [availableFilterDefinitions, setAvailableFilterDefinitions] = - useRecoilComponentStateV2( - availableFilterDefinitionsComponentState, - filterDropdownId, - ); - - return { availableFilterDefinitions, setAvailableFilterDefinitions }; - }, renderHookConfig); - - expect(result.current.availableFilterDefinitions).toEqual([]); - - act(() => { - result.current.setAvailableFilterDefinitions(filterDefinitions); - }); - - await waitFor(() => { - expect(result.current.availableFilterDefinitions).toEqual( - filterDefinitions, - ); - }); - }); - - it('should set onFilterSelect', async () => { - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { onFilterSelectState } = useFilterDropdownStates(filterDropdownId); - - const [onFilterSelect, setOnFilterSelect] = - useRecoilState(onFilterSelectState); - return { onFilterSelect, setOnFilterSelect }; - }, renderHookConfig); - - expect(result.current.onFilterSelect).toBeUndefined(); - - act(() => { - result.current.setOnFilterSelect( - (_currVal?: Filter | null) => (_filter: Filter | null) => {}, - ); - }); - await waitFor(() => { - expect(typeof result.current.onFilterSelect).toBe('function'); - }); - }); - - it('should set selectedOperandInDropdown', async () => { - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { selectedOperandInDropdownState } = - useFilterDropdownStates(filterDropdownId); - - const [selectedOperandInDropdown, setSelectedOperandInDropdown] = - useRecoilState(selectedOperandInDropdownState); - return { selectedOperandInDropdown, setSelectedOperandInDropdown }; - }, renderHookConfig); - - const mockOperand = ViewFilterOperand.Contains; - - expect(result.current.selectedOperandInDropdown).toBeNull(); - - act(() => { - result.current.setSelectedOperandInDropdown(mockOperand); - }); - - expect(result.current.selectedOperandInDropdown).toBe(mockOperand); - }); - - it('should set selectedFilter', async () => { - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { selectedFilterState } = useFilterDropdownStates(filterDropdownId); - - const [selectedFilter, setSelectedFilter] = - useRecoilState(selectedFilterState); - return { selectedFilter, setSelectedFilter }; - }, renderHookConfig); - - expect(result.current.selectedFilter).toBeUndefined(); - - act(() => { - result.current.setSelectedFilter(mockFilter); - }); - - await waitFor(() => { - expect(result.current.selectedFilter).toBe(mockFilter); - }); - }); - - it('should set filterDefinitionUsedInDropdown', async () => { - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { filterDefinitionUsedInDropdownState } = - useFilterDropdownStates(filterDropdownId); - - const [ - filterDefinitionUsedInDropdown, - setFilterDefinitionUsedInDropdown, - ] = useRecoilState(filterDefinitionUsedInDropdownState); - return { - filterDefinitionUsedInDropdown, - setFilterDefinitionUsedInDropdown, - }; - }, renderHookConfig); - - expect(result.current.filterDefinitionUsedInDropdown).toBeNull(); - - act(() => { - result.current.setFilterDefinitionUsedInDropdown(filterDefinitions[0]); - }); - - await waitFor(() => { - expect(result.current.filterDefinitionUsedInDropdown).toBe( - filterDefinitions[0], - ); - }); - }); - - it('should set objectFilterDropdownSearchInput', async () => { - const mockResult = 'value'; - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { objectFilterDropdownSearchInputState } = - useFilterDropdownStates(filterDropdownId); - - const [ - objectFilterDropdownSearchInput, - setObjectFilterDropdownSearchInput, - ] = useRecoilState(objectFilterDropdownSearchInputState); - return { - objectFilterDropdownSearchInput, - setObjectFilterDropdownSearchInput, - }; - }, renderHookConfig); - - expect(result.current.objectFilterDropdownSearchInput).toBe(''); - - act(() => { - result.current.setObjectFilterDropdownSearchInput(mockResult); - }); - - await waitFor(() => { - expect(result.current.objectFilterDropdownSearchInput).toBe(mockResult); - }); - }); - - it('should set objectFilterDropdownSelectedRecordId', async () => { - const mockResult = ['value']; - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { objectFilterDropdownSelectedRecordIdsState } = - useFilterDropdownStates(filterDropdownId); - - const [ - objectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedRecordIds, - ] = useRecoilState(objectFilterDropdownSelectedRecordIdsState); - return { - objectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedRecordIds, - }; - }, renderHookConfig); - - expect( - JSON.stringify(result.current.objectFilterDropdownSelectedRecordIds), - ).toBe(JSON.stringify([])); - - act(() => { - result.current.setObjectFilterDropdownSelectedRecordIds(mockResult); - }); - - await waitFor(() => { - expect(result.current.objectFilterDropdownSelectedRecordIds).toBe( - mockResult, - ); - }); - }); - - it('should set objectFilterDropdownSelectedRecordIds', async () => { - const mockResult = ['id-0', 'id-1', 'id-2']; - const { result } = renderHook(() => { - useFilterDropdown({ filterDropdownId }); - const { objectFilterDropdownSelectedRecordIdsState } = - useFilterDropdownStates(filterDropdownId); - - const [ - objectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedRecordIds, - ] = useRecoilState(objectFilterDropdownSelectedRecordIdsState); - return { - objectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedRecordIds, - }; - }, renderHookConfig); - - expect(result.current.objectFilterDropdownSelectedRecordIds).toHaveLength( - 0, - ); - - act(() => { - result.current.setObjectFilterDropdownSelectedRecordIds(mockResult); - }); - - await waitFor(() => { - expect( - result.current.objectFilterDropdownSelectedRecordIds, - ).toStrictEqual(mockResult); - }); - }); - - it('should reset filter', async () => { - const { result } = renderHook(() => { - const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId); - - const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId); - - const { selectedFilterState } = useFilterDropdownStates(filterDropdownId); - - const [selectedFilter, setSelectedFilter] = - useRecoilState(selectedFilterState); - - return { - selectedFilter, - setSelectedFilter, - applyRecordFilter, - resetFilterDropdown, - }; - }, renderHookConfig); - - act(() => { - result.current.applyRecordFilter(mockFilter); - }); - - await waitFor(() => { - expect(result.current.selectedFilter).toStrictEqual(mockFilter); - }); - - act(() => { - result.current.resetFilterDropdown(); - }); - - await waitFor(() => { - expect(result.current.selectedFilter).toBeUndefined(); - }); - }); - - it('should call onFilterSelect when a filter option is set', async () => { - const { result } = renderHook(() => { - const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId); - - const { onFilterSelectState } = useFilterDropdownStates(filterDropdownId); - - const [onFilterSelect, setOnFilterSelect] = - useRecoilState(onFilterSelectState); - return { onFilterSelect, setOnFilterSelect, applyRecordFilter }; - }, renderHookConfig); - const onFilterSelectMock = jest.fn(); - - expect(result.current.onFilterSelect).toBeUndefined(); - - act(() => { - result.current.setOnFilterSelect(onFilterSelectMock); - result.current.applyRecordFilter(mockFilter); - }); - - await waitFor(() => { - expect(onFilterSelectMock).toBeDefined(); - expect(onFilterSelectMock).toHaveBeenCalled(); - }); - }); - - it('should handle componentInstanceId undefined on initial values', () => { - global.console.error = jest.fn(); - - const renderFunction = () => { - renderHook(() => useFilterDropdown(), renderHookConfig); - }; - - expect(renderFunction).toThrow(Error); - expect(renderFunction).toThrow( - 'Instance id is not provided and cannot be found in context.', - ); - }); - - it('should componentInstanceId have been defined on initial values', () => { - const { result } = renderHook( - () => useFilterDropdown({ filterDropdownId }), - renderHookConfig, - ); - - expect(result.current.componentInstanceId).toBeDefined(); - }); -}); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts deleted file mode 100644 index e75b2477d..000000000 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { 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 { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; - -type UseFilterDropdownProps = { - filterDropdownId?: string; -}; - -export const useFilterDropdown = (props?: UseFilterDropdownProps) => { - const componentInstanceId = useAvailableComponentInstanceIdOrThrow( - ObjectFilterDropdownComponentInstanceContext, - props?.filterDropdownId, - ); - - const { - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - objectFilterDropdownSelectedRecordIdsState, - objectFilterDropdownSelectedOptionValuesState, - selectedFilterState, - selectedOperandInDropdownState, - onFilterSelectState, - advancedFilterViewFilterGroupIdState, - advancedFilterViewFilterIdState, - } = useFilterDropdownStates(componentInstanceId); - - const setSelectedFilter = useSetRecoilState(selectedFilterState); - const setSelectedOperandInDropdown = useSetRecoilState( - selectedOperandInDropdownState, - ); - const setFilterDefinitionUsedInDropdown = useSetRecoilState( - filterDefinitionUsedInDropdownState, - ); - const setObjectFilterDropdownSearchInput = useSetRecoilState( - objectFilterDropdownSearchInputState, - ); - const setObjectFilterDropdownSelectedRecordIds = useSetRecoilState( - objectFilterDropdownSelectedRecordIdsState, - ); - const setObjectFilterDropdownSelectedOptionValues = useSetRecoilState( - objectFilterDropdownSelectedOptionValuesState, - ); - - const setOnFilterSelect = useSetRecoilState(onFilterSelectState); - const setAdvancedFilterViewFilterGroupId = useSetRecoilState( - advancedFilterViewFilterGroupIdState, - ); - const setAdvancedFilterViewFilterId = useSetRecoilState( - advancedFilterViewFilterIdState, - ); - - return { - componentInstanceId, - setSelectedFilter, - setSelectedOperandInDropdown, - setFilterDefinitionUsedInDropdown, - setObjectFilterDropdownSearchInput, - setObjectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedOptionValues, - setOnFilterSelect, - setAdvancedFilterViewFilterGroupId, - setAdvancedFilterViewFilterId, - filterDefinitionUsedInDropdownState, - objectFilterDropdownSearchInputState, - objectFilterDropdownSelectedRecordIdsState, - objectFilterDropdownSelectedOptionValuesState, - selectedFilterState, - selectedOperandInDropdownState, - onFilterSelectState, - advancedFilterViewFilterGroupIdState, - advancedFilterViewFilterIdState, - }; -}; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts index d919c7b20..53288a4bb 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts @@ -1,11 +1,16 @@ import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState'; +import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue'; import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { useRecoilValue } from 'recoil'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { isDefined } from 'twenty-ui'; import { v4 } from 'uuid'; @@ -14,19 +19,24 @@ type SelectFilterParams = { }; export const useSelectFilterDefinitionUsedInDropdown = () => { - const { - setFilterDefinitionUsedInDropdown, - setSelectedOperandInDropdown, - setObjectFilterDropdownSearchInput, - advancedFilterViewFilterGroupIdState, - advancedFilterViewFilterIdState, - } = useFilterDropdown(); - - const advancedFilterViewFilterId = useRecoilValue( - advancedFilterViewFilterIdState, + const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2( + filterDefinitionUsedInDropdownComponentState, ); - const advancedFilterViewFilterGroupId = useRecoilValue( - advancedFilterViewFilterGroupIdState, + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + ); + + const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2( + objectFilterDropdownSearchInputComponentState, + ); + + const advancedFilterViewFilterGroupId = useRecoilComponentValueV2( + advancedFilterViewFilterGroupIdComponentState, + ); + + const advancedFilterViewFilterId = useRecoilComponentValueV2( + advancedFilterViewFilterIdComponentState, ); const setHotkeyScope = useSetHotkeyScope(); diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx index 7424ce73b..59a5a59cb 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect } from 'react'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; import { FilterOperand } from '@/object-record/object-filter-dropdown/types/FilterOperand'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; @@ -11,6 +10,10 @@ import { EditableFilterChip } from '@/views/components/EditableFilterChip'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; +import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters'; import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; import { isDefined } from '~/utils/isDefined'; @@ -26,13 +29,20 @@ export const EditableFilterDropdownButton = ({ viewFilter, hotkeyScope, }: EditableFilterDropdownButtonProps) => { - const { - setFilterDefinitionUsedInDropdown, - setSelectedOperandInDropdown, - setSelectedFilter, - } = useFilterDropdown({ - filterDropdownId: viewFilterDropdownId, - }); + const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2( + filterDefinitionUsedInDropdownComponentState, + viewFilterDropdownId, + ); + + const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( + selectedOperandInDropdownComponentState, + viewFilterDropdownId, + ); + + const setSelectedFilter = useSetRecoilComponentStateV2( + selectedFilterComponentState, + viewFilterDropdownId, + ); // TODO: verify this instance id works const availableFilterDefinitions = useRecoilComponentValueV2( diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx index 7d8817adf..6de55ad65 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx @@ -1,12 +1,14 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useEffect } from 'react'; -import { useRecoilValue } from 'recoil'; -import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; +import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState'; +import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState'; +import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState'; +import { onFilterSelectComponentState } from '@/object-record/object-filter-dropdown/states/onFilterSelectComponentState'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters'; import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; @@ -28,17 +30,27 @@ export const ViewBarFilterEffect = ({ availableFilterDefinitionsComponentState, ); - const { - setOnFilterSelect, - filterDefinitionUsedInDropdownState, - setObjectFilterDropdownSelectedRecordIds, - setObjectFilterDropdownSelectedOptionValues, - } = useFilterDropdown({ filterDropdownId }); - - const filterDefinitionUsedInDropdown = useRecoilValue( - filterDefinitionUsedInDropdownState, + const setOnFilterSelect = useSetRecoilComponentStateV2( + onFilterSelectComponentState, + filterDropdownId, ); + const filterDefinitionUsedInDropdown = useRecoilComponentValueV2( + filterDefinitionUsedInDropdownComponentState, + filterDropdownId, + ); + + const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2( + objectFilterDropdownSelectedRecordIdsComponentState, + filterDropdownId, + ); + + const setObjectFilterDropdownSelectedOptionValues = + useSetRecoilComponentStateV2( + objectFilterDropdownSelectedOptionValuesComponentState, + filterDropdownId, + ); + // TODO: verify this instance id works const setAvailableFilterDefinitions = useSetRecoilComponentStateV2( availableFilterDefinitionsComponentState,