From d6f117c688f86df89df95b3a15e93ea3a574cff5 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sat, 27 Jan 2024 15:55:45 +0100 Subject: [PATCH] Display RecordBoardCards on new board (#3657) * Before remove saveEditModeValue logic * Fixes * Fix tests * Fix tests --- ...enCreateActivityDrawerForSelectedRowIds.ts | 6 +- .../components/RightDrawerActivity.tsx | 8 +- .../hooks/__tests__/useIsFieldEmpty.test.tsx | 4 +- .../hooks/__tests__/usePersistField.test.tsx | 6 +- .../field/hooks/useIsFieldEmpty.ts | 19 +- .../field/hooks/usePersistField.ts | 6 +- .../field/hooks/useToggleEditOnlyInput.ts | 11 +- .../__stories__/ChipFieldDisplay.stories.tsx | 4 +- .../field/meta-types/hooks/useBooleanField.ts | 7 +- .../field/meta-types/hooks/useChipField.ts | 4 +- .../meta-types/hooks/useCurrencyField.ts | 6 +- .../meta-types/hooks/useDateTimeField.ts | 7 +- .../field/meta-types/hooks/useEmailField.ts | 7 +- .../meta-types/hooks/useFullNameField.ts | 7 +- .../field/meta-types/hooks/useLinkField.ts | 7 +- .../field/meta-types/hooks/useNumberField.ts | 6 +- .../field/meta-types/hooks/usePhoneField.ts | 7 +- .../field/meta-types/hooks/useRatingField.ts | 6 +- .../meta-types/hooks/useRelationField.ts | 4 +- .../field/meta-types/hooks/useSelectField.ts | 6 +- .../field/meta-types/hooks/useTextField.ts | 7 +- .../field/meta-types/hooks/useUuidField.ts | 6 +- .../__stories__/BooleanFieldInput.stories.tsx | 4 +- .../field/states/entityFieldsFamilyState.ts | 8 - .../selectors/entityFieldsFamilySelector.ts | 17 -- .../isEntityFieldEmptyFamilySelector.ts | 4 +- .../useRecordTableContextMenuEntries.tsx | 23 +- .../hooks/useUpsertRecordFieldFromState.ts | 4 +- .../hooks/useUpsertRecordFromState.ts | 4 +- .../useUpdateCompanyBoardColumnsInternal.ts | 4 +- .../hooks/internal/useRecordBoardStates.ts | 23 +- .../record-board/hooks/useRecordBoard.ts | 4 +- .../components/RecordBoardCard.tsx | 226 ++++++++++++++++++ .../contexts/RecordBoardCardContext.ts | 8 + .../components/RecordBoardColumn.tsx | 14 +- .../RecordBoardColumnDropdownMenu.tsx | 2 +- .../components/RecordBoardColumnHeader.tsx | 2 +- .../contexts/RecordBoardColumnContext.ts | 0 ...ordBoardCardSelectedFamilyStateScopeMap.ts | 7 + ...cordBoardCompactModeActiveStateScopeMap.ts | 7 + ...ObjectMetadataSingularNameStateScopeMap.ts | 7 - ...ordBoardObjectSingularNameStateScopeMap.ts | 8 + ...rdVisibleFieldDefinitionsScopedSelector.ts | 13 + .../RecordIndexBoardContainerEffect.tsx | 6 +- .../RecordRelationFieldCardContent.tsx | 4 +- .../RecordRelationFieldCardSection.tsx | 8 +- .../components/RecordShowContainer.tsx | 4 +- .../components/RecordTableActionBar.tsx | 4 +- .../components/RecordTableHeader.tsx | 7 +- .../components/RecordTableHeaderCell.tsx | 8 +- .../RecordTableHeaderPlusButtonContent.tsx | 4 +- .../components/RecordTableRow.tsx | 4 +- .../components/SelectAllCheckbox.tsx | 6 +- .../components/RecordTableContextMenu.tsx | 4 +- .../hooks/internal/useRecordTableStates.ts | 12 +- .../hooks/internal/useSelectAllRows.ts | 6 +- .../hooks/internal/useSetRecordTableData.ts | 6 +- .../record-table/hooks/useRecordTable.ts | 14 +- .../record-table/hooks/useTableColumns.ts | 4 +- .../TableOptionsDropdownContent.tsx | 6 +- .../SettingsObjectFieldPreviewValueEffect.tsx | 10 +- .../recoil-scope/utils/getSelector.ts | 2 +- .../pages/object-record/RecordShowPage.tsx | 4 +- .../demo-objects-prefill-data/opportunity.ts | 8 + 64 files changed, 479 insertions(+), 192 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/field/states/entityFieldsFamilyState.ts delete mode 100644 packages/twenty-front/src/modules/object-record/field/states/selectors/entityFieldsFamilySelector.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/contexts/RecordBoardCardContext.ts rename packages/twenty-front/src/modules/object-record/record-board/{ => record-board-column}/contexts/RecordBoardColumnContext.ts (100%) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts delete mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index f15603815..02b7861b7 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -13,7 +13,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = ( ) => { const openCreateActivityDrawer = useOpenCreateActivityDrawer(); - const { selectedRowIdsSelector } = useRecordTableStates(recordTableId); + const { getSelectedRowIdsSelector } = useRecordTableStates(recordTableId); return useRecoilCallback( ({ snapshot }) => @@ -24,7 +24,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = ( ) => { const selectedRowIds = getSnapshotValue( snapshot, - selectedRowIdsSelector, + getSelectedRowIdsSelector(), ); let activityTargetableEntityArray: ActivityTargetableObject[] = @@ -44,6 +44,6 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = ( targetableObjects: activityTargetableEntityArray, }); }, - [openCreateActivityDrawer, selectedRowIdsSelector], + [openCreateActivityDrawer, getSelectedRowIdsSelector], ); }; diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx index 86eec25df..093323ef6 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx +++ b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx @@ -1,12 +1,12 @@ import React from 'react'; import styled from '@emotion/styled'; -import { useRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { ActivityEditor } from '@/activities/components/ActivityEditor'; import { Activity } from '@/activities/types/Activity'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; const StyledContainer = styled.div` box-sizing: border-box; @@ -29,9 +29,7 @@ export const RightDrawerActivity = ({ showComment = true, autoFillTitle = false, }: RightDrawerActivityProps) => { - const [, setEntityFields] = useRecoilState( - entityFieldsFamilyState(activityId), - ); + const setEntityFields = useSetRecoilState(recordStoreFamilyState(activityId)); const { record: activity } = useFindOneRecord({ objectNameSingular: CoreObjectNameSingular.Activity, diff --git a/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/useIsFieldEmpty.test.tsx b/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/useIsFieldEmpty.test.tsx index 92e6c0bc8..033505424 100644 --- a/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/useIsFieldEmpty.test.tsx +++ b/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/useIsFieldEmpty.test.tsx @@ -5,7 +5,7 @@ import { RecoilRoot, useSetRecoilState } from 'recoil'; import { phoneFieldDefinition } from '@/object-record/field/__mocks__/fieldDefinitions'; import { FieldContext } from '@/object-record/field/contexts/FieldContext'; import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; const entityId = 'entityId'; @@ -27,7 +27,7 @@ describe('useIsFieldEmpty', () => { const { result } = renderHook( () => { const setFieldState = useSetRecoilState( - entityFieldsFamilyState(entityId), + recordStoreFamilyState(entityId), ); return { setFieldState, diff --git a/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/usePersistField.test.tsx b/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/usePersistField.test.tsx index d3483ec55..c627add01 100644 --- a/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/usePersistField.test.tsx +++ b/packages/twenty-front/src/modules/object-record/field/hooks/__tests__/usePersistField.test.tsx @@ -15,10 +15,10 @@ import { RecordUpdateHookParams, } from '@/object-record/field/contexts/FieldContext'; import { usePersistField } from '@/object-record/field/hooks/usePersistField'; -import { entityFieldsFamilySelector } from '@/object-record/field/states/selectors/entityFieldsFamilySelector'; import { FieldDefinition } from '@/object-record/field/types/FieldDefinition'; import { FieldMetadata } from '@/object-record/field/types/FieldMetadata'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; jest.mock('@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery', () => ({ useMapFieldMetadataToGraphQLQuery: () => () => '\n', @@ -113,7 +113,7 @@ describe('usePersistField', () => { const { result } = renderHook( () => { const entityFields = useRecoilValue( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), ); return { @@ -137,7 +137,7 @@ describe('usePersistField', () => { const { result } = renderHook( () => { const entityFields = useRecoilValue( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), ); return { diff --git a/packages/twenty-front/src/modules/object-record/field/hooks/useIsFieldEmpty.ts b/packages/twenty-front/src/modules/object-record/field/hooks/useIsFieldEmpty.ts index ff9f85437..975d9c5a9 100644 --- a/packages/twenty-front/src/modules/object-record/field/hooks/useIsFieldEmpty.ts +++ b/packages/twenty-front/src/modules/object-record/field/hooks/useIsFieldEmpty.ts @@ -1,21 +1,22 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; +import { isFieldValueEmpty } from '@/object-record/field/utils/isFieldValueEmpty'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../contexts/FieldContext'; -import { isEntityFieldEmptyFamilySelector } from '../states/selectors/isEntityFieldEmptyFamilySelector'; export const useIsFieldEmpty = () => { const { entityId, fieldDefinition } = useContext(FieldContext); - - const isFieldEmpty = useRecoilValue( - isEntityFieldEmptyFamilySelector({ - fieldDefinition: { - type: fieldDefinition.type, - }, + const fieldValue = useRecoilValue( + recordStoreFamilySelector({ fieldName: fieldDefinition.metadata.fieldName, - entityId, + recordId: entityId, }), ); - return isFieldEmpty; + return isFieldValueEmpty({ + fieldDefinition, + fieldValue, + }); }; diff --git a/packages/twenty-front/src/modules/object-record/field/hooks/usePersistField.ts b/packages/twenty-front/src/modules/object-record/field/hooks/usePersistField.ts index 627fa9172..e95447aed 100644 --- a/packages/twenty-front/src/modules/object-record/field/hooks/usePersistField.ts +++ b/packages/twenty-front/src/modules/object-record/field/hooks/usePersistField.ts @@ -5,9 +5,9 @@ import { isFieldFullName } from '@/object-record/field/types/guards/isFieldFullN import { isFieldFullNameValue } from '@/object-record/field/types/guards/isFieldFullNameValue'; import { isFieldSelect } from '@/object-record/field/types/guards/isFieldSelect'; import { isFieldSelectValue } from '@/object-record/field/types/guards/isFieldSelectValue'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldContext } from '../contexts/FieldContext'; -import { entityFieldsFamilySelector } from '../states/selectors/entityFieldsFamilySelector'; import { isFieldBoolean } from '../types/guards/isFieldBoolean'; import { isFieldBooleanValue } from '../types/guards/isFieldBooleanValue'; import { isFieldCurrency } from '../types/guards/isFieldCurrency'; @@ -86,7 +86,7 @@ export const usePersistField = () => { const fieldName = fieldDefinition.metadata.fieldName; set( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), valueToPersist, ); @@ -114,7 +114,7 @@ export const usePersistField = () => { ) { const fieldName = fieldDefinition.metadata.fieldName; set( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), valueToPersist, ); diff --git a/packages/twenty-front/src/modules/object-record/field/hooks/useToggleEditOnlyInput.ts b/packages/twenty-front/src/modules/object-record/field/hooks/useToggleEditOnlyInput.ts index 5e2ef8cd0..2446bf27c 100644 --- a/packages/twenty-front/src/modules/object-record/field/hooks/useToggleEditOnlyInput.ts +++ b/packages/twenty-front/src/modules/object-record/field/hooks/useToggleEditOnlyInput.ts @@ -1,8 +1,9 @@ import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../contexts/FieldContext'; -import { entityFieldsFamilySelector } from '../states/selectors/entityFieldsFamilySelector'; import { isFieldBoolean } from '../types/guards/isFieldBoolean'; export const useToggleEditOnlyInput = () => { @@ -22,11 +23,13 @@ export const useToggleEditOnlyInput = () => { if (fieldIsBoolean) { const fieldName = fieldDefinition.metadata.fieldName; const oldValue = snapshot - .getLoadable(entityFieldsFamilySelector({ entityId, fieldName })) - .valueOrThrow(); + .getLoadable( + recordStoreFamilySelector({ recordId: entityId, fieldName }), + ) + .getValue(); const valueToPersist = !oldValue; set( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), valueToPersist, ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx b/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx index 348c82b62..7ab2febf8 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx @@ -4,13 +4,13 @@ import { Meta, StoryObj } from '@storybook/react'; import { useSetRecoilState } from 'recoil'; import { ChipFieldDisplay } from '@/object-record/field/meta-types/display/components/ChipFieldDisplay'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { FieldContext } from '../../../../contexts/FieldContext'; const ChipFieldValueSetterEffect = () => { - const setEntityFields = useSetRecoilState(entityFieldsFamilyState('123')); + const setEntityFields = useSetRecoilState(recordStoreFamilyState('123')); useEffect(() => { setEntityFields({ diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useBooleanField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useBooleanField.ts index 4298dbc2a..984ff9f92 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useBooleanField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useBooleanField.ts @@ -1,8 +1,9 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldBoolean } from '../../types/guards/isFieldBoolean'; @@ -14,8 +15,8 @@ export const useBooleanField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useChipField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useChipField.ts index 3a9ecc402..c1a2d0359 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useChipField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useChipField.ts @@ -1,10 +1,10 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { isFieldFullName } from '@/object-record/field/types/guards/isFieldFullName'; import { isFieldNumber } from '@/object-record/field/types/guards/isFieldNumber'; import { isFieldText } from '@/object-record/field/types/guards/isFieldText'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { FieldContext } from '../../contexts/FieldContext'; @@ -18,7 +18,7 @@ export const useChipField = () => { ? fieldDefinition.metadata.objectMetadataNameSingular : undefined; - const record = useRecoilValue(entityFieldsFamilyState(entityId)); + const record = useRecoilValue(recordStoreFamilyState(entityId)); return { objectNameSingular, diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useCurrencyField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useCurrencyField.ts index 58b7260b0..6306c11d0 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useCurrencyField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useCurrencyField.ts @@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil'; import { CurrencyCode } from '@/object-record/field/types/CurrencyCode'; import { FieldInitialValue } from '@/object-record/field/types/FieldInitialValue'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { canBeCastAsIntegerOrNull } from '~/utils/cast-as-integer-or-null'; import { convertCurrencyMicrosToCurrency, @@ -12,7 +13,6 @@ import { import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { usePersistField } from '../../hooks/usePersistField'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { FieldCurrencyValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldCurrency } from '../../types/guards/isFieldCurrency'; @@ -50,8 +50,8 @@ export const useCurrencyField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useDateTimeField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useDateTimeField.ts index bbe23b5a2..936980a18 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useDateTimeField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useDateTimeField.ts @@ -1,8 +1,9 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldDateTime } from '../../types/guards/isFieldDateTime'; @@ -15,8 +16,8 @@ export const useDateTimeField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useEmailField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useEmailField.ts index b0b8793d9..8aa01aff7 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useEmailField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useEmailField.ts @@ -1,9 +1,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldEmail } from '../../types/guards/isFieldEmail'; @@ -15,8 +16,8 @@ export const useEmailField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useFullNameField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useFullNameField.ts index e54da17dc..958d5d8ca 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useFullNameField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useFullNameField.ts @@ -1,10 +1,11 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { usePersistField } from '../../hooks/usePersistField'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { FieldFullNameValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldFullName } from '../../types/guards/isFieldFullName'; @@ -18,8 +19,8 @@ export const useFullNameField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useLinkField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useLinkField.ts index 3cbc641fb..7bdddd35a 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useLinkField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useLinkField.ts @@ -1,10 +1,11 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { usePersistField } from '../../hooks/usePersistField'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { FieldLinkValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldLink } from '../../types/guards/isFieldLink'; @@ -18,8 +19,8 @@ export const useLinkField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useNumberField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useNumberField.ts index caff4eaae..2bb62d85e 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useNumberField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useNumberField.ts @@ -1,6 +1,7 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { canBeCastAsIntegerOrNull, castAsIntegerOrNull, @@ -9,7 +10,6 @@ import { import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { usePersistField } from '../../hooks/usePersistField'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldNumber } from '../../types/guards/isFieldNumber'; @@ -21,8 +21,8 @@ export const useNumberField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/usePhoneField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/usePhoneField.ts index ec227fb54..d8526b367 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/usePhoneField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/usePhoneField.ts @@ -2,10 +2,11 @@ import { useContext } from 'react'; import { isPossiblePhoneNumber } from 'libphonenumber-js'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { usePersistField } from '../../hooks/usePersistField'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldPhone } from '../../types/guards/isFieldPhone'; @@ -18,8 +19,8 @@ export const usePhoneField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRatingField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRatingField.ts index 81fdf46b8..48663546f 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRatingField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRatingField.ts @@ -1,10 +1,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldContext } from '../../contexts/FieldContext'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { FieldRatingValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldRating } from '../../types/guards/isFieldRating'; @@ -17,8 +17,8 @@ export const useRatingField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts index 9d22d9696..680602a40 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts @@ -2,10 +2,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldRelation } from '../../types/guards/isFieldRelation'; @@ -18,7 +18,7 @@ export const useRelationField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ entityId, fieldName }), + recordStoreFamilySelector({ recordId: entityId, fieldName }), ); const fieldInitialValue = useFieldInitialValue(); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useSelectField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useSelectField.ts index 55de15c58..aa93d7336 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useSelectField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useSelectField.ts @@ -2,11 +2,11 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/field/hooks/usePersistField'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated/graphql'; import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { FieldSelectValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldSelect } from '../../types/guards/isFieldSelect'; @@ -20,8 +20,8 @@ export const useSelectField = () => { const { fieldName } = fieldDefinition.metadata; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useTextField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useTextField.ts index 8926cf0c5..c560baa5e 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useTextField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useTextField.ts @@ -1,9 +1,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldText } from '../../types/guards/isFieldText'; import { isFieldTextValue } from '../../types/guards/isFieldTextValue'; @@ -17,8 +18,8 @@ export const useTextField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useUuidField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useUuidField.ts index 43b740e52..d20963cc2 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useUuidField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useUuidField.ts @@ -2,10 +2,10 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; import { isFieldUuid } from '@/object-record/field/types/guards/isFieldUuid'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; -import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldTextValue } from '../../types/guards/isFieldTextValue'; @@ -17,8 +17,8 @@ export const useUuidField = () => { const fieldName = fieldDefinition.metadata.fieldName; const [fieldValue, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId: entityId, + recordStoreFamilySelector({ + recordId: entityId, fieldName: fieldName, }), ); diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx index 18120f187..7e556614b 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; import { useSetRecoilState } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'; import { @@ -18,7 +18,7 @@ const BooleanFieldValueSetterEffect = ({ value: boolean; entityId: string; }) => { - const setField = useSetRecoilState(entityFieldsFamilyState(entityId)); + const setField = useSetRecoilState(recordStoreFamilyState(entityId)); useEffect(() => { setField({ id: entityId, Boolean: value }); diff --git a/packages/twenty-front/src/modules/object-record/field/states/entityFieldsFamilyState.ts b/packages/twenty-front/src/modules/object-record/field/states/entityFieldsFamilyState.ts deleted file mode 100644 index c4dc4a6b8..000000000 --- a/packages/twenty-front/src/modules/object-record/field/states/entityFieldsFamilyState.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { ObjectRecord } from '@/object-record/types/ObjectRecord'; - -export const entityFieldsFamilyState = atomFamily({ - key: 'entityFieldsFamilyState', - default: null, -}); diff --git a/packages/twenty-front/src/modules/object-record/field/states/selectors/entityFieldsFamilySelector.ts b/packages/twenty-front/src/modules/object-record/field/states/selectors/entityFieldsFamilySelector.ts deleted file mode 100644 index 03b2c3e8c..000000000 --- a/packages/twenty-front/src/modules/object-record/field/states/selectors/entityFieldsFamilySelector.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { selectorFamily } from 'recoil'; - -import { entityFieldsFamilyState } from '../entityFieldsFamilyState'; - -export const entityFieldsFamilySelector = selectorFamily({ - key: 'entityFieldsFamilySelector', - get: - ({ fieldName, entityId }: { fieldName: string; entityId: string }) => - ({ get }) => - get(entityFieldsFamilyState(entityId))?.[fieldName] as T, - set: - ({ fieldName, entityId }: { fieldName: string; entityId: string }) => - ({ set }, newValue: T) => - set(entityFieldsFamilyState(entityId), (prevState) => - prevState ? { ...prevState, [fieldName]: newValue } : null, - ), -}); diff --git a/packages/twenty-front/src/modules/object-record/field/states/selectors/isEntityFieldEmptyFamilySelector.ts b/packages/twenty-front/src/modules/object-record/field/states/selectors/isEntityFieldEmptyFamilySelector.ts index b075a8438..2e5f3ad00 100644 --- a/packages/twenty-front/src/modules/object-record/field/states/selectors/isEntityFieldEmptyFamilySelector.ts +++ b/packages/twenty-front/src/modules/object-record/field/states/selectors/isEntityFieldEmptyFamilySelector.ts @@ -1,7 +1,7 @@ import { selectorFamily } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { isFieldValueEmpty } from '@/object-record/field/utils/isFieldValueEmpty'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { FieldDefinition } from '../../types/FieldDefinition'; import { FieldMetadata } from '../../types/FieldMetadata'; @@ -18,7 +18,7 @@ export const isEntityFieldEmptyFamilySelector = selectorFamily({ entityId: string; }) => { return ({ get }) => { - const fieldValue = get(entityFieldsFamilyState(entityId))?.[fieldName]; + const fieldValue = get(recordStoreFamilyState(entityId))?.[fieldName]; return isFieldValueEmpty({ fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx index 4ae15e6ed..dd5e6417f 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx @@ -5,9 +5,9 @@ import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords'; import { useExecuteQuickActionOnOneRecord } from '@/object-record/hooks/useExecuteQuickActionOnOneRecord'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { @@ -38,9 +38,11 @@ export const useRecordTableContextMenuEntries = ( const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState); - const { selectedRowIdsSelector } = useRecordTableStates(props?.recordTableId); + const { getSelectedRowIdsSelector } = useRecordTableStates( + props?.recordTableId, + ); - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const selectedRowIds = useRecoilValue(getSelectedRowIdsSelector()); const { resetTableRowSelection } = useRecordTable({ recordTableId: props?.recordTableId, @@ -53,12 +55,15 @@ export const useRecordTableContextMenuEntries = ( const { createFavorite, favorites, deleteFavorite } = useFavorites(); const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => { - const selectedRowIds = getSnapshotValue(snapshot, selectedRowIdsSelector); + const selectedRowIds = getSnapshotValue( + snapshot, + getSelectedRowIdsSelector(), + ); const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : ''; const selectedRecord = snapshot - .getLoadable(entityFieldsFamilyState(selectedRowId)) + .getLoadable(recordStoreFamilyState(selectedRowId)) .getValue(); const foundFavorite = favorites?.find( @@ -89,13 +94,13 @@ export const useRecordTableContextMenuEntries = ( async () => { const rowIdsToDelete = getSnapshotValue( snapshot, - selectedRowIdsSelector, + getSelectedRowIdsSelector(), ); resetTableRowSelection(); await deleteManyRecords(rowIdsToDelete); }, - [deleteManyRecords, resetTableRowSelection, selectedRowIdsSelector], + [deleteManyRecords, resetTableRowSelection, getSelectedRowIdsSelector], ); const handleExecuteQuickActionOnClick = useRecoilCallback( @@ -103,7 +108,7 @@ export const useRecordTableContextMenuEntries = ( async () => { const rowIdsToExecuteQuickActionOn = getSnapshotValue( snapshot, - selectedRowIdsSelector, + getSelectedRowIdsSelector(), ); resetTableRowSelection(); @@ -116,7 +121,7 @@ export const useRecordTableContextMenuEntries = ( [ executeQuickActionOnOneRecord, resetTableRowSelection, - selectedRowIdsSelector, + getSelectedRowIdsSelector, ], ); diff --git a/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFieldFromState.ts b/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFieldFromState.ts index eb460d0ea..b89bb5e3b 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFieldFromState.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFieldFromState.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { entityFieldsFamilySelector } from '@/object-record/field/states/selectors/entityFieldsFamilySelector'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; export const useUpsertRecordFieldFromState = () => @@ -14,7 +14,7 @@ export const useUpsertRecordFieldFromState = () => fieldName: F extends string ? F : never; }) => set( - entityFieldsFamilySelector({ entityId: record.id, fieldName }), + recordStoreFamilySelector({ recordId: record.id, fieldName }), (previousField) => isDeeplyEqual(previousField, record[fieldName]) ? previousField diff --git a/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFromState.ts b/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFromState.ts index 38aee3205..a65610a7d 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFromState.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFromState.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; // TODO: refactor with scoped state later @@ -8,7 +8,7 @@ export const useUpsertRecordFromState = () => useRecoilCallback( ({ set }) => (record: T) => - set(entityFieldsFamilyState(record.id), (previousRecord) => + set(recordStoreFamilyState(record.id), (previousRecord) => isDeeplyEqual(previousRecord, record) ? previousRecord : record, ), [], diff --git a/packages/twenty-front/src/modules/object-record/record-board-deprecated/hooks/internal/useUpdateCompanyBoardColumnsInternal.ts b/packages/twenty-front/src/modules/object-record/record-board-deprecated/hooks/internal/useUpdateCompanyBoardColumnsInternal.ts index 88b242299..162bb4123 100644 --- a/packages/twenty-front/src/modules/object-record/record-board-deprecated/hooks/internal/useUpdateCompanyBoardColumnsInternal.ts +++ b/packages/twenty-front/src/modules/object-record/record-board-deprecated/hooks/internal/useUpdateCompanyBoardColumnsInternal.ts @@ -1,9 +1,9 @@ import { useRecoilCallback } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useRecordBoardDeprecatedScopedStates } from '@/object-record/record-board-deprecated/hooks/internal/useRecordBoardDeprecatedScopedStates'; import { recordBoardCardIdsByColumnIdFamilyState } from '@/object-record/record-board-deprecated/states/recordBoardCardIdsByColumnIdFamilyState'; import { BoardColumnDefinition } from '@/object-record/record-board-deprecated/types/BoardColumnDefinition'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { currentPipelineStepsState } from '@/pipeline/states/currentPipelineStepsState'; import { Opportunity } from '@/pipeline/types/Opportunity'; import { PipelineStep } from '@/pipeline/types/PipelineStep'; @@ -72,7 +72,7 @@ export const useUpdateCompanyBoardColumnsInternal = () => { if (!isDeeplyEqual(currentCompanyProgress, companyProgress)) { set(companyProgressesFamilyState(id), companyProgress); - set(entityFieldsFamilyState(id), companyProgress.opportunity); + set(recordStoreFamilyState(id), companyProgress.opportunity); } } diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts index 92848e5e7..7e53b5ab0 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts @@ -1,16 +1,20 @@ import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext'; import { isFirstRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap'; import { isLastRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap'; +import { isRecordBoardCardSelectedFamilyStateScopeMap } from '@/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap'; +import { isRecordBoardCompactModeActiveStateScopeMap } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap'; import { recordBoardColumnIdsStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnIdsStateScopeMap'; import { recordBoardFieldDefinitionsStateScopeMap } from '@/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap'; import { recordBoardFiltersStateScopeMap } from '@/object-record/record-board/states/recordBoardFiltersStateScopeMap'; -import { recordBoardObjectMetadataSingularNameStateScopeMap } from '@/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap'; +import { recordBoardObjectSingularNameStateScopeMap } from '@/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap'; import { recordBoardRecordIdsByColumnIdFamilyStateScopeMap } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap'; import { recordBoardSortsStateScopeMap } from '@/object-record/record-board/states/recordBoardSortsStateScopeMap'; import { recordBoardColumnsFamilySelectorScopeMap } from '@/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap'; +import { recordBoardVisibleFieldDefinitionsScopedSelector } from '@/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState'; import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; +import { getSelector } from '@/ui/utilities/recoil-scope/utils/getSelector'; import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; export const useRecordBoardStates = (recordBoardId?: string) => { @@ -21,8 +25,8 @@ export const useRecordBoardStates = (recordBoardId?: string) => { return { scopeId, - getObjectMetadataSingularNameState: getState( - recordBoardObjectMetadataSingularNameStateScopeMap, + getObjectSingularNameState: getState( + recordBoardObjectSingularNameStateScopeMap, scopeId, ), getColumnIdsState: getState(recordBoardColumnIdsStateScopeMap, scopeId), @@ -45,10 +49,23 @@ export const useRecordBoardStates = (recordBoardId?: string) => { recordBoardFieldDefinitionsStateScopeMap, scopeId, ), + getVisibleFieldDefinitionsState: getSelector( + recordBoardVisibleFieldDefinitionsScopedSelector, + scopeId, + ), recordBoardRecordIdsByColumnIdFamilyState: getFamilyState( recordBoardRecordIdsByColumnIdFamilyStateScopeMap, scopeId, ), + isRecordBoardCardSelectedFamilyState: getFamilyState( + isRecordBoardCardSelectedFamilyStateScopeMap, + scopeId, + ), + + getIsCompactModeActiveState: getState( + isRecordBoardCompactModeActiveStateScopeMap, + scopeId, + ), }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts index d6ea6530d..59f11807c 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts @@ -5,17 +5,19 @@ import { useSetRecordBoardColumns } from '@/object-record/record-board/hooks/int import { useSetRecordBoardRecordIds } from '@/object-record/record-board/hooks/internal/useSetRecordBoardRecordIds'; export const useRecordBoard = (recordBoardId?: string) => { - const { scopeId, getFieldDefinitionsState } = + const { scopeId, getFieldDefinitionsState, getObjectSingularNameState } = useRecordBoardStates(recordBoardId); const { setColumns } = useSetRecordBoardColumns(recordBoardId); const { setRecordIds } = useSetRecordBoardRecordIds(recordBoardId); const setFieldDefinitions = useSetRecoilState(getFieldDefinitionsState()); + const setObjectSingularName = useSetRecoilState(getObjectSingularNameState()); return { scopeId, setColumns, setRecordIds, setFieldDefinitions, + setObjectSingularName, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx new file mode 100644 index 000000000..c0edfd533 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -0,0 +1,226 @@ +import { ReactNode, useContext, useState } from 'react'; +import styled from '@emotion/styled'; +import { useRecoilState, useRecoilValue } from 'recoil'; + +import { RecordChip } from '@/object-record/components/RecordChip'; +import { FieldContext } from '@/object-record/field/contexts/FieldContext'; +import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates'; +import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; +import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; +import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { IconEye } from '@/ui/display/icon/index'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; +import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut'; + +const StyledBoardCard = styled.div<{ selected: boolean }>` + background-color: ${({ theme, selected }) => + selected ? theme.accent.quaternary : theme.background.secondary}; + border: 1px solid + ${({ theme, selected }) => + selected ? theme.accent.secondary : theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + color: ${({ theme }) => theme.font.color.primary}; + &:hover { + background-color: ${({ theme, selected }) => + selected && theme.accent.tertiary}; + border: 1px solid + ${({ theme, selected }) => + selected ? theme.accent.primary : theme.border.color.medium}; + } + cursor: pointer; + + .checkbox-container { + transition: all ease-in-out 160ms; + opacity: ${({ selected }) => (selected ? 1 : 0)}; + } + + &:hover .checkbox-container { + opacity: 1; + } + + .compact-icon-container { + transition: all ease-in-out 160ms; + opacity: 0; + } + &:hover .compact-icon-container { + opacity: 1; + } +`; + +const StyledBoardCardWrapper = styled.div` + padding-bottom: ${({ theme }) => theme.spacing(2)}; + width: 100%; +`; + +const StyledBoardCardHeader = styled.div<{ + showCompactView: boolean; +}>` + align-items: center; + display: flex; + flex-direction: row; + font-weight: ${({ theme }) => theme.font.weight.medium}; + height: 24px; + padding-bottom: ${({ theme, showCompactView }) => + theme.spacing(showCompactView ? 0 : 1)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(2)}; + transition: padding ease-in-out 160ms; + + img { + height: ${({ theme }) => theme.icon.size.md}px; + margin-right: ${({ theme }) => theme.spacing(2)}; + object-fit: cover; + width: ${({ theme }) => theme.icon.size.md}px; + } +`; + +const StyledBoardCardBody = styled.div` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(0.5)}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(2.5)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + span { + align-items: center; + display: flex; + flex-direction: row; + svg { + color: ${({ theme }) => theme.font.color.tertiary}; + margin-right: ${({ theme }) => theme.spacing(2)}; + } + } +`; + +const StyledCheckboxContainer = styled.div` + display: flex; + flex: 1; + justify-content: end; +`; + +const StyledFieldContainer = styled.div` + display: flex; + flex-direction: row; + width: 100%; +`; + +const StyledCompactIconContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; +`; + +export const RecordBoardCard = () => { + const { recordId } = useContext(RecordBoardCardContext); + + const { + getObjectSingularNameState, + getIsCompactModeActiveState, + isRecordBoardCardSelectedFamilyState, + getVisibleFieldDefinitionsState, + } = useRecordBoardStates(); + + const isCompactModeActive = useRecoilValue(getIsCompactModeActiveState()); + const objectNameSingular = useRecoilValue(getObjectSingularNameState()); + const [isCardInCompactMode, setIsCardInCompactMode] = + useState(isCompactModeActive); + + const [isCurrentCardSelected, setIsCurrentCardSelected] = useRecoilState( + isRecordBoardCardSelectedFamilyState(recordId), + ); + + const visibleBoardCardFieldDefinitions = useRecoilValue( + getVisibleFieldDefinitionsState(), + ); + + const record = useRecoilValue(recordStoreFamilyState(recordId)); + + const PreventSelectOnClickContainer = ({ + children, + }: { + children: ReactNode; + }) => ( + { + e.stopPropagation(); + }} + > + {children} + + ); + + const onMouseLeaveBoard = () => { + if (isCompactModeActive) { + setIsCardInCompactMode(true); + } + }; + + if (!objectNameSingular || !record) { + return null; + } + + return ( + + setIsCurrentCardSelected(!isCurrentCardSelected)} + > + + + {isCompactModeActive && ( + + { + e.stopPropagation(); + setIsCardInCompactMode(false); + }} + /> + + )} + + setIsCurrentCardSelected(!isCurrentCardSelected)} + variant={CheckboxVariant.Secondary} + /> + + + + + {visibleBoardCardFieldDefinitions.map((fieldDefinition) => ( + + + + + + ))} + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/contexts/RecordBoardCardContext.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/contexts/RecordBoardCardContext.ts new file mode 100644 index 000000000..407d76a45 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/contexts/RecordBoardCardContext.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react'; + +type RecordBoardCardContextProps = { + recordId: string; +}; + +export const RecordBoardCardContext = + createContext({} as RecordBoardCardContextProps); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx index c1c7bb34a..20f84ece1 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx @@ -2,11 +2,12 @@ import styled from '@emotion/styled'; import { Droppable } from '@hello-pangea/dnd'; import { useRecoilValue } from 'recoil'; -import { RecordBoardColumnContext } from '@/object-record/record-board/contexts/RecordBoardColumnContext'; import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates'; +import { RecordBoardCard } from '@/object-record/record-board/record-board-card/components/RecordBoardCard'; +import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; import { RecordBoardColumnCardsContainer } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer'; import { RecordBoardColumnHeader } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeader'; -import { BoardCardIdContext } from '@/object-record/record-board-deprecated/contexts/BoardCardIdContext'; +import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; const StyledColumn = styled.div<{ isFirstColumn: boolean }>` background-color: ${({ theme }) => theme.background.primary}; @@ -71,9 +72,12 @@ export const RecordBoardColumn = ({ droppableProvided={droppableProvided} > {recordIds.map((recordId) => ( - -
Card
- + + + ))} diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx index e6bd40310..0b2750fd9 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx @@ -2,7 +2,7 @@ import { useCallback, useContext, useRef } from 'react'; import styled from '@emotion/styled'; import { MenuItem } from 'tsup.ui.index'; -import { RecordBoardColumnContext } from '@/object-record/record-board/contexts/RecordBoardColumnContext'; +import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx index da1d5999e..76a6d0e10 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx @@ -1,8 +1,8 @@ import React, { useContext, useState } from 'react'; import styled from '@emotion/styled'; -import { RecordBoardColumnContext } from '@/object-record/record-board/contexts/RecordBoardColumnContext'; import { RecordBoardColumnDropdownMenu } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu'; +import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { BoardColumnHotkeyScope } from '@/object-record/record-board-deprecated/types/BoardColumnHotkeyScope'; import { IconDotsVertical } from '@/ui/display/icon'; import { Tag } from '@/ui/display/tag/components/Tag'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/contexts/RecordBoardColumnContext.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext.ts similarity index 100% rename from packages/twenty-front/src/modules/object-record/record-board/contexts/RecordBoardColumnContext.ts rename to packages/twenty-front/src/modules/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext.ts diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts new file mode 100644 index 000000000..825e46ed3 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts @@ -0,0 +1,7 @@ +import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; + +export const isRecordBoardCardSelectedFamilyStateScopeMap = + createFamilyStateScopeMap({ + key: 'isRecordBoardCardSelectedFamilyStateScopeMap', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts new file mode 100644 index 000000000..0ad51b9a9 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts @@ -0,0 +1,7 @@ +import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; + +export const isRecordBoardCompactModeActiveStateScopeMap = + createStateScopeMap({ + key: 'isRecordBoardCompactModeActiveStateScopeMap', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap.ts deleted file mode 100644 index 915561d6e..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordBoardObjectMetadataSingularNameStateScopeMap = - createStateScopeMap({ - key: 'recordBoardObjectMetadataSingularNameStateScopeMap', - defaultValue: undefined, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts new file mode 100644 index 000000000..fd35c826a --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts @@ -0,0 +1,8 @@ +import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; + +export const recordBoardObjectSingularNameStateScopeMap = createStateScopeMap< + string | undefined +>({ + key: 'recordBoardObjectSingularNameStateScopeMap', + defaultValue: undefined, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts new file mode 100644 index 000000000..fbcbeba7d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts @@ -0,0 +1,13 @@ +import { recordBoardFieldDefinitionsStateScopeMap } from '@/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap'; +import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap'; + +export const recordBoardVisibleFieldDefinitionsScopedSelector = + createSelectorScopeMap({ + key: 'recordBoardVisibleFieldDefinitionsScopedSelector', + get: + ({ scopeId }) => + ({ get }) => + get(recordBoardFieldDefinitionsStateScopeMap({ scopeId })) + .filter((field) => field.isVisible) + .sort((a, b) => a.position - b.position), + }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx index 9a7486db6..ce57e0a23 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx @@ -28,7 +28,11 @@ export const RecordIndexBoardContainerEffect = ({ navigate(`/settings/objects/${objectMetadataItem.namePlural}`); }, [navigate, objectMetadataItem.namePlural]); - const { setColumns } = useRecordBoard(recordBoardId); + const { setColumns, setObjectSingularName } = useRecordBoard(recordBoardId); + + useEffect(() => { + setObjectSingularName(objectNameSingular); + }, [objectNameSingular, setObjectSingularName]); useEffect(() => { setColumns( diff --git a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardContent.tsx b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardContent.tsx index eae224e18..34f034f07 100644 --- a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardContent.tsx @@ -10,10 +10,10 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { FieldDisplay } from '@/object-record/field/components/FieldDisplay'; import { FieldContext } from '@/object-record/field/contexts/FieldContext'; import { usePersistField } from '@/object-record/field/hooks/usePersistField'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata'; import { useFieldContext } from '@/object-record/hooks/useFieldContext'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { IconDotsVertical, IconUnlink } from '@/ui/display/icon'; import { CardContent } from '@/ui/layout/card/components/CardContent'; @@ -100,7 +100,7 @@ export const RecordRelationFieldCardContent = ({ // TODO: temporary as ChipDisplay expect to find the entity in the entityFieldsFamilyState const setRelationEntityFields = useSetRecoilState( - entityFieldsFamilyState(relationRecord.id), + recordStoreFamilyState(relationRecord.id), ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx index 4376f850a..025d56b78 100644 --- a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx @@ -10,12 +10,12 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType'; import { FieldContext } from '@/object-record/field/contexts/FieldContext'; import { usePersistField } from '@/object-record/field/hooks/usePersistField'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; -import { entityFieldsFamilySelector } from '@/object-record/field/states/selectors/entityFieldsFamilySelector'; import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata'; import { useModifyRecordFromCache } from '@/object-record/hooks/useModifyRecordFromCache'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { RecordRelationFieldCardContent } from '@/object-record/record-relation-card/components/RecordRelationFieldCardContent'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { SingleEntitySelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch'; import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker'; import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope'; @@ -91,7 +91,7 @@ export const RecordRelationFieldCardSection = () => { relationType, objectMetadataNameSingular, } = fieldDefinition.metadata as FieldRelationMetadata; - const record = useRecoilValue(entityFieldsFamilyState(entityId)); + const record = useRecoilValue(recordStoreFamilyState(entityId)); const { labelIdentifierFieldMetadata: relationLabelIdentifierFieldMetadata, @@ -110,7 +110,7 @@ export const RecordRelationFieldCardSection = () => { const fieldValue = useRecoilValue< ({ id: string } & Record) | null - >(entityFieldsFamilySelector({ entityId, fieldName })); + >(recordStoreFamilySelector({ recordId: entityId, fieldName })); const isToOneObject = relationType === 'TO_ONE_OBJECT'; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index ce5d0f6b7..4703f9604 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -10,13 +10,13 @@ import { RecordUpdateHook, RecordUpdateHookParams, } from '@/object-record/field/contexts/FieldContext'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; import { RecordRelationFieldCardSection } from '@/object-record/record-relation-card/components/RecordRelationFieldCardSection'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { isFieldMetadataItemAvailable } from '@/object-record/utils/isFieldMetadataItemAvailable'; import { ShowPageContainer } from '@/ui/layout/page/ShowPageContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; @@ -48,7 +48,7 @@ export const RecordShowContainer = ({ }); const setEntityFields = useSetRecoilState( - entityFieldsFamilyState(objectRecordId ?? ''), + recordStoreFamilyState(objectRecordId), ); const { record, loading } = useFindOneRecord({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx b/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx index eb203fad6..a7f87bb6f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx @@ -8,9 +8,9 @@ export const RecordTableActionBar = ({ }: { recordTableId: string; }) => { - const { selectedRowIdsSelector } = useRecordTableStates(recordTableId); + const { getSelectedRowIdsSelector } = useRecordTableStates(recordTableId); - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const selectedRowIds = useRecoilValue(getSelectedRowIdsSelector()); return ; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx index cd15893c2..6cde82074 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx @@ -56,17 +56,16 @@ export const RecordTableHeader = ({ }: { createRecord: () => void; }) => { - const { hiddenTableColumnsSelector, visibleTableColumnsSelector } = + const { getHiddenTableColumnsSelector, getVisibleTableColumnsSelector } = useRecordTableStates(); - const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); - const scrollWrapper = useScrollWrapperScopedRef(); const isTableWiderThanScreen = (scrollWrapper.current?.clientWidth ?? 0) < (scrollWrapper.current?.scrollWidth ?? 0); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); + const hiddenTableColumns = useRecoilValue(getHiddenTableColumnsSelector()); const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx index 4f3a18ddd..08ccfbb85 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx @@ -83,8 +83,8 @@ export const RecordTableHeaderCell = ({ const { getResizeFieldOffsetState, getTableColumnsState, - tableColumnsByKeySelector, - visibleTableColumnsSelector, + getTableColumnsByKeySelector, + getVisibleTableColumnsSelector, } = useRecordTableStates(); const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( @@ -92,8 +92,8 @@ export const RecordTableHeaderCell = ({ ); const tableColumns = useRecoilValue(getTableColumnsState()); - const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); + const tableColumnsByKey = useRecoilValue(getTableColumnsByKeySelector()); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); const [initialPointerPositionX, setInitialPointerPositionX] = useState< number | null diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx index f8f56c418..0bec78be9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx @@ -18,9 +18,9 @@ import { ColumnDefinition } from '../types/ColumnDefinition'; export const RecordTableHeaderPlusButtonContent = () => { const { closeDropdown } = useDropdown(); - const { hiddenTableColumnsSelector } = useRecordTableStates(); + const { getHiddenTableColumnsSelector } = useRecordTableStates(); - const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); + const hiddenTableColumns = useRecoilValue(getHiddenTableColumnsSelector()); const { getIcon } = useIcons(); const { handleColumnVisibilityChange } = useTableColumns(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 0cc051c94..8bfe4873d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -26,9 +26,9 @@ const StyledPlaceholder = styled.td` `; export const RecordTableRow = ({ rowId }: RecordTableRowProps) => { - const { visibleTableColumnsSelector } = useRecordTableStates(); + const { getVisibleTableColumnsSelector } = useRecordTableStates(); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); const { currentRowSelected } = useCurrentRowSelected(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx index 68a5ab10f..7d65db391 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx @@ -16,9 +16,11 @@ const StyledContainer = styled.div` `; export const SelectAllCheckbox = () => { - const { allRowsSelectedStatusSelector } = useRecordTableStates(); + const { getAllRowsSelectedStatusSelector } = useRecordTableStates(); - const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector); + const allRowsSelectedStatus = useRecoilValue( + getAllRowsSelectedStatusSelector(), + ); const { selectAllRows } = useRecordTable(); const checked = allRowsSelectedStatus === 'all'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx index 0a4a5179a..9ab570b8e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx @@ -8,9 +8,9 @@ export const RecordTableContextMenu = ({ }: { recordTableId: string; }) => { - const { selectedRowIdsSelector } = useRecordTableStates(recordTableId); + const { getSelectedRowIdsSelector } = useRecordTableStates(recordTableId); - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const selectedRowIds = useRecoilValue(getSelectedRowIdsSelector()); return ; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts index 5067ab540..684099b4b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts @@ -94,27 +94,27 @@ export const useRecordTableStates = (recordTableId?: string) => { isRowSelectedFamilyStateScopeMap, scopeId, ), - allRowsSelectedStatusSelector: getSelector( + getAllRowsSelectedStatusSelector: getSelector( allRowsSelectedStatusSelectorScopeMap, scopeId, ), - hiddenTableColumnsSelector: getSelector( + getHiddenTableColumnsSelector: getSelector( hiddenTableColumnsSelectorScopeMap, scopeId, ), - numberOfTableColumnsSelector: getSelector( + getNumberOfTableColumnsSelector: getSelector( numberOfTableColumnsSelectorScopeMap, scopeId, ), - selectedRowIdsSelector: getSelector( + getSelectedRowIdsSelector: getSelector( selectedRowIdsSelectorScopeMap, scopeId, ), - tableColumnsByKeySelector: getSelector( + getTableColumnsByKeySelector: getSelector( tableColumnsByKeySelectorScopeMap, scopeId, ), - visibleTableColumnsSelector: getSelector( + getVisibleTableColumnsSelector: getSelector( visibleTableColumnsSelectorScopeMap, scopeId, ), diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts index bc0793421..1a7e563c1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts @@ -5,7 +5,7 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV export const useSelectAllRows = (recordTableId?: string) => { const { - allRowsSelectedStatusSelector, + getAllRowsSelectedStatusSelector, getTableRowIdsState, isRowSelectedFamilyState, } = useRecordTableStates(recordTableId); @@ -15,7 +15,7 @@ export const useSelectAllRows = (recordTableId?: string) => { () => { const allRowsSelectedStatus = getSnapshotValue( snapshot, - allRowsSelectedStatusSelector, + getAllRowsSelectedStatusSelector(), ); const tableRowIds = getSnapshotValue(snapshot, getTableRowIdsState()); @@ -34,7 +34,7 @@ export const useSelectAllRows = (recordTableId?: string) => { } }, [ - allRowsSelectedStatusSelector, + getAllRowsSelectedStatusSelector, getTableRowIdsState, isRowSelectedFamilyState, ], diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index dbf439e58..007699bf4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; @@ -23,11 +23,11 @@ export const useSetRecordTableData = ({ for (const entity of newEntityArray) { // TODO: refactor with scoped state later const currentEntity = snapshot - .getLoadable(entityFieldsFamilyState(entity.id)) + .getLoadable(recordStoreFamilyState(entity.id)) .valueOrThrow(); if (JSON.stringify(currentEntity) !== JSON.stringify(entity)) { - set(entityFieldsFamilyState(entity.id), entity); + set(recordStoreFamilyState(entity.id), entity); } } const currentRowIds = getSnapshotValue(snapshot, getTableRowIdsState()); diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts index b39bdfaf3..381b97258 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts @@ -40,8 +40,8 @@ export const useRecordTable = (props?: useRecordTableProps) => { getOnColumnsChangeState, getIsRecordTableInitialLoadingState, getTableLastRowVisibleState, - numberOfTableColumnsSelector, - selectedRowIdsSelector, + getNumberOfTableColumnsSelector, + getSelectedRowIdsSelector, } = useRecordTableStates(recordTableId); const setAvailableTableColumns = useSetRecoilState( @@ -176,7 +176,7 @@ export const useRecordTable = (props?: useRecordTableProps) => { const numberOfTableColumns = getSnapshotValue( snapshot, - numberOfTableColumnsSelector, + getNumberOfTableColumnsSelector(), ); const numberOfTableRows = getSnapshotValue( @@ -215,7 +215,7 @@ export const useRecordTable = (props?: useRecordTableProps) => { }, [ getSoftFocusPositionState, - numberOfTableColumnsSelector, + getNumberOfTableColumnsSelector, getNumberOfTableRowsState, setSoftFocusPosition, ], @@ -231,7 +231,7 @@ export const useRecordTable = (props?: useRecordTableProps) => { const numberOfTableColumns = getSnapshotValue( snapshot, - numberOfTableColumnsSelector, + getNumberOfTableColumnsSelector(), ); const currentColumnNumber = softFocusPosition.column; @@ -262,8 +262,8 @@ export const useRecordTable = (props?: useRecordTableProps) => { } }, [ + getNumberOfTableColumnsSelector, getSoftFocusPositionState, - numberOfTableColumnsSelector, setSoftFocusPosition, ], ); @@ -352,6 +352,6 @@ export const useRecordTable = (props?: useRecordTableProps) => { setRecordTableLastRowVisible, setSoftFocusPosition, isSomeCellInEditModeState, - selectedRowIdsSelector, + getSelectedRowIdsSelector, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts index 05911bf4d..0fa267ba6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts @@ -20,13 +20,13 @@ export const useTableColumns = (props?: useRecordTableProps) => { const { getAvailableTableColumnsState, getTableColumnsState, - visibleTableColumnsSelector, + getVisibleTableColumnsSelector, } = useRecordTableStates(props?.recordTableId); const availableTableColumns = useRecoilValue(getAvailableTableColumnsState()); const tableColumns = useRecoilValue(getTableColumnsState()); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); const { handleColumnMove } = useMoveViewColumns(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx index c22f6dff6..94bb6eb15 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx @@ -42,11 +42,11 @@ export const TableOptionsDropdownContent = ({ const viewEditInputRef = useRef(null); - const { hiddenTableColumnsSelector, visibleTableColumnsSelector } = + const { getHiddenTableColumnsSelector, getVisibleTableColumnsSelector } = useRecordTableStates(recordTableId); - const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector); - const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector); + const hiddenTableColumns = useRecoilValue(getHiddenTableColumnsSelector()); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns( { recordTableId }, diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewValueEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewValueEffect.tsx index 25990f644..e946f484d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewValueEffect.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreviewValueEffect.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; -import { useRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; -import { entityFieldsFamilySelector } from '@/object-record/field/states/selectors/entityFieldsFamilySelector'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; type SettingsObjectFieldPreviewValueEffectProps = { entityId: string; @@ -14,9 +14,9 @@ export const SettingsObjectFieldPreviewValueEffect = ({ fieldName, value, }: SettingsObjectFieldPreviewValueEffectProps) => { - const [, setFieldValue] = useRecoilState( - entityFieldsFamilySelector({ - entityId, + const setFieldValue = useSetRecoilState( + recordStoreFamilySelector({ + recordId: entityId, fieldName, }), ); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts index aaef4d1de..38cd43e12 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts @@ -8,5 +8,5 @@ export const getSelector = ( ) => RecoilValueReadOnly, scopeId: string, ) => { - return stateScopeMap({ scopeId }); + return () => stateScopeMap({ scopeId }); }; diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx index 89e65ff79..53b5b32c8 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx @@ -4,8 +4,8 @@ import { useSetRecoilState } from 'recoil'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; -import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState'; import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { IconBuildingSkyscraper } from '@/ui/display/icon'; import { PageBody } from '@/ui/layout/page/PageBody'; import { PageContainer } from '@/ui/layout/page/PageContainer'; @@ -39,7 +39,7 @@ export const RecordShowPage = () => { const { favorites, createFavorite, deleteFavorite } = useFavorites(); const setEntityFields = useSetRecoilState( - entityFieldsFamilyState(objectRecordId ?? ''), + recordStoreFamilyState(objectRecordId), ); const { record } = useFindOneRecord({ diff --git a/packages/twenty-server/src/workspace/workspace-manager/demo-objects-prefill-data/opportunity.ts b/packages/twenty-server/src/workspace/workspace-manager/demo-objects-prefill-data/opportunity.ts index a3fb783fd..3c57fdf37 100644 --- a/packages/twenty-server/src/workspace/workspace-manager/demo-objects-prefill-data/opportunity.ts +++ b/packages/twenty-server/src/workspace/workspace-manager/demo-objects-prefill-data/opportunity.ts @@ -12,6 +12,12 @@ const getRandomProbability = () => { const getRandomPipelineStepId = (pipelineStepIds: { id: string }[]) => pipelineStepIds[Math.floor(Math.random() * pipelineStepIds.length)].id; +const getRandomStage = () => { + const stages = ['new', 'screening', 'meeting', 'proposal', 'customer']; + + return stages[Math.floor(Math.random() * stages.length)]; +}; + const generateRandomAmountMicros = () => { const firstDigit = Math.floor(Math.random() * 9) + 1; @@ -31,6 +37,7 @@ const generateOpportunities = ( amountAmountMicros: generateRandomAmountMicros(), amountCurrencyCode: 'USD', closeDate: new Date(), + stage: getRandomStage(), probability: getRandomProbability(), pipelineStepId: getRandomPipelineStepId(pipelineStepIds), pointOfContactId: company.personId, @@ -65,6 +72,7 @@ export const seedDemoOpportunity = async ( 'amountAmountMicros', 'amountCurrencyCode', 'closeDate', + 'stage', 'probability', 'pipelineStepId', 'pointOfContactId',