Updating slack import UI with states

web/react/components/setting_upload.jsx

@@ -7,29 +7,31 @@ export default class SettingsUpload extends React.Component {
 
         this.doFileSelect = this.doFileSelect.bind(this);
         this.doSubmit = this.doSubmit.bind(this);
-        this.onFileSelect = this.onFileSelect.bind(this);
 
         this.state = {
             clientError: this.props.clientError,
             serverError: this.props.serverError,
-            fileSelected: ''
+            filename: ''
         };
     }
 
     componentWillReceiveProps() {
         this.setState({
             clientError: this.props.clientError,
-            serverError: this.props.serverError,
+            serverError: this.props.serverError
-            fileSelected: ''
         });
     }
 
     doFileSelect(e) {
         e.preventDefault();
+        var filename = $(e.target).val();
+        if (filename.substring(3, 11) === 'fakepath') {
+            filename = filename.substring(12);
+        }
         this.setState({
             clientError: '',
             serverError: '',
-            fileSelected: ''
+            filename
         });
     }
 
@@ -43,71 +45,28 @@ export default class SettingsUpload extends React.Component {
         }
     }
 
-    onFileSelect(e) {
-        var filename = $(e.target).val();
-        if (filename.substring(3, 11) === 'fakepath') {
-            filename = filename.substring(12);
-        }
-        this.setState({
-            fileSelected: filename
-        });
-    }
-
     render() {
-        var clientError = null;
+        let clientError = null;
         if (this.state.clientError) {
             clientError = (
                 <div className='file-status'>{this.state.clientError}</div>
             );
         }
-        var serverError = null;
+        let serverError = null;
         if (this.state.serverError) {
             serverError = (
                 <div className='file-status'>{this.state.serverError}</div>
             );
         }
-        var fileSelected = (
+        let fileNameText = null;
-            <div>
+        let submitButtonClass = 'btn btn-sm btn-primary disabled';
-                <span className='btn btn-sm btn-primary btn-file sel-btn'>
+        if (this.state.filename) {
-                    {'Select file'}
+            fileNameText = (
-                    <input
+                <div className='file-status file-name'>{this.state.filename}</div>
-                        ref='uploadinput'
-                        accept={this.props.fileTypesAccepted}
-                        type='file'
-                        onChange={this.onFileSelect}
-                    />
-                </span>
-                <a
-                    className={'btn btn-sm btn-primary disabled'}
-                    onClick={this.doSubmit}
-                >
-                    {'Import'}
-                </a>
-                <div className='file-status file-name hidden'></div>
-            </div>
-        );
-        if (this.state.fileSelected) {
-            fileSelected = (
-                <div>
-                    <span className='btn btn-sm btn-primary btn-file sel-btn'>
-                        {'Select file'}
-                        <input
-                            ref='uploadinput'
-                            accept={this.props.fileTypesAccepted}
-                            type='file'
-                            onChange={this.onFileSelect}
-                        />
-                    </span>
-                    <a
-                        className={'btn btn-sm btn-primary'}
-                        onClick={this.doSubmit}
-                    >
-                        {'Import'}
-                    </a>
-                    <div className='file-status file-name'>{this.state.fileSelected}</div>
-                </div>
             );
+            submitButtonClass = 'btn btn-sm btn-primary';
         }
+
         return (
             <ul className='section-max'>
                 <li className='col-sm-12 section-title'>{this.props.title}</li>
@@ -115,7 +74,22 @@ export default class SettingsUpload extends React.Component {
                 <li className='col-sm-offset-3 col-sm-9'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
-                            {fileSelected}
+                            <span className='btn btn-sm btn-primary btn-file sel-btn'>
+                                {'Select file'}
+                                <input
+                                    ref='uploadinput'
+                                    accept={this.props.fileTypesAccepted}
+                                    type='file'
+                                    onChange={this.doFileSelect}
+                                />
+                            </span>
+                            <a
+                                className={submitButtonClass}
+                                onClick={this.doSubmit}
+                            >
+                                {'Import'}
+                            </a>
+                            {fileNameText}
                             {serverError}
                             {clientError}
                         </li>
@@ -133,4 +107,4 @@ SettingsUpload.propTypes = {
     clientError: React.PropTypes.string,
     serverError: React.PropTypes.string,
     helpText: React.PropTypes.object
-};
+};