Split out bundle for the submissions by status app

gulpfile.js

@@ -235,10 +235,13 @@ gulp.task('watch:static', function watch () {
 gulp.task('watch:app', function watch (callback) {
     var webpackOptions = webpackDev();
 
-    webpackOptions.entry.unshift(
-        `webpack-dev-server/client?http://localhost:${webpackOptions.devServer.port}/`,
-        `webpack/hot/dev-server`
-    );
+    webpackOptions.entry = Object.keys(webpackOptions.entry).reduce((acc, key) => {
+        acc[key] = [
+            `webpack-dev-server/client?http://localhost:${webpackOptions.devServer.port}/`,
+            'webpack/hot/dev-server',
+        ].concat(webpackOptions.entry[key])
+        return acc;
+    }, {});
 
     var serverOptions = Object.assign(
         {}, webpackOptions.devServer, {

opentech/apply/funds/templates/funds/submissions_by_round.html

@@ -21,6 +21,6 @@
             {% endblock %}
         </div>
     </div>
-{% render_bundle 'main' %}
+{% render_bundle 'submissionsByRound' %}
 
 {% endblock %}

opentech/apply/funds/templates/funds/submissions_by_status.html

@@ -20,6 +20,6 @@
             {% endblock %}
         </div>
     </div>
-{% render_bundle 'main' %}
+{% render_bundle 'submissionsByStatus' %}
 
 {% endblock %}

opentech/static_src/src/app/src/SubmissionsByStatusApp.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux'
+
+import Switcher from '@components/Switcher';
+
+
+class SubmissionsByStatusApp extends React.Component {
+    static propTypes = {
+        roundID: PropTypes.number,
+        setSubmissionRound: PropTypes.func,
+        pageContent: PropTypes.node.isRequired,
+    };
+
+
+    state = { detailOpened: false };
+
+    componentDidMount() {
+    }
+
+    openDetail = () => {
+        this.setState(state => ({
+            style: { ...state.style, display: 'none' } ,
+            detailOpened: true,
+        }));
+    }
+
+    closeDetail = () => {
+        this.setState(state => {
+            const newStyle = { ...state.style };
+            delete newStyle.display;
+            return {
+                style: newStyle,
+                detailOpened: false,
+            };
+        });
+    }
+
+    render() {
+        return (
+            <>
+                <Switcher selector='submissions-by-status-app-react-switcher' open={this.state.detailOpened} handleOpen={this.openDetail} handleClose={this.closeDetail} />
+
+                <div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
+
+                {this.state.detailOpened &&
+                    //<GroupByStatusDetailView roundId={this.props.roundID} />
+                    <p>Test</p>
+                }
+            </>
+        )
+    }
+}
+
+export default hot(module)(
+    connect(null, null)(SubmissionsByStatusApp)
+);

opentech/static_src/src/app/src/submissionsByStatusIndex.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import SubmissionsByStatusApp from './SubmissionsByStatusApp';
+import createStore from '@redux/store';
+
+
+const container = document.getElementById('submissions-by-status-react-app');
+
+const store = createStore();
+
+ReactDOM.render(
+    <Provider store={store}>
+        <SubmissionsByStatusApp pageContent={container.innerHTML} />
+    </Provider>,
+    container
+);

opentech/static_src/src/app/webpack.base.config.js

 var path = require('path');
 
+var COMMON_ENTRY = ['@babel/polyfill', './src/datetime']
+
 module.exports = {
     context: __dirname,
 
-    entry: ['@babel/polyfill', './src/datetime', './src/index'],
-
+    entry: {
+        submissionsByRound: COMMON_ENTRY.concat(['./src/submissionsByRoundIndex']),
+        submissionsByStatus: COMMON_ENTRY.concat(['./src/submissionsByStatusIndex']),
+    },
     output: {
         filename: '[name]-[hash].js'
     },