Refactor DataSection SFC

ui/src/kapacitor/components/DataSection.js

@@ -1,4 +1,4 @@
-import React, {PropTypes, Component} from 'react'
+import React, {PropTypes} from 'react'
 
 import DatabaseList from 'src/shared/components/DatabaseList'
 import MeasurementList from 'src/shared/components/MeasurementList'
@@ -6,79 +6,88 @@ import FieldList from 'src/shared/components/FieldList'
 
 import {defaultEveryFrequency} from 'src/kapacitor/constants'
 
-class DataSection extends Component {
+const makeQueryHandlers = (actions, query) => ({
-  constructor(props) {
+  handleChooseNamespace: namespace => {
-    super(props)
+    actions.chooseNamespace(query.id, namespace)
-  }
+  },
 
-  handleChooseNamespace = namespace => {
+  handleChooseMeasurement: measurement => {
-    this.props.actions.chooseNamespace(this.props.query.id, namespace)
+    actions.chooseMeasurement(query.id, measurement)
-  }
+  },
 
-  handleChooseMeasurement = measurement => {
+  handleToggleField: onRemoveEvery => field => {
-    this.props.actions.chooseMeasurement(this.props.query.id, measurement)
+    actions.toggleField(query.id, field)
-  }
-
-  handleToggleField = field => {
-    this.props.actions.toggleField(this.props.query.id, field)
     // Every is only added when a function has been added to a field.
     // Here, the field is selected without a function.
-    this.props.onRemoveEvery()
+    onRemoveEvery()
     // Because there are no functions there is no group by time.
-    this.props.actions.groupByTime(this.props.query.id, null)
+    actions.groupByTime(query.id, null)
-  }
+  },
 
-  handleGroupByTime = time => {
+  handleGroupByTime: time => {
-    this.props.actions.groupByTime(this.props.query.id, time)
+    actions.groupByTime(query.id, time)
-  }
+  },
 
-  handleApplyFuncsToField = fieldFunc => {
+  handleApplyFuncsToField: onAddEvery => fieldFunc => {
-    this.props.actions.applyFuncsToField(this.props.query.id, fieldFunc)
+    actions.applyFuncsToField(query.id, fieldFunc)
-    this.props.onAddEvery(defaultEveryFrequency)
+    onAddEvery(defaultEveryFrequency)
-  }
+  },
 
-  handleChooseTag = tag => {
+  handleChooseTag: tag => {
-    this.props.actions.chooseTag(this.props.query.id, tag)
+    actions.chooseTag(query.id, tag)
-  }
+  },
 
-  handleToggleTagAcceptance = () => {
+  handleToggleTagAcceptance: () => {
-    this.props.actions.toggleTagAcceptance(this.props.query.id)
+    actions.toggleTagAcceptance(query.id)
-  }
+  },
 
-  handleGroupByTag = tagKey => {
+  handleGroupByTag: tagKey => {
-    this.props.actions.groupByTag(this.props.query.id, tagKey)
+    actions.groupByTag(query.id, tagKey)
-  }
+  },
+})
 
-  render() {
+const DataSection = ({
-    const {query, isKapacitorRule, isDeadman} = this.props
+  actions,
+  query,
+  isDeadman,
+  isKapacitorRule,
+  onRemoveEvery,
+  onAddEvery,
+}) => {
+  const {
+    handleChooseNamespace,
+    handleChooseMeasurement,
+    handleToggleField,
+    handleGroupByTime,
+    handleApplyFuncsToField,
+    handleChooseTag,
+    handleToggleTagAcceptance,
+    handleGroupByTag,
+  } = makeQueryHandlers(actions, query)
 
-    return (
+  return (
-      <div className="rule-section">
+    <div className="rule-section">
-        <div className="query-builder rule-section--border-bottom">
+      <div className="query-builder rule-section--border-bottom">
-          <DatabaseList
+        <DatabaseList query={query} onChooseNamespace={handleChooseNamespace} />
-            query={query}
+        <MeasurementList
-            onChooseNamespace={this.handleChooseNamespace}
+          query={query}
-          />
+          onChooseMeasurement={handleChooseMeasurement}
-          <MeasurementList
+          onChooseTag={handleChooseTag}
-            query={query}
+          onGroupByTag={handleGroupByTag}
-            onChooseMeasurement={this.handleChooseMeasurement}
+          onToggleTagAcceptance={handleToggleTagAcceptance}
-            onChooseTag={this.handleChooseTag}
+        />
-            onGroupByTag={this.handleGroupByTag}
+        {isDeadman
-            onToggleTagAcceptance={this.handleToggleTagAcceptance}
+          ? null
-          />
+          : <FieldList
-          {isDeadman
+              query={query}
-            ? null
+              onToggleField={handleToggleField(onRemoveEvery)}
-            : <FieldList
+              onGroupByTime={handleGroupByTime}
-                query={query}
+              applyFuncsToField={handleApplyFuncsToField(onAddEvery)}
-                onToggleField={this.handleToggleField}
+              isKapacitorRule={isKapacitorRule}
-                onGroupByTime={this.handleGroupByTime}
+            />}
-                applyFuncsToField={this.handleApplyFuncsToField}
-                isKapacitorRule={isKapacitorRule}
-              />}
-        </div>
       </div>
-    )
+    </div>
-  }
+  )
 }
 
 const {bool, func, shape, string} = PropTypes