admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Removed useFilterDropdown hook (#9537)

Browse Source 
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.
This commit is contained in:
Lucas Bordeau
2025-01-10 14:45:17 +01:00
committed by GitHub
parent 7b2debf6fb
commit e58edc3bc1
24 changed files with 366 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx
View File

@ -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(

21
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx
View File

@ -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 (

14
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx
View File

@ -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;

30
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
View File

@ -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<boolean | undefined>(
selectedFilter?.value === 'true',
);

35
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
View File

@ -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;

22
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
View File

@ -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 =

25
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View File

@ -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,
);

42
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx
View File

@ -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,
);

18
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx
View File

@ -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,
);

31
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
View File

@ -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 || '',
);

10
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
View File

@ -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();

29
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
View File

@ -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)
: [];

47
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
View File

@ -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 ?? '';

27
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx
View File

@ -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<FieldRatingValue, null>,
): 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();

48
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx
View File

@ -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,

33
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx
View File

@ -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) {

54
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx
View File

@ -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,
);

39
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx
View File

@ -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();

23
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
View File

@ -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];

346
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx
View File

@ -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) => (
<RecoilRoot>
<MockedProvider mocks={[]} addTypename={false}>
<JestObjectMetadataItemSetter>
<ViewComponentInstanceContext.Provider value={{ instanceId: 'test' }}>
{children}
</ViewComponentInstanceContext.Provider>
</JestObjectMetadataItemSetter>
</MockedProvider>
</RecoilRoot>
),
};
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();
});
});

76
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts
View File

@ -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,
};
};

38
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts
View File

@ -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();

26
packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
View File

@ -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(

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

@ -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,