refactor TaskCheckbox using selectors

Author: ShMcK

lib/components/Page/Task/index.js

@@ -46,12 +46,11 @@ var Task = (function (_super) {
     Task.prototype.render = function () {
         var _a = this.props, testRun = _a.testRun, task = _a.task, index = _a.index, isCurrentTask = _a.isCurrentTask, isCompletedTask = _a.isCompletedTask;
         var backgroundColor = isCompletedTask ? colors_1.lightGreen200 : 'inherit';
-        return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles.task, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
+        return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles.task, { backgroundColor: backgroundColor })}, React.createElement(taskCheckbox_1.default, {index: index}), React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
     };
     Task = __decorate([
         react_redux_1.connect(function (state, props) { return ({
             testRun: state.testRun,
-            isCurrentTask: state.taskPosition === props.index,
             isCompletedTask: state.taskPosition > props.index,
         }); }), 
         __metadata('design:paramtypes', [])

lib/components/Page/Task/taskCheckbox.js

@@ -1,17 +1,48 @@
 "use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var React = require('react');
+var react_redux_1 = require('react-redux');
 var colors_1 = require('material-ui/styles/colors');
 var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
 var styles = {
-    position: 'absolute',
-    top: '15px'
+    checkbox: {
+        position: 'absolute',
+        top: '15px',
+    },
 };
-function taskCheckbox(isCurrentTask, testRun) {
-    if (!isCurrentTask || !testRun) {
-        return null;
+var TaskCheckbox = (function (_super) {
+    __extends(TaskCheckbox, _super);
+    function TaskCheckbox() {
+        _super.apply(this, arguments);
     }
-    return (React.createElement("span", {style: styles}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500})));
-}
+    TaskCheckbox.prototype.render = function () {
+        var _a = this.props, testRun = _a.testRun, isCurrentTask = _a.isCurrentTask;
+        if (!isCurrentTask || !testRun) {
+            return null;
+        }
+        return React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500, style: styles.checkbox});
+    };
+    TaskCheckbox = __decorate([
+        react_redux_1.connect(function (state, props) { return ({
+            testRun: state.testRun,
+            isCurrentTask: state.taskPosition === props.index,
+        }); }), 
+        __metadata('design:paramtypes', [])
+    ], TaskCheckbox);
+    return TaskCheckbox;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = taskCheckbox;
-;
+exports.default = TaskCheckbox;

src/components/Page/Task/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 import {Markdown} from '../../index';
-import taskCheckbox from './taskCheckbox';
+import TaskCheckbox from './taskCheckbox';
 import {ListItem} from 'material-ui/List';
 import {lightGreen200, orange200} from 'material-ui/styles/colors';
 
@@ -27,7 +27,6 @@ const styles = {
 
 @connect((state, props) => ({
   testRun: state.testRun,
-  isCurrentTask: state.taskPosition === props.index,
   isCompletedTask: state.taskPosition > props.index,
 }))
 export default class Task extends React.Component<{
@@ -42,7 +41,7 @@ export default class Task extends React.Component<{
         key={index}
         style={Object.assign({}, styles.task, {backgroundColor})}
       >
-        {taskCheckbox(isCurrentTask, testRun)}
+        <TaskCheckbox index={index} />
         <span style={styles.index}>{index + 1}.</span>
         <div style={styles.description}>
           <Markdown >{task.description}</Markdown>

src/components/Page/Task/taskCheckbox.tsx

@@ -1,19 +1,30 @@
 import * as React from 'react';
+import {connect} from 'react-redux';
 import {green500, orange500} from 'material-ui/styles/colors';
 import CheckBox from 'material-ui/svg-icons/toggle/check-box';
 import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
 import IndeterminateCheckBox from 'material-ui/svg-icons/toggle/indeterminate-check-box';
 
 const styles = {
-  position: 'absolute',
-  top: '15px'
+  checkbox: {
+    position: 'absolute',
+    top: '15px',
+  },
 };
 
-export default function taskCheckbox(isCurrentTask: boolean, testRun: boolean) {
-  if (!isCurrentTask || !testRun) { return null; }
-  return (
-    <span style={styles}>
-      <IndeterminateCheckBox color={orange500} />
-    </span>
-  );
-};
+@connect((state, props) => ({
+  testRun: state.testRun,
+  isCurrentTask: state.taskPosition === props.index,
+}))
+export default class TaskCheckbox extends React.Component<{
+  testRun?: boolean, isCurrentTask?: boolean, index: number
+}, {}> {
+  render() {
+    const {testRun, isCurrentTask} = this.props;
+    if (!isCurrentTask || !testRun) { return null; }
+    return <IndeterminateCheckBox
+      color={orange500}
+      style={styles.checkbox}
+    />;
+  }
+}

tsconfig.json

@@ -109,7 +109,7 @@
         "src/components/Page/PageToolbar/ToggleDevTools/index.tsx",
         "src/components/Page/ProgressBar/index.tsx",
         "src/components/Page/Task/index.tsx",
-        "src/components/Page/Task/taskCheckbox.tsx",
+        "src/components/Page/Task/TaskCheckbox.tsx",
         "src/components/Page/Tasks/index.tsx",
         "src/components/Page/TasksComplete/index.tsx",
         "src/components/Progress/index.tsx",