refactoring editableFieldContext to match with table implementation (#1164)

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<FieldRelationMetadata>;
+
+  const fieldValue = useRecoilValue<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  switch (currentEditableFieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PersonChip
+          id={fieldValue?.id ?? ''}
+          name={fieldValue?.displayName ?? ''}
+          pictureUrl={fieldValue?.avatarUrl ?? ''}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}"
+          in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}