part of #1727: divide <App/> into component and container

__tests__/src/components/App.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import { App } from '../../../src/components/App';
+import App from '../../../src/components/App';
 
 describe('App', () => {
   it('renders without an error', () => {

src/components/App.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Fullscreen from 'react-fullscreen-crossbrowser';
-import * as actions from '../state/actions';
 import WorkspaceControlPanel from './WorkspaceControlPanel';
 import ConnectedWorkspace from './Workspace';
 import ns from '../config/css-ns';
@@ -14,7 +10,7 @@ import ns from '../config/css-ns';
  * This is the top level Mirador component.
  * @prop {Object} manifests
  */
-export class App extends Component {
+class App extends Component {
   /**
    * render
    * @return {String} - HTML markup for the component
@@ -36,18 +32,6 @@ export class App extends Component {
   }
 }
 
-/**
- * mapStateToProps - to hook up connect
- * @memberof App
- * @private
- */
-const mapStateToProps = state => (
-  {
-    workspace: state.workspace,
-    manifests: state.manifests,
-  }
-);
-
 App.propTypes = {
   workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   fullscreenWorkspace: PropTypes.func,
@@ -58,19 +42,4 @@ App.defaultProps = {
   fullscreenWorkspace: () => {},
 };
 
-/**
- * mapDispatchToProps - used to hook up connect to action creators
- * @memberof App
- * @private
- */
-const mapDispatchToProps = {
-  fetchManifest: actions.fetchManifest,
-  fullscreenWorkspace: actions.fullscreenWorkspace,
-};
-
-const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  // further HOC go here
-);
-
-export default enhance(App);
+export default App;

src/containers/App.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from '../state/actions';
+import App from '../components/App';
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof App
+ * @private
+ */
+const mapStateToProps = state => (
+  {
+    workspace: state.workspace,
+    manifests: state.manifests,
+  }
+);
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof App
+ * @private
+ */
+const mapDispatchToProps = {
+  fetchManifest: actions.fetchManifest,
+  fullscreenWorkspace: actions.fullscreenWorkspace,
+};
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  // further HOC go here
+);
+
+export default enhance(App);

src/lib/MiradorViewer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import deepmerge from 'deepmerge';
-import ConnectedApp from '../components/App';
+import App from '../containers/App';
 import createRootReducer from '../state/reducers/index';
 import createStore from '../state/createStore';
 import * as actions from '../state/actions';
@@ -26,7 +26,7 @@ class MiradorViewer {
 
     ReactDOM.render(
       <Provider store={store}>
-        <ConnectedApp config={config} />
+        <App config={config} />
       </Provider>,
       document.getElementById(config.id),
     );