Update SourcePage to use new SourceForm format

ui/src/sources/containers/CreateSource.js

@@ -84,6 +84,7 @@ class CreateSource extends Component {
         this.setState({source: sourceFromServer, isCreated: true})
       })
       .catch(({data: error}) => {
+        // dont want to flash this until they submit
         this.setState({error: error.message})
       })
   }

ui/src/sources/containers/SourcePage.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {withRouter} from 'react-router'
 import {getSource} from 'shared/apis'
 import {createSource, updateSource} from 'shared/apis'
@@ -6,62 +6,62 @@ import {
   addSource as addSourceAction,
   updateSource as updateSourceAction,
 } from 'shared/actions/sources'
+import {publishNotification} from 'shared/actions/notifications'
 import {connect} from 'react-redux'
 
 import SourceForm from 'src/sources/components/SourceForm'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import SourceIndicator from 'shared/components/SourceIndicator'
 
-const {func, shape, string} = PropTypes
+class SourcePage extends Component {
+  constructor(props) {
+    super(props)
 
-export const SourcePage = React.createClass({
-  propTypes: {
-    params: shape({
-      id: string,
-      sourceID: string,
-    }),
-    router: shape({
-      push: func.isRequired,
-    }).isRequired,
-    location: shape({
-      query: shape({
-        redirectPath: string,
-      }).isRequired,
-    }).isRequired,
-    addFlashMessage: func.isRequired,
-    addSourceAction: func,
-    updateSourceAction: func,
-  },
-
-  getInitialState() {
-    return {
-      source: {},
+    this.state = {
+      source: {
+        url: 'http://localhost:8086',
+        name: 'Influx 1',
+        username: '',
+        password: '',
+        default: true,
+        telegraf: 'telegraf',
+        insecureSkipVerify: false,
+        metaUrl: '',
+      },
       editMode: this.props.params.id !== undefined,
       error: '',
     }
-  },
+  }
 
   componentDidMount() {
     if (!this.state.editMode) {
       return
     }
+
     getSource(this.props.params.id).then(({data: source}) => {
       this.setState({source})
     })
-  },
+  }
 
-  handleInputChange(e) {
-    const val = e.target.value
+  handleInputChange = e => {
+    let val = e.target.value
     const name = e.target.name
-    this.setState(prevState => {
-      const newSource = Object.assign({}, prevState.source, {
-        [name]: val,
-      })
-      return Object.assign({}, prevState, {source: newSource})
-    })
-  },
 
-  handleBlurSourceURL(newSource) {
+    if (e.target.type === 'checkbox') {
+      val = e.target.checked
+    }
+
+    this.setState(prevState => {
+      const source = {
+        ...prevState.source,
+        [name]: val,
+      }
+
+      return {...prevState, source}
+    })
+  }
+
+  handleBlurSourceURL = newSource => {
     if (this.state.editMode) {
       return
     }
@@ -78,35 +78,46 @@ export const SourcePage = React.createClass({
     createSource(newSource)
       .then(({data: sourceFromServer}) => {
         this.props.addSourceAction(sourceFromServer)
-        this.setState({source: sourceFromServer, error: null})
+        this.setState({source: sourceFromServer, isCreated: true})
       })
       .catch(({data: error}) => {
         // dont want to flash this until they submit
         this.setState({error: error.message})
       })
-  },
+  }
 
-  handleSubmit(newSource) {
-    const {router, params, addFlashMessage} = this.props
-    const {error} = this.state
+  handleSubmit = e => {
+    e.preventDefault()
+    const {router, params, notify} = this.props
+    const {isCreated, source, editMode} = this.state
+    const isNewSource = !editMode
 
-    if (error) {
-      return addFlashMessage({type: 'error', text: error})
+    if (!isCreated && isNewSource) {
+      return createSource(source)
+        .then(({data: sourceFromServer}) => {
+          this.props.addSourceAction(sourceFromServer)
+          router.push(`/sources/${params.sourceID}/manage-sources`)
+        })
+        .catch(({data: error}) => {
+          console.error('Error on source creation: ', error.message)
+          notify(
+            'error',
+            `There was a problem creating source: ${error.message}`
+          )
+        })
     }
 
-    updateSource(newSource)
+    updateSource(source)
       .then(({data: sourceFromServer}) => {
         this.props.updateSourceAction(sourceFromServer)
         router.push(`/sources/${params.sourceID}/manage-sources`)
-        addFlashMessage({type: 'success', text: 'The source info saved'})
+        notify('success', 'The source info saved')
       })
-      .catch(() => {
-        addFlashMessage({
-          type: 'error',
-          text: 'There was a problem updating the source. Check the settings',
-        })
+      .catch(({data: error}) => {
+        console.error('Error on source update', error.message)
+        notify('error', `There was a problem: ${error.message}`)
       })
-  },
+  }
 
   render() {
     const {source, editMode} = this.state
@@ -148,13 +159,33 @@ export const SourcePage = React.createClass({
         </FancyScrollbar>
       </div>
     )
-  },
-})
-
-function mapStateToProps(_) {
-  return {}
+  }
 }
 
-export default connect(mapStateToProps, {addSourceAction, updateSourceAction})(
-  withRouter(SourcePage)
-)
+const {func, shape, string} = PropTypes
+
+SourcePage.propTypes = {
+  params: shape({
+    id: string,
+    sourceID: string,
+  }),
+  router: shape({
+    push: func.isRequired,
+  }).isRequired,
+  location: shape({
+    query: shape({
+      redirectPath: string,
+    }).isRequired,
+  }).isRequired,
+  notify: func,
+  addSourceAction: func,
+  updateSourceAction: func,
+}
+
+const mapStateToProps = () => ({})
+
+export default connect(mapStateToProps, {
+  notify: publishNotification,
+  addSourceAction,
+  updateSourceAction,
+})(withRouter(SourcePage))