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

Add initialization of new record sorts state and added remove record sorts util (#10358)

Browse Source 
This PR adds the same synchronization utils and hooks from view to
record sorts, as we did with view and record filters.

The goal is to apply what's in the view sorts only when needed.

Also added tests for those utils and hooks.

We also add useRemoveRecordSorts.
This commit is contained in:
Lucas Bordeau
2025-02-20 16:24:02 +01:00
committed by GitHub
parent aeb8806f0d
commit 3c80e2601f
12 changed files with 456 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -6,7 +6,7 @@ import { useCloseSortDropdown } from '@/object-record/object-sort-dropdown/hooks
import { useResetRecordSortDropdownSearchInput } from '@/object-record/object-sort-dropdown/hooks/useResetRecordSortDropdownSearchInput';
import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
import { useToggleSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useToggleSortDropdown';
import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
import { isRecordSortDirectionDropdownMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionDropdownMenuUnfoldedComponentState';
import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
@ -84,7 +84,7 @@ export const ObjectSortDropdownButton = ({
);
const isRecordSortDirectionMenuUnfolded = useRecoilComponentValueV2(
isRecordSortDirectionMenuUnfoldedComponentState,
isRecordSortDirectionDropdownMenuUnfoldedComponentState,
);
const { resetSortDropdown } = useResetSortDropdown();
@ -168,7 +168,7 @@ export const ObjectSortDropdownButton = ({
useRecoilComponentStateV2(selectedRecordSortDirectionComponentState);
const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isRecordSortDirectionMenuUnfoldedComponentState,
isRecordSortDirectionDropdownMenuUnfoldedComponentState,
);
const handleSortDirectionClick = (sortDirection: RecordSortDirection) => {

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

@ -1,18 +1,19 @@
import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
import { isRecordSortDirectionDropdownMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionDropdownMenuUnfoldedComponentState';
import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
export const useResetSortDropdown = () => {
const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isRecordSortDirectionMenuUnfoldedComponentState,
);
const setIsRecordSortDirectionDropdownMenuUnfolded =
useSetRecoilComponentStateV2(
isRecordSortDirectionDropdownMenuUnfoldedComponentState,
);
const setSelectedRecordSortDirection = useSetRecoilComponentStateV2(
selectedRecordSortDirectionComponentState,
);
const resetSortDropdown = () => {
setIsRecordSortDirectionMenuUnfolded(false);
setIsRecordSortDirectionDropdownMenuUnfolded(false);
setSelectedRecordSortDirection('asc');
};

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState.ts → packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortDirectionDropdownMenuUnfoldedComponentState.ts
View File

@ -1,9 +1,9 @@
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const isRecordSortDirectionMenuUnfoldedComponentState =
export const isRecordSortDirectionDropdownMenuUnfoldedComponentState =
createComponentStateV2<boolean>({
key: 'isRecordSortDirectionMenuUnfoldedComponentState',
key: 'isRecordSortDirectionDropdownMenuUnfoldedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

4
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRemoveSortingModal.tsx
View File

@ -1,5 +1,6 @@
import { useRecoilState } from 'recoil';
import { useRemoveRecordSort } from '@/object-record/record-sort/hooks/useRemoveRecordSort';
import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useDeleteCombinedViewSorts } from '@/views/hooks/useDeleteCombinedViewSorts';
@ -22,9 +23,12 @@ export const RecordIndexRemoveSortingModal = ({
const { deleteCombinedViewSort } = useDeleteCombinedViewSorts(recordIndexId);
const { removeRecordSort } = useRemoveRecordSort();
const handleRemoveClick = () => {
fieldMetadataIds.forEach((id) => {
deleteCombinedViewSort(id);
removeRecordSort(id);
});
};

5
packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
View File

@ -29,7 +29,7 @@ export const useHandleToggleColumnSort = ({
const { upsertRecordSort } = useUpsertRecordSort();
const handleToggleColumnSort = useCallback(
(fieldMetadataId: string) => {
async (fieldMetadataId: string) => {
const correspondingColumnDefinition = columnDefinitions.find(
(columnDefinition) =>
columnDefinition.fieldMetadataId === fieldMetadataId,
@ -48,8 +48,9 @@ export const useHandleToggleColumnSort = ({
direction: 'asc',
};
upsertCombinedViewSort(newSort);
upsertRecordSort(newSort);
await upsertCombinedViewSort(newSort);
},
[columnDefinitions, upsertCombinedViewSort, upsertRecordSort],
);

48
packages/twenty-front/src/modules/object-record/record-sort/hooks/useRemoveRecordSort.ts Normal file
View File

@ -0,0 +1,48 @@
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilCallback } from 'recoil';
export const useRemoveRecordSort = () => {
const currentRecordSortsCallbackState = useRecoilComponentCallbackStateV2(
currentRecordSortsComponentState,
);
const removeRecordSort = useRecoilCallback(
({ set, snapshot }) =>
(fieldMetadataId: string) => {
const currentRecordSorts = getSnapshotValue(
snapshot,
currentRecordSortsCallbackState,
);
const hasFoundRecordSortInCurrentRecordSorts = currentRecordSorts.some(
(existingSort) => existingSort.fieldMetadataId === fieldMetadataId,
);
if (hasFoundRecordSortInCurrentRecordSorts) {
set(currentRecordSortsCallbackState, (currentRecordSorts) => {
const newCurrentRecordSorts = [...currentRecordSorts];
const indexOfSortToRemove = newCurrentRecordSorts.findIndex(
(existingSort) =>
existingSort.fieldMetadataId === fieldMetadataId,
);
if (indexOfSortToRemove < 0) {
return newCurrentRecordSorts;
}
newCurrentRecordSorts.splice(indexOfSortToRemove, 1);
return newCurrentRecordSorts;
});
}
},
[currentRecordSortsCallbackState],
);
return {
removeRecordSort,
};
};