load packageJson validations

Author: ShMcK

lib/components/Publish/index.js

@@ -20,6 +20,9 @@ var Card_1 = require('material-ui/Card');
 var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../actions');
 var TopPanel_1 = require('../TopPanel');
+var error_1 = require('material-ui/svg-icons/alert/error');
+var warning_1 = require('material-ui/svg-icons/alert/warning');
+var colors_1 = require('material-ui/styles/colors');
 var styles = {
     card: {
         margin: '10px',
@@ -41,9 +44,14 @@ var TutorialPublish = (function (_super) {
     };
     TutorialPublish.prototype.componentDidMount = function () {
         TopPanel_1.topElement.toggle(false);
+        this.validate();
+    };
+    TutorialPublish.prototype.validate = function () {
+        this.props.pjLoad();
+        this.props.validatePj();
     };
     TutorialPublish.prototype.render = function () {
-        var _a = this.props, validation = _a.validation, validatePj = _a.validatePj;
+        var validation = this.props.validation;
         return (React.createElement(Card_1.Card, {style: styles.card}, 
             React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), 
             React.createElement(Table_1.Table, {fixedHeader: true, selectable: false}, 
@@ -55,20 +63,24 @@ var TutorialPublish = (function (_super) {
                 ), 
                 React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, 
                     validation.errors.map(function (field, index) { return (React.createElement(Table_1.TableRow, {key: index}, 
-                        React.createElement(Table_1.TableRowColumn, null, "Error"), 
+                        React.createElement(Table_1.TableRowColumn, null, 
+                            React.createElement(error_1.default, {color: colors_1.pink500})
+                        ), 
                         React.createElement(Table_1.TableRowColumn, null, field.name), 
                         React.createElement(Table_1.TableRowColumn, null, field.example))); }), 
                     validation.warnings.map(function (field, index) { return (React.createElement(Table_1.TableRow, {key: index}, 
-                        React.createElement(Table_1.TableRowColumn, null, "Warning"), 
+                        React.createElement(Table_1.TableRowColumn, null, 
+                            React.createElement(warning_1.default, {color: colors_1.amber500})
+                        ), 
                         React.createElement(Table_1.TableRowColumn, null, field.name), 
                         React.createElement(Table_1.TableRowColumn, null, field.example))); }))), 
-            React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Validate', primary: true, onTouchTap: validatePj}), 
+            React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Validate', primary: true, onTouchTap: this.validate.bind(this)}), 
             React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Publish', secondary: true, disabled: validation.errors.length === 0, onTouchTap: function () { return alert('Publish not yet implemented'); }})));
     };
     TutorialPublish = __decorate([
         react_redux_1.connect(function (state) { return ({
             validation: state.validation,
-        }); }, { pjLoad: actions_1.pjLoad, pjSave: actions_1.pjSave, editorPjOpen: actions_1.editorPjOpen, validatePj: actions_1.validatePj }), 
+        }); }, { pjLoad: actions_1.pjLoad, editorPjOpen: actions_1.editorPjOpen, validatePj: actions_1.validatePj }), 
         __metadata('design:paramtypes', [])
     ], TutorialPublish);
     return TutorialPublish;

lib/modules/validation/actions.js

@@ -1,6 +1,9 @@
 "use strict";
 var types_1 = require('./types');
 function validatePj() {
-    return { type: types_1.VALIDATE_PJ };
+    return function (dispatch, getState) {
+        var packageJson = getState().packageJson;
+        dispatch({ type: types_1.VALIDATE_PJ, payload: { packageJson: packageJson } });
+    };
 }
 exports.validatePj = validatePj;

lib/modules/validation/reducer.js

@@ -9,7 +9,7 @@ function validation(v, action) {
     if (v === void 0) { v = _v; }
     switch (action.type) {
         case types_1.VALIDATE_PJ:
-            return coderoad_cli_1.validatePackageJson();
+            return coderoad_cli_1.validatePackageJson(action.payload.packageJson);
         default:
             return v;
     }

src/components/Publish/index.tsx

@@ -7,6 +7,9 @@ import RaisedButton from 'material-ui/RaisedButton';
 import {validatePj, pjSave, pjLoad, routeSet, editorPjOpen} from '../../actions';
 import {topElement} from '../TopPanel';
 import textField from '../Form/textField';
+import ErrorIcon from 'material-ui/svg-icons/alert/error';
+import WarningIcon from 'material-ui/svg-icons/alert/warning';
+import {pink500, amber500} from 'material-ui/styles/colors';
 
 const styles = {
   card: {
@@ -21,10 +24,9 @@ const styles = {
 
 @connect(state => ({
   validation: state.validation,
-}), {pjLoad, pjSave, editorPjOpen, validatePj})
+}), {pjLoad, editorPjOpen, validatePj})
 export default class TutorialPublish extends React.Component<{
   validation?: Validation.Object,
-  pjSave?: (pj: PackageJson) => any,
   pjLoad?: () => Redux.ActionCreator,
   validatePj?: () => Redux.ActionCreator,
   editorPjOpen?: () => Redux.ActionCreator,
@@ -35,9 +37,14 @@ export default class TutorialPublish extends React.Component<{
   }
   componentDidMount() {
     topElement.toggle(false);
+    this.validate();
+  }
+  validate() {
+    this.props.pjLoad();
+    this.props.validatePj();
   }
   render() {
-    const {validation, validatePj} = this.props;
+    const {validation} = this.props;
     return (
       <Card style={styles.card}>
         <CardHeader
@@ -62,14 +69,18 @@ export default class TutorialPublish extends React.Component<{
           >
             {validation.errors.map((field, index) => (
               <TableRow key={index}>
-                <TableRowColumn>Error</TableRowColumn>
+                <TableRowColumn>
+                  <ErrorIcon color={pink500}/>
+                </TableRowColumn>
                 <TableRowColumn>{field.name}</TableRowColumn>
                 <TableRowColumn>{field.example}</TableRowColumn>
               </TableRow>
             ))}
             {validation.warnings.map((field, index) => (
               <TableRow key={index}>
-                <TableRowColumn>Warning</TableRowColumn>
+                <TableRowColumn>
+                  <WarningIcon color={amber500}/>
+                </TableRowColumn>
                 <TableRowColumn>{field.name}</TableRowColumn>
                 <TableRowColumn>{field.example}</TableRowColumn>
               </TableRow>
@@ -80,7 +91,7 @@ export default class TutorialPublish extends React.Component<{
           style={styles.button}
           label='Validate'
           primary={true}
-          onTouchTap={validatePj}
+          onTouchTap={this.validate.bind(this)}
         />
         <RaisedButton
           style={styles.button}

src/modules/validation/actions.ts

@@ -1,5 +1,8 @@
 import {VALIDATE_PJ} from './types';
 
 export function validatePj() {
-  return { type: VALIDATE_PJ };
+  return (dispatch, getState) => {
+    const {packageJson} = getState();
+    dispatch({ type: VALIDATE_PJ, payload: {packageJson} });
+  };
 }

src/modules/validation/reducer.ts

@@ -9,7 +9,7 @@ const _v: Validation.Object = {
 export default function validation(v = _v, action: Action): Validation.Object {
   switch (action.type) {
     case VALIDATE_PJ:
-      return validatePackageJson();
+      return validatePackageJson(action.payload.packageJson);
     default:
       return v;
   }