diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js
index ec56cb9e..65a47b86 100644
--- a/src/servers/helpers/ImportServersBtn.js
+++ b/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
- You can create servers by importing a CSV file with columns name, apiKey and url
+ You can create servers by importing a CSV file with columns name, apiKey and url.
-
+
);
- }
+ };
+
+ ImportServersBtnComp.propTypes = propTypes;
+
+ return ImportServersBtnComp;
};
export default ImportServersBtn;