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

Refactored sort dropdown hooks (#9584)

Browse Source 
- Removed useObjectSortDropdown hook
- Removed useSortDropdown hook
This commit is contained in:
Lucas Bordeau
2025-01-13 17:07:05 +01:00
committed by GitHub
parent 530a18558b
commit 86c4decdbd
12 changed files with 264 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
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 { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { ViewEventContext } from '@/views/events/contexts/ViewEventContext';
import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
@ -39,7 +40,6 @@ export const ViewBar = ({
const { objectNamePlural } = useParams();
const filterDropdownId = 'view-filter';
const sortDropdownId = 'view-sort';
const loading = useIsPrefetchLoading();
@ -48,56 +48,55 @@ export const ViewBar = ({
}
return (
<ViewEventContext.Provider value={{ onCurrentViewChange }}>
<ViewBarEffect viewBarId={viewBarId} />
<ViewBarFilterEffect filterDropdownId={filterDropdownId} />
<ViewBarSortEffect sortDropdownId={sortDropdownId} />
<QueryParamsFiltersEffect />
<QueryParamsViewIdEffect />
<ObjectSortDropdownComponentInstanceContext.Provider
value={{ instanceId: VIEW_SORT_DROPDOWN_ID }}
>
<ViewEventContext.Provider value={{ onCurrentViewChange }}>
<ViewBarEffect viewBarId={viewBarId} />
<ViewBarFilterEffect filterDropdownId={filterDropdownId} />
<ViewBarSortEffect />
<QueryParamsFiltersEffect />
<QueryParamsViewIdEffect />
<ViewBarPageTitle viewBarId={viewBarId} />
<TopBar
className={className}
leftComponent={
loading ? <ViewBarSkeletonLoader /> : <ViewPickerDropdown />
}
rightComponent={
<>
<ObjectFilterDropdownButton
filterDropdownId={filterDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
}}
/>
<ObjectSortDropdownComponentInstanceContext.Provider
value={{ instanceId: sortDropdownId }}
>
<ViewBarPageTitle viewBarId={viewBarId} />
<TopBar
className={className}
leftComponent={
loading ? <ViewBarSkeletonLoader /> : <ViewPickerDropdown />
}
rightComponent={
<>
<ObjectFilterDropdownButton
filterDropdownId={filterDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
}}
/>
<ObjectSortDropdownButton
sortDropdownId={sortDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectSortDropdownButton,
}}
/>
</ObjectSortDropdownComponentInstanceContext.Provider>
{optionsDropdownButton}
</>
}
bottomComponent={
<ViewBarDetails
filterDropdownId={filterDropdownId}
hasFilterButton
viewBarId={viewBarId}
objectNamePlural={objectNamePlural}
rightComponent={
<UpdateViewButtonGroup
hotkeyScope={{
scope: ViewsHotkeyScope.UpdateViewButtonDropdown,
}}
/>
}
/>
}
/>
</ViewEventContext.Provider>
{optionsDropdownButton}
</>
}
bottomComponent={
<ViewBarDetails
filterDropdownId={filterDropdownId}
hasFilterButton
viewBarId={viewBarId}
objectNamePlural={objectNamePlural}
rightComponent={
<UpdateViewButtonGroup
hotkeyScope={{
scope: ViewsHotkeyScope.UpdateViewButtonDropdown,
}}
/>
}
/>
}
/>
</ViewEventContext.Provider>
</ObjectSortDropdownComponentInstanceContext.Provider>
);
};

23
packages/twenty-front/src/modules/views/components/ViewBarSortEffect.tsx
View File

@ -1,7 +1,6 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -9,13 +8,7 @@ import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewS
import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
import { isDefined } from '~/utils/isDefined';
type ViewBarSortEffectProps = {
sortDropdownId: string;
};
export const ViewBarSortEffect = ({
sortDropdownId,
}: ViewBarSortEffectProps) => {
export const ViewBarSortEffect = () => {
const { upsertCombinedViewSort } = useUpsertCombinedViewSorts();
// TDOO: verify this instance id works
@ -23,17 +16,13 @@ export const ViewBarSortEffect = ({
availableSortDefinitionsComponentState,
);
const { onSortSelectState } = useSortDropdown({
sortDropdownId,
});
const setOnSortSelect = useSetRecoilComponentStateV2(
onSortSelectComponentState,
);
// TDOO: verify this instance id works
const setAvailableSortDefinitionsInSortDropdown =
useSetRecoilComponentStateV2(
availableSortDefinitionsComponentState,
sortDropdownId,
);
const setOnSortSelect = useSetRecoilState(onSortSelectState);
useSetRecoilComponentStateV2(availableSortDefinitionsComponentState);
useEffect(() => {
if (isDefined(availableSortDefinitions)) {