Add FieldDefinition (#1162)

* add fieldDefinition

* update naming

* use a unique contextProvider for editable fields

* remove EntityUpdateMutationHookContext.Provider usage in CompanyBoardCard

* add fieldDefinitionState

* remove unnecessary refetchQueries to avoid re-render

* add FieldMetadata

* add type guards and update useUpdateGenericEntityField

* restore refetchQueries
This commit is contained in:
Weiko
2023-08-10 11:26:27 -07:00
committed by GitHub
parent 80a562d90d
commit 07a8f68ef1
39 changed files with 644 additions and 309 deletions

View File

@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
import { PeoplePicker } from '@/people/components/PeoplePicker';
import {
ViewFieldDefinition,
ViewFieldRelationMetadata,
ViewFieldRelationValue,
} from '@/ui/editable-field/types/ViewField';
@ -13,8 +12,10 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useEditableField } from '../hooks/useEditableField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { EditableFieldContext } from '../states/EditableFieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldRelationMetadata } from '../types/FieldMetadata';
const RelationPickerContainer = styled.div`
left: 0px;
@ -22,17 +23,13 @@ const RelationPickerContainer = styled.div`
top: -8px;
`;
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
};
function RelationPicker({
fieldDefinition,
fieldValue,
handleEntitySubmit,
handleCancel,
}: {
fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
fieldDefinition: FieldDefinition<FieldRelationMetadata>;
fieldValue: ViewFieldRelationValue;
handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
handleCancel: () => void;
@ -55,14 +52,19 @@ function RelationPicker({
}
}
export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
export function GenericEditableRelationFieldEditMode() {
const currentEditableField = useContext(EditableFieldContext);
const currentEditableFieldEntityId = currentEditableField.entityId;
const currentEditableFieldDefinition =
currentEditableField.fieldDefinition as FieldDefinition<ViewFieldRelationMetadata>;
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
@ -79,7 +81,11 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
});
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newRelation);
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newRelation,
);
}
closeEditableField();
@ -92,7 +98,7 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
return (
<RelationPickerContainer>
<RelationPicker
fieldDefinition={viewField}
fieldDefinition={currentEditableFieldDefinition}
fieldValue={fieldValue}
handleEntitySubmit={handleSubmit}
handleCancel={handleCancel}