Fix ui handlers & state sync for task enabled checkboxes

Refactor toggle checkbox & delete handlers to typed class
instance methods in KapacitorRulesTable & TasksTable, and
to use traditional, testable JavaScript syntax.

Remove curry in KapacitorRulesPage component methods to
successfully toggle & delete, in accordance with above
refactor.

ui/src/kapacitor/components/KapacitorRulesTable.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, SFC, MouseEvent} from 'react'
+import React, {PureComponent, SFC, ChangeEvent} from 'react'
 import {Link} from 'react-router'
 import _ from 'lodash'
 
@@ -65,15 +65,28 @@ const KapacitorRulesTable: SFC<KapacitorRulesTableProps> = ({
   </table>
 )
 
-const handleDelete = (rule, onDelete) => onDelete(rule)
-
 class RuleRow extends PureComponent<RuleRowProps> {
-  handleClickRuleStatusEnabled(_: MouseEvent<HTMLInputElement>) {
+  constructor(props) {
-    return (rule: AlertRule) => this.props.onChangeRuleStatus(rule)
+    super(props)
+
+    this.handleClickRuleStatusEnabled = this.handleClickRuleStatusEnabled.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
+  handleClickRuleStatusEnabled(rule: AlertRule) {
+    return (_: ChangeEvent<HTMLInputElement>) => {
+      this.props.onChangeRuleStatus(rule)
+    }
+  }
+
+  handleDelete(rule: AlertRule) {
+    return () => {
+      this.props.onDelete(rule)
+    }
   }
 
   render() {
-    const {rule, source, onDelete} = this.props
+    const {rule, source} = this.props
 
     return (
       <tr key={rule.id}>
@@ -93,8 +106,8 @@ class RuleRow extends PureComponent<RuleRowProps> {
               id={`kapacitor-rule-row-task-enabled ${rule.id}`}
               className="form-control-static"
               type="checkbox"
-              defaultChecked={rule.status === 'enabled'}
+              checked={rule.status === 'enabled'}
-              onClick={this.handleClickRuleStatusEnabled}
+              onChange={this.handleClickRuleStatusEnabled(rule)}
             />
             <label htmlFor={`kapacitor-rule-row-task-enabled ${rule.id}`} />
           </div>
@@ -105,7 +118,7 @@ class RuleRow extends PureComponent<RuleRowProps> {
             type="btn-danger"
             size="btn-xs"
             customClass="table--show-on-row-hover"
-            confirmAction={handleDelete(rule, onDelete)}
+            confirmAction={this.handleDelete(rule)}
           />
         </td>
       </tr>

ui/src/kapacitor/components/TasksTable.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, SFC, MouseEvent} from 'react'
+import React, {PureComponent, SFC, ChangeEvent} from 'react'
 import {Link} from 'react-router'
 import _ from 'lodash'
 
@@ -55,15 +55,24 @@ const TasksTable: SFC<TasksTableProps> = ({
   </table>
 )
 
-const handleDelete = (task, onDelete) => onDelete(task)
 
 class TaskRow extends PureComponent<TaskRowProps> {
-  handleClickRuleStatusEnabled(_: MouseEvent<HTMLInputElement>) {
+  handleClickRuleStatusEnabled(task: AlertRule) {
-    return (rule: AlertRule) => this.props.onChangeRuleStatus(rule)
+    return (_: ChangeEvent<HTMLInputElement>) => {
+      console.log('TaskRow toggle', task)
+      this.props.onChangeRuleStatus(task)
+    }
+  }
+
+  handleDelete(task: AlertRule) {
+    return () => {
+      console.log('TaskRow delete', task)
+      this.props.onDelete(task)
+    }
   }
 
   render() {
-    const {task, source, onDelete} = this.props
+    const {task, source} = this.props
 
     return (
       <tr key={task.id}>
@@ -84,8 +93,8 @@ class TaskRow extends PureComponent<TaskRowProps> {
               id={`kapacitor-task-row-task-enabled ${task.id}`}
               className="form-control-static"
               type="checkbox"
-              defaultChecked={task.status === 'enabled'}
+              checked={task.status === 'enabled'}
-              onClick={this.handleClickRuleStatusEnabled}
+              onChange={this.handleClickRuleStatusEnabled(task)}
             />
             <label htmlFor={`kapacitor-task-row-task-enabled ${task.id}`} />
           </div>
@@ -96,7 +105,7 @@ class TaskRow extends PureComponent<TaskRowProps> {
             type="btn-danger"
             size="btn-xs"
             customClass="table--show-on-row-hover"
-            confirmAction={handleDelete(task, onDelete)}
+            confirmAction={this.handleDelete(task)}
           />
         </td>
       </tr>

ui/src/kapacitor/containers/KapacitorRulesPage.js

@@ -25,12 +25,13 @@ class KapacitorRulesPage extends Component {
     this.setState({loading: false, hasKapacitor: !!kapacitor})
   }
 
-  handleDeleteRule = rule => () => {
+  handleDeleteRule = rule => {
     const {actions} = this.props
+
     actions.deleteRule(rule)
   }
 
-  handleRuleStatus = rule => () => {
+  handleRuleStatus = rule => {
     const {actions} = this.props
     const status = rule.status === 'enabled' ? 'disabled' : 'enabled'