Initial setup of the submissions by round

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

@@ -11,11 +11,11 @@
                 <h1 class="gamma heading heading--no-margin heading--bold">{{ object }}</h1>
                 <h5>{% if object.fund %}{{ object.fund }} | {% endif %}Lead: {{ object.lead }}</h5>
             </div>
-            <div id="react-switcher"></div>
+            <div id="submissions-by-round-app-react-switcher"></div>
         </div>
     </div>
 
-    <div id="react-app">
+    <div id="submissions-by-round-react-app">
         <div class="wrapper wrapper--large wrapper--inner-space-medium">
             {% block table %}
                 {{ block.super }}

opentech/static_src/src/app/src/App.js → opentech/static_src/src/app/src/SubmissionsByRoundApp.js

 import React from 'react';
 import { hot } from 'react-hot-loader'
-import Switcher from './components/Switcher'
-import './App.scss';
+import Switcher from '@components/Switcher'
+import SubmissionsByRoundContainer from '@containers/SubmissionsByRoundContainer';
 
 
-class App extends React.Component {
+class SubmissionsByRoundApp extends React.Component {
     constructor(props) {
         super(props);
 
@@ -26,13 +26,19 @@ class App extends React.Component {
     render() {
         return (
             <>
-                <Switcher selector='react-switcher' open={this.state.detailOpen} handleOpen={this.detailOpen} handleClose={this.detailClose} />
+                <Switcher selector='submissions-by-round-app-react-switcher' open={this.state.detailOpen} handleOpen={this.detailOpen} handleClose={this.detailClose} />
                 <div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
-                {this.state.detailOpen && <div><h2>THIS IS REACT</h2></div>}
+                {this.state.detailOpen && this.renderSubmissionsByRound()}
             </>
         )
     }
+
+  renderSubmissionsByRound() {
+    return <div>
+        <SubmissionsByRoundContainer />
+    </div>;
+  }
 }
 
 
-export default hot(module)(App)
+export default hot(module)(SubmissionsByRoundApp)

opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js

+import React from 'react';
+
+export default class SubmissionsByRoundContainer extends React.Component {
+    render() {
+        return (
+            <div>
+                <h2>Submissions by round container</h2>
+            </div>
+        );
+    }
+}

opentech/static_src/src/app/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './App'
+import SubmissionsByRoundApp from './SubmissionsByRoundApp'
 
 
-const container = document.getElementById('react-app');
+const container = document.getElementById('submissions-by-round-react-app');
 
 
 ReactDOM.render(
-    <App pageContent={container.innerHTML} />,
+    <SubmissionsByRoundApp pageContent={container.innerHTML} />,
     container
 );

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

@@ -55,6 +55,10 @@ module.exports = {
 
     resolve: {
         modules: ['node_modules', './src'],
-        extensions: ['.js', '.jsx']
+        extensions: ['.js', '.jsx'],
+        alias: {
+            '@components': path.resolve(__dirname, 'src/components'),
+            '@containers': path.resolve(__dirname, 'src/containers'),
+        }
     }
 };