From 1a8d2dd625c5c1c53abbc2bfb07b8eee83e544bd Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 16:25:07 -0700
Subject: [PATCH] Update DataExplorer to extend Component

---
 .../data_explorer/containers/DataExplorer.js  | 113 +++++++++---------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 5ec4ee93f8..588384aa5e 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
@@ -18,64 +18,29 @@ import {setAutoRefresh} from 'shared/actions/app'
 import * as dataExplorerActionCreators from 'src/data_explorer/actions/view'
 import {writeLineProtocolAsync} from 'src/data_explorer/actions/view/write'
 
-const {arrayOf, func, number, shape, string} = PropTypes
+class DataExplorer extends Component {
+  constructor(props) {
+    super(props)
 
-const DataExplorer = React.createClass({
-  propTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-        self: string.isRequired,
-        queries: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    queryConfigs: arrayOf(shape({})).isRequired,
-    queryConfigActions: shape({
-      editQueryStatus: func.isRequired,
-    }).isRequired,
-    autoRefresh: number.isRequired,
-    handleChooseAutoRefresh: func.isRequired,
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    setTimeRange: func.isRequired,
-    dataExplorer: shape({
-      queryIDs: arrayOf(string).isRequired,
-    }).isRequired,
-    writeLineProtocol: func.isRequired,
-    errorThrownAction: func.isRequired,
-  },
-
-  childContextTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-        self: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-  },
-
-  getChildContext() {
-    return {source: this.props.source}
-  },
-
-  getInitialState() {
-    return {
+    this.state = {
       activeQueryIndex: 0,
       showWriteForm: false,
     }
-  },
+  }
+
+  getChildContext() {
+    return {source: this.props.source}
+  }
 
   handleSetActiveQueryIndex(index) {
     this.setState({activeQueryIndex: index})
-  },
+  }
 
   handleDeleteQuery(index) {
-    const {queryConfigs} = this.props
+    const {queryConfigs, queryConfigActions} = this.props
     const query = queryConfigs[index]
-    this.props.queryConfigActions.deleteQuery(query.id)
-  },
+    queryConfigActions.deleteQuery(query.id)
+  }
 
   render() {
     const {
@@ -89,6 +54,7 @@ const DataExplorer = React.createClass({
       source,
       writeLineProtocol,
     } = this.props
+
     const {activeQueryIndex, showWriteForm} = this.state
     const selectedDatabase = _.get(
       queryConfigs,
@@ -129,8 +95,8 @@ const DataExplorer = React.createClass({
             autoRefresh={autoRefresh}
             timeRange={timeRange}
             isInDataExplorer={true}
-            setActiveQueryIndex={this.handleSetActiveQueryIndex}
-            onDeleteQuery={this.handleDeleteQuery}
+            setActiveQueryIndex={::this.handleSetActiveQueryIndex}
+            onDeleteQuery={::this.handleDeleteQuery}
             activeQueryIndex={activeQueryIndex}
           />
           <Visualization
@@ -145,10 +111,47 @@ const DataExplorer = React.createClass({
         </ResizeContainer>
       </div>
     )
-  },
-})
+  }
+}
 
-function mapStateToProps(state) {
+const {arrayOf, func, number, shape, string} = PropTypes
+
+DataExplorer.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+      queries: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  queryConfigs: arrayOf(shape({})).isRequired,
+  queryConfigActions: shape({
+    editQueryStatus: func.isRequired,
+  }).isRequired,
+  autoRefresh: number.isRequired,
+  handleChooseAutoRefresh: func.isRequired,
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  setTimeRange: func.isRequired,
+  dataExplorer: shape({
+    queryIDs: arrayOf(string).isRequired,
+  }).isRequired,
+  writeLineProtocol: func.isRequired,
+  errorThrownAction: func.isRequired,
+}
+
+DataExplorer.childContextTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+}
+
+const mapStateToProps = state => {
   const {
     app: {persisted: {autoRefresh}},
     dataExplorer,
@@ -165,7 +168,7 @@ function mapStateToProps(state) {
   }
 }
 
-function mapDispatchToProps(dispatch) {
+const mapDispatchToProps = dispatch => {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     errorThrownAction: bindActionCreators(errorThrown, dispatch),