From 4288cef0968af89b8a30cb47730898de916a45b5 Mon Sep 17 00:00:00 2001 From: Weiko Date: Thu, 10 Aug 2023 12:26:05 -0700 Subject: [PATCH] refactoring editableFieldContext to match with table implementation (#1164) --- .../companies/components/CompanyBoardCard.tsx | 48 ++++++++++--------- .../components/GenericEditableDateField.tsx | 20 ++++---- .../GenericEditableDateFieldDisplayMode.tsx | 33 +++++++++++++ .../GenericEditableDateFieldEditMode.tsx | 11 +++-- .../components/GenericEditableField.tsx | 5 +- .../components/GenericEditableNumberField.tsx | 11 +++-- .../GenericEditableNumberFieldEditMode.tsx | 11 +++-- .../GenericEditableRelationField.tsx | 47 ++++-------------- ...enericEditableRelationFieldDisplayMode.tsx | 45 +++++++++++++++++ .../GenericEditableRelationFieldEditMode.tsx | 16 +++---- .../components/ProbabilityEditableField.tsx | 9 ++-- .../ProbabilityEditableFieldEditMode.tsx | 11 +++-- .../hooks/useUpdateGenericEntityField.ts | 5 +- .../states/EditableFieldContext.ts | 16 ------- .../states/EditableFieldDefinitionContext.ts | 8 ++++ .../states/EditableFieldEntityIdContext.ts | 2 +- .../states/EditableFieldMutationContext.ts | 3 ++ 17 files changed, 173 insertions(+), 128 deletions(-) create mode 100644 front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx create mode 100644 front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx delete mode 100644 front/src/modules/ui/editable-field/states/EditableFieldContext.ts create mode 100644 front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts create mode 100644 front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 8e4b620aa3..9becd2c036 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -7,7 +7,9 @@ import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardId import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState'; import { EntityChipVariant } from '@/ui/chip/components/EntityChip'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; -import { EditableFieldContext } from '@/ui/editable-field/states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext'; +import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext'; import { Checkbox, CheckboxVariant, @@ -167,27 +169,29 @@ export function CompanyBoardCard() { - {viewFieldsDefinitions.map((viewField) => { - return ( - - - - - - ); - })} + + + {viewFieldsDefinitions.map((viewField) => { + return ( + + + + + + ); + })} + + diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx index 10a095c4b2..ca1d779c96 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx @@ -1,24 +1,24 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { parseDate } from '~/utils/date-utils'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { FieldContext } from '../states/FieldContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldDateMetadata } from '../types/FieldMetadata'; import { EditableField } from './EditableField'; +import { GenericEditableDateFieldDisplayMode } from './GenericEditableDateFieldDisplayMode'; import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode'; export function GenericEditableDateField() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; const fieldValue = useRecoilValue( genericEntityFieldFamilySelector({ @@ -29,16 +29,12 @@ export function GenericEditableDateField() { }), ); - const internalDateValue = fieldValue - ? parseDate(fieldValue).toJSDate() - : null; - return ( } - displayModeContent={} + displayModeContent={} isDisplayModeContentEmpty={!fieldValue} /> diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx new file mode 100644 index 0000000000..603bfe3165 --- /dev/null +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx @@ -0,0 +1,33 @@ +import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; + +import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay'; +import { parseDate } from '~/utils/date-utils'; + +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; +import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { FieldDefinition } from '../types/FieldDefinition'; +import { FieldDateMetadata } from '../types/FieldMetadata'; + +export function GenericEditableDateFieldDisplayMode() { + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; + + const fieldValue = useRecoilValue( + genericEntityFieldFamilySelector({ + entityId: currentEditableFieldEntityId ?? '', + fieldName: currentEditableFieldDefinition + ? currentEditableFieldDefinition.metadata.fieldName + : '', + }), + ); + + const internalDateValue = fieldValue + ? parseDate(fieldValue).toJSDate() + : null; + + return ; +} diff --git a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx index 7163105c9b..ed7042669a 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx @@ -2,17 +2,18 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldDateMetadata } from '../types/FieldMetadata'; import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate'; export function GenericEditableDateFieldEditMode() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( diff --git a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx index af1fa59432..c708817227 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; import { isFieldDate } from '../types/guards/isFieldDate'; import { isFieldNumber } from '../types/guards/isFieldNumber'; import { isFieldProbability } from '../types/guards/isFieldProbability'; @@ -12,8 +12,7 @@ import { GenericEditableRelationField } from './GenericEditableRelationField'; import { ProbabilityEditableField } from './ProbabilityEditableField'; export function GenericEditableField() { - const currentEditableField = useContext(EditableFieldContext); - const fieldDefinition = currentEditableField.fieldDefinition; + const fieldDefinition = useContext(EditableFieldDefinitionContext); if (isFieldRelation(fieldDefinition)) { return ; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx index 8ef7c60236..c59f1e501a 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx @@ -3,7 +3,8 @@ import { useRecoilValue } from 'recoil'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { FieldContext } from '../states/FieldContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; @@ -13,10 +14,10 @@ import { EditableField } from './EditableField'; import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode'; export function GenericEditableNumberField() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; const fieldValue = useRecoilValue( genericEntityFieldFamilySelector({ diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx index 905e9fd613..4ce2ec3260 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx @@ -9,16 +9,17 @@ import { import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldNumberMetadata } from '../types/FieldMetadata'; export function GenericEditableNumberFieldEditMode() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( diff --git a/front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx index 1b2c632200..ae2c42ec2d 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx @@ -1,51 +1,25 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { PersonChip } from '@/people/components/PersonChip'; -import { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField'; -import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { FieldContext } from '../states/FieldContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldRelationMetadata } from '../types/FieldMetadata'; import { EditableField } from './EditableField'; +import { GenericEditableRelationFieldDisplayMode } from './GenericEditableRelationFieldDisplayMode'; import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode'; -function RelationChip({ - fieldDefinition, - fieldValue, -}: { - fieldDefinition: FieldDefinition; - fieldValue: any | null; -}) { - switch (fieldDefinition.metadata.relationType) { - case Entity.Person: { - return ( - - ); - } - default: - console.warn( - `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`, - ); - return <> ; - } -} - export function GenericEditableRelationField() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; const fieldValue = useRecoilValue( genericEntityFieldFamilySelector({ @@ -66,12 +40,7 @@ export function GenericEditableRelationField() { }} iconLabel={currentEditableFieldDefinition.icon} editModeContent={} - displayModeContent={ - - } + displayModeContent={} isDisplayModeContentEmpty={!fieldValue} isDisplayModeFixHeight /> diff --git a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx new file mode 100644 index 0000000000..67d6b9369a --- /dev/null +++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx @@ -0,0 +1,45 @@ +import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; + +import { PersonChip } from '@/people/components/PersonChip'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; + +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; +import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { FieldDefinition } from '../types/FieldDefinition'; +import { FieldRelationMetadata } from '../types/FieldMetadata'; + +export function GenericEditableRelationFieldDisplayMode() { + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; + + const fieldValue = useRecoilValue( + genericEntityFieldFamilySelector({ + entityId: currentEditableFieldEntityId ?? '', + fieldName: currentEditableFieldDefinition + ? currentEditableFieldDefinition.metadata.fieldName + : '', + }), + ); + + switch (currentEditableFieldDefinition.metadata.relationType) { + case Entity.Person: { + return ( + + ); + } + default: + console.warn( + `Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}" + in GenericEditableRelationField`, + ); + return <> ; + } +} diff --git a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx index a053031355..9b4c08c4f7 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx @@ -3,16 +3,14 @@ import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { PeoplePicker } from '@/people/components/PeoplePicker'; -import { - ViewFieldRelationMetadata, - ViewFieldRelationValue, -} from '@/ui/editable-field/types/ViewField'; +import { ViewFieldRelationValue } from '@/ui/editable-field/types/ViewField'; import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useEditableField } from '../hooks/useEditableField'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldRelationMetadata } from '../types/FieldMetadata'; @@ -53,10 +51,10 @@ function RelationPicker({ } export function GenericEditableRelationFieldEditMode() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( diff --git a/front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx b/front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx index 161372ce2c..a32eee4329 100644 --- a/front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx +++ b/front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx @@ -4,13 +4,16 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { FieldDefinition } from '../types/FieldDefinition'; +import { FieldProbabilityMetadata } from '../types/FieldMetadata'; import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode'; export function ProbabilityEditableField() { - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldDefinition = currentEditableField.fieldDefinition; + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; return ( diff --git a/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx index 03873ecd62..dd91c4b2d9 100644 --- a/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx @@ -5,7 +5,8 @@ import { useRecoilState } from 'recoil'; import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldProbabilityMetadata } from '../types/FieldMetadata'; @@ -70,10 +71,10 @@ export function ProbabilityEditableFieldEditMode() { const [nextProbabilityIndex, setNextProbabilityIndex] = useState< number | null >(null); - const currentEditableField = useContext(EditableFieldContext); - const currentEditableFieldEntityId = currentEditableField.entityId; - const currentEditableFieldDefinition = - currentEditableField.fieldDefinition as FieldDefinition; + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; const [fieldValue, setFieldValue] = useRecoilState( genericEntityFieldFamilySelector({ diff --git a/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts b/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts index 16a2f903e4..545bc86d72 100644 --- a/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts +++ b/front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts @@ -2,7 +2,7 @@ import { useContext } from 'react'; import { isFieldChip } from '@/ui/editable-field/types/guards/isFieldChip'; -import { EditableFieldContext } from '../states/EditableFieldContext'; +import { EditableFieldMutationContext } from '../states/EditableFieldMutationContext'; import { FieldDefinition } from '../types/FieldDefinition'; import { FieldChipMetadata, @@ -48,8 +48,7 @@ import { isFieldURL } from '../types/guards/isFieldURL'; import { isFieldURLValue } from '../types/guards/isFieldURLValue'; export function useUpdateGenericEntityField() { - const currentEditableField = useContext(EditableFieldContext); - const useUpdateEntityMutation = currentEditableField?.mutation; + const useUpdateEntityMutation = useContext(EditableFieldMutationContext); const [updateEntity] = useUpdateEntityMutation(); diff --git a/front/src/modules/ui/editable-field/states/EditableFieldContext.ts b/front/src/modules/ui/editable-field/states/EditableFieldContext.ts deleted file mode 100644 index 8182560073..0000000000 --- a/front/src/modules/ui/editable-field/states/EditableFieldContext.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { createContext } from 'react'; - -import { FieldDefinition } from '../types/FieldDefinition'; -import { ViewFieldMetadata } from '../types/ViewField'; - -type EditableFieldContextValue = { - entityId: string; - fieldDefinition: FieldDefinition; - mutation: any; -}; - -export const EditableFieldContext = createContext({ - entityId: '', - fieldDefinition: {} as FieldDefinition, - mutation: undefined, -}); diff --git a/front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts b/front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts new file mode 100644 index 0000000000..2ce04ca7b2 --- /dev/null +++ b/front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react'; + +import { FieldDefinition } from '../types/FieldDefinition'; +import { ViewFieldMetadata } from '../types/ViewField'; + +export const EditableFieldDefinitionContext = createContext< + FieldDefinition +>({} as FieldDefinition); diff --git a/front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts b/front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts index bf6875085d..0f1116746f 100644 --- a/front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts +++ b/front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts @@ -1,3 +1,3 @@ import { createContext } from 'react'; -export const EditableFieldEntityIdContext = createContext(null); +export const EditableFieldEntityIdContext = createContext(''); diff --git a/front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts b/front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts new file mode 100644 index 0000000000..6d7b54992f --- /dev/null +++ b/front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const EditableFieldMutationContext = createContext(undefined);