refactor components to use selectors

Author: ShMcK

lib/components/Start/Checks/index.js

@@ -1,5 +1,20 @@
 "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 SystemChecks_1 = require('./SystemChecks');
 var SetupChecks_1 = require('./SetupChecks');
 var InstallGuide_1 = require('./InstallGuide');
@@ -8,16 +23,25 @@ var styles = {
     margin: '5px',
     padding: '10px',
 };
-var Checks = function (_a) {
-    var checks = _a.checks;
-    if (!checks) {
-        return React.createElement(index_1.ContentCard, {title: 'Error Loading Package.json', content: ''});
+var Checks = (function (_super) {
+    __extends(Checks, _super);
+    function Checks() {
+        _super.apply(this, arguments);
     }
-    return (React.createElement("div", {style: styles}, !checks.system.passed
-        ? React.createElement(SystemChecks_1.default, {checks: checks})
-        : null, !checks.setup.passed
-        ? React.createElement(SetupChecks_1.default, {checks: checks})
-        : null, React.createElement(InstallGuide_1.default, {checks: checks})));
-};
+    Checks.prototype.render = function () {
+        var checks = this.props.checks;
+        if (!checks) {
+            return React.createElement(index_1.ContentCard, {title: 'Error Loading Package.json'});
+        }
+        return (React.createElement("div", {style: styles}, !checks.system.passed ? React.createElement(SystemChecks_1.default, {checks: checks}) : null, !checks.setup.passed ? React.createElement(SetupChecks_1.default, {checks: checks}) : null, React.createElement(InstallGuide_1.default, {checks: checks})));
+    };
+    Checks = __decorate([
+        react_redux_1.connect(function (state) { return ({
+            checks: state.checks,
+        }); }), 
+        __metadata('design:paramtypes', [])
+    ], Checks);
+    return Checks;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Checks;

lib/components/Start/index.js

@@ -29,14 +29,12 @@ var Start = (function (_super) {
         _super.apply(this, arguments);
     }
     Start.prototype.render = function () {
-        var checks = this.props.checks;
-        return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {style: headerStyles}, checks.passed
-            ? React.createElement(Welcome_1.default, null)
-            : React.createElement(Checks_1.default, {checks: checks}))));
+        var ready = this.props.ready;
+        return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {style: headerStyles}, ready ? React.createElement(Welcome_1.default, null) : React.createElement(Checks_1.default, null))));
     };
     Start = __decorate([
         react_redux_1.connect(function (state) { return ({
-            checks: state.checks,
+            ready: state.checks.passed,
         }); }), 
         __metadata('design:paramtypes', [])
     ], Start);

lib/components/common/ContentCard.js

@@ -7,7 +7,7 @@ var styles = {
 };
 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))));
+    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;

src/components/Page/PageToolbar/ToggleDevTools/index.tsx

@@ -19,9 +19,7 @@ export default class ToggleDevTools extends React.Component<{
     return (
       <FlatButton
         style={styles}
-        icon={
-          <Code />
-        }
+        icon={<Code />}
         onTouchTap={this.props.toggle}
       />
     );

src/components/Start/Checks/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {connect} from 'react-redux';
 import SystemChecks from './SystemChecks';
 import SetupChecks from './SetupChecks';
 import InstallGuide from './InstallGuide';
@@ -9,25 +10,23 @@ const styles = {
   padding: '10px',
 };
 
-const Checks: React.StatelessComponent<{
-  checks: CR.Checks
-}> = ({checks}) => {
-  if (!checks) {
-    return <ContentCard
-        title='Error Loading Package.json'
-        content=''
-      />;
+@connect(state => ({
+  checks: state.checks,
+}))
+export default class Checks extends React.Component<{
+  checks?: CR.Checks
+}, {}> {
+  render() {
+    const {checks} = this.props;
+    if (!checks) {
+      return <ContentCard title='Error Loading Package.json' />;
+    }
+    return (
+      <div style={styles}>
+        {!checks.system.passed ? <SystemChecks checks={checks} /> : null}
+        {!checks.setup.passed ? <SetupChecks checks={checks} /> : null}
+        <InstallGuide checks={checks} />
+      </div>
+    );
   }
-  return (
-    <div style={styles}>
-    {!checks.system.passed
-      ? <SystemChecks checks={checks} />
-      : null}
-      {!checks.setup.passed
-        ? <SetupChecks checks={checks} />
-        : null}
-      <InstallGuide checks={checks} />
-    </div>
-  );
-};
-export default Checks;
+}

src/components/Start/index.tsx

@@ -11,19 +11,17 @@ const headerStyles = {
 };
 
 @connect(state => ({
-  checks: state.checks,
+  ready: state.checks.passed,
 }))
 export default class Start extends React.Component<{
-  checks?: CR.Checks
+  ready?: CR.Checks
 }, {}> {
   render() {
-    const {checks} = this.props;
+    const {ready} = this.props;
     return (
       <section className='cr-start'>
         <div style={headerStyles}>
-        {checks.passed
-          ? <Welcome  />
-          : <Checks checks={checks} />}
+        {ready ? <Welcome  /> : <Checks />}
         </div>
       </section>
     );

src/components/common/ContentCard.tsx

@@ -7,12 +7,12 @@ const styles = {
 };
 
 const ContentCard: React.StatelessComponent<{
-  title: string, content: string
+  title: string, content?: string
 }> = ({title, content}) => (
   <Card style={styles}>
     {title ? <CardHeader title={title} /> : null}
     <CardText>
-      <Markdown>{content}</Markdown>
+      <Markdown>{content || ''}</Markdown>
     </CardText>
   </Card>
 );