add top-level application components

components/App.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import m3core from '../index';
+import Display from './Display';
+import ManifestForm from './ManifestForm';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      lastRequested: '',
+    };
+
+    this.setLastRequested = this.setLastRequested.bind(this);
+  }
+
+  setLastRequested(requested) {
+    this.setState({
+      lastRequested: requested,
+    });
+  }
+
+  computedContent() {
+    const manifest = this.props.manifests[this.state.lastRequested];
+    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';
+  }
+
+  render() {
+    const manifestList = Object.keys(this.props.manifests).map(manifest => (
+      <li key={manifest}>{manifest}</li>
+    ));
+    return (
+      <div className="App">
+        <ManifestForm setLastRequested={this.setLastRequested} />
+        <ul>{manifestList}</ul>
+
+        <Display
+          manifest={this.props.manifests[this.state.lastRequested]}
+        />
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  manifests: PropTypes.instanceOf(Object).isRequired,
+};
+
+const mapStateToProps = state => (
+  {
+    manifests: state.manifests,
+  }
+);
+
+const mapDispatchToProps = dispatch => ({
+  fetchManifest: manifestUrl => (
+    dispatch(m3core.actions.fetchManifest(manifestUrl))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(App);

components/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;

components/ManifestForm.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import m3core from '../index';
+
+class ManifestForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formValue: '',
+    };
+
+    this.formSubmit = this.formSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  formSubmit(event) {
+    event.preventDefault();
+    this.props.fetchManifest(this.state.formValue);
+    this.props.setLastRequested(this.state.formValue);
+  }
+
+  handleInputChange(event) {
+    const that = this;
+    event.preventDefault();
+    that.setState({
+      formValue: event.target.value,
+    });
+  }
+
+
+  render() {
+    return (
+      <form onSubmit={this.formSubmit}>
+        <input
+          value={this.state.formValue}
+          id="manifestURL"
+          type="text"
+          onChange={this.handleInputChange}
+        />
+        <button id="fetchBtn" type="submit">FetchManifest</button>
+      </form>
+    );
+  }
+}
+
+ManifestForm.propTypes = {
+  fetchManifest: PropTypes.func.isRequired,
+  setLastRequested: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = () => (
+  {}
+);
+
+
+const mapDispatchToProps = dispatch => ({
+  fetchManifest: manifestUrl => (
+    dispatch(m3core.actions.fetchManifest(manifestUrl))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ManifestForm);

components/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>React App</title>
+  </head>
+  <body>
+    <!-- <div id="root"></div> -->
+    <div id="mirador"></div>
+    <script src="mirador.min.js"></script>
+  </body>
+</html>

components/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import App from './App';
+import m3core from '../index';
+import './index.scss';
+
+ReactDOM.render(
+  <Provider store={m3core.store}>
+    <App />
+  </Provider>,
+  document.getElementById('mirador'),
+);

components/index.scss

+body {
+    background: lighten(red, 20%);
+}

front-end.config.js

+const path = require('path');
+
+module.exports = [
+  {
+    entry: './components/index.js',
+    output: {
+      path: path.join(__dirname, './components'),
+      filename: 'mirador.min.js',
+    },
+    resolve: { extensions: ['.js'] },
+    module: {
+      loaders: [
+        {
+          test: /\.jsx?$/,
+          exclude: /(node_modules)/,
+          loader: 'babel-loader',
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'style-loader', // creates style nodes from JS strings
+            'css-loader', // translates CSS into CommonJS
+            'sass-loader', // compiles Sass to CSS, using Node Sass by default
+          ],
+        }],
+    },
+  },
+];

package.json

@@ -9,7 +9,8 @@
     "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"
+    "build:dev": "node_modules/.bin/webpack --config front-end.config.js",
+    "build:integrations": "node_modules/.bin/webpack --config integrations.config.js"
   },
   "author": "Drew Winget <scipioaffricanus@gmail.com> (https://aeschylus.net/)",
   "license": "MIT",