From 719344f9805dd46fce8849fe0143cac560c2b381 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 13 Jan 2025 14:42:02 +0100 Subject: [PATCH] Refactor record sort dropdown (#9578) - Refactored all sort dropdown states to V2 - Added ObjectSortDropdownComponentInstanceContext - Cleaned some constants --- .../states/recordDeleteProgressState.ts | 0 .../constants/ObjectSortDropdownId.ts | 6 +---- .../constants/ViewSortDropdownId.ts | 1 + .../hooks/useObjectSortDropdown.ts | 20 ++++++++-------- .../hooks/useSortDropdownStates.ts | 23 ++++++++----------- .../availableSortDefinitionsComponentState.ts | 7 +++--- ...ectSortDropdownComponentInstanceContext.ts | 4 ++++ .../isSortDirectionMenuUnfoldedState.ts | 15 ++++++------ .../states/isSortSelectedScopedState.ts | 6 +++-- ...ctSortDropdownSearchInputComponentState.ts | 6 +++-- .../states/onSortSelectScopedState.ts | 7 +++--- .../states/selectedSortDirectionState.ts | 16 ++++++------- .../src/modules/views/components/ViewBar.tsx | 17 +++++++++----- 13 files changed, 68 insertions(+), 60 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/object-options-dropdown/states/recordDeleteProgressState.ts create mode 100644 packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts create mode 100644 packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/recordDeleteProgressState.ts b/packages/twenty-front/src/modules/object-record/object-options-dropdown/states/recordDeleteProgressState.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts index 18e7cdb32..5cc1f9c8f 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts @@ -1,5 +1 @@ -/* eslint-disable @nx/workspace-max-consts-per-file */ -const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown'; -const VIEW_SORT_DROPDOWN_ID = 'view-sort'; - -export { OBJECT_SORT_DROPDOWN_ID, VIEW_SORT_DROPDOWN_ID }; +export const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown'; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts new file mode 100644 index 000000000..783ea772e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts @@ -0,0 +1 @@ +export const VIEW_SORT_DROPDOWN_ID = 'view-sort'; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts index 2cbe44c58..829095357 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts @@ -1,27 +1,25 @@ import { useCallback } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown'; -import isSortDirectionMenuUnfoldedState from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState'; -import selectedSortDirectionState from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState'; import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId'; +import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState'; +import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState'; +import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState'; -import { - OBJECT_SORT_DROPDOWN_ID, - VIEW_SORT_DROPDOWN_ID, -} from '../constants/ObjectSortDropdownId'; +import { OBJECT_SORT_DROPDOWN_ID } from '../constants/ObjectSortDropdownId'; // TODO: merge this with useSortDropdown export const useObjectSortDropdown = () => { const [isSortDirectionMenuUnfolded, setIsSortDirectionMenuUnfolded] = - useRecoilState(isSortDirectionMenuUnfoldedState); + useRecoilComponentStateV2(isSortDirectionMenuUnfoldedComponentState); - const [selectedSortDirection, setSelectedSortDirection] = useRecoilState( - selectedSortDirectionState, - ); + const [selectedSortDirection, setSelectedSortDirection] = + useRecoilComponentStateV2(selectedSortDirectionComponentState); const resetState = useCallback(() => { setIsSortDirectionMenuUnfolded(false); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts index 40eb5623e..355e02060 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts @@ -1,23 +1,20 @@ import { isSortSelectedComponentState } from '@/object-record/object-sort-dropdown/states/isSortSelectedScopedState'; import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState'; import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState'; -import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; export const useSortDropdownStates = (scopeId: string) => { - const isSortSelectedState = extractComponentState( - isSortSelectedComponentState, - scopeId, - ); + const isSortSelectedState = isSortSelectedComponentState.atomFamily({ + instanceId: scopeId, + }); - const onSortSelectState = extractComponentState( - onSortSelectComponentState, - scopeId, - ); + const onSortSelectState = onSortSelectComponentState.atomFamily({ + instanceId: scopeId, + }); - const objectSortDropdownSearchInputState = extractComponentState( - objectSortDropdownSearchInputComponentState, - scopeId, - ); + const objectSortDropdownSearchInputState = + objectSortDropdownSearchInputComponentState.atomFamily({ + instanceId: scopeId, + }); return { isSortSelectedState, diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts index db559fa52..d1f536ce3 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts @@ -1,10 +1,11 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { SortDefinition } from '../types/SortDefinition'; -export const availableSortDefinitionsComponentState = createComponentState< +export const availableSortDefinitionsComponentState = createComponentStateV2< SortDefinition[] >({ key: 'availableSortDefinitionsComponentState', defaultValue: [], + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts new file mode 100644 index 000000000..1b3cf3940 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts @@ -0,0 +1,4 @@ +import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext'; + +export const ObjectSortDropdownComponentInstanceContext = + createComponentInstanceContext(); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts index ebf779b94..4a50ee612 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts @@ -1,8 +1,9 @@ -import { atom } from 'recoil'; +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -const isSortDirectionMenuUnfoldedState = atom({ - key: 'isSortDirectionMenuUnfoldedState', - default: false, -}); - -export default isSortDirectionMenuUnfoldedState; +export const isSortDirectionMenuUnfoldedComponentState = + createComponentStateV2({ + key: 'isSortDirectionMenuUnfoldedComponentState', + defaultValue: false, + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts index 180a2f017..c6de82532 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts @@ -1,6 +1,8 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -export const isSortSelectedComponentState = createComponentState({ +export const isSortSelectedComponentState = createComponentStateV2({ key: 'isSortSelectedComponentState', defaultValue: false, + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts index 216161938..5185dbf2d 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts @@ -1,7 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const objectSortDropdownSearchInputComponentState = - createComponentState({ + createComponentStateV2({ key: 'objectSortDropdownSearchInputComponentState', defaultValue: '', + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts index 8b6ca0a8c..7c844e0b2 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts @@ -1,10 +1,11 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; import { Sort } from '../types/Sort'; -export const onSortSelectComponentState = createComponentState< +export const onSortSelectComponentState = createComponentStateV2< ((sort: Sort) => void) | undefined >({ key: 'onSortSelectComponentState', defaultValue: undefined, + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts index 327f96917..f15f91171 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts @@ -1,10 +1,10 @@ -import { atom } from 'recoil'; - +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; import { SortDirection } from '@/object-record/object-sort-dropdown/types/SortDirection'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -const selectedSortDirectionState = atom({ - key: 'selectedSortDirectionState', - default: 'asc', -}); - -export default selectedSortDirectionState; +export const selectedSortDirectionComponentState = + createComponentStateV2({ + key: 'selectedSortDirectionComponentState', + defaultValue: 'asc', + componentInstanceContext: ObjectSortDropdownComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/views/components/ViewBar.tsx b/packages/twenty-front/src/modules/views/components/ViewBar.tsx index 41a022446..b06807d35 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBar.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBar.tsx @@ -18,6 +18,7 @@ import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDro import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope'; +import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext'; import { ViewEventContext } from '@/views/events/contexts/ViewEventContext'; import { UpdateViewButtonGroup } from './UpdateViewButtonGroup'; import { ViewBarDetails } from './ViewBarDetails'; @@ -68,12 +69,16 @@ export const ViewBar = ({ scope: FiltersHotkeyScope.ObjectFilterDropdownButton, }} /> - + + + {optionsDropdownButton} }