move error handling to thunk

ui/src/data_explorer/actions/view/index.js

@@ -1,8 +1,10 @@
 import uuid from 'node-uuid'
 
 import {getQueryConfig} from 'shared/apis'
+import {writeData} from 'src/data_explorer/apis'
 
 import {errorThrown} from 'shared/actions/errors'
+import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 export function addQuery(options = {}) {
   return {
@@ -160,3 +162,18 @@ export const editRawTextAsync = (url, id, text) => async dispatch => {
     dispatch(errorThrown(error))
   }
 }
+
+export const writeDataAsync = (source, db, data) => async dispatch => {
+  try {
+    await writeData(source, db, data)
+    dispatch(
+      publishAutoDismissingNotification(
+        'success',
+        'Data was written successfully'
+      )
+    )
+  } catch (response) {
+    dispatch(errorThrown(response, response.data.error))
+    throw response
+  }
+}

ui/src/data_explorer/components/WriteDataForm.js

@@ -1,14 +1,8 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 
 import DatabaseDropdown from 'shared/components/DatabaseDropdown'
 import OnClickOutside from 'shared/components/OnClickOutside'
 
-import {writeData} from 'src/data_explorer/apis'
-import {publishAutoDismissingNotification} from 'shared/dispatchers'
-import {errorThrown as errorThrownAction} from 'shared/actions/errors'
-
 class WriteDataForm extends Component {
   constructor(props) {
     super(props)
@@ -17,7 +11,6 @@ class WriteDataForm extends Component {
     }
 
     this.handleSelectDatabase = ::this.handleSelectDatabase
-    this.handleError = ::this.handleError
     this.handleWrite = ::this.handleWrite
     this.handleClickOutside = ::this.handleClickOutside
   }
@@ -26,30 +19,19 @@ class WriteDataForm extends Component {
     this.setState({selectedDatabase: item.text})
   }
 
-  handleError(error) {
-    const {errorThrown} = this.props
-    errorThrown(error)
-  }
-
   handleClickOutside() {
     const {onClose} = this.props
     onClose()
   }
 
-  async handleWrite() {
-    const {onClose, source, notify, errorThrown} = this.props
+  handleWrite() {
+    const {onClose, source, writeData} = this.props
     const {selectedDatabase} = this.state
-    try {
-      await writeData(source, selectedDatabase, this.editor.value)
-      notify('success', 'Data was written successfully')
-      onClose()
-    } catch (response) {
-      errorThrown(response, response.data.error)
-    }
+    writeData(source, selectedDatabase, this.editor.value).then(() => onClose())
   }
 
   render() {
-    const {onClose} = this.props
+    const {onClose, errorThrown} = this.props
     const {selectedDatabase} = this.state
 
     return (
@@ -60,7 +42,7 @@ class WriteDataForm extends Component {
             <DatabaseDropdown
               onSelectDatabase={this.handleSelectDatabase}
               database={selectedDatabase}
-              onErrorThrown={this.handleError}
+              onErrorThrown={errorThrown}
             />
           </div>
           <div className="page-header__right">
@@ -105,14 +87,9 @@ WriteDataForm.propTypes = {
       queries: string.isRequired,
     }).isRequired,
   }).isRequired,
-  notify: func.isRequired,
-  errorThrown: func.isRequired,
   onClose: func.isRequired,
+  writeData: func.isRequired,
+  errorThrown: func.isRequired,
 }
 
-const mapDispatchToProps = dispatch => ({
-  notify: bindActionCreators(publishAutoDismissingNotification, dispatch),
-  errorThrown: bindActionCreators(errorThrownAction, dispatch),
-})
-
-export default connect(null, mapDispatchToProps)(OnClickOutside(WriteDataForm))
+export default OnClickOutside(WriteDataForm)

ui/src/data_explorer/containers/DataExplorer.js

@@ -13,6 +13,7 @@ import OverlayTechnologies from 'shared/components/OverlayTechnologies'
 
 import {VIS_VIEWS} from 'shared/constants'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from '../constants'
+import {errorThrown} from 'shared/actions/errors'
 import {setAutoRefresh} from 'shared/actions/app'
 import * as viewActions from 'src/data_explorer/actions/view'
 
@@ -42,6 +43,8 @@ const DataExplorer = React.createClass({
       showWriteForm: bool.isRequired,
       queryIDs: arrayOf(string).isRequired,
     }).isRequired,
+    writeData: func.isRequired,
+    errorThrownAction: func.isRequired,
   },
 
   childContextTypes: {
@@ -77,12 +80,14 @@ const DataExplorer = React.createClass({
   render() {
     const {
       autoRefresh,
+      errorThrownAction,
       handleChooseAutoRefresh,
       timeRange,
       setTimeRange,
       queryConfigs,
       queryConfigActions,
       source,
+      writeData,
     } = this.props
     const {activeQueryIndex, showWriteForm} = this.state
 
@@ -91,8 +96,10 @@ const DataExplorer = React.createClass({
         {showWriteForm
           ? <OverlayTechnologies>
               <WriteDataForm
+                errorThrown={errorThrownAction}
                 onClose={() => this.setState({showWriteForm: false})}
                 source={source}
+                writeData={writeData}
               />
             </OverlayTechnologies>
           : null}
@@ -155,7 +162,9 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
+    errorThrownAction: bindActionCreators(errorThrown, dispatch),
     setTimeRange: bindActionCreators(viewActions.setTimeRange, dispatch),
+    writeData: bindActionCreators(viewActions.writeDataAsync, dispatch),
     queryConfigActions: bindActionCreators(viewActions, dispatch),
   }
 }