Added button to import servers from CSV file

This commit is contained in:
Alejandro Celaya 2018-08-20 17:31:45 +02:00
parent 617a3b767b
commit ac52f55c5e
2 changed files with 45 additions and 10 deletions

View file

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { createServer } from './reducers/server'; import { createServer } from './reducers/server';
import { resetSelectedServer } from './reducers/selectedServer'; import { resetSelectedServer } from './reducers/selectedServer';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { UncontrolledTooltip } from 'reactstrap';
import './CreateServer.scss'; import './CreateServer.scss';
export class CreateServer extends React.Component { export class CreateServer extends React.Component {
@ -14,20 +14,31 @@ export class CreateServer extends React.Component {
apiKey: '', apiKey: '',
}; };
submit = e => {
e.preventDefault();
const { createServer, history: { push } } = this.props;
const server = assoc('id', uuid(), this.state);
createServer(server);
push(`/server/${server.id}/list-short-urls/1`)
};
constructor(props) {
super(props);
this.fileRef = React.createRef();
}
componentDidMount() { componentDidMount() {
this.props.resetSelectedServer(); this.props.resetSelectedServer();
} }
render() { render() {
const submit = e => {
e.preventDefault();
const server = assoc('id', uuid(), this.state);
this.props.createServer(server);
this.props.history.push(`/server/${server.id}/list-short-urls/1`)
};
const renderInputGroup = (id, placeholder, type = 'text') => const renderInputGroup = (id, placeholder, type = 'text') =>
<div className="form-group row"> <div className="form-group row">
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label> <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
{placeholder}:
</label>
<div className="col-lg-11 col-md-10"> <div className="col-lg-11 col-md-10">
<input <input
type={type} type={type}
@ -43,13 +54,31 @@ export class CreateServer extends React.Component {
return ( return (
<div className="create-server"> <div className="create-server">
<form onSubmit={submit}> <form onSubmit={this.submit}>
{renderInputGroup('name', 'Name')} {renderInputGroup('name', 'Name')}
{renderInputGroup('url', 'URL', 'url')} {renderInputGroup('url', 'URL', 'url')}
{renderInputGroup('apiKey', 'API key')} {renderInputGroup('apiKey', 'API key')}
<div className="text-right"> <div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create server</button> <button
type="button"
className="btn btn-outline-secondary mr-2"
onClick={() => this.fileRef.current.click()}
id="importBtn"
>
Import from file
</button>
<UncontrolledTooltip placement="top" target="importBtn">
You can create servers by importing a CSV file with columns "name", "apiKey" and "url"
</UncontrolledTooltip>
<input
type="file"
onChange={file => console.log(file)}
accept="text/csv"
className="create-server__csv-select"
ref={this.fileRef}
/>
<button className="btn btn-outline-primary">Create server</button>
</div> </div>
</form> </form>
</div> </div>

View file

@ -12,3 +12,9 @@
text-align: right; text-align: right;
} }
} }
.create-server__csv-select {
position: absolute;
left: -9999px;
top: -9999px;
}