refactor selectors

Author: ShMcK

lib/components/Page/Task/index.js

@@ -19,6 +19,7 @@ var index_1 = require('../../index');
 var taskCheckbox_1 = require('./taskCheckbox');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
+var selectors_1 = require('../../../selectors');
 var styles = {
     task: {
         margin: '5px',
@@ -52,6 +53,7 @@ var Task = (function (_super) {
         react_redux_1.connect(function (state, props) { return ({
             testRun: state.testRun,
             isCompletedTask: state.taskPosition > props.index,
+            task: selectors_1.taskByIndexSelector(state, props)
         }); }), 
         __metadata('design:paramtypes', [])
     ], Task);

lib/components/Page/Tasks/index.js

@@ -34,7 +34,9 @@ var Tasks = (function (_super) {
     Tasks.prototype.render = function () {
         var _a = this.props, tasks = _a.tasks, completed = _a.completed;
         var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
-        return (React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), tasks.map(function (task, index) { return (React.createElement(Task_1.default, {key: index, index: index, task: task})); })), React.createElement("div", {ref: 'listEnd'})));
+        return (React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), tasks.map(function (task, index) {
+            return React.createElement(Task_1.default, {key: index, index: index});
+        }), "}"), React.createElement("div", {ref: 'listEnd'})));
     };
     Tasks = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/modules/tutorial/reducer.js

@@ -18,7 +18,6 @@ function tutorialReducer(t, action) {
             var _a = action.payload, name_1 = _a.name, dir = _a.dir;
             var packagePath = path_1.join(dir, 'node_modules', name_1);
             var packageJson = require(path_1.join(packagePath, 'package.json'));
-            console.log(packageJson);
             var config = config_1.tutorialConfig(packageJson, dir);
             var coderoadJsonPath = path_1.join(packagePath, packageJson.main);
             var _b = require(coderoadJsonPath), info = _b.info, pages = _b.pages;

lib/selectors/hints.js

@@ -1,6 +1,6 @@
 "use strict";
 var reselect_1 = require('reselect');
 var tasks_1 = require('./tasks');
-exports.hintsSelector = reselect_1.createSelector(tasks_1.taskSelector, function (task) { return task && task.hints ? task.hints : []; });
+exports.hintsSelector = reselect_1.createSelector(tasks_1.currentTaskSelector, function (task) { return task && task.hints ? task.hints : []; });
 exports.hintSelector = reselect_1.createSelector(exports.hintsSelector, function (state) { return state.hintPosition; }, function (hints, hintPosition) { return (hintPosition >= 0 && hints && hints.length) ?
     hints[hintPosition] : null; });

lib/selectors.js renamed to lib/selectors/index.js

@@ -1,15 +1,15 @@
 "use strict";
-var hints_1 = require('./selectors/hints');
+var hints_1 = require('./hints');
 exports.hintsSelector = hints_1.hintsSelector;
 exports.hintSelector = hints_1.hintSelector;
-var page_1 = require('./selectors/page');
+var page_1 = require('./page');
 exports.pageSelector = page_1.pageSelector;
 exports.pageCompletedSelector = page_1.pageCompletedSelector;
-var tasks_1 = require('./selectors/tasks');
+var tasks_1 = require('./tasks');
 exports.tasksSelector = tasks_1.tasksSelector;
-exports.taskPositionSelector = tasks_1.taskPositionSelector;
-exports.taskSelector = tasks_1.taskSelector;
+exports.currentTaskSelector = tasks_1.currentTaskSelector;
 exports.visibleTasksSelector = tasks_1.visibleTasksSelector;
 exports.taskProgressSelector = tasks_1.taskProgressSelector;
-var packageJson_1 = require('./selectors/packageJson');
+exports.taskByIndexSelector = tasks_1.taskByIndexSelector;
+var packageJson_1 = require('./packageJson');
 exports.configSelector = packageJson_1.configSelector;

lib/selectors/tasks.js

@@ -2,8 +2,8 @@
 var reselect_1 = require('reselect');
 var page_1 = require('./page');
 exports.tasksSelector = reselect_1.createSelector(page_1.pageSelector, function (page) { return page.tasks; });
-exports.taskPositionSelector = function (state) { return state.taskPosition; };
-exports.taskSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return tasks.length && taskPosition <= tasks.length - 1 ?
+exports.currentTaskSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return tasks.length && taskPosition <= tasks.length - 1 ?
     tasks[taskPosition] : null; });
