display tasks, complete message

Author: ShMcK

lib/components/Page/Task/index.js

@@ -1,34 +1,33 @@
 "use strict";
 var React = require('react');
 var index_1 = require('../../index');
-var taskCheckbox_1 = require('./taskCheckbox');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
-    margin: '5px',
-    padding: '5px',
-    position: 'relative'
-};
-var indexStyles = {
-    position: 'absolute',
-    top: '20px',
-    left: '45px',
-};
-var descriptionStyles = {
-    backgroundColor: 'inherit',
-    paddingTop: '-10px',
-    paddingLeft: '55px',
-    fontSize: '14px',
-    lineHeight: '1.6',
+    task: {
+        margin: '5px',
+        padding: '5px',
+        position: 'relative'
+    },
+    index: {
+        position: 'absolute',
+        top: '20px',
+        left: '45px',
+    },
+    description: {
+        backgroundColor: 'inherit',
+        paddingTop: '-10px',
+        paddingLeft: '55px',
+        fontSize: '14px',
+        lineHeight: '1.6',
+    },
 };
 function getStatus(index, taskPosition, testRun) {
     return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
 }
 var Task = function (_a) {
-    var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
-    var backgroundColor = getStatus(index, taskPosition, testRun);
-    var isCurrentTask = taskPosition === index;
-    return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
+    var task = _a.task, index = _a.index;
+    return (React.createElement(List_1.ListItem, {key: index, style: styles.task}, React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Task;

lib/components/Page/Tasks/index.js

@@ -5,30 +5,25 @@ var __extends = (this && this.__extends) || function (d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 var React = require('react');
-var ReactDOM = require('react-dom');
 var List_1 = require('material-ui/List');
 var Card_1 = require('material-ui/Card');
 var Subheader_1 = require('material-ui/Subheader');
 var Task_1 = require('../Task');
-var colors_1 = require('material-ui/styles/colors');
 var TasksComplete_1 = require('../TasksComplete');
 function visibleTasks(tasks, taskPosition) {
     return tasks.slice(0, taskPosition + 1);
 }
-var margin = '10px 5px';
+var styles = {
+    margin: '10px 5px'
+};
 var Tasks = (function (_super) {
     __extends(Tasks, _super);
     function Tasks() {
         _super.apply(this, arguments);
     }
-    Tasks.prototype.componentDidUpdate = function () {
-        ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();
-    };
     Tasks.prototype.render = function () {
-        var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed, page = _a.page;
-        var visTasks = visibleTasks(tasks, taskPosition);
-        var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
-        return (React.createElement("div", null, React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.default, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))), React.createElement(TasksComplete_1.default, {page: page, completed: completed}), React.createElement("div", {ref: 'listEnd'})));
+        var _a = this.props, tasks = _a.tasks, page = _a.page;
+        return (React.createElement("div", null, React.createElement(Card_1.Card, {style: styles}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), tasks.map(function (task, index) { return (React.createElement(Task_1.default, {key: index, index: index, task: task})); }))), React.createElement(TasksComplete_1.default, {page: page}), React.createElement("div", {ref: 'listEnd'})));
     };
     return Tasks;
 }(React.Component));

lib/components/Page/TasksComplete/index.js

@@ -4,19 +4,21 @@ var Card_1 = require('material-ui/Card');
 var index_1 = require('../../index');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
-    backgroundColor: colors_1.cyan500,
-    margin: '10px 5px',
-};
-var textStyles = {
-    color: colors_1.grey100,
-    fontSize: '1.1em'
+    card: {
+        backgroundColor: colors_1.cyan500,
+        margin: '10px 5px',
+    },
+    text: {
+        color: colors_1.grey100,
+        fontSize: '1.1em'
+    },
 };
 var TasksComplete = function (_a) {
-    var page = _a.page, completed = _a.completed;
-    if (!completed || !page.onPageComplete) {
+    var page = _a.page;
+    if (!page.onPageComplete) {
         return null;
     }
-    return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: textStyles}, page.onPageComplete))));
+    return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: styles.text}, page.onPageComplete))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TasksComplete;

lib/components/Page/index.js

@@ -1,6 +1,7 @@
 "use strict";
 var React = require('react');
 var index_1 = require('../index');
