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

Refactor record sort dropdown (#9578)

Browse Source 
- Refactored all sort dropdown states to V2
- Added ObjectSortDropdownComponentInstanceContext
- Cleaned some constants
This commit is contained in:
Lucas Bordeau
2025-01-13 14:42:02 +01:00
committed by GitHub
parent 5783d68d62
commit 719344f980
13 changed files with 68 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/twenty-front/src/modules/object-record/object-options-dropdown/states/recordDeleteProgressState.ts
View File

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts
View File

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

1
packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts Normal file
View File

@ -0,0 +1 @@
export const VIEW_SORT_DROPDOWN_ID = 'view-sort';

20
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts
View File

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

23
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts
View File

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

7
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts
View File

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

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
export const ObjectSortDropdownComponentInstanceContext =
createComponentInstanceContext();

15
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts
View File

@ -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<boolean>({
key: 'isSortDirectionMenuUnfoldedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts
View File

@ -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<boolean>({
export const isSortSelectedComponentState = createComponentStateV2<boolean>({
key: 'isSortSelectedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts
View File

@ -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<string>({
createComponentStateV2<string>({
key: 'objectSortDropdownSearchInputComponentState',
defaultValue: '',
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

7
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
View File

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

16
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts
View File

@ -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<SortDirection>({
key: 'selectedSortDirectionState',
default: 'asc',
});
export default selectedSortDirectionState;
export const selectedSortDirectionComponentState =
createComponentStateV2<SortDirection>({
key: 'selectedSortDirectionComponentState',
defaultValue: 'asc',
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

17
packages/twenty-front/src/modules/views/components/ViewBar.tsx
View File

@ -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,
}}
/>
<ObjectSortDropdownButton
sortDropdownId={sortDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectSortDropdownButton,
}}
/>
<ObjectSortDropdownComponentInstanceContext.Provider
value={{ instanceId: sortDropdownId }}
>
<ObjectSortDropdownButton
sortDropdownId={sortDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectSortDropdownButton,
}}
/>
</ObjectSortDropdownComponentInstanceContext.Provider>
{optionsDropdownButton}
</>
}