[Ref] Refactor CreateFileMetadata.tsx to hooks.

Add language attribute to File.

src/component/resource/file/CreateFileMetadata.tsx

@@ -1,101 +1,81 @@
-import * as React from "react";
-import { injectIntl } from "react-intl";
-import withI18n, { HasI18n } from "../../hoc/withI18n";
+import React from "react";
 import { Button, ButtonToolbar, Col, Form, Row } from "reactstrap";
 import UploadFile from "./UploadFile";
 import TermItFile from "../../../model/File";
 import CustomInput from "../../misc/CustomInput";
-import { AssetData } from "../../../model/Asset";
+import { useI18n } from "../../hook/useI18n";
 
-interface CreateFileMetadataProps extends HasI18n {
+interface CreateFileMetadataProps {
   onCreate: (termItFile: TermItFile, file: File) => any;
   onCancel: () => void;
 }
 
-interface CreateFileMetadataState extends AssetData {
-  iri: string;
-  label: string;
-  file?: File;
-  dragActive: boolean;
-}
-
-export class CreateFileMetadata extends React.Component<
-  CreateFileMetadataProps,
-  CreateFileMetadataState
-> {
-  constructor(props: CreateFileMetadataProps) {
-    super(props);
-    this.state = {
-      iri: "",
-      label: "",
-      file: undefined,
-      dragActive: false,
-    };
-  }
+const CreateFileMetadata: React.FC<CreateFileMetadataProps> = ({
+  onCreate,
+  onCancel,
+}) => {
+  const { i18n } = useI18n();
+  const [label, setLabel] = React.useState("");
+  const [file, setFile] = React.useState<File>();
 
-  protected onLabelChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const label = e.currentTarget.value;
-    this.setState({ label });
+  const onFileSelected = (file: File) => {
+    setFile(file);
+    setLabel(file.name);
   };
-
-  public onCreate = () => {
-    const { file, dragActive, ...data } = this.state;
+  const onSubmit = () => {
     if (file) {
-      this.props.onCreate(new TermItFile(data), file);
+      onCreate(
+        new TermItFile({
+          iri: "",
+          label,
+        }),
+        file
+      );
     }
   };
-
-  public setFile = (file: File) => {
-    this.setState({ file, label: file.name, dragActive: false });
-  };
-
-  public cannotSubmit = () => {
-    return !this.state.file || this.state.label.trim().length === 0;
+  const cannotSubmit = () => {
+    return !file || label.trim().length === 0;
   };
 
-  public render() {
-    const i18n = this.props.i18n;
-
-    return (
-      <Form>
-        <UploadFile setFile={this.setFile} />
-        <Row>
-          <Col xs={12}>
-            <CustomInput
-              name="create-resource-label"
-              label={i18n("asset.label")}
-              value={this.state.label}
-              onChange={this.onLabelChange}
-              hint={i18n("required")}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={12}>
-            <ButtonToolbar className="d-flex justify-content-center mt-4">
-              <Button
-                id="create-resource-submit"
-                onClick={this.onCreate}
-                color="success"
-                size="sm"
-                disabled={this.cannotSubmit()}
-              >
-                {i18n("file.upload")}
-              </Button>
-              <Button
-                id="create-resource-cancel"
-                onClick={this.props.onCancel}
-                color="outline-dark"
-                size="sm"
-              >
-                {i18n("cancel")}
-              </Button>
-            </ButtonToolbar>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-}
+  return (
+    <Form>
+      <UploadFile setFile={onFileSelected} />
+      <Row>
+        <Col xs={12}>
+          <CustomInput
+            name="create-resource-label"
+            label={i18n("asset.label")}
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            hint={i18n("required")}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <ButtonToolbar className="d-flex justify-content-center mt-4">
+            <Button
+              id="create-resource-submit"
+              onClick={onSubmit}
+              color="success"
+              size="sm"
+              disabled={cannotSubmit()}
+            >
+              {i18n("file.upload")}
+            </Button>
+            <Button
+              id="create-resource-cancel"
+              onClick={onCancel}
+              color="outline-dark"
+              size="sm"
+            >
+              {i18n("cancel")}
+            </Button>
+          </ButtonToolbar>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
 
-export default injectIntl(withI18n(CreateFileMetadata));
+export default CreateFileMetadata;

src/component/resource/file/__tests__/CreateFileMetadata.test.tsx

@@ -1,11 +1,9 @@
 import Resource from "../../../../model/Resource";
 import Ajax from "../../../../util/Ajax";
-import {
-  flushPromises,
-  mountWithIntl,
-} from "../../../../__tests__/environment/Environment";
-import { CreateFileMetadata } from "../CreateFileMetadata";
+import { mountWithIntl } from "../../../../__tests__/environment/Environment";
+import CreateFileMetadata from "../CreateFileMetadata";
 import { intlFunctions } from "../../../../__tests__/environment/IntlUtil";
+import UploadFile from "../UploadFile";
 
 jest.mock("../../../../util/Ajax", () => {
   const originalModule = jest.requireActual("../../../../util/Ajax");
@@ -43,9 +41,10 @@ describe("CreateFileMetadata", () => {
         {...intlFunctions()}
       />
     );
-    (wrapper.find(CreateFileMetadata).instance() as CreateFileMetadata).setFile(
-      file as File
-    );
+    wrapper
+      .find(UploadFile)
+      .props()
+      .setFile(file as File);
     const labelInput = wrapper.find('input[name="create-resource-label"]');
     expect((labelInput.getDOMNode() as HTMLInputElement).value).toEqual(
       fileName

src/model/File.ts

@@ -6,6 +6,7 @@ import VocabularyUtils from "../util/VocabularyUtils";
 const ctx = {
   content: VocabularyUtils.CONTENT,
   owner: VocabularyUtils.IS_PART_OF_DOCUMENT,
+  language: VocabularyUtils.DC_LANGUAGE,
 };
 
 /**
@@ -18,18 +19,21 @@ export const OWN_CONTEXT = ctx;
 export interface FileData extends ResourceData {
   origin?: string;
   content?: string;
+  language?: string;
   owner?: DocumentData;
 }
 
 export default class File extends Resource implements FileData {
   public origin: string;
   public content?: string;
+  public language?: string;
   public owner?: DocumentData;
 
   constructor(data: FileData) {
     super(data);
     this.origin = data.origin ? data.origin : "";
     this.content = data.content;
+    this.language = data.language;
     this.owner = data.owner;
   }