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;
+  }
+}

src/modules/package-json/reducer.ts

@@ -0,0 +1,13 @@
+import {join} from 'path';
+import {readFileSync} from 'fs';
+import fileExists from 'node-file-exists';
+
+export function readPackageJson(dir: string): Object|boolean {
+  const pathToPJ = join(dir, './package.json');
+  if (!fileExists(pathToPJ)) { return false; }
+  try {
+    return JSON.parse(readFileSync(pathToPJ, 'utf8'));
+  } catch (e) {
+    return null;
+  }
+}

src/modules/package-json/types.ts

@@ -1,7 +1,5 @@
-export {default as page} from './page';
 export {default as pagePosition} from './page-position';
 export {default as taskActions} from './task-actions';
 export {default as taskTests} from './task-tests';
-export {default as tasks} from './tasks';
 
 export {default as Continue} from './Continue';

src/modules/package-json/utils/packageJson.ts

@@ -22,6 +22,7 @@ export default function tutorialReducer(
       const packageJson: PackageJson = require(join(packagePath, 'package.json'));
       const config: Tutorial.Config = tutorialConfig(packageJson, dir);
       let {info, pages} = require(join(packagePath, packageJson.main));
+      console.log(packageJson, packageJson.name);
       // configure test paths to absolute paths
       pages = configPaths(dir, title, config, pages || []);
       return {

src/modules/page/index.ts

@@ -0,0 +1,10 @@
+import {createSelector} from 'reselect';
+
+export const pageSelector = state => state.tutorial.pages[state.pagePosition];
+
+export const tasksSelector = createSelector(
+  pageSelector,
+  page => page.tasks
+);
+
+export const configSelector = state => state.packageJson.config;

src/modules/page/page/index.ts

@@ -31,17 +31,20 @@
         "src/modules/hints/index.ts",
         "src/modules/hints/reducer.ts",
         "src/modules/hints/types.ts",
+        "src/modules/package-json/actions.ts",
+        "src/modules/package-json/index.ts",
+        "src/modules/package-json/reducer.ts",
+        "src/modules/package-json/types.ts",
+        "src/modules/package-json/utils/packageJson.ts",
         "src/modules/page/actions.ts",
         "src/modules/page/index.ts",
         "src/modules/page/page-position/index.ts",
-        "src/modules/page/page/index.ts",
         "src/modules/page/task-actions/handle-action-string.ts",
         "src/modules/page/task-actions/handle-actions.ts",
         "src/modules/page/task-actions/index.ts",
         "src/modules/page/task-actions/parse-params.ts",
         "src/modules/page/task-actions/parser.ts",
         "src/modules/page/task-tests/index.ts",
-        "src/modules/page/tasks/index.ts",
         "src/modules/page/types.ts",
         "src/modules/progress/actions.ts",
         "src/modules/progress/index.ts",
@@ -79,6 +82,7 @@
         "src/modules/tutorials/reducer.ts",
         "src/modules/tutorials/types.ts",
         "src/reducers.ts",
+        "src/selectors.ts",
         "src/store.ts",
         "src/subscriptions.ts",
         "src/typings.d.ts",
@@ -98,6 +102,7 @@
         "src/components/common/Save.tsx",
         "src/components/common/ToggleDevTools.tsx",
         "src/components/FinalPage/index.tsx",
+        "src/components/Page/Continue/index.tsx",
         "src/components/Page/EditPage/index.tsx",
         "src/components/Page/Hints/HintButton.tsx",
         "src/components/Page/Hints/index.tsx",
@@ -127,8 +132,7 @@
         "src/components/Tutorials/SelectTutorial/index.tsx",
         "src/components/Tutorials/UpdateTutorial/index.tsx",
         "src/modules/hints/Hints/HintButton.tsx",
-        "src/modules/hints/Hints/index.tsx",
-        "src/modules/page/Continue/index.tsx"
+        "src/modules/hints/Hints/index.tsx"
     ],
     "exclude": [
         "node_modules"