Decompose app (#26)

* add display component

* break out the display component as a 'dumb component'

* add .js file replacements and fix typos in App.js

* fix tests

* remove redundant rules from eslint

* remove old jsx App

* remove index.jsx

* test npm start removal for travis

* change lint ordering

.eslintrc

@@ -4,7 +4,10 @@
   },
   "extends": "airbnb",
   "globals": {
-    page: true
+    "page": true
   },
-  "plugins": ["jest"]
+  "plugins": ["jest"],
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  }
 }

__tests__/integration/react-example/App.jsx → __tests__/integration/react-example/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import m3core from '../../../index.umd';
+import Display from './Display';
 
 class App extends Component {
   constructor(props) {
@@ -57,9 +58,10 @@ class App extends Component {
 
           <button id="fetchBtn" type="submit">FetchManifest</button>
           <ul>{manifestList}</ul>
-          <pre id="exampleManifest">
-            { this.computedContent() }
-          </pre>
+
+          <Display
+            manifest={this.props.manifests[this.state.lastRequested]}
+          />
         </form>
       </div>
     );

__tests__/integration/react-example/Display.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+const displayContent = (manifest) => {
+  if (manifest) {
+    if (manifest.isFetching) {
+      return '☕';
+    } else if (manifest.error) {
+      return manifest.error.message;
+    }
+    return JSON.stringify(manifest.json, 0, 2);
+  }
+  return 'Nothing Selected Yet';
+};
+
+const stateClass = (manifest) => {
+  if (manifest) {
+    if (manifest.isFetching) {
+      return 'fetching';
+    } else if (manifest.error) {
+      return 'error';
+    }
+    return '';
+  }
+  return 'empty';
+};
+
+const Display = props => (
+  <div className="Display">
+    <pre id="exampleManifest" className={stateClass(props.manifest)}>
+      {displayContent(props.manifest)}
+    </pre>
+  </div>
+);
+
+Display.propTypes = {
+  manifest: PropTypes.oneOfType([null, PropTypes.object]),
+};
+
+Display.defaultProps = {
+  manifest: null,
+};
+
+export default Display;

integrations.config.js

@@ -2,12 +2,12 @@ const path = require('path');
 
 module.exports = [
   {
-    entry: './__tests__/integration/react-example/index.jsx',
+    entry: './__tests__/integration/react-example/index.js',
     output: {
       path: path.join(__dirname, '__tests__/integration/react-example'),
       filename: 'test-react.build.js',
     },
-    resolve: { extensions: ['.js', '.jsx'] },
+    resolve: { extensions: ['.js'] },
     module: {
       loaders: [
         {

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "node_modules/.bin/eslint ./",
     "server": "node_modules/.bin/http-server -p 4444",
-    "test": "npm run lint && npm run build && npm run build:dev && node_modules/.bin/jest",
+    "test": "npm run build && npm run build:dev && npm run lint && node_modules/.bin/jest",
     "test:watch": "npm test -- --watch",
     "build": "node_modules/.bin/webpack",
     "build:dev": "node_modules/.bin/webpack --config integrations.config.js"