diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useInitDraftValueV2.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useInitDraftValueV2.ts index 196bd1efb..2bd9e1571 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useInitDraftValueV2.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useInitDraftValueV2.ts @@ -2,14 +2,12 @@ import { isUndefined } from '@sniptt/guards'; import { useRecoilCallback } from 'recoil'; import { FIELD_NOT_OVERWRITTEN_AT_DRAFT } from '@/object-record/constants/FieldsNotOverwrittenAtDraft'; -import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; -import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { computeDraftValueFromFieldValue } from '@/object-record/record-field/utils/computeDraftValueFromFieldValue'; import { computeDraftValueFromString } from '@/object-record/record-field/utils/computeDraftValueFromString'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; -import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector'; export const useInitDraftValueV2 = () => { return useRecoilCallback( @@ -25,13 +23,6 @@ export const useInitDraftValueV2 = () => { fieldDefinition: FieldDefinition; fieldComponentInstanceId: string; }) => { - const getDraftValueSelector = extractComponentSelector< - FieldInputDraftValue | undefined - >( - recordFieldInputDraftValueComponentSelector, - fieldComponentInstanceId, - ); - const recordFieldValue = snapshot .getLoadable( recordStoreFamilySelector({ @@ -46,7 +37,9 @@ export const useInitDraftValueV2 = () => { FIELD_NOT_OVERWRITTEN_AT_DRAFT.includes(fieldDefinition.type) ) { set( - getDraftValueSelector(), + recordFieldInputDraftValueComponentState.atomFamily({ + instanceId: fieldComponentInstanceId, + }), computeDraftValueFromFieldValue({ fieldValue: recordFieldValue, fieldDefinition, @@ -54,7 +47,9 @@ export const useInitDraftValueV2 = () => { ); } else { set( - getDraftValueSelector(), + recordFieldInputDraftValueComponentState.atomFamily({ + instanceId: fieldComponentInstanceId, + }), computeDraftValueFromString({ value, fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordFieldInput.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordFieldInput.ts index 590ba7ba9..b7ae62bae 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordFieldInput.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordFieldInput.ts @@ -1,25 +1,12 @@ -import { useSetRecoilState } from 'recoil'; - -import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; -import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; export const useRecordFieldInput = () => { - const recordFieldComponentInstanceId = useAvailableComponentInstanceIdOrThrow( - RecordFieldComponentInstanceContext, + const setDraftValue = useSetRecoilComponentStateV2( + recordFieldInputDraftValueComponentState, ); - const getDraftValueSelector = extractComponentSelector< - FieldInputDraftValue | undefined - >( - recordFieldInputDraftValueComponentSelector, - recordFieldComponentInstanceId, - ); - - const setDraftValue = useSetRecoilState(getDraftValueSelector()); - const isDraftValueEmpty = ( value: FieldInputDraftValue | undefined, ) => { @@ -36,7 +23,6 @@ export const useRecordFieldInput = () => { return { setDraftValue, - getDraftValueSelector, isDraftValueEmpty, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts index 4387c6fb1..db72a656a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts @@ -1,11 +1,13 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { isFieldAddressValue } from '@/object-record/record-field/types/guards/isFieldAddressValue'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { usePersistField } from '../../hooks/usePersistField'; import { FieldAddressValue } from '../../types/FieldMetadata'; @@ -40,10 +42,11 @@ export const useAddressField = () => { persistField(newValue); }; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts index aec82137b..9760bbc81 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts @@ -1,14 +1,16 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldCurrency } from '@/object-record/record-field/types/guards/isFieldCurrency'; import { isFieldCurrencyValue } from '@/object-record/record-field/types/guards/isFieldCurrencyValue'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { convertCurrencyAmountToCurrencyMicros } from '~/utils/convertCurrencyToCurrencyMicros'; @@ -54,10 +56,11 @@ export const useCurrencyField = () => { persistField(newCurrencyValue); }; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const defaultValue = fieldDefinition.defaultValue; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts index 17ea48a5f..df720f7b0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; @@ -9,6 +9,8 @@ import { emailsSchema } from '@/object-record/record-field/types/guards/isFieldE import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; @@ -26,10 +28,11 @@ export const useEmailsField = () => { }), ); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const persistField = usePersistField(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts index 57b5c8ec2..753f076de 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts @@ -1,14 +1,16 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldFullNameValue } from '@/object-record/record-field/types/FieldMetadata'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName'; import { isFieldFullNameValue } from '@/object-record/record-field/types/guards/isFieldFullNameValue'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export const useFullNameField = () => { @@ -39,10 +41,11 @@ export const useFullNameField = () => { persistField(newValue); }; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts index 05d9eec89..d4431788f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; @@ -8,6 +8,8 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s import { FieldMetadataType } from '~/generated-metadata/graphql'; import { usePrecomputedJsonDraftValue } from '@/object-record/record-field/meta-types/hooks/usePrecomputedJsonDraftValue'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; import { isFieldRawJson } from '../../types/guards/isFieldRawJson'; @@ -42,10 +44,11 @@ export const useJsonField = () => { } }; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const precomputedDraftValue = usePrecomputedJsonDraftValue({ draftValue, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts index 40e63bd00..aab8f9568 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; @@ -9,6 +9,8 @@ import { linksSchema } from '@/object-record/record-field/types/guards/isFieldLi import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; @@ -26,10 +28,11 @@ export const useLinksField = () => { }), ); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const persistField = usePersistField(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts index 07fe386fe..9660594a4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts @@ -1,14 +1,16 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect'; import { isFieldMultiSelectValue } from '@/object-record/record-field/types/guards/isFieldMultiSelectValue'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export const useMultiSelectField = () => { @@ -34,9 +36,11 @@ export const useMultiSelectField = () => { : null; const persistField = usePersistField(); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const { setDraftValue } = useRecordFieldInput(); + + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { recordId, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts index 595547f0c..89be7aa15 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { FieldNumberValue } from '@/object-record/record-field/types/FieldMetadata'; @@ -11,6 +11,8 @@ import { castAsNumberOrNull, } from '~/utils/cast-as-number-or-null'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isNull } from '@sniptt/guards'; import { FieldContext } from '../../contexts/FieldContext'; import { usePersistField } from '../../hooks/usePersistField'; @@ -54,10 +56,11 @@ export const useNumberField = () => { persistField(castedValue); }; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts index 37420d219..09db8f61f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; @@ -9,6 +9,8 @@ import { phonesSchema } from '@/object-record/record-field/types/guards/isFieldP import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; @@ -26,10 +28,11 @@ export const usePhonesField = () => { }), ); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const persistField = usePersistField(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts index 5e83ad696..a244fc02f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts @@ -1,16 +1,17 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; -import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { FieldRelationValue } from '@/object-record/record-field/types/FieldMetadata'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const useRelationField = () => { const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext); @@ -28,9 +29,9 @@ export const useRelationField = () => { recordStoreFamilySelector({ recordId, fieldName }), ); - const { getDraftValueSelector } = - useRecordFieldInput>(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const initialSearchValue = draftValue; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts index f3c752093..17d5eaf4c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { FieldRichTextValue } from '@/object-record/record-field/types/FieldMetadata'; @@ -7,8 +7,10 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s import { FieldMetadataType } from '~/generated-metadata/graphql'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText'; import { isFieldRichTextValue } from '@/object-record/record-field/types/guards/isFieldRichTextValue'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import type { PartialBlock } from '@blocknote/core'; import { isNonEmptyString } from '@sniptt/guards'; import { FieldContext } from '../../contexts/FieldContext'; @@ -33,10 +35,11 @@ export const useRichTextField = () => { ); const fieldRichTextValue = isFieldRichTextValue(fieldValue) ? fieldValue : ''; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue) ? JSON.parse(draftValue) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts index a7372ade8..e420f2cda 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { @@ -10,8 +10,10 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s import { FieldMetadataType } from '~/generated-metadata/graphql'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { isFieldRichTextV2 } from '@/object-record/record-field/types/guards/isFieldRichTextV2'; import { isFieldRichTextV2Value } from '@/object-record/record-field/types/guards/isFieldRichTextValueV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import type { PartialBlock } from '@blocknote/core'; import { isNonEmptyString } from '@sniptt/guards'; import { FieldContext } from '../../contexts/FieldContext'; @@ -38,10 +40,11 @@ export const useRichTextV2Field = () => { ? fieldValue : ({ blocknote: null, markdown: null } as FieldRichTextV2Value); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue) ? JSON.parse(draftValue) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts index 99c63cbdf..36a3a58b0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts @@ -1,11 +1,13 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldContext } from '../../contexts/FieldContext'; import { FieldSelectValue } from '../../types/FieldMetadata'; import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata'; @@ -29,9 +31,11 @@ export const useSelectField = () => { const fieldSelectValue = isFieldSelectValue(fieldValue) ? fieldValue : null; const persistField = usePersistField(); - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const { setDraftValue } = useRecordFieldInput(); + + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { recordId, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts index f4b1fb8b9..e197f16ef 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts @@ -1,13 +1,15 @@ import { useContext } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput'; +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; import { FieldTextValue } from '@/object-record/record-field/types/FieldMetadata'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText'; import { isFieldTextValue } from '@/object-record/record-field/types/guards/isFieldTextValue'; import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export const useTextField = () => { @@ -25,10 +27,11 @@ export const useTextField = () => { ); const fieldTextValue = isFieldTextValue(fieldValue) ? fieldValue : ''; - const { setDraftValue, getDraftValueSelector } = - useRecordFieldInput(); + const { setDraftValue } = useRecordFieldInput(); - const draftValue = useRecoilValue(getDraftValueSelector()); + const draftValue = useRecoilComponentValueV2( + recordFieldInputDraftValueComponentState, + ); return { draftValue, diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts b/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts index ccc67af80..85047aeae 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts @@ -1,7 +1,9 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; +import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const recordFieldInputDraftValueComponentState = - createComponentState({ + createComponentStateV2({ key: 'recordFieldInputDraftValueComponentState', defaultValue: undefined, + componentInstanceContext: RecordFieldComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts deleted file mode 100644 index e96dd4075..000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; -import { createComponentSelector } from '@/ui/utilities/state/component-state/utils/createComponentSelector'; - -export const recordFieldInputDraftValueComponentSelector = - createComponentSelector({ - key: 'recordFieldInputDraftValueComponentSelector', - get: - ({ scopeId }: { scopeId: string }) => - ({ get }) => - get(recordFieldInputDraftValueComponentState({ scopeId })) as T, - set: - ({ scopeId }: { scopeId: string }) => - ({ set }, newValue: T) => { - set(recordFieldInputDraftValueComponentState({ scopeId }), newValue); - }, - });