refactoring editableFieldContext to match with table implementation (#1164)

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<FieldDateMetadata>;
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  const internalDateValue = fieldValue
+    ? parseDate(fieldValue).toJSDate()
+    : null;
+
+  return <DateInputDisplay value={internalDateValue} />;
+}