+var Tasks_1 = require('./Tasks');
 var styles = {
     width: '100%',
     overflowY: 'scroll',
@@ -11,7 +12,7 @@ var Page = function (_a) {
     if (!page) {
         return null;
     }
-    return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description})));
+    return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page})));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Page;

src/components/Page/Task/index.tsx

@@ -31,16 +31,13 @@ function getStatus(
 }
 
 const Task: React.StatelessComponent<{
-  task: CR.Task, taskPosition: number, index: number, testRun: boolean
-}> = ({task, taskPosition, index, testRun}) => {
-  const backgroundColor = getStatus(index, taskPosition, testRun);
-  const isCurrentTask = taskPosition === index;
+  task: CR.Task, index: number
+}> = ({task, index}) => {
   return (
     <ListItem
       key={index}
-      style={Object.assign({}, styles.task, {backgroundColor})}
+      style={styles.task}
     >
-      {taskCheckbox(isCurrentTask, testRun)}
       <span style={styles.index}>{index + 1}.</span>
       <div style={styles.description}>
         <Markdown >{task.description}</Markdown>

src/components/Page/Tasks/index.tsx

@@ -11,43 +11,32 @@ function visibleTasks(tasks: CR.Task[], taskPosition: number): CR.Task[] {
   return tasks.slice(0, taskPosition + 1);
 }
 
-const margin = '10px 5px';
+const styles = {
+  margin: '10px 5px'
+};
 
 export default class Tasks extends React.Component<{
-    tasks: CR.Task[], taskPosition: number,
-    testRun: boolean, completed: boolean, page: CR.Page
+    tasks: CR.Task[], page: CR.Page
 }, {}> {
-  refs: {
-    [key: string]: (Element);
-    listEnd: Element;
-  };
-  componentDidUpdate() {
-    ReactDOM.findDOMNode<HTMLElement>(this.refs.listEnd).scrollIntoView();
-  }
   render() {
-    const {tasks, taskPosition, testRun, completed, page} = this.props;
-    const visTasks = visibleTasks(tasks, taskPosition);
-    const backgroundColor = completed ? lightGreen200 : 'white';
+    const {tasks, page} = this.props;
     return (
     <div>
-      <Card style={{backgroundColor, margin}}>
+      <Card style={styles}>
         <List>
           <Subheader>Tasks</Subheader>
-          {visTasks.map((task: CR.Task, index: number) => (
+          {tasks.map((task: CR.Task, index: number) => (
             <Task
               key={index}
               index={index}
               task={task}
-              taskPosition={taskPosition}
-              testRun={testRun}
             />)
           )}
         </List>
       </Card>
 
         <TasksComplete
           page={page}
-          completed={completed}
         />
 
         <div ref='listEnd' />

src/components/Page/TasksComplete/index.tsx

@@ -15,9 +15,9 @@ const styles = {
 };
 
 const TasksComplete: React.StatelessComponent<{
-  page: CR.Page, completed: boolean
-}> = ({page, completed}) => {
-  if (!completed || !page.onPageComplete) { return null; }
+  page: CR.Page
+}> = ({page}) => {
+  if (!page.onPageComplete) { return null; }
   return (
     <Card style={styles.card}>
       <CardText>

src/components/Page/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Divider from 'material-ui/Divider';
 import {Card} from 'material-ui/Card';
 import {ContentCard} from '../index';
-// import Tasks from './Tasks';
+import Tasks from './Tasks';
 
 const styles = {
   width: '100%',
@@ -12,7 +12,6 @@ const styles = {
 const Page: React.StatelessComponent<{
   tutorial: CR.Tutorial, pagePosition: number
 }> = ({tutorial, pagePosition}) => {
-  // const completed = progress.pages[pagePosition];
   const page = tutorial.pages[pagePosition];
 
   if (!page) { return null; }
@@ -24,13 +23,10 @@ const Page: React.StatelessComponent<{
         content={page.description}
       />
 
-      {/*}<Tasks
-        tasks={tasks}
-        taskPosition={taskPosition}
-        testRun={testRun}
-        completed={completed}
+      <Tasks
+        tasks={page.tasks}
         page={page}
-      />*/}
+      />
 
     </section>
   );