Migrated to TS first component where some dependency was being injected

src/servers/helpers/ImportServersBtn.js

@@ -1,48 +0,0 @@
-import React, { useRef } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  onImport: PropTypes.func,
-  createServers: PropTypes.func,
-  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
-};
-
-// FIXME Replace with typescript: (ServersImporter)
-const ImportServersBtn = ({ importServersFromFile }) => {
-  const ImportServersBtnComp = ({ createServers, fileRef, onImport = () => '' }) => {
-    const ref = fileRef || useRef();
-    const onChange = ({ target }) =>
-      importServersFromFile(target.files[0])
-        .then(createServers)
-        .then(onImport)
-        .then(() => {
-          // Reset input after processing file
-          target.value = null;
-        });
-
-    return (
-      <React.Fragment>
-        <button
-          type="button"
-          className="btn btn-outline-secondary mr-2"
-          id="importBtn"
-          onClick={() => ref.current.click()}
-        >
-          Import from file
-        </button>
-        <UncontrolledTooltip placement="top" target="importBtn">
-          You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
-        </UncontrolledTooltip>
-
-        <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
-      </React.Fragment>
-    );
-  };
-
-  ImportServersBtnComp.propTypes = propTypes;
-
-  return ImportServersBtnComp;
-};
-
-export default ImportServersBtn;

src/servers/helpers/ImportServersBtn.tsx

@@ -0,0 +1,46 @@
+import React, { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import ServersImporter from '../services/ServersImporter';
+import { Server } from '../data';
+
+type Ref<T> = RefObject<T> | MutableRefObject<T>;
+
+interface ImportServersBtnProps {
+  createServers: (servers: Server[]) => void;
+  fileRef: Ref<HTMLInputElement>;
+  onImport?: () => void;
+}
+
+const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => (
+  { createServers, fileRef, onImport = () => {} }: ImportServersBtnProps,
+) => {
+  const ref = fileRef ?? useRef<HTMLInputElement>();
+  const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
+    importServersFromFile(target.files?.[0])
+      .then(createServers)
+      .then(onImport)
+      .then(() => {
+        // Reset input after processing file
+        (target as { value: string | null }).value = null;
+      });
+
+  return (
+    <React.Fragment>
+      <button
+        type="button"
+        className="btn btn-outline-secondary mr-2"
+        id="importBtn"
+        onClick={() => ref.current?.click()}
+      >
+        Import from file
+      </button>
+      <UncontrolledTooltip placement="top" target="importBtn">
+        You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
+      </UncontrolledTooltip>
+
+      <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
+    </React.Fragment>
+  );
+};
+
+export default ImportServersBtn;

src/servers/services/ServersImporter.ts

@@ -6,7 +6,7 @@ const CSV_MIME_TYPE = 'text/csv';
 export default class ServersImporter {
   public constructor(private readonly csvjson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
 
-  public importServersFromFile = async (file?: File): Promise<RegularServer[]> => {
+  public importServersFromFile = async (file?: File | null): Promise<RegularServer[]> => {
     if (!file || file.type !== CSV_MIME_TYPE) {
       throw new Error('No file provided or file is not a CSV');
     }