refactor menu items into components

Author: ShMcK

lib/components/_components.js

@@ -8,7 +8,7 @@ exports.Page = page_1.default;
 var chapter_1 = require('./page/chapter/chapter');
 exports.Chapter = chapter_1.Chapter;
 var menu_1 = require('./menu/menu');
-exports.Menu = menu_1.default;
+exports.AppMenu = menu_1.AppMenu;
 var progress_1 = require('./progress/progress');
 exports.Progress = progress_1.Progress;
 var start_1 = require('./start/start');

lib/components/app.js

@@ -29,7 +29,7 @@ var default_1 = (function (_super) {
     }
     default_1.prototype.render = function () {
         var state = this.props.state;
-        return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.Menu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert}))));
+        return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert}))));
     };
     default_1 = __decorate([
         react_redux_1.connect(function (state) {

lib/components/menu/menu.js

@@ -27,43 +27,62 @@ var Divider_1 = require('material-ui/Divider');
 var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
 var close_1 = require('material-ui/svg-icons/navigation/close');
 var origin = { horizontal: 'right', vertical: 'top' };
-var default_1 = (function (_super) {
-    __extends(default_1, _super);
-    function default_1() {
+var MenuLink = (function (_super) {
+    __extends(MenuLink, _super);
+    function MenuLink() {
         _super.apply(this, arguments);
     }
-    default_1.prototype.navOptions = function () {
-        var _a = this.props, routeToProgress = _a.routeToProgress, routeToPage = _a.routeToPage;
+    MenuLink.prototype.render = function () {
+        var _a = this.props, route = _a.route, title = _a.title;
+        return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: this.props.routeTo.bind(route), key: route});
+    };
+    MenuLink = __decorate([
+        react_redux_1.connect(null, function (dispatch) {
+            return {
+                routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
+            };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], MenuLink);
+    return MenuLink;
+}(React.Component));
+exports.MenuLink = MenuLink;
+var AppMenu = (function (_super) {
+    __extends(AppMenu, _super);
+    function AppMenu() {
+        _super.apply(this, arguments);
+    }
+    AppMenu.prototype.navOptions = function () {
+        var routeToPage = this.props.routeToPage;
         switch (this.props.route) {
             case 'final':
             case 'page':
-                return React.createElement("button", {onTouchTap: routeToProgress}, "progress");
+                return React.createElement(MenuLink, {route: 'progress'});
             case 'progress':
-                return React.createElement("button", {onTouchTap: routeToPage}, "page");
+                return React.createElement(MenuItem_1.default, {onTouchTap: routeToPage, primaryText: 'page', key: 'page'});
             default: return null;
         }
     };
-    default_1.prototype.menuOptions = function () {
-        var _a = this.props, routeToProgress = _a.routeToProgress, routeToTutorials = _a.routeToTutorials;
+    AppMenu.prototype.menuOptions = function () {
         switch (this.props.route) {
             case 'final':
             case 'page':
-                return (React.createElement("div", null, React.createElement(MenuItem_1.default, {primaryText: 'progress', onTouchTap: routeToProgress, key: 'progress'}), React.createElement(MenuItem_1.default, {primaryText: 'tutorials', onTouchTap: routeToTutorials, key: 'projects'})));
+                return (React.createElement("div", null, React.createElement(MenuLink, {route: 'progress'}), React.createElement(MenuLink, {route: 'tutorials'})));
             case 'progress':
-                return React.createElement(MenuItem_1.default, {primaryText: 'tutorials', onTouchTap: routeToTutorials, key: 'projects'});
+                return React.createElement(MenuLink, {route: 'tutorials'});
             default: return null;
         }
     };
-    default_1.prototype.closePanel = function () {
+    AppMenu.prototype.closePanel = function () {
         render_1.togglePanel();
     };
-    default_1.prototype.render = function () {
+    AppMenu.prototype.render = function () {
         var quit = this.props.quit;
         return React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(IconButton_1.default, {onClick: this.closePanel}, React.createElement(close_1.default, null)), iconElementRight: React.createElement(IconMenu_1.default, {iconButtonElement: React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, null)), targetOrigin: origin, anchorOrigin: origin}, this.menuOptions(), window.coderoad.issuesPath
             ? React.createElement(MenuItem_1.default, {key: 'issue', className: 'link'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue"))
             : null, React.createElement(Divider_1.default, null), React.createElement(MenuItem_1.default, {key: 'quit', onClick: quit}, "quit"))});
     };
-    default_1 = __decorate([
+    AppMenu = __decorate([
         react_redux_1.connect(null, function (dispatch) {
             return {
                 routeToProgress: function () { return dispatch(actions_1.setRoute('progress')); },
@@ -72,16 +91,14 @@ var default_1 = (function (_super) {
                     dispatch(actions_1.setPage(position));
                     dispatch(actions_1.setRoute('page'));
                 },
-                routeToTutorials: function () { return dispatch(actions_1.setRoute('tutorials')); },
                 quit: function () {
                     render_1.togglePanel();
                     subscriptions_1.onDeactivate();
                 }
             };
         }), 
         __metadata('design:paramtypes', [])
-    ], default_1);
-    return default_1;
+    ], AppMenu);
+    return AppMenu;
 }(React.Component));
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
+exports.AppMenu = AppMenu;

src/components/_components.ts

@@ -7,7 +7,7 @@ export {default as Routes} from './routes/routes';
 // Components
 export {default as Page} from './page/page';
 export {Chapter} from './page/chapter/chapter';
-export {default as Menu} from './menu/menu';
+export {AppMenu} from './menu/menu';
 export {Progress} from './progress/progress';
 export {Start} from './start/start';
 export {Tutorials} from './tutorials/tutorials';

src/components/alert/_alert.less

@@ -1,5 +1,8 @@
 @import "ui-variables";
 
+.cr-alert button {
+  margin-bottom: 5px;
+}
 .cr-alert.pass {
   button {
     span {

src/components/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {Menu, Routes, Alert} from './_components';
+import {AppMenu, Routes, Alert} from './_components';
 import {muiTheme} from './theme/theme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
@@ -18,7 +18,7 @@ export default class extends React.Component<{state?: CR.State}, {}> {
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
       <section className='cr' key='main' style={{height}}>
-        <Menu route={state.route} position={state.position} />
+        <AppMenu route={state.route} position={state.position} />
         <Routes state={state} ref='route' />
         <Alert alert={state.alert} />
       </section>

src/components/menu/menu.tsx

@@ -15,6 +15,20 @@ import NavigationClose from 'material-ui/svg-icons/navigation/close';
 
 const origin = {horizontal: 'right', vertical: 'top'};
 
+@connect(null, (dispatch) => {
+  return {
+    routeTo: (route: string) => dispatch(setRoute(route))
+  };
+})
+export class MenuLink extends React.Component<{
+  route: string, title?: string, routeTo?: any
+}, {}> {
+  render() {
+    const {route, title} = this.props;
+    return <MenuItem primaryText={title ? title : route} onTouchTap={this.props.routeTo.bind(route)} key={route}/>;
+  }
+}
+
 @connect(null, (dispatch) => {
   return {
     routeToProgress: () => dispatch(setRoute('progress')),
@@ -23,39 +37,37 @@ const origin = {horizontal: 'right', vertical: 'top'};
       dispatch(setPage(position));
       dispatch(setRoute('page'));
     },
-    routeToTutorials: () => dispatch(setRoute('tutorials')),
     quit: () => {
       togglePanel();
       onDeactivate();
     }
   };
 })
-export default class extends React.Component<{
-  route: string, position: CR.Position, routeToProgress?: any, routeToPage?: any, routeToTutorials?: any, quit?: any
+export class AppMenu extends React.Component<{
+  route: string, position: CR.Position, routeToPage?: any, quit?: any
 }, {}> {
   navOptions(): React.ReactElement<{}> {
-    const {routeToProgress, routeToPage} = this.props;
+    const {routeToPage} = this.props;
     switch (this.props.route) {
       case 'final':
       case 'page':
-        return <button onTouchTap={routeToProgress}>progress</button>;
+        return <MenuLink route='progress' />;
       case 'progress':
-        return <button onTouchTap={routeToPage}>page</button>;
+        return <MenuItem onTouchTap={routeToPage} primaryText='page' key='page' />;
       default: return null;
     }
   }
   menuOptions() {
-    const {routeToProgress, routeToTutorials} = this.props;
     switch (this.props.route) {
       case 'final':
       case 'page':
         return (
           <div>
-        <MenuItem primaryText='progress' onTouchTap={routeToProgress} key='progress' />
-        <MenuItem primaryText='tutorials' onTouchTap={routeToTutorials} key='projects' />
+        <MenuLink route='progress'/>
+        <MenuLink route='tutorials' />
       </div>);
       case 'progress':
-        return <MenuItem primaryText='tutorials' onTouchTap={routeToTutorials} key='projects' />;
+        return <MenuLink route='tutorials' />;
       default: return null;
     }
   }