handle TopPanel page routing from tests

Author: ShMcK

lib/components/Page/index.js

@@ -21,9 +21,11 @@ var TasksComplete_1 = require('./TasksComplete');
 var TopPanel_1 = require('../TopPanel');
 var actions_1 = require('../../actions');
 var styles = {
-    height: '100%',
-    width: '100%',
-    overflowY: 'scroll',
+    page: {
+        height: '100%',
+        width: '100%',
+        overflowY: 'scroll',
+    },
 };
 var Page = (function (_super) {
     __extends(Page, _super);
@@ -38,7 +40,7 @@ var Page = (function (_super) {
         TopPanel_1.topElement.toggle(false);
     };
     Page.prototype.render = function () {
-        return (React.createElement("section", {style: styles, className: 'cr-page'}, 
+        return (React.createElement("section", {style: styles.page, className: 'cr-page'}, 
             React.createElement(PageDescription_1.default, null), 
             React.createElement(Tasks_1.default, null), 
             React.createElement(TasksComplete_1.default, null)));

lib/components/Test/index.js

@@ -15,11 +15,17 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
+var Card_1 = require('material-ui/Card');
 var TopPanel_1 = require('../TopPanel');
 var styles = {
-    height: '100%',
-    width: '100%',
-    overflowY: 'scroll',
+    page: {
+        height: '100%',
+        width: '100%',
+        overflowY: 'scroll',
+    },
+    card: {
+        margin: '5px',
+    },
 };
 var Test = (function (_super) {
     __extends(Test, _super);
@@ -30,8 +36,10 @@ var Test = (function (_super) {
         TopPanel_1.topElement.toggle(true);
     };
     Test.prototype.render = function () {
-        return (React.createElement("section", {style: styles, className: 'cr-page'}, 
-            React.createElement("h1", null, "Test")
+        return (React.createElement("section", {style: styles.page, className: 'cr-page'}, 
+            React.createElement(Card_1.Card, {style: styles.card, initiallyExpanded: true}, 
+                React.createElement(Card_1.CardTitle, null, "Test"), 
+                React.createElement(Card_1.CardText, {expandable: true}, "test test"))
         ));
     };
     Test = __decorate([

lib/components/TopPanel/TopPanel.js

@@ -46,7 +46,7 @@ var TopPanel = (function (_super) {
     };
     TopPanel.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tutorial = _a.tutorial, tutorialPageAdd = _a.tutorialPageAdd;
+        var tutorial = this.props.tutorial;
         if (!tutorial || !tutorial.pages) {
             return null;
         }

lib/modules/page-position/actions.js

@@ -1,6 +1,10 @@
 "use strict";
 var types_1 = require('./types');
+var actions_1 = require('../../actions');
 function pageSet(pagePosition) {
-    return { type: types_1.PAGE_SET, payload: { pagePosition: pagePosition } };
+    return function (dispatch, getState) {
+        dispatch({ type: types_1.PAGE_SET, payload: { pagePosition: pagePosition } });
+        dispatch(actions_1.routeSet('page'));
+    };
 }
 exports.pageSet = pageSet;

src/actions.ts

@@ -14,5 +14,5 @@ export {
   alertOpen, alertClose, alertReplay,
   editorDevToolsToggle, editorOpen, editorInsert,
   editorSave, editorSet, editorScroll,
-  routeSet
+  routeSet,
 } from 'core-coderoad';

src/components/Page/index.tsx

@@ -9,9 +9,11 @@ import {topElement} from '../TopPanel';
 import {editorMarkdownOpen} from '../../actions';
 
 const styles = {
-  height: '100%',
-  width: '100%',
-  overflowY: 'scroll',
+  page: {
+    height: '100%',
+    width: '100%',
+    overflowY: 'scroll',
+  },
 };
 
 @connect(null, {editorMarkdownOpen})
@@ -27,7 +29,7 @@ export default class Page extends React.Component<{
   }
   render() {
     return (
-      <section style={styles} className='cr-page'>
+      <section style={styles.page} className='cr-page'>
         <PageDescription />
         <Tasks />
         <TasksComplete />

src/components/Test/index.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {Card} from 'material-ui/Card';
+import {Card, CardText, CardTitle} from 'material-ui/Card';
 import {topElement} from '../TopPanel';
 
 const styles = {
-  height: '100%',
-  width: '100%',
-  overflowY: 'scroll',
+  page: {
+    height: '100%',
+    width: '100%',
+    overflowY: 'scroll',
+  },
+  card: {
+    margin: '5px',
+  },
 };
 
 @connect(null, {})
@@ -16,8 +21,17 @@ export default class Test extends React.Component<{}, {}> {
   }
   render() {
     return (
-      <section style={styles} className='cr-page'>
-        <h1>Test</h1>
+      <section style={styles.page} className='cr-page'>
+          <Card
+            style={styles.card}
+            initiallyExpanded={true}
+          >
+            <CardTitle>Test</CardTitle>
+
+            <CardText expandable={true}>
+              test test
+            </CardText>
+          </Card>
       </section>
     );
   }

src/components/TopPanel/TopPanel.tsx

@@ -25,7 +25,7 @@ const styles = {
 };
 
 @connect(state => ({
-    tutorial: state.tutorial,
+  tutorial: state.tutorial,
 }), {pageSet, editorMarkdownOpen, tutorialPageAdd})
 export default class TopPanel extends React.Component<{
   tutorial?: CR.Tutorial,
@@ -38,7 +38,7 @@ export default class TopPanel extends React.Component<{
     this.props.editorMarkdownOpen(title, index);
   }
   render() {
-    const {tutorial, tutorialPageAdd} = this.props;
+    const {tutorial} = this.props;
 
     // no tutorial or pages? no need for a tab bar
     if (!tutorial || !tutorial.pages) { return null; }

src/modules/page-position/actions.ts

@@ -1,5 +1,9 @@
 import {PAGE_SET} from './types';
+import {routeSet} from '../../actions';
 
 export function pageSet(pagePosition: number) {
-  return { type: PAGE_SET, payload: { pagePosition } };
+  return (dispatch, getState) => {
+    dispatch({ type: PAGE_SET, payload: { pagePosition } });
+    dispatch(routeSet('page'));
+  };
 }