Updated ImportServersBtn to be a functional component

src/servers/helpers/ImportServersBtn.js

@@ -1,25 +1,17 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import PropTypes from 'prop-types';
 
-const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
-  static defaultProps = {
-    onImport: () => ({}),
-  };
-  static propTypes = {
-    onImport: PropTypes.func,
-    createServers: PropTypes.func,
-    fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
-  };
+const propTypes = {
+  onImport: PropTypes.func,
+  createServers: PropTypes.func,
+  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
+};
 
-  constructor(props) {
-    super(props);
-    this.fileRef = props.fileRef || React.createRef();
-  }
-
-  render() {
-    const { importServersFromFile } = serversImporter;
-    const { onImport, createServers } = this.props;
+// 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)
@@ -35,24 +27,22 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
           type="button"
           className="btn btn-outline-secondary mr-2"
           id="importBtn"
-          onClick={() => this.fileRef.current.click()}
+          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>
+          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={this.fileRef}
-          onChange={onChange}
-        />
+        <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;