reselect selectors

Author: ShMcK

lib/modules/tutorial/reducer.js

@@ -19,6 +19,7 @@ function tutorialReducer(tutorial, action) {
             var packageJson = require(path_1.join(packagePath, 'package.json'));
             var config = config_1.tutorialConfig(packageJson, dir);
             var _b = require(path_1.join(packagePath, packageJson.main)), info = _b.info, pages = _b.pages;
+            console.log(packageJson, packageJson.name);
             pages = config_paths_1.default(dir, title, config, pages || []);
             return {
                 title: packageJson.name,

lib/selectors.js

@@ -0,0 +1 @@
+"use strict";

package.json

@@ -42,7 +42,8 @@
     "redux": "3.5.2",
     "redux-logger": "2.6.1",
     "redux-throttle-actions": "1.0.1",
-    "redux-thunk": "2.1.0"
+    "redux-thunk": "2.1.0",
+    "reselect": "^2.5.1"
   },
   "engines": {
     "atom": ">=1.0.0 <2.0.0"

src/modules/page/Continue/index.tsx renamed to src/components/Page/Continue/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 import RaisedButton from 'material-ui/RaisedButton';
-import {pageNext} from '../actions';
+import {pageNext} from '../../../actions';
 
 const styles = {
   zIndex: '10000',
@@ -12,11 +12,9 @@ const styles = {
   top: '10px',
 };
 
-@connect(null, (dispatch, state) => {
-  return {
-    callNextPage: () => dispatch(pageNext())
-  };
-})
+@connect(null, dispatch => ({
+  callNextPage: () => dispatch(pageNext())
+}))
 export default class Continue extends React.Component<{
   callNextPage?: any
 }, {}> {

src/components/Page/Tasks/index.tsx

@@ -7,10 +7,6 @@ import Task from '../Task';
 import {lightGreen200} from 'material-ui/styles/colors';
 import TasksComplete from '../TasksComplete';
 
-function visibleTasks(tasks: CR.Task[], taskPosition: number): CR.Task[] {
-  return tasks.slice(0, taskPosition + 1);
-}
-
 const margin = '10px 5px';
 
 export default class Tasks extends React.Component<{
@@ -24,15 +20,19 @@ export default class Tasks extends React.Component<{
   componentDidUpdate() {
     ReactDOM.findDOMNode<HTMLElement>(this.refs.listEnd).scrollIntoView();
   }
+  visibleTasks(tasks: CR.Task[], taskPosition: number): CR.Task[] {
+    return tasks.slice(0, taskPosition + 1);
+  }
   render() {
     const {tasks, taskPosition, testRun, completed, page} = this.props;
-    const visTasks = visibleTasks(tasks, taskPosition);
+    const visTasks = this.visibleTasks(tasks, taskPosition);
     const backgroundColor = completed ? lightGreen200 : 'white';
     return (
     <div>
       <Card style={{backgroundColor, margin}}>
         <List>
           <Subheader>Tasks</Subheader>
+
           {visTasks.map((task: CR.Task, index: number) => (
             <Task
               key={index}
@@ -42,6 +42,7 @@ export default class Tasks extends React.Component<{
               testRun={testRun}
             />)
           )}
+
         </List>
       </Card>
 

src/components/Page/index.tsx

@@ -7,19 +7,20 @@ import Tasks from './Tasks';
 import Hints from './Hints';
 import PageToolbar from './PageToolbar';
 import ProgressBar from './ProgressBar';
+import {pageSelector, tasksSelector} from '../../selectors';
 
 const styles = {
   width: '100%',
   overflowY: 'scroll',
 };
 
 @connect(state => ({
-  page: state.page,
-  tasks: state.tasks,
-  taskPosition: state.taskPosition,
-  hintPosition: state.hintPosition,
+  page: pageSelector(state),
+  tasks: tasksSelector(state),
   testRun: state.testRun,
   progress: state.progress,
+  taskPosition: state.taskPosition,
+  hintPosition: state.hintPosition,
   pagePosition: state.pagePosition,
 }))
 export default class Page extends React.Component<{

src/components/Tutorials/SelectTutorial/index.tsx

@@ -16,7 +16,7 @@ function displayName(name: string): string {
   selectTutorial: (title: string) => dispatch(tutorialSet(name)),
 }))
 export default class SelectTutorial extends React.Component<{
-  tutorial: Tutorial.Info, selectTutorial?: any
+  tutorial:  Tutorial.Info, selectTutorial?: any
 }, {}> {
   render() {
     const {tutorial, selectTutorial} = this.props;

src/modules/package-json/actions.ts

@@ -0,0 +1 @@
+export {default as reducer} from './reducer';

src/modules/package-json/index.ts

@@ -0,0 +1,15 @@
+import {PJ_SAVE} from './types';
+import {readPackageJson, writePackageJson} from './utils/packageJson';
+import {sortPackageJson} from 'sort-package-json';
+
+const _pj = null;
+
+export default function packageJson(
+  p = _pj, action: Action
+): Tutorial.PJ {
+  switch (action.type) {
+
+    default:
+      return p;
+  }
+}