+exports.taskByIndexSelector = reselect_1.createSelector(exports.tasksSelector, function (state, props) { return props.index; }, function (tasks, index) { return tasks[index]; });
 exports.visibleTasksSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return tasks.slice(0, taskPosition + 1); });
 exports.taskProgressSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return (taskPosition / tasks.length) * 100; });

src/components/Page/Task/index.tsx

@@ -4,6 +4,7 @@ import {Markdown} from '../../index';
 import TaskCheckbox from './taskCheckbox';
 import {ListItem} from 'material-ui/List';
 import {lightGreen200, orange200} from 'material-ui/styles/colors';
+import {taskByIndexSelector} from '../../../selectors';
 
 const styles = {
   task: {
@@ -28,9 +29,10 @@ const styles = {
 @connect((state, props) => ({
   testRun: state.testRun,
   isCompletedTask: state.taskPosition > props.index,
+  task: taskByIndexSelector(state, props)
 }))
 export default class Task extends React.Component<{
-  task: CR.Task, index: number, testRun?: boolean,
+  task?: CR.Task, index: number, testRun?: boolean,
   isCurrentTask?: boolean, isCompletedTask?: boolean
 }, {}> {
   render() {

src/components/Page/Tasks/index.tsx

@@ -6,7 +6,7 @@ import {Card} from 'material-ui/Card';
 import Subheader from 'material-ui/Subheader';
 import Task from '../Task';
 import {lightGreen200} from 'material-ui/styles/colors';
-import {visibleTasksSelector, pageCompletedSelector} from '../../../selectors';
+import {pageCompletedSelector, visibleTasksSelector} from '../../../selectors';
 
 const margin = '10px 5px';
 
@@ -32,13 +32,9 @@ export default class Tasks extends React.Component<{
         <List>
           <Subheader>Tasks</Subheader>
 
-          {tasks.map((task: CR.Task, index: number) => (
-            <Task
-              key={index}
-              index={index}
-              task={task}
-            />)
-          )}
+        {tasks.map((task, index: number) => {
+          return <Task key={index} index={index} />;
+        })}}
 
         </List>
         <div ref='listEnd' />

src/modules/tutorial/reducer.ts

@@ -24,7 +24,6 @@ export default function tutorialReducer(
       // get tutorial package.json
       const packagePath: string = join(dir, 'node_modules', name);
       const packageJson: PackageJson = require(join(packagePath, 'package.json'));
-      console.log(packageJson);
 
       const config: Tutorial.Config = tutorialConfig(packageJson, dir);
       const coderoadJsonPath = join(packagePath, packageJson.main);

src/selectors.ts

@@ -1,8 +1,8 @@
 import {createSelector} from 'reselect';
-import {taskSelector} from './tasks';
+import {currentTaskSelector} from './tasks';
 
 export const hintsSelector = createSelector(
-  taskSelector,
+  currentTaskSelector,
   task => task && task.hints ? task.hints : []
 );
 

src/selectors/hints.ts

@@ -0,0 +1,4 @@
+export {hintsSelector, hintSelector} from './hints';
+export {pageSelector, pageCompletedSelector} from './page';
+export {tasksSelector, currentTaskSelector, visibleTasksSelector, taskProgressSelector, taskByIndexSelector} from './tasks';
+export {configSelector} from './packageJson';

src/selectors/index.ts

@@ -6,15 +6,19 @@ export const tasksSelector = createSelector(
   page => page.tasks
 );
 
-export const taskPositionSelector = state => state.taskPosition;
-
-export const taskSelector = createSelector(
+export const currentTaskSelector = createSelector(
   tasksSelector,
   state => state.taskPosition,
   (tasks, taskPosition) => tasks.length && taskPosition <= tasks.length - 1 ?
       tasks[taskPosition] : null
 );
 
+export const taskByIndexSelector = createSelector(
+  tasksSelector,
+  (state, props) => props.index,
+  (tasks, index) => tasks[index]
+);
+
 export const visibleTasksSelector = createSelector(
   tasksSelector,
   state => state.taskPosition,

src/selectors/tasks.ts

@@ -77,8 +77,8 @@
         "src/modules/tutorials/reducer.ts",
         "src/modules/tutorials/types.ts",
         "src/reducers.ts",
-        "src/selectors.ts",
         "src/selectors/hints.ts",
+        "src/selectors/index.ts",
         "src/selectors/packageJson.ts",
         "src/selectors/page.ts",
         "src/selectors/tasks.ts",