use redux for write form

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

@@ -23,6 +23,14 @@ export function deleteQuery(queryID) {
   }
 }
 
+export function showWriteForm() {
+  return {type: 'SHOW_WRITE_FORM'}
+}
+
+export function hideWriteForm() {
+  return {type: 'HIDE_WRITE_FORM'}
+}
+
 export function toggleField(queryId, fieldFunc, isKapacitorRule) {
   return {
     type: 'TOGGLE_FIELD',

ui/src/data_explorer/components/WriteDataForm.js

@@ -0,0 +1,15 @@
+import React, {PropTypes} from 'react'
+
+const WriteDataForm = ({onClose}) => (
+  <div>
+    <a onClick={onClose}>Click Me</a>
+  </div>
+)
+
+const {func} = PropTypes
+
+WriteDataForm.propTypes = {
+  onClose: func.isRequired,
+}
+
+export default WriteDataForm

ui/src/data_explorer/containers/DataExplorer.js

@@ -1,4 +1,4 @@
-import React, {Component, PropTypes} from 'react'
+import React, {PropTypes} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
@@ -6,6 +6,7 @@ import _ from 'lodash'
 
 import QueryMaker from '../components/QueryMaker'
 import Visualization from '../components/Visualization'
+import WriteDataForm from '../components/WriteDataForm'
 import Header from '../containers/Header'
 import ResizeContainer from 'shared/components/ResizeContainer'
 import OverlayTechnologies from 'shared/components/OverlayTechnologies'
@@ -15,7 +16,7 @@ import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from '../constants'
 import {setAutoRefresh} from 'shared/actions/app'
 import * as viewActions from 'src/data_explorer/actions/view'
 
-const {arrayOf, func, number, shape, string} = PropTypes
+const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 const DataExplorer = React.createClass({
   propTypes: {
@@ -37,7 +38,10 @@ const DataExplorer = React.createClass({
       lower: string,
     }).isRequired,
     setTimeRange: func.isRequired,
+    hideWriteFormAction: func.isRequired,
+    showWriteFormAction: func.isRequired,
     dataExplorer: shape({
+      showWriteForm: bool.isRequired,
       queryIDs: arrayOf(string).isRequired,
     }).isRequired,
   },
@@ -58,7 +62,6 @@ const DataExplorer = React.createClass({
   getInitialState() {
     return {
       activeQueryIndex: 0,
-      isWriting: false,
     }
   },
 
@@ -72,10 +75,6 @@ const DataExplorer = React.createClass({
     this.props.queryConfigActions.deleteQuery(query.id)
   },
 
-  summonOverlayTechnologies() {
-    this.setState({isWriting: true})
-  },
-
   render() {
     const {
       autoRefresh,
@@ -85,17 +84,24 @@ const DataExplorer = React.createClass({
       queryConfigs,
       queryConfigActions,
       source,
+      hideWriteFormAction,
+      showWriteFormAction,
+      dataExplorer: {showWriteForm},
     } = this.props
-    const {activeQueryIndex, isWriting} = this.state
+    const {activeQueryIndex} = this.state
 
     return (
       <div className="data-explorer">
-        {isWriting ? <OverlayTechnologies><Foo /></OverlayTechnologies> : null}
+        {showWriteForm
+          ? <OverlayTechnologies>
+              <WriteDataForm onClose={hideWriteFormAction} />
+            </OverlayTechnologies>
+          : null}
         <Header
           actions={{handleChooseAutoRefresh, setTimeRange}}
           autoRefresh={autoRefresh}
           timeRange={timeRange}
-          onSummonOverlayTechnologies={this.summonOverlayTechnologies}
+          showWriteFormAction={showWriteFormAction}
         />
         <ResizeContainer
           containerClass="page-contents"
@@ -133,17 +139,17 @@ const DataExplorer = React.createClass({
 function mapStateToProps(state) {
   const {
     app: {persisted: {autoRefresh}},
-    timeRange,
-    queryConfigs,
     dataExplorer,
+    queryConfigs,
+    timeRange,
   } = state
   const queryConfigValues = _.values(queryConfigs)
 
   return {
     autoRefresh,
-    timeRange,
-    queryConfigs: queryConfigValues,
     dataExplorer,
+    queryConfigs: queryConfigValues,
+    timeRange,
   }
 }
 
@@ -151,18 +157,16 @@ function mapDispatchToProps(dispatch) {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     setTimeRange: bindActionCreators(viewActions.setTimeRange, dispatch),
+    showWriteFormAction: bindActionCreators(
+      viewActions.showWriteForm,
+      dispatch
+    ),
+    hideWriteFormAction: bindActionCreators(
+      viewActions.hideWriteForm,
+      dispatch
+    ),
     queryConfigActions: bindActionCreators(viewActions, dispatch),
   }
 }
 
-class Foo extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return <div />
-  }
-}
-
 export default connect(mapStateToProps, mapDispatchToProps)(DataExplorer)

ui/src/data_explorer/containers/Header.js

@@ -15,7 +15,7 @@ const Header = React.createClass({
       setTimeRange: func.isRequired,
     }),
     autoRefresh: number.isRequired,
-    onSummonOverlayTechnologies: func,
+    showWriteFormAction: func.isRequired,
     timeRange: shape({
       lower: string,
       upper: string,
@@ -36,7 +36,7 @@ const Header = React.createClass({
     const {
       autoRefresh,
       actions: {handleChooseAutoRefresh},
-      onSummonOverlayTechnologies,
+      showWriteFormAction,
       timeRange,
     } = this.props
 
@@ -51,10 +51,7 @@ const Header = React.createClass({
           <div className="page-header__right">
             <GraphTips />
             <SourceIndicator sourceName={this.context.source.name} />
-            <div
-              className="btn btn-sm btn-info"
-              onClick={onSummonOverlayTechnologies}
-            >
+            <div className="btn btn-sm btn-info" onClick={showWriteFormAction}>
               <span className="icon pencil" />
               Write Data
             </div>

ui/src/data_explorer/reducers/ui.js

@@ -21,6 +21,14 @@ export default function ui(state = initialState, action) {
 
       return {...state, ...newState}
     }
+
+    case 'SHOW_WRITE_FORM': {
+      return {...state, showWriteForm: true}
+    }
+
+    case 'HIDE_WRITE_FORM': {
+      return {...state, showWriteForm: false}
+    }
   }
 
   return state