mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor field and cell old component states (#13217)

Browse Source 
This PR refactors fields draft value component state and old component
scoped states still left.

It does not refactor the persistField logic but it will allow it in a
next refactor.

We still have to refactor scoped state used as component states / family
states, not as old states.
This commit is contained in:
Lucas Bordeau
2025-07-16 10:54:28 +02:00
committed by GitHub
parent 58fd1f4623
commit b8e0256480
18 changed files with 114 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/twenty-front/src/modules/object-record/record-field/hooks/useInitDraftValueV2.ts
View File

@ -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 = <FieldValue>() => {
return useRecoilCallback(
@ -25,13 +23,6 @@ export const useInitDraftValueV2 = <FieldValue>() => {
fieldDefinition: FieldDefinition<FieldMetadata>;
fieldComponentInstanceId: string;
}) => {
const getDraftValueSelector = extractComponentSelector<
FieldInputDraftValue<FieldValue> | undefined
>(
recordFieldInputDraftValueComponentSelector,
fieldComponentInstanceId,
);
const recordFieldValue = snapshot
.getLoadable(
recordStoreFamilySelector<FieldValue>({
@ -46,7 +37,9 @@ export const useInitDraftValueV2 = <FieldValue>() => {
FIELD_NOT_OVERWRITTEN_AT_DRAFT.includes(fieldDefinition.type)
) {
set(
getDraftValueSelector(),
recordFieldInputDraftValueComponentState.atomFamily({
instanceId: fieldComponentInstanceId,
}),
computeDraftValueFromFieldValue<FieldValue>({
fieldValue: recordFieldValue,
fieldDefinition,
@ -54,7 +47,9 @@ export const useInitDraftValueV2 = <FieldValue>() => {
);
} else {
set(
getDraftValueSelector(),
recordFieldInputDraftValueComponentState.atomFamily({
instanceId: fieldComponentInstanceId,
}),
computeDraftValueFromString<FieldValue>({
value,
fieldDefinition,

22
packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordFieldInput.ts
View File

@ -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 = <FieldValue>() => {
const recordFieldComponentInstanceId = useAvailableComponentInstanceIdOrThrow(
RecordFieldComponentInstanceContext,
const setDraftValue = useSetRecoilComponentStateV2(
recordFieldInputDraftValueComponentState,
);
const getDraftValueSelector = extractComponentSelector<
FieldInputDraftValue<FieldValue> | undefined
>(
recordFieldInputDraftValueComponentSelector,
recordFieldComponentInstanceId,
);
const setDraftValue = useSetRecoilState(getDraftValueSelector());
const isDraftValueEmpty = (
value: FieldInputDraftValue<FieldValue> | undefined,
) => {
@ -36,7 +23,6 @@ export const useRecordFieldInput = <FieldValue>() => {
return {
setDraftValue,
getDraftValueSelector,
isDraftValueEmpty,
};
};

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts
View File

@ -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<FieldAddressValue>();
const { setDraftValue } = useRecordFieldInput<FieldAddressValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
fieldDefinition,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts
View File

@ -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<FieldCurrencyValue>();
const { setDraftValue } = useRecordFieldInput<FieldCurrencyValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const defaultValue = fieldDefinition.defaultValue;

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts
View File

@ -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<FieldEmailsValue>();
const { setDraftValue } = useRecordFieldInput<FieldEmailsValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const persistField = usePersistField();

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts
View File

@ -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<FieldFullNameValue>();
const { setDraftValue } = useRecordFieldInput<FieldFullNameValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
fieldDefinition,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts
View File

@ -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<FieldJsonValue>();
const { setDraftValue } = useRecordFieldInput<FieldJsonValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const precomputedDraftValue = usePrecomputedJsonDraftValue({
draftValue,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts
View File

@ -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<FieldLinksValue>();
const { setDraftValue } = useRecordFieldInput<FieldLinksValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const persistField = usePersistField();

12
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts
View File

@ -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<FieldMultiSelectValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const { setDraftValue } = useRecordFieldInput<FieldMultiSelectValue>();
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
recordId,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts
View File

@ -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<FieldNumberValue>();
const { setDraftValue } = useRecordFieldInput<FieldNumberValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
fieldDefinition,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts
View File

@ -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<FieldPhonesValue>();
const { setDraftValue } = useRecordFieldInput<FieldPhonesValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const persistField = usePersistField();

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts
View File

@ -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 = <T extends ObjectRecord | ObjectRecord[]>() => {
const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext);
@ -28,9 +29,9 @@ export const useRelationField = <T extends ObjectRecord | ObjectRecord[]>() => {
recordStoreFamilySelector({ recordId, fieldName }),
);
const { getDraftValueSelector } =
useRecordFieldInput<FieldRelationValue<T>>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const initialSearchValue = draftValue;

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts
View File

@ -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<FieldRichTextValue>();
const { setDraftValue } = useRecordFieldInput<FieldRichTextValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
? JSON.parse(draftValue)

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts
View File

@ -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<FieldRichTextValue>();
const { setDraftValue } = useRecordFieldInput<FieldRichTextValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
? JSON.parse(draftValue)

12
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts
View File

@ -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<FieldSelectValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const { setDraftValue } = useRecordFieldInput<FieldSelectValue>();
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
recordId,

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts
View File

@ -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<FieldTextValue>();
const { setDraftValue } = useRecordFieldInput<FieldTextValue>();
const draftValue = useRecoilValue(getDraftValueSelector());
const draftValue = useRecoilComponentValueV2(
recordFieldInputDraftValueComponentState,
);
return {
draftValue,

6
packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts
View File

@ -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<any>({
createComponentStateV2<any>({
key: 'recordFieldInputDraftValueComponentState',
defaultValue: undefined,
componentInstanceContext: RecordFieldComponentInstanceContext,
});

16
packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts
View File

@ -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<any>({
key: 'recordFieldInputDraftValueComponentSelector',
get:
<T>({ scopeId }: { scopeId: string }) =>
({ get }) =>
get(recordFieldInputDraftValueComponentState({ scopeId })) as T,
set:
<T>({ scopeId }: { scopeId: string }) =>
({ set }, newValue: T) => {
set(recordFieldInputDraftValueComponentState({ scopeId }), newValue);
},
});