connect components with reselect

ShMcK · ShMcK · commit f9edcf039d97 · 2016-06-08T22:49:07.000-07:00
diff --git a/lib/components/Page/Tasks/index.js b/lib/components/Page/Tasks/index.js
@@ -18,12 +18,12 @@ var react_redux_1 = require('react-redux');
 var Card_1 = require('material-ui/Card');
 var Tabs_1 = require('material-ui/Tabs');
 var Task_1 = require('../Task');
-var TasksComplete_1 = require('../TasksComplete');
 var Tests_1 = require('../Tests');
 var TaskActions_1 = require('../TaskActions');
 var Hints_1 = require('../Hints');
 var AddButton_1 = require('../AddButton');
 var actions_1 = require('../../../actions');
+var selectors_1 = require('../../../selectors');
 var styles = {
     card: {
         margin: '5px',
@@ -54,11 +54,13 @@ var Tasks = (function (_super) {
     }
     Tasks.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tasks = _a.tasks, page = _a.page, config = _a.config, taskAdd = _a.taskAdd, markdownOpen = _a.markdownOpen, pagePosition = _a.pagePosition;
-        return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {key: index.toString(), style: styles.card, initiallyExpanded: index === 0}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests, config: config})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement("div", {onClick: markdownOpen.bind(_this, task.description)}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task}))), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions, taskPosition: index})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints, taskPosition: index})))))); }), React.createElement(AddButton_1.default, {callback: taskAdd}), React.createElement(TasksComplete_1.default, {page: page})));
+        var _a = this.props, tasks = _a.tasks, taskAdd = _a.taskAdd, markdownOpen = _a.markdownOpen;
+        return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {key: index.toString(), style: styles.card, initiallyExpanded: index === 0}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement("div", {onClick: markdownOpen.bind(_this, task.description)}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task}))), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions, taskPosition: index})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints, taskPosition: index})))))); }), React.createElement(AddButton_1.default, {callback: taskAdd})));
     };
     Tasks = __decorate([
-        react_redux_1.connect(null, function (dispatch) { return ({
+        react_redux_1.connect(function (state) { return ({
+            tasks: selectors_1.tasksSelector(state),
+        }); }, function (dispatch) { return ({
             taskAdd: function () { return dispatch(actions_1.tutorialTaskAdd()); },
             markdownOpen: function (content) {
                 dispatch(actions_1.editorMarkdownOpen(null, content));
diff --git a/lib/components/Page/Tests/index.js b/lib/components/Page/Tests/index.js
@@ -19,6 +19,7 @@ var path_1 = require('path');
 var actions_1 = require('../../../actions');
 var config_options_1 = require('../../../config-options');
 var FlatButton_1 = require('material-ui/FlatButton');
+var selectors_1 = require('../../../selectors');
 var styles = {
     button: {
         bottom: '8px',
@@ -36,7 +37,9 @@ var Tests = (function (_super) {
         return (React.createElement("div", {style: style}, tests.map(function (test, index) { return (React.createElement(FlatButton_1.default, {key: index.toString(), style: styles.button, onClick: open.bind(_this, test.concat('.' + suffix)), label: 'Test', secondary: true})); })));
     };
     Tests = __decorate([
-        react_redux_1.connect(null, function (dispatch) { return ({
+        react_redux_1.connect(function (state) { return ({
+            config: selectors_1.configSelector(state),
+        }); }, function (dispatch) { return ({
             open: function (file) {
                 dispatch(actions_1.editorOpen(path_1.join('tutorial', file)));
             },
diff --git a/lib/components/Page/index.js b/lib/components/Page/index.js
@@ -17,8 +17,10 @@ var React = require('react');
 var react_redux_1 = require('react-redux');
 var PageDescription_1 = require('./PageDescription');
 var Tasks_1 = require('./Tasks');
+var TasksComplete_1 = require('./TasksComplete');
 var Top_1 = require('../TopPanel/Top');
 var actions_1 = require('../../actions');
+var selectors_1 = require('../../selectors');
 var styles = {
     width: '100%',
     overflowY: 'scroll',
@@ -35,18 +37,15 @@ var Page = (function (_super) {
         Top_1.default.toggle(false);
     };
     Page.prototype.render = function () {
-        var _a = this.props, tutorial = _a.tutorial, pagePosition = _a.pagePosition, packageJson = _a.packageJson, page = _a.page, markdownOpen = _a.markdownOpen;
+        var _a = this.props, page = _a.page, markdownOpen = _a.markdownOpen;
         if (!page) {
             return null;
         }
-        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(PageDescription_1.default, {title: page.title, content: page.description, open: true, click: markdownOpen.bind(this)}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page, config: packageJson.config, pagePosition: pagePosition})));
+        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(PageDescription_1.default, {title: page.title, content: page.description, open: true, click: markdownOpen.bind(this)}), React.createElement(Tasks_1.default, null), React.createElement(TasksComplete_1.default, {page: page})));
     };
     Page = __decorate([
         react_redux_1.connect(function (state) { return ({
-            tutorial: state.tutorial,
-            pagePosition: state.pagePosition,
-            packageJson: state.packageJson,
-            page: state.tutorial.pages[state.pagePosition]
+            page: selectors_1.pageSelector(state),
         }); }, function (dispatch) { return ({
             markdownOpen: function (content) { return dispatch(actions_1.editorMarkdownOpen(null, content)); },
         }); }), 
diff --git a/lib/components/TopPanel/TopPanel.js b/lib/components/TopPanel/TopPanel.js
@@ -42,7 +42,7 @@ var TopPanel = (function (_super) {
     }
     TopPanel.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tutorial = _a.tutorial, pagePosition = _a.pagePosition, pageSet = _a.pageSet, pageAdd = _a.pageAdd;
+        var _a = this.props, tutorial = _a.tutorial, pageSet = _a.pageSet, pageAdd = _a.pageAdd;
         if (!tutorial || !tutorial.pages) {
             return null;
         }
@@ -53,7 +53,6 @@ var TopPanel = (function (_super) {
     TopPanel = __decorate([
         react_redux_1.connect(function (state) { return ({
             tutorial: state.tutorial,
-            pagePosition: state.pagePosition,
         }); }, function (dispatch) { return ({
             pageSet: function (index) {
                 dispatch(actions_1.pageSet(index));
diff --git a/lib/selectors.js b/lib/selectors.js
@@ -0,0 +1,5 @@
+"use strict";
+var reselect_1 = require('reselect');
+exports.pageSelector = function (state) { return state.tutorial.pages[state.pagePosition]; };
+exports.tasksSelector = reselect_1.createSelector(exports.pageSelector, function (page) { return page.tasks; });
+exports.configSelector = function (state) { return state.packageJson.config; };
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "redux-logger": "2.6.1",
     "redux-throttle-actions": "1.0.1",
     "redux-thunk": "2.1.0",
+    "reselect": "2.5.1",
     "sort-package-json": "1.4.0"
   },
   "activationCommands": {
diff --git a/src/components/Page/Hints/index.tsx b/src/components/Page/Hints/index.tsx
@@ -5,6 +5,7 @@ import FontIcon from 'material-ui/FontIcon';
 import AddButton from '../AddButton';
 import {tutorialHintAdd, editorMarkdownOpen} from '../../../actions';
 import TextField from 'material-ui/TextField';
+import {hintsSelector} from '../../../selectors';
 
 const styles = {
   text: {
diff --git a/src/components/Page/PageDescription/index.tsx b/src/components/Page/PageDescription/index.tsx
@@ -23,7 +23,12 @@ const PageDescription: React.StatelessComponent<{
         /> : null}
       <CardText expandable={true}>
         {contentArray.map((c: string, index) => (
-          <Markdown key={index.toString()} onClick={click.bind(this, c)}>{c}</Markdown>
+          <Markdown
+            key={index.toString()}
+            onClick={click.bind(this, c)}
+          >
+          {c}
+          </Markdown>
         ))}
       </CardText>
     </Card>
diff --git a/src/components/Page/Tasks/index.tsx b/src/components/Page/Tasks/index.tsx
@@ -6,14 +6,14 @@ import {Tabs, Tab} from 'material-ui/Tabs';
 import Subheader from 'material-ui/Subheader';
 import Task from '../Task';
 import {lightGreen200} from 'material-ui/styles/colors';
-import TasksComplete from '../TasksComplete';
 import Tests from '../Tests';
 import TaskActions from '../TaskActions';
 import Hints from '../Hints';
 import AddButton from '../AddButton';
 import {tutorialTaskAdd, editorMarkdownOpen} from '../../../actions';
 import twoDigitify from '../../../services/twoDigitify';
 import {join} from 'path';
+import {tasksSelector} from '../../../selectors';
 
 const styles = {
   card: {
@@ -39,17 +39,19 @@ const styles = {
   },
 };
 
-@connect(null, dispatch => ({
+@connect(state => ({
+  tasks: tasksSelector(state),
+}), dispatch => ({
   taskAdd: () => dispatch(tutorialTaskAdd()),
   markdownOpen: (content: string) => {
     dispatch(editorMarkdownOpen(null, content));
   },
 }))
 export default class Tasks extends React.Component<{
-  tasks: CR.Task[], page: CR.Page, config: Tutorial.Config, taskAdd?: any, markdownOpen?: any, pagePosition: number
+  tasks?: CR.Task[], taskAdd?: any, markdownOpen?: any
 }, {}> {
   render() {
-    const {tasks, page, config, taskAdd, markdownOpen, pagePosition} = this.props;
+    const {tasks, taskAdd, markdownOpen} = this.props;
     return (
       <div>
         {tasks.map((task: CR.Task, index: number) => (
@@ -66,7 +68,6 @@ export default class Tasks extends React.Component<{
               <Tests
                 style={styles.test}
                 tests={task.tests}
-                config={config}
               />
             </CardHeader>
             <CardText expandable={true} style={styles.cardContent}>
@@ -103,10 +104,6 @@ export default class Tasks extends React.Component<{
 
         <AddButton callback={taskAdd}/>
 
-        <TasksComplete
-          page={page}
-        />
-
       </div>
     );
   }
diff --git a/src/components/Page/Tests/index.tsx b/src/components/Page/Tests/index.tsx
@@ -4,20 +4,23 @@ import {join} from 'path';
 import {editorOpen} from '../../../actions';
 import tutorialConfigOptions from '../../../config-options';
 import FlatButton from 'material-ui/FlatButton';
+import {configSelector} from '../../../selectors';
 
 const styles = {
   button: {
     bottom: '8px',
   },
 };
 
-@connect(null, dispatch => ({
+@connect(state => ({
+  config: configSelector(state),
+}), dispatch => ({
   open: (file: string) => {
     dispatch(editorOpen(join('tutorial', file)));
   },
 }))
 export default class Tests extends React.Component<{
-  tests: string[], config: Tutorial.Config, style?: Object,
+  tests: string[], config?: Tutorial.Config, style?: Object,
   open?: (file: string) => any
 }, {}> {
   render() {
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
@@ -4,24 +4,22 @@ import Divider from 'material-ui/Divider';
 import {Card} from 'material-ui/Card';
 import PageDescription from './PageDescription';
 import Tasks from './Tasks';
+import TasksComplete from './TasksComplete';
 import Top from '../TopPanel/Top';
 import {editorMarkdownOpen} from '../../actions';
+import {pageSelector} from '../../selectors';
 
 const styles = {
   width: '100%',
   overflowY: 'scroll',
 };
 
 @connect(state => ({
-    tutorial: state.tutorial,
-    pagePosition: state.pagePosition,
-    packageJson: state.packageJson,
-    page: state.tutorial.pages[state.pagePosition]
+    page: pageSelector(state),
 }), dispatch => ({
     markdownOpen: (content: string) => dispatch(editorMarkdownOpen(null, content)),
 }))
 export default class Page extends React.Component<{
-  tutorial?: CR.Tutorial, pagePosition?: number, packageJson?: PackageJson,
   markdownOpen?: (content: string) => any, page?: CR.Page
 }, {}> {
   componentDidMount() {
@@ -31,7 +29,7 @@ export default class Page extends React.Component<{
     Top.toggle(false);
   }
   render() {
-    const {tutorial, pagePosition, packageJson, page, markdownOpen} = this.props;
+    const {page, markdownOpen} = this.props;
     if (!page) { return null; }
 
     return (
@@ -42,12 +40,8 @@ export default class Page extends React.Component<{
           open={true}
           click={markdownOpen.bind(this)}
         />
-        <Tasks
-          tasks={page.tasks}
-          page={page}
-          config={packageJson.config}
-          pagePosition={pagePosition}
-        />
+        <Tasks />
+        <TasksComplete page={page} />
       </section>
     );
   }
diff --git a/src/components/TopPanel/TopPanel.tsx b/src/components/TopPanel/TopPanel.tsx
@@ -26,7 +26,6 @@ const styles = {
 
 @connect(state => ({
     tutorial: state.tutorial,
-    pagePosition: state.pagePosition,
 }), dispatch => ({
     pageSet: (index: number) => {
       dispatch(pageSet(index));
@@ -35,11 +34,10 @@ const styles = {
     pageAdd: () => dispatch(tutorialPageAdd()),
 }))
 export default class TopPanel extends React.Component<{
-  tutorial?: CR.Tutorial, pagePosition?: number,
-  pageSet?: (index: number) => any, pageAdd?: () => any
+  tutorial?: CR.Tutorial, pageSet?: (index: number) => any, pageAdd?: () => any
 }, {}> {
   render() {
-    const {tutorial, pagePosition, pageSet, pageAdd} = this.props;
+    const {tutorial, pageSet, pageAdd} = this.props;
 
     // no tutorial or pages? no need for a tab bar
     if (!tutorial || !tutorial.pages) { return null; }
diff --git a/src/selectors.ts b/src/selectors.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;
diff --git a/tsconfig.json b/tsconfig.json
@@ -63,6 +63,7 @@
         "src/modules/window/reducer.ts",
         "src/modules/window/types.ts",
         "src/reducers.ts",
+        "src/selectors.ts",
         "src/services/twoDigitify.ts",
         "src/store.ts",
         "src/subscriptions.ts",
