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,