check setup before loading tutorials

Author: ShMcK

lib/actions/tutorials.js

@@ -10,7 +10,7 @@ function loadTutorials() {
     if (window.coderoad.dir) {
         var packageJson = loadRootPackageJson();
         if (!packageJson) {
-            window.coderoad.package = null;
+            window.coderoad.setup.hasPackageJson = null;
             var message = 'No package.json file available. Try running "npm init --y" in terminal';
             console.log(message);
             _base_1.store.dispatch(Action.toggleAlert({ message: message, action: 'tip', duration: 6000 }));

lib/atom/editor.js

@@ -86,3 +86,7 @@ exports.closeAllPanels = closeAllPanels;
 function quit() {
 }
 exports.quit = quit;
+function openFolder() {
+    atom.open();
+}
+exports.openFolder = openFolder;

lib/atom/main.js

@@ -6,7 +6,8 @@ var editor_1 = require('./editor');
 var Main = (function () {
     function Main() {
         window.coderoad = {
-            dir: null
+            dir: null,
+            setup: {}
         };
         polyfills_1.default();
         editor_1.setAtomGlobals();

lib/components/_components.js

@@ -13,8 +13,8 @@ var account_1 = require('./account/account');
 exports.Account = account_1.default;
 var progress_1 = require('./progress/progress');
 exports.Progress = progress_1.default;
-var projects_1 = require('./projects/projects');
-exports.Projects = projects_1.default;
+var start_1 = require('./start/start');
+exports.Start = start_1.Start;
 var markdown_1 = require('./markdown/markdown');
 exports.MarkdownText = markdown_1.default;
 var alert_1 = require('./alert/alert');

lib/components/app/router.js

@@ -19,7 +19,7 @@ var default_1 = (function (_super) {
             case 'progress':
                 return React.createElement(_components_1.Progress, {progress: state.progress, position: state.position});
             case 'projects':
-                return React.createElement(_components_1.Projects, {tutorials: state.tutorials});
+                return React.createElement(_components_1.Start, {tutorials: state.tutorials});
             default:
                 throw 'Error: Route not found.';
         }

lib/components/projects/projects.js

@@ -1,65 +1,10 @@
 'use strict';
-var __extends = (this && this.__extends) || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-};
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 var React = require('react');
-var react_redux_1 = require('react-redux');
-var Action = require('../../actions/actions');
 var material_ui_1 = require('material-ui');
-var Projects = (function (_super) {
-    __extends(Projects, _super);
-    function Projects() {
-        _super.apply(this, arguments);
-    }
-    Projects.prototype.load = function () {
-        this.props.loadTutorials();
-    };
-    Projects.prototype.trim = function (name) {
-        if (name.match(/^coderoad-tutorial-/)) {
-            return name.slice(18);
-        }
-        if (name.match(/^coderoad-/)) {
-            return name.slice(9);
-        }
-        return name;
-    };
-    Projects.prototype.render = function () {
-        var _this = this;
-        return (React.createElement(material_ui_1.Paper, {className: 'cr-projects'}, React.createElement("div", {className: 'cr-projects-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), React.createElement("div", {className: 'cr-tutorials'}, React.createElement(material_ui_1.List, {subheader: 'Tutorials'}, window.coderoad.dir ? null : React.createElement(material_ui_1.ListItem, {key: 'open', primaryText: 'Create an Atom Project', secondaryText: 'File > Open > any older'}), this.props.tutorials.length > 0 ?
-            this.props.tutorials.map(function (tutorial, index) {
-                return (React.createElement(material_ui_1.ListItem, {key: index, primaryText: _this.trim(tutorial), onClick: _this.props.selectProject.bind(_this, tutorial)}));
-            }) : React.createElement(material_ui_1.ListItem, {key: 'demo', primaryText: 'Try a Demo', secondaryText: 'npm i -s coderoad-functional-school'})), React.createElement("br", null), React.createElement(material_ui_1.RaisedButton, {label: 'Load Tutorials', secondary: true, onClick: this.load.bind(this)})), React.createElement("p", {className: 'notes'}, "Beta"))));
-    };
-    Projects = __decorate([
-        react_redux_1.connect(null, function (dispatch) {
-            return {
-                selectProject: function (name) {
-                    Action.loadTutorial(name);
-                    dispatch(Action.setRoute('progress'));
-                },
-                toggleAlert: function (item) {
-                    dispatch(Action.toggleAlert(item));
-                },
-                loadTutorials: function () {
-                    dispatch(Action.loadTutorials());
-                }
-            };
-        }), 
-        __metadata('design:paramtypes', [])
-    ], Projects);
-    return Projects;
-}(React.Component));
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Projects;
-;
+var setup_1 = require('./setup');
+var tutorials_1 = require('./tutorials');
+exports.Project = function (_a) {
+    var tutorials = _a.tutorials;
+    return (React.createElement(material_ui_1.Paper, {className: 'cr-projects'}, React.createElement("div", {className: 'cr-projects-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), window.coderoad.dir && window.coderoad.setup.hasPackageJson && tutorials.length > 0 ?
+        React.createElement(tutorials_1.default, {tutorials: tutorials}) : React.createElement(setup_1.SetupGuide, null), React.createElement("p", {className: 'notes'}, "Beta"))));
+};

lib/components/projects/setup.js

@@ -0,0 +1,35 @@
+"use strict";
+var _this = this;
+var React = require('react');
+var material_ui_1 = require('material-ui');
+var _components_1 = require('../_components');
+var start_1 = require('../../services/start');
+var editor_1 = require('../../atom/editor');
+exports.SetupGuide = function () {
+    var warnings = [];
+    if (!window.coderoad.dir) {
+        warnings.push({
+            key: 'noProject',
+            title: 'Create an Atom Project',
+            click: editor_1.openFolder,
+            text: 'File > Open > a workspace folder'
+        });
+    }
+    if (!window.coderoad.setup.hasPackageJson) {
+        warnings.push({
+            key: 'noPackageJson',
+            title: 'Create a `package.json` file',
+            click: start_1.createPackageJson,
+            text: '`npm init`'
+        });
+    }
+    if (_this.props.tutorials.length < 1) {
+        warnings.push({
+            key: 'noTutorial',
+            title: 'Install a Tutorial',
+            click: null,
+            text: '`npm i --save coderoad-functional-school`'
+        });
+    }
+    return (React.createElement("div", {className: 'setup'}, React.createElement(material_ui_1.List, {subheader: 'Setup'}, warnings.map(function (w) { return React.createElement(material_ui_1.ListItem, {key: w.key, primaryText: w.title, onClick: w.click}, React.createElement(_components_1.MarkdownText, {text: w.text})); }))));
+};

lib/components/projects/start.js

@@ -0,0 +1,10 @@
+'use strict';
+var React = require('react');
+var material_ui_1 = require('material-ui');
+var setup_1 = require('./setup');
+var tutorials_1 = require('./tutorials');
+exports.Project = function (_a) {
+    var tutorials = _a.tutorials;
+    return (React.createElement(material_ui_1.Paper, {className: 'cr-projects'}, React.createElement("div", {className: 'cr-projects-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), window.coderoad.dir && window.coderoad.setup.hasPackageJson && tutorials.length > 0 ?
+        React.createElement(tutorials_1.default, {tutorials: tutorials}) : React.createElement(setup_1.SetupGuide, null), React.createElement("p", {className: 'notes'}, "Beta"))));
+};

lib/components/projects/tutorials.js

@@ -0,0 +1,61 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var React = require('react');
+var material_ui_1 = require('material-ui');
+var react_redux_1 = require('react-redux');
+var Action = require('../../actions/actions');
+var default_1 = (function (_super) {
+    __extends(default_1, _super);
+    function default_1() {
+        _super.apply(this, arguments);
+    }
+    default_1.prototype.trim = function (name) {
+        if (name.match(/^coderoad-tutorial-/)) {
+            return name.slice(18);
+        }
+        if (name.match(/^coderoad-/)) {
+            return name.slice(9);
+        }
+        return name;
+    };
+    default_1.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, loadTutorials = _a.loadTutorials, selectProject = _a.selectProject, toggleAlert = _a.toggleAlert;
+        return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(material_ui_1.List, {subheader: 'Tutorials'}, this.props.tutorials.map(function (tutorial, index) {
+            return (React.createElement(material_ui_1.ListItem, {key: index, primaryText: _this.trim(tutorial), onClick: selectProject.bind(_this, tutorial)}));
+        })), React.createElement("br", null), React.createElement(material_ui_1.RaisedButton, {label: 'Load Tutorials', secondary: true, onTouchTap: loadTutorials})));
+    };
+    default_1 = __decorate([
+        react_redux_1.connect(null, function (dispatch) {
+            return {
+                selectProject: function (name) {
+                    Action.loadTutorial(name);
+                    dispatch(Action.setRoute('progress'));
+                },
+                toggleAlert: function (item) {
+                    dispatch(Action.toggleAlert(item));
+                },
+                loadTutorials: function () {
+                    dispatch(Action.loadTutorials());
+                }
+            };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], default_1);
+    return default_1;
+}(React.Component));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;

lib/components/start/setup.js

@@ -0,0 +1,35 @@
+"use strict";
+var React = require('react');
+var material_ui_1 = require('material-ui');
+var _components_1 = require('../_components');
+var start_1 = require('../../services/start');
+var editor_1 = require('../../atom/editor');
+exports.SetupGuide = function (_a) {
+    var tutorials = _a.tutorials;
+    var warnings = [];
+    if (!window.coderoad.dir) {
+        warnings.push({
+            key: 'noProject',
+            title: 'Create an Atom Project',
+            click: editor_1.openFolder,
+            text: 'File > Open > a workspace folder'
+        });
+    }
+    if (!window.coderoad.setup.hasPackageJson) {
+        warnings.push({
+            key: 'noPackageJson',
+            title: 'Create a `package.json` file',
+            click: start_1.createPackageJson,
+            text: '`npm init`'
+        });
+    }
+    if (tutorials.length < 1) {
+        warnings.push({
+            key: 'noTutorial',
+            title: 'Install a Tutorial',
+            click: null,
+            text: '`npm i --save coderoad-functional-school`'
+        });
+    }
+    return (React.createElement("div", {className: 'setup'}, React.createElement(material_ui_1.List, {subheader: 'Setup'}, warnings.map(function (w) { return React.createElement(material_ui_1.ListItem, {key: w.key, primaryText: w.title, onClick: w.click}, React.createElement(_components_1.MarkdownText, {text: w.text})); }))));
+};