Added button to import servers from CSV file

src/servers/CreateServer.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createServer } from './reducers/server';
 import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
-
+import { UncontrolledTooltip } from 'reactstrap';
 import './CreateServer.scss';
 
 export class CreateServer extends React.Component {
@@ -14,20 +14,31 @@ export class CreateServer extends React.Component {
     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() {
     this.props.resetSelectedServer();
   }
 
   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') =>
       <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">
           <input
             type={type}
@@ -43,13 +54,31 @@ export class CreateServer extends React.Component {
 
     return (
       <div className="create-server">
-        <form onSubmit={submit}>
+        <form onSubmit={this.submit}>
           {renderInputGroup('name', 'Name')}
           {renderInputGroup('url', 'URL', 'url')}
           {renderInputGroup('apiKey', 'API key')}
 
           <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>
         </form>
       </div>

src/servers/CreateServer.scss

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