Consolidate input state into parent

ui/src/sources/components/SourceForm.js

@@ -8,32 +8,8 @@ class SourceForm extends Component {
     super(props)
   }
 
-  handleSubmitForm = e => {
-    e.preventDefault()
-    const newSource = {
-      ...this.props.source,
-      url: this.sourceURL.value.trim(),
-      name: this.sourceName.value,
-      username: this.sourceUsername.value,
-      password: this.sourcePassword.value,
-      default: this.sourceDefault.checked,
-      telegraf: this.sourceTelegraf.value,
-      insecureSkipVerify: this.sourceInsecureSkipVerify
-        ? this.sourceInsecureSkipVerify.checked
-        : false,
-      metaUrl: this.metaUrl && this.metaUrl.value.trim(),
-    }
-
-    this.props.onSubmit(newSource)
-  }
-
-  handleUseDefaultValues = () => {
-    this.sourceURL.value = 'http://localhost:8086'
-    this.sourceName.value = 'My InfluxDB'
-  }
-
   handleBlurSourceURL = () => {
-    const url = this.sourceURL.value.trim()
+    const url = this.props.source.url.trim()
 
     if (!url) {
       return
@@ -41,32 +17,31 @@ class SourceForm extends Component {
 
     const newSource = {
       ...this.props.source,
-      url: this.sourceURL.value.trim(),
+      url,
     }
 
     this.props.onBlurSourceURL(newSource)
   }
 
   render() {
-    const {source, editMode, onInputChange} = this.props
+    const {source, editMode, onSubmit, onInputChange} = this.props
 
     return (
       <div className="panel-body">
         <h4 className="text-center">Connection Details</h4>
         <br />
 
-        <form onSubmit={this.handleSubmitForm}>
+        <form onSubmit={onSubmit}>
           <div className="form-group col-xs-12 col-sm-6">
             <label htmlFor="connect-string">Connection String</label>
             <input
               type="text"
               name="url"
-              ref={r => (this.sourceURL = r)}
               className="form-control"
               id="connect-string"
               placeholder="Address of InfluxDB"
               onChange={onInputChange}
-              value={source.url || ''}
+              value={source.url}
               onBlur={this.handleBlurSourceURL}
               required={true}
             />
@@ -76,12 +51,11 @@ class SourceForm extends Component {
             <input
               type="text"
               name="name"
-              ref={r => (this.sourceName = r)}
               className="form-control"
               id="name"
               placeholder="Name this source"
               onChange={onInputChange}
-              value={source.name || ''}
+              value={source.name}
               required={true}
             />
           </div>
@@ -90,11 +64,10 @@ class SourceForm extends Component {
             <input
               type="text"
               name="username"
-              ref={r => (this.sourceUsername = r)}
               className="form-control"
               id="username"
               onChange={onInputChange}
-              value={source.username || ''}
+              value={source.username}
             />
           </div>
           <div className="form-group col-xs-12 col-sm-6">
@@ -102,11 +75,10 @@ class SourceForm extends Component {
             <input
               type="password"
               name="password"
-              ref={r => (this.sourcePassword = r)}
               className="form-control"
               id="password"
               onChange={onInputChange}
-              value={source.password || ''}
+              value={source.password}
             />
           </div>
           {_.get(source, 'type', '').includes('enterprise')
@@ -115,12 +87,11 @@ class SourceForm extends Component {
                 <input
                   type="text"
                   name="metaUrl"
-                  ref={r => (this.metaUrl = r)}
                   className="form-control"
                   id="meta-url"
                   placeholder="http://localhost:8091"
                   onChange={onInputChange}
-                  value={source.metaUrl || ''}
+                  value={source.metaUrl}
                 />
               </div>
             : null}
@@ -129,11 +100,10 @@ class SourceForm extends Component {
             <input
               type="text"
               name="telegraf"
-              ref={r => (this.sourceTelegraf = r)}
               className="form-control"
               id="telegraf"
               onChange={onInputChange}
-              value={source.telegraf || 'telegraf'}
+              value={source.telegraf}
             />
           </div>
           <div className="form-group col-xs-12">
@@ -141,8 +111,9 @@ class SourceForm extends Component {
               <input
                 type="checkbox"
                 id="defaultSourceCheckbox"
+                name="default"
                 defaultChecked={source.default}
-                ref={r => (this.sourceDefault = r)}
+                onChange={onInputChange}
               />
               <label htmlFor="defaultSourceCheckbox">
                 Make this the default source
@@ -155,8 +126,9 @@ class SourceForm extends Component {
                   <input
                     type="checkbox"
                     id="insecureSkipVerifyCheckbox"
+                    name="insecureSkipVerify"
                     defaultChecked={source.insecureSkipVerify}
-                    ref={r => (this.sourceInsecureSkipVerify = r)}
+                    onChange={onInputChange}
                   />
                   <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
                 </div>
@@ -176,13 +148,6 @@ class SourceForm extends Component {
               {editMode ? 'Save Changes' : 'Add Source'}
             </button>
             <br />
-            <a
-              href="#"
-              className="btn btn-link btn-sm"
-              onClick={this.handleUseDefaultValues}
-            >
-              Use Default Values
-            </a>
           </div>
         </form>
       </div>

ui/src/sources/containers/CreateSource.js

@@ -20,12 +20,12 @@ class CreateSource extends Component {
     super(props)
     this.state = {
       source: {
-        url: '',
-        name: '',
+        url: 'http://localhost:8086',
+        name: 'Influx 1',
         username: '',
         password: '',
-        default: '',
-        telegraf: '',
+        default: true,
+        telegraf: 'telegraf',
         insecureSkipVerify: false,
         metaUrl: '',
       },
@@ -47,13 +47,20 @@ class CreateSource extends Component {
   }
 
   handleInputChange = e => {
-    const val = e.target.value
+    let val = e.target.value
     const name = e.target.name
+
+    if (e.target.type === 'checkbox') {
+      val = e.target.checked
+    }
+
     this.setState(prevState => {
-      const newSource = Object.assign({}, prevState.source, {
+      const source = {
+        ...prevState.source,
         [name]: val,
-      })
-      return Object.assign({}, prevState, {source: newSource, error: null})
+      }
+
+      return {...prevState, source}
     })
   }
 
@@ -81,12 +88,13 @@ class CreateSource extends Component {
       })
   }
 
-  handleSubmit = newSource => {
+  handleSubmit = e => {
+    e.preventDefault()
     const {notify, updateSource} = this.props
-    const {isCreated} = this.state
+    const {isCreated, source} = this.state
 
     if (!isCreated) {
-      return createSourceAJAX(newSource)
+      return createSourceAJAX(source)
         .then(({data: sourceFromServer}) => {
           this.props.addSource(sourceFromServer)
           this.setState({source: sourceFromServer, error: null})
@@ -101,7 +109,7 @@ class CreateSource extends Component {
         })
     }
 
-    updateSourceAJAX(newSource)
+    updateSourceAJAX(source)
       .then(({data: sourceFromServer}) => {
         updateSource(sourceFromServer)
         this.redirectToApp(sourceFromServer)