Updated ImportServersBtn to be a functional component

This commit is contained in:
Alejandro Celaya 2020-05-31 09:58:22 +02:00
parent 4bd83eecfb
commit d7e3b7b912

View file

@ -1,25 +1,17 @@
import React from 'react'; import React, { useRef } from 'react';
import { UncontrolledTooltip } from 'reactstrap'; import { UncontrolledTooltip } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component { const propTypes = {
static defaultProps = { onImport: PropTypes.func,
onImport: () => ({}), createServers: PropTypes.func,
}; fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
static propTypes = { };
onImport: PropTypes.func,
createServers: PropTypes.func,
fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
};
constructor(props) { // FIXME Replace with typescript: (ServersImporter)
super(props); const ImportServersBtn = ({ importServersFromFile }) => {
this.fileRef = props.fileRef || React.createRef(); const ImportServersBtnComp = ({ createServers, fileRef, onImport = () => {} }) => {
} const ref = fileRef || useRef();
render() {
const { importServersFromFile } = serversImporter;
const { onImport, createServers } = this.props;
const onChange = ({ target }) => const onChange = ({ target }) =>
importServersFromFile(target.files[0]) importServersFromFile(target.files[0])
.then(createServers) .then(createServers)
@ -35,24 +27,22 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
type="button" type="button"
className="btn btn-outline-secondary mr-2" className="btn btn-outline-secondary mr-2"
id="importBtn" id="importBtn"
onClick={() => this.fileRef.current.click()} onClick={() => ref.current.click()}
> >
Import from file Import from file
</button> </button>
<UncontrolledTooltip placement="top" target="importBtn"> <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> </UncontrolledTooltip>
<input <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
type="file"
accept="text/csv"
className="create-server__csv-select"
ref={this.fileRef}
onChange={onChange}
/>
</React.Fragment> </React.Fragment>
); );
} };
ImportServersBtnComp.propTypes = propTypes;
return ImportServersBtnComp;
}; };
export default ImportServersBtn; export default ImportServersBtn;