refactor out progress-bar from toolbar

Author: ShMcK

lib/components/page/page.js

@@ -20,7 +20,7 @@ var pageStyle = {
 var default_1 = (function (_super) {
     __extends(default_1, _super);
     function default_1() {
-        _super.call(this);
+        _super.apply(this, arguments);
     }
     default_1.prototype.componentDidUpdate = function () {
         ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();

lib/components/page/toolbar/progress-bar.js

@@ -0,0 +1,8 @@
+"use strict";
+var React = require('react');
+var LinearProgress_1 = require('material-ui/LinearProgress');
+exports.ProgressBar = function (_a) {
+    var taskPosition = _a.taskPosition, taskCount = _a.taskCount;
+    var progress = (taskPosition / taskCount) * 100;
+    return React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
+};

lib/components/page/toolbar/toolbar.js

@@ -16,37 +16,28 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var React = require('react');
 var react_redux_1 = require('react-redux');
 var actions_1 = require('../../../actions/actions');
-var LinearProgress_1 = require('material-ui/LinearProgress');
+var progress_bar_1 = require('./progress-bar');
 var Toolbar_1 = require('material-ui/Toolbar');
 var RaisedButton_1 = require('material-ui/RaisedButton');
 var FlatButton_1 = require('material-ui/FlatButton');
 var editor_1 = require('../../../atom/editor');
 var actions_2 = require('../../../atom/actions');
 var code_1 = require('material-ui/svg-icons/action/code');
-var ProgressBar = function (_a) {
-    var progress = _a.progress;
-    return React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
-};
-function taskProgress(current, max) {
-    return (current / max) * 100;
-}
 var default_1 = (function (_super) {
     __extends(default_1, _super);
     function default_1() {
         _super.apply(this, arguments);
     }
     default_1.prototype.render = function () {
         var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
-        var progress = taskProgress(taskPosition, tasks.length);
-        return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(FlatButton_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: actions_2.toggleDevTools})), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
+        return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}), React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(FlatButton_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: actions_2.toggleDevTools})), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
             React.createElement(RaisedButton_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
             React.createElement(FlatButton_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {
             return {
-                callNextPage: function () { return dispatch(actions_1.nextPage()); },
-                toggleLog: function () { return dispatch(actions_1.toggleLog()); }
+                callNextPage: function () { return dispatch(actions_1.nextPage()); }
             };
         }), 
         __metadata('design:paramtypes', [])

src/components/page/page.tsx

@@ -23,9 +23,6 @@ refs: {
   [key: string]: (Element);
   listEnd: Element;
 };
-constructor() {
-  super();
-}
 componentDidUpdate() {
   ReactDOM.findDOMNode<HTMLElement>(this.refs.listEnd).scrollIntoView();
 }

src/components/page/toolbar/progress-bar.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import LinearProgress from 'material-ui/LinearProgress';
+
+export const ProgressBar: React.StatelessComponent<{
+  taskPosition: number, taskCount: number
+}> = ({taskPosition, taskCount}) => {
+  const progress: number = (taskPosition / taskCount) * 100;
+  return <LinearProgress mode='determinate'
+ value={progress} style={{height: '10px'}}/>;
+};

src/components/page/toolbar/toolbar.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {nextPage, toggleLog} from '../../../actions/actions';
-
-import LinearProgress from 'material-ui/LinearProgress';
+import {nextPage} from '../../../actions/actions';
+import {ProgressBar} from './progress-bar';
 import {Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
@@ -13,19 +12,9 @@ import {store} from '../../../store/store';
 
 import Code from 'material-ui/svg-icons/action/code';
 
-const ProgressBar: React.StatelessComponent<{
-  progress: number
-}> = ({progress}) => <LinearProgress mode='determinate'
- value={progress} style={{height: '10px'}}/>;
-
-function taskProgress(current: number, max: number) {
-  return (current / max) * 100;
-}
-
 @connect(null, (dispatch, state) => {
   return {
-    callNextPage: () => dispatch(nextPage()),
-    toggleLog: () => dispatch(toggleLog())
+    callNextPage: () => dispatch(nextPage())
   };
 })
 export default class extends React.Component<{
@@ -34,11 +23,10 @@ export default class extends React.Component<{
 }, {}> {
   render() {
     const {tasks, taskPosition, callNextPage} = this.props;
-    const progress: number = taskProgress(taskPosition, tasks.length);
 
     return (
     <section className='cr-page-toolbar'>
-      <ProgressBar progress={progress} />
+      <ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
 
       <Toolbar>
 

tsconfig.json

@@ -110,6 +110,7 @@
         "src/components/page/hint/hint.tsx",
         "src/components/page/page.tsx",
         "src/components/page/task/task.tsx",
+        "src/components/page/toolbar/progress-bar.tsx",
         "src/components/page/toolbar/toolbar.tsx",
         "src/components/progress/progress.tsx",
         "src/components/render.tsx",