diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useMoveRecordField.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useMoveRecordField.ts index 368fd73326..69b5366b6b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useMoveRecordField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useMoveRecordField.ts @@ -1,16 +1,16 @@ +import { useStore } from 'jotai'; +import { useCallback } from 'react'; + import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpdateRecordField'; -import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState'; -import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState'; +import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; +import { useAtomComponentSelectorCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorCallbackState'; import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields'; import { mapRecordFieldToViewField } from '@/views/utils/mapRecordFieldToViewField'; -import { useCallback } from 'react'; -import { sortByProperty } from '~/utils/array/sortByProperty'; -import { useStore } from 'jotai'; export const useMoveRecordField = (recordTableId?: string) => { const store = useStore(); - const currentRecordFields = useAtomComponentStateCallbackState( - currentRecordFieldsComponentState, + const visibleRecordFields = useAtomComponentSelectorCallbackState( + visibleRecordFieldsComponentSelector, recordTableId, ); @@ -26,11 +26,9 @@ export const useMoveRecordField = (recordTableId?: string) => { direction: 'before' | 'after'; fieldMetadataItemIdToMove: string; }) => { - const sortedRecordFields = store - .get(currentRecordFields) - .toSorted(sortByProperty('position')); + const visibleRecordFieldsValue = store.get(visibleRecordFields); - const indexOfRecordFieldToMove = sortedRecordFields.findIndex( + const indexOfRecordFieldToMove = visibleRecordFieldsValue.findIndex( (recordField) => recordField.fieldMetadataItemId === fieldMetadataItemIdToMove, ); @@ -39,48 +37,45 @@ export const useMoveRecordField = (recordTableId?: string) => { return; } - const newRecordFields = [...sortedRecordFields]; - const targetArrayIndex = direction === 'before' ? indexOfRecordFieldToMove - 1 : indexOfRecordFieldToMove + 1; - const targetArraySize = newRecordFields.length - 1; - if ( - indexOfRecordFieldToMove >= 0 && - targetArrayIndex >= 0 && - indexOfRecordFieldToMove <= targetArraySize && - targetArrayIndex <= targetArraySize + targetArrayIndex < 0 || + targetArrayIndex > visibleRecordFieldsValue.length - 1 ) { - const currentRecordField = newRecordFields[indexOfRecordFieldToMove]; - const targetRecordField = newRecordFields[targetArrayIndex]; - - const targetRecordFieldNewPosition = currentRecordField.position; - const currentRecordFieldNewPosition = targetRecordField.position; - - updateRecordField(targetRecordField.fieldMetadataItemId, { - position: targetRecordFieldNewPosition, - }); - - updateRecordField(currentRecordField.fieldMetadataItemId, { - position: currentRecordFieldNewPosition, - }); - - await saveViewFields([ - mapRecordFieldToViewField({ - ...targetRecordField, - position: targetRecordFieldNewPosition, - }), - mapRecordFieldToViewField({ - ...currentRecordField, - position: currentRecordFieldNewPosition, - }), - ]); + return; } + + const currentRecordField = + visibleRecordFieldsValue[indexOfRecordFieldToMove]; + const targetRecordField = visibleRecordFieldsValue[targetArrayIndex]; + + const targetRecordFieldNewPosition = currentRecordField.position; + const currentRecordFieldNewPosition = targetRecordField.position; + + updateRecordField(targetRecordField.fieldMetadataItemId, { + position: targetRecordFieldNewPosition, + }); + + updateRecordField(currentRecordField.fieldMetadataItemId, { + position: currentRecordFieldNewPosition, + }); + + await saveViewFields([ + mapRecordFieldToViewField({ + ...targetRecordField, + position: targetRecordFieldNewPosition, + }), + mapRecordFieldToViewField({ + ...currentRecordField, + position: currentRecordFieldNewPosition, + }), + ]); }, - [currentRecordFields, saveViewFields, updateRecordField, store], + [visibleRecordFields, saveViewFields, updateRecordField, store], ); return { moveRecordField };