handle existing package.json issue

Author: ShMcK

lib/components/Page/PageContent/index.js

@@ -1,6 +1,6 @@
 "use strict";
 var React = require('react');
-var PageContent_1 = require('./PageContent');
+var index_1 = require('../index');
 var Tasks_1 = require('./Tasks');
 var Hints_1 = require('./Hints');
 var PageToolbar_1 = require('./PageToolbar');
@@ -13,7 +13,7 @@ var Page = function (_a) {
     var page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
     var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
     var completed = page.completed;
-    return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(PageContent_1.default, {page: page}), React.createElement(Tasks_1.default, {tasks: tasks, taskPosition: taskPosition, testRun: testRun, completed: completed, page: page}), React.createElement(PageToolbar_1.default, {tasks: tasks, taskPosition: taskPosition}, React.createElement(Hints_1.default, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.default, {taskLength: tasks.length, taskPosition: taskPosition, completed: completed}))));
+    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: tasks, taskPosition: taskPosition, testRun: testRun, completed: completed, page: page}), React.createElement(PageToolbar_1.default, {tasks: tasks, taskPosition: taskPosition}, React.createElement(Hints_1.default, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.default, {taskLength: tasks.length, taskPosition: taskPosition, completed: completed}))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Page;

lib/components/Page/index.js

@@ -1,8 +1,8 @@
 "use strict";
 var React = require('react');
 var InstallGuide = function (_a) {
-    var show = _a.show;
-    if (!show) {
+    var checks = _a.checks;
+    if (!checks || !checks.passed) {
         return null;
     }
     return (React.createElement("div", {className: 'setup-guide'}, "Check the", React.createElement("a", {href: 'https://coderoad.github.io/docs#install'}, " ", React.createElement("strong", null, "Install Guide"))));

lib/components/Start/Checks/InstallGuide.js

@@ -8,12 +8,12 @@ var DynamicStepper_1 = require('./DynamicStepper');
 var StepCheck_1 = require('./StepCheck');
 var SetupChecks = function (_a) {
     var checks = _a.checks;
-    var setup = checks.setup;
-    if (setup.passed) {
+    if (checks.setup.passed) {
         return null;
     }
-    var status = [setup.dir, setup.packageJson, setup.tutorial];
-    return (React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'Setup Checks', subtitle: 'CodeRoad requires a brief setup'}), React.createElement(Card_1.CardText, null, React.createElement(DynamicStepper_1.default, {status: status}, React.createElement(StepCheck_1.default, {label: 'open a directory', completed: checks.setup.dir}, React.createElement("p", null, "File -> Open (a new folder)"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Open Directory', secondary: true, onTouchTap: action_setup_1.openDirectory})), React.createElement(StepCheck_1.default, {label: 'package.json', completed: checks.setup.packageJson}, "Create a package.json by running", React.createElement("br", null), React.createElement("code", null, "> npm init -y`"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Create package.json', secondary: true, onTouchTap: action_setup_1.createPackageJson})), React.createElement(StepCheck_1.default, {label: 'install a tutorial', completed: checks.setup.tutorial}, "Install a tutorial using npm. For example:", React.createElement("br", null), React.createElement("code", null, "> npm install --save-dev coderoad-functional-school"), React.createElement("br", null)))), React.createElement(Card_1.CardActions, null, React.createElement(VerifyButton_1.default, null))));
+    var _b = checks.setup, dir = _b.dir, packageJson = _b.packageJson, tutorial = _b.tutorial;
+    var status = [dir, packageJson, tutorial];
+    return (React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'Setup Checks', subtitle: 'CodeRoad requires a brief setup'}), React.createElement(Card_1.CardText, null, React.createElement(DynamicStepper_1.default, {status: status}, React.createElement(StepCheck_1.default, {label: 'open a directory', completed: dir}, React.createElement("p", null, "File -> Open (a new folder)"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Open Directory', secondary: true, onTouchTap: action_setup_1.openDirectory})), React.createElement(StepCheck_1.default, {label: 'package.json', completed: packageJson}, "Create a package.json by running", React.createElement("br", null), React.createElement("code", null, "> npm init -y`"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Create package.json', secondary: true, onTouchTap: action_setup_1.createPackageJson})), React.createElement(StepCheck_1.default, {label: 'install a tutorial', completed: tutorial}, "Install a tutorial using npm. For example:", React.createElement("br", null), React.createElement("code", null, "> npm install --save-dev coderoad-functional-school"), React.createElement("br", null)))), React.createElement(Card_1.CardActions, null, React.createElement(VerifyButton_1.default, null))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SetupChecks;

lib/components/Start/Checks/SetupChecks.js

