Skip to content

Commit 9cda718

Browse files
ShMcKShMcK
committed
refactor system & setup checks
1 parent 43daab2 commit 9cda718

File tree

14 files changed

+176
-189
lines changed

14 files changed

+176
-189
lines changed

‎lib/components/start/checks/checks.js

+3-14
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1414
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
1515
};
1616
var React = require('react');
17-
var Paper_1 = require('material-ui/Paper');
18-
var react_redux_1 = require('react-redux');
1917
var store_1 = require('../../../store/store');
2018
var Action = require('../../../actions/actions');
21-
var fail = '✗';
19+
var react_redux_1 = require('react-redux');
20+
var steps_1 = require('./steps');
2221
var Checks = (function (_super) {
2322
__extends(Checks, _super);
2423
function Checks() {
2524
_super.apply(this, arguments);
2625
}
27-
Checks.prototype.getSystemChecks = function (checks) {
28-
var system = checks.system;
29-
return [system.node, system.npm];
30-
};
31-
Checks.prototype.getSetupChecks = function (checks) {
32-
var setup = checks.setup;
33-
return [setup.dir, setup.packageJson, setup.tutorial];
34-
};
3526
Checks.prototype.render = function () {
3627
var _a = this.props, checks = _a.checks, verify = _a.verify;
37-
return React.createElement(Paper_1.default, {className: 'cr-checks'}, React.createElement("p", {className: 'tagline'}, "Setup"), checks.passed
38-
? null
39-
: React.createElement("div", {className: 'setup-guide'}, React.createElement("span", null, "Check the", React.createElement("a", {href: 'https://coderoad.github.io/docs#install'}, " ", React.createElement("strong", null, "Install Guide")))));
28+
return React.createElement("div", {className: 'cr-checks'}, React.createElement(steps_1.SystemChecks, {checks: checks}), React.createElement(steps_1.SetupChecks, {checks: checks}), React.createElement(steps_1.InstallGuide, {show: checks.passed}));
4029
};
4130
Checks = __decorate([
4231
react_redux_1.connect(null, function (dispatch) {

‎lib/components/start/checks/setup-checker.js

+3-28
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var __extends = (this && this.__extends) || function (d, b) {
66
};
77
var React = require('react');
88
var Stepper_1 = require('material-ui/Stepper');
9-
var FontIcon_1 = require('material-ui/FontIcon');
109
var styles = {
1110
header: {
1211
textAlign: 'center',
@@ -21,37 +20,13 @@ var DynamicStepper = (function (_super) {
2120
__extends(DynamicStepper, _super);
2221
function DynamicStepper(props) {
2322
_super.call(this, props);
24-
var statusSteps = this.props.status;
2523
this.state = {
26-
activeStep: statusSteps.indexOf(false) || -1,
27-
statusSteps: statusSteps
24+
stepIndex: status.indexOf(false) || 0
2825
};
2926
}
30-
DynamicStepper.prototype.selectStep = function (CurrentStep) {
31-
this.setState({
32-
activeStep: CurrentStep,
33-
statusSteps: this.state.statusSteps
34-
});
35-
};
36-
DynamicStepper.prototype.updateCompletedSteps = function (CurrentStep) {
37-
return this.state.statusSteps[CurrentStep];
38-
};
39-
DynamicStepper.prototype.createIcon = function (step) {
40-
if (step.props.isCompleted) {
41-
return (React.createElement(FontIcon_1.default, {className: 'material-icons', style: { fontSize: 14 }}, "✓"));
42-
}
43-
return React.createElement("span", null, step.props.orderStepLabel);
44-
};
45-
DynamicStepper.prototype.continue = function () {
46-
var _a = this.state, activeStep = _a.activeStep, statusSteps = _a.statusSteps;
47-
statusSteps[activeStep] = true;
48-
this.state = {
49-
activeStep: activeStep + 1,
50-
statusSteps: statusSteps,
51-
};
52-
};
5327
DynamicStepper.prototype.render = function () {
54-
return React.createElement("div", null, React.createElement("div", {style: styles.header}, this.props.title), React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, linear: false, orientation: 'vertical'}, this.props.children));
28+
var stepIndex = this.state.stepIndex;
29+
return React.createElement("div", null, React.createElement(Stepper_1.Stepper, {activeStep: stepIndex, linear: false, orientation: 'vertical'}, this.props.children));
5530
};
5631
return DynamicStepper;
5732
}(React.Component));

‎lib/components/start/checks/steps.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use strict";
2+
var React = require('react');
3+
var Stepper_1 = require('material-ui/Stepper');
4+
var Card_1 = require('material-ui/Card');
5+
var _components_1 = require('../../_components');
6+
var setup_checker_1 = require('./setup-checker');
7+
var FontIcon_1 = require('material-ui/FontIcon');
8+
var warning_1 = require('material-ui/svg-icons/alert/warning');
9+
var colors_1 = require('material-ui/styles/colors');
10+
var StepCheck = function (_a) {
11+
var completed = _a.completed, label = _a.label, children = _a.children;
12+
return (React.createElement(Stepper_1.Step, {completed: completed}, React.createElement(Stepper_1.StepLabel, {icon: completed
13+
? React.createElement(FontIcon_1.default, null, "✓")
14+
: React.createElement(warning_1.default, {color: colors_1.red500})}, label), React.createElement(Stepper_1.StepContent, null, children)));
15+
};
16+
exports.SystemChecks = function (_a) {
17+
var checks = _a.checks;
18+
var system = checks.system;
19+
if (system.passed) {
20+
return null;
21+
}
22+
var status = [system.node, system.npm];
23+
return React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'System Checks'}), React.createElement(setup_checker_1.default, {status: status}, React.createElement(StepCheck, {label: 'Node >= 0.10', completed: checks.system.node}, React.createElement("p", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(StepCheck, {label: 'NPM >= 3', completed: checks.system.npm}, React.createElement(_components_1.Markdown, null, "Update your version of NPM." + ' ' + "`> npm update -g npm`"))));
24+
};
25+
exports.SetupChecks = function (_a) {
26+
var checks = _a.checks;
27+
var setup = checks.setup;
28+
if (setup.passed) {
29+
return null;
30+
}
31+
var status = [setup.dir, setup.packageJson, setup.tutorial];
32+
return React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'Setup Checks'}), React.createElement(setup_checker_1.default, {status: status}, React.createElement(StepCheck, {label: 'Open a Directory', completed: checks.setup.dir}, React.createElement("p", null, "File -> Open (a new folder)")), React.createElement(StepCheck, {label: 'package.json', completed: checks.setup.packageJson}, React.createElement(Stepper_1.StepLabel, null, "Package.json"), React.createElement(_components_1.Markdown, null, "Create a package.json by running" + ' ' + "`> npm init -y`")), React.createElement(StepCheck, {label: 'Install Tutorial', completed: checks.setup.tutorial}, React.createElement(_components_1.Markdown, null, "Install a tutorial using npm. For example:" + ' ' + "`> npm install coderoad-functional-school --save-dev`"))));
33+
};
34+
exports.InstallGuide = function (_a) {
35+
var show = _a.show;
36+
if (!show) {
37+
return null;
38+
}
39+
return React.createElement("div", {className: 'setup-guide'}, React.createElement("span", null, "Check the", React.createElement("a", {href: 'https://coderoad.github.io/docs#install'}, " ", React.createElement("strong", null, "Install Guide"))));
40+
};

‎lib/reducers/checks/verify.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ function result(x) {
1010
function verifySetup() {
1111
var checks = {
1212
system: {
13-
node: !!check_system_1.nodeMinVersion(),
13+
node: false,
1414
npm: !!check_system_1.npmMinVersion()
1515
},
1616
setup: {
1717
dir: !!check_setup_1.hasDirectory(),
18-
packageJson: !check_setup_1.hasPackageJson(),
18+
packageJson: !!check_setup_1.hasPackageJson(),
1919
tutorial: !!check_setup_1.hasTutorialDep()
2020
}
2121
};
2222
checks.system.passed = allTrue(checks.system);
2323
checks.setup.passed = allTrue(checks.setup);
2424
checks.passed = checks.system.passed && checks.setup.passed;
25+
console.log('checks', checks);
2526
return checks;
2627
}
2728
Object.defineProperty(exports, "__esModule", { value: true });

‎lib/reducers/route/route.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22
var Type = require('../../actions/actionTypes');
3-
var defaultRoute = 'tutorials';
3+
var defaultRoute = 'start';
44
function routeReducer(route, action) {
55
if (route === void 0) { route = defaultRoute; }
66
switch (action.type) {

‎src/components/start/_start.less

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import './checks/_checks';
2+
13
.cr {
24
&-start {
35
height: 100%;

‎src/components/start/checks/_checks.less

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cr-check {
2+
margin: 10px;
3+
padding: 10px;
4+
}

‎src/components/start/checks/checks.tsx

+7-101
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import * as React from 'react';
2-
import Paper from 'material-ui/Paper';
3-
// import DynamicStepper from './setup-checker';
4-
import {Step, StepLabel, StepButton, StepContent} from 'material-ui/Stepper';
5-
import FlatButton from 'material-ui/FlatButton';
6-
import {Markdown} from '../../_components';
72

8-
import {openDirectory, createPackageJson, installTutorial} from '../../../reducers/checks/action-setup';
9-
import {updateNpm} from '../../../reducers/checks/action-system';
10-
import {connect} from 'react-redux';
113
import {store} from '../../../store/store';
124
import * as Action from '../../../actions/actions';
13-
14-
const fail = '✗';
5+
import {connect} from 'react-redux';
6+
import {SystemChecks, SetupChecks, InstallGuide} from './steps';
157

168
@connect(null, (dispatch) => {
179
return {
@@ -21,98 +13,12 @@ const fail = '✗';
2113
export default class Checks extends React.Component<{
2214
checks: CR.Checks, verify?: any
2315
}, {}> {
24-
getSystemChecks(checks: CR.Checks) {
25-
const system = checks.system;
26-
return [system.node, system.npm];
27-
}
28-
getSetupChecks(checks: CR.Checks) {
29-
const setup = checks.setup;
30-
return [setup.dir, setup.packageJson, setup.tutorial];
31-
}
3216
render() {
3317
const {checks, verify} = this.props;
34-
return <Paper className='cr-checks'>
35-
{/* System Checks */}
36-
37-
<p className='tagline'>Setup</p>
38-
39-
{/* checks.system.passed ? null : <DynamicStepper title='Dependency Checks' status={this.getSystemChecks(checks)}>
40-
<Step>
41-
{/*orderStepLabel={fail}
42-
stepLabel='Node >= 0.10'
43-
actions={[
44-
<FlatButton key={0} primary={true}
45-
label='Verify'
46-
onTouchTap={verify} />
47-
]} >}
48-
<StepLabel>Node >= 0.10</StepLabel>
49-
<StepContent>Install a newer version of <a href='https://nodejs.org'>Node</a></StepContent>
50-
</Step>
51-
52-
<Step>
53-
<StepLabel>NPM >= 3</StepLabel>
54-
<StepContent>
55-
<Markdown>Update your version of NPM.
56-
`> npm update -g npm`</Markdown></StepContent>
57-
</Step>
58-
</DynamicStepper>*/}
59-
60-
{/* Setup Checks */}
61-
62-
{/*checks.setup.passed ? null : <DynamicStepper title='Setup Checks'
63-
status={this.getSetupChecks(checks)}>
64-
<Step orderStepLabel={fail}
65-
stepLabel='working directory'
66-
actions={[
67-
<FlatButton key={0} primary={true}
68-
label='Verify'
69-
onTouchTap={verify} />,
70-
<FlatButton key={1} secondary={true}
71-
label='Do it for me'
72-
onTouchTap={openDirectory} />
73-
]} >
74-
<div>File -> Open (a new folder)</div>
75-
</Step>
76-
<Step orderStepLabel={fail}
77-
stepLabel='package.json'
78-
actions={[
79-
<FlatButton key={0} primary={true}
80-
label='Verify'
81-
onTouchTap={verify} />,
82-
<FlatButton key={1} secondary={true}
83-
label='Do it for me'
84-
onTouchTap={createPackageJson} />
85-
]} >
86-
<div>
87-
Create a package.json by running<br />
88-
`> npm init -y`</div>
89-
</Step>
90-
<Step orderStepLabel={fail}
91-
stepLabel='install tutorial'
92-
actions={[
93-
<FlatButton key={0} primary={true}
94-
label='Verify'
95-
onTouchTap={verify} />,
96-
<FlatButton key={1} secondary={true}
97-
label='Do it for me'
98-
onTouchTap={installTutorial} />
99-
]} >
100-
<div>
101-
Install a tutorial using npm. For example:<br />
102-
`> npm install coderoad-functional-school --save-dev`
103-
</div>
104-
</Step>
105-
</DynamicStepper>*/}
106-
107-
{/* Install Guide || Continue */}
108-
109-
{checks.passed
110-
? null
111-
: <div className='setup-guide'>
112-
<span>Check the
113-
<a href='https://coderoad.github.io/docs#install'> <strong>Install Guide</strong></a></span>
114-
</div>}
115-
116-
</Paper>;
18+
return <div className='cr-checks'>
19+
<SystemChecks checks={checks} />
20+
<SetupChecks checks={checks} />
21+
<InstallGuide show={checks.passed} />
22+
</div>;
11723
}
11824
}

‎src/components/start/checks/setup-checker.tsx

+9-38
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
2-
import Stepper from 'material-ui/Stepper';
2+
import {Stepper, Step, StepButton, StepContent} from 'material-ui/Stepper';
3+
import RaisedButton from 'material-ui/RaisedButton';
4+
import FlatButton from 'material-ui/FlatButton';
35

46
import FontIcon from 'material-ui/FontIcon';
57

@@ -15,55 +17,24 @@ const styles = {
1517
};
1618

1719
export default class DynamicStepper extends React.Component<{
18-
status: boolean[], title: string, children?: any
20+
status: boolean[], children?: any
1921
}, {
20-
activeStep: number, statusSteps: boolean[]
22+
stepIndex: number
2123
}> {
2224
constructor(props) {
2325
super(props);
24-
let statusSteps = this.props.status;
2526
this.state = {
26-
activeStep: statusSteps.indexOf(false) || -1,
27-
statusSteps
28-
};
29-
}
30-
selectStep(CurrentStep) {
31-
this.setState({
32-
activeStep: CurrentStep,
33-
statusSteps: this.state.statusSteps
34-
});
35-
}
36-
updateCompletedSteps(CurrentStep) {
37-
return this.state.statusSteps[CurrentStep];
38-
}
39-
createIcon(step) {
40-
if (step.props.isCompleted) {
41-
return (
42-
<FontIcon className='material-icons' style={{fontSize: 14}}>
43-
✓
44-
</FontIcon>
45-
);
46-
}
47-
return <span>{step.props.orderStepLabel}</span>;
48-
}
49-
continue() {
50-
const {activeStep, statusSteps} = this.state;
51-
statusSteps[activeStep] = true;
52-
this.state = {
53-
activeStep: activeStep + 1,
54-
statusSteps,
27+
stepIndex: status.indexOf(false) || 0
5528
};
5629
}
5730
render() {
31+
const {stepIndex} = this.state;
5832
return <div>
59-
<div style={styles.header}>
60-
{this.props.title}
61-
</div>
6233
<Stepper
63-
activeStep={this.state.activeStep}
34+
activeStep={stepIndex}
6435
linear={false}
6536
orientation='vertical'>
66-
{this.props.children}
37+
{this.props.children}
6738
</Stepper>
6839
</div>;
6940
}

0 commit comments

Comments
 (0)