@@ -9,11 +9,10 @@ var DynamicStepper_1 = require('./DynamicStepper');
 var StepCheck_1 = require('./StepCheck');
 var SystemChecks = function (_a) {
     var checks = _a.checks;
-    var system = checks.system;
-    if (system.passed) {
+    if (checks.system.passed) {
         return null;
     }
-    var status = [system.node, system.npm];
+    var status = [checks.system.node, checks.system.npm];
     return (React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'System Checks', subtitle: 'CodeRoad requires several key dependencies'}), React.createElement(Card_1.CardText, null, React.createElement(DynamicStepper_1.default, {status: status}, React.createElement(StepCheck_1.default, {label: 'Node >= 0.10', completed: checks.system.node}, React.createElement("p", null, "Install a newer version of ", React.createElement("a", {style: { color: colors_1.pink500 }, href: 'https://nodejs.org'}, "NodeJS"))), React.createElement(StepCheck_1.default, {label: 'NPM >= 3', completed: checks.system.npm}, "Update your version of NPM.", React.createElement("br", null), React.createElement("code", null, "> npm update -g npm"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Update NPM', secondary: true, onTouchTap: action_system_1.updateNpm})))), React.createElement(Card_1.CardActions, null, React.createElement(VerifyButton_1.default, null))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });

lib/components/Start/Checks/SystemChecks.js

@@ -3,13 +3,16 @@ var React = require('react');
 var SystemChecks_1 = require('./SystemChecks');
 var SetupChecks_1 = require('./SetupChecks');
 var InstallGuide_1 = require('./InstallGuide');
+var index_1 = require('../../index');
 var styles = {
     margin: '10px',
     padding: '40px 20px',
 };
 var Checks = function (_a) {
     var checks = _a.checks;
-    return (React.createElement("div", {styles: styles}, React.createElement(SystemChecks_1.default, {checks: checks}), React.createElement(SetupChecks_1.default, {checks: checks}), React.createElement(InstallGuide_1.default, {show: checks.passed})));
+    return (React.createElement("div", {styles: styles}, checks
+        ? React.createElement("div", null, React.createElement(SystemChecks_1.default, {checks: checks}), React.createElement(SetupChecks_1.default, {checks: checks}))
+        : React.createElement(index_1.ContentCard, {title: 'Error Loading Package.json', content: ''}), React.createElement(InstallGuide_1.default, {checks: checks})));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Checks;

lib/components/Start/Checks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var React = require('react');
+var index_1 = require('../index');
+var Card_1 = require('material-ui/Card');
+var styles = {
+    margin: '5px'
+};
+var ContentCard = function (_a) {
+    var title = _a.title, content = _a.content;
+    return (React.createElement(Card_1.Card, {style: styles}, title ? React.createElement(Card_1.CardHeader, {title: title}) : null, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, content))));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ContentCard;

lib/components/common/ContentCard.js

@@ -17,5 +17,7 @@ var Start_1 = require('./Start');
 exports.Start = Start_1.default;
 var Tutorials_1 = require('./Tutorials');
 exports.Tutorials = Tutorials_1.default;
-var RouteButton_1 = require('./Common/RouteButton');
+var RouteButton_1 = require('./common/RouteButton');
 exports.RouteButton = RouteButton_1.default;
+var ContentCard_1 = require('./common/ContentCard');
+exports.ContentCard = ContentCard_1.default;

lib/components/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Divider from 'material-ui/Divider';
 import {Card} from 'material-ui/Card';
-import PageContent from './PageContent';
+import {ContentCard} from '../index';
 import Tasks from './Tasks';
 import Hints from './Hints';
 import PageToolbar from './PageToolbar';
@@ -20,7 +20,10 @@ const Page: React.StatelessComponent<{
   const completed = page.completed;
   return (
     <section style={styles} className='cr-page'>
-      <PageContent page={page} />
+      <ContentCard
+        title={page.title}
+        content={page.description}
+      />
 
       <Tasks
         tasks={tasks}

src/components/Page/PageContent/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 const InstallGuide: React.StatelessComponent<{
-  show: boolean
-}> = ({show}) => {
-  if (!show) {
+  checks: CR.Checks
+}> = ({checks}) => {
+  if (!checks || !checks.passed) {
     return null;
   }
   return (

src/components/Page/index.tsx

@@ -10,11 +10,11 @@ import StepCheck from './StepCheck';
 const SetupChecks: React.StatelessComponent<{
   checks: CR.Checks
 }> = ({checks}) => {
-  const setup = checks.setup;
-  if (setup.passed) {
+  if (checks.setup.passed) {
     return null;
   }
-  const status = [setup.dir, setup.packageJson, setup.tutorial];
+  const {dir, packageJson, tutorial} = checks.setup;
+  const status = [dir, packageJson, tutorial];
   return (
   <Card className='cr-check'>
     <CardHeader
@@ -25,7 +25,7 @@ const SetupChecks: React.StatelessComponent<{
       <DynamicStepper status={status}>
         <StepCheck
           label='open a directory'
-          completed={checks.setup.dir}
+          completed={dir}
         >
           <p>File -> Open (a new folder)</p><br />
           <FlatButton
@@ -37,7 +37,7 @@ const SetupChecks: React.StatelessComponent<{
 
         <StepCheck
           label='package.json'
-          completed={checks.setup.packageJson}
+          completed={packageJson}
         >
           Create a package.json by running<br />
           <code>> npm init -y`</code><br />
@@ -50,7 +50,7 @@ const SetupChecks: React.StatelessComponent<{
 
         <StepCheck
           label='install a tutorial'
-          completed={checks.setup.tutorial}
+          completed={tutorial}
         >
           Install a tutorial using npm. For example:<br />
           <code>> npm install --save-dev coderoad-functional-school</code><br />

src/components/Start/Checks/InstallGuide.tsx

@@ -11,11 +11,10 @@ import StepCheck from './StepCheck';
 const SystemChecks: React.StatelessComponent<{
   checks: CR.Checks
 }> = ({checks}) => {
-  const system = checks.system;
-  if (system.passed) {
+  if (checks.system.passed) {
     return null;
   }
-  const status = [system.node, system.npm];
+  const status = [checks.system.node, checks.system.npm];
  return (
   <Card className='cr-check'>
     <CardHeader

src/components/Start/Checks/SetupChecks.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import SystemChecks from './SystemChecks';
 import SetupChecks from './SetupChecks';
 import InstallGuide from './InstallGuide';
+import {ContentCard} from '../../index';
 
 const styles = {
   margin: '10px',
@@ -12,10 +13,18 @@ const Checks: React.StatelessComponent<{
   checks: CR.Checks
 }> = ({checks}) => (
     <div styles={styles}>
-        <SystemChecks checks={checks} />
-        <SetupChecks checks={checks} />
 
-        <InstallGuide show={checks.passed} />
+        {checks
+          ? <div>
+              <SystemChecks checks={checks} />
+              <SetupChecks checks={checks} />
+            </div>
+          : <ContentCard
+              title='Error Loading Package.json'
+              content=''
+            />
+        }
+        <InstallGuide checks={checks} />
     </div>
 );
 export default Checks;

src/components/Start/Checks/SystemChecks.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {Markdown} from '../index';
+import {Card, CardHeader, CardText} from 'material-ui/Card';
+
+const styles = {
+  margin: '5px'
+};
+
+const ContentCard: React.StatelessComponent<{
+  title: string, content: string
+}> = ({title, content}) => (
+  <Card style={styles}>
+    {title ? <CardHeader title={title} /> : null}
+    <CardText>
+      <Markdown>{content}</Markdown>
+    </CardText>
+  </Card>
+);
+export default ContentCard;

src/components/Start/Checks/index.tsx

@@ -7,4 +7,5 @@ export {default as Progress} from './Progress';
 export {default as Routes} from './Routes';
 export {default as Start} from './Start';
 export {default as Tutorials} from './Tutorials';
-export {default as RouteButton} from './Common/RouteButton';
+export {default as RouteButton} from './common/RouteButton';
+export {default as ContentCard} from './common/ContentCard';

src/components/common/ContentCard.tsx

@@ -8,7 +8,7 @@ export const tutorialError = 'This is an error with the tutorial itself';
 export function isTutorial(name: string): boolean {
   const dir = store.getState().dir;
   // has package.json
-  let pathToTutorialPackageJson = join(
+  const pathToTutorialPackageJson = join(
     dir, 'node_modules', name, 'package.json'
   );
   if (!fileExists(pathToTutorialPackageJson)) {

src/components/index.ts

@@ -125,14 +125,14 @@
         "src/components/AppMenu/menuRight.tsx",
         "src/components/AppMenu/menuRightRouteOptions.tsx",
         "src/components/AppMenu/Quit/index.tsx",
-        "src/components/Common/RouteButton.tsx",
+        "src/components/common/ContentCard.tsx",
+        "src/components/common/RouteButton.tsx",
         "src/components/FinalPage/index.tsx",
         "src/components/Markdown/index.tsx",
         "src/components/Page/EditPage/index.tsx",
         "src/components/Page/Hints/HintButton.tsx",
         "src/components/Page/Hints/index.tsx",
         "src/components/Page/index.tsx",
-        "src/components/Page/PageContent/index.tsx",
         "src/components/Page/PageToolbar/Continue/index.tsx",
         "src/components/Page/PageToolbar/index.tsx",
         "src/components/Page/PageToolbar/Save/index.tsx",