moves root react elements to include the admin bar, adds svg loader

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

@@ -4,24 +4,25 @@
 {% block title %}{{ object }}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner">
-        <div>
-            <h5><a href="{% url "apply:submissions:list" %}">< Submissions</a></h5>
-            <h1 class="gamma heading heading--no-margin heading--bold">{{ object }}</h1>
-            <h5>{% if object.fund %}{{ object.fund }} | {% endif %}Lead: {{ object.lead }}</h5>
+<div id="react-app">
+    <div class="admin-bar">
+        <div class="admin-bar__inner admin-bar__inner--with-button">
+            <div>
+                <h5><a href="{% url "apply:submissions:list" %}">< Submissions</a></h5>
+                <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>
     </div>
-</div>
 
-<div class="wrapper wrapper--large">
-    <div id="react-app">
+    <div id="react-original-content" class="wrapper wrapper--large">
         {% block table %}
             {{ block.super }}
         {% endblock %}
     </div>
-</div>
 
+</div>
 {% render_bundle 'main' %}
 
 {% endblock %}

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

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { hot } from 'react-hot-loader'
+import ArrayIcon from './../../images/icon-array.svg';
+import GridIcon from './../../images/icon-grid.svg';
 
 import './App.scss';
 
 class App extends React.Component {
-    constructor(props){
+    constructor(props) {
         super(props);
+        this.originalContent = null;
+        this.setOriginalContentRef = element => {
+            this.originalContent = element.querySelector('#react-original-content');
+
+            ReactDOM.render(
+                <div>
+                    <button onClick={this.detailOpen}><ArrayIcon /></button>
+                    <button onClick={this.detailClose}><GridIcon /></button>
+                </div>,
+                element.querySelector('#react-switcher')
+            );
+        };
+
         this.state = {
             detailOpen: false
         }
     }
 
     detailOpen = (state) => {
-        this.setState({style: {display: 'None'}})
-        this.setState({detailOpen: true})
+        this.originalContent.style.display = 'none';
+        this.setState({ style: { display: 'None' } })
+        this.setState({ detailOpen: true })
     }
 
     detailClose = () => {
-        this.setState({style: {}})
-        this.setState({detailOpen: false})
+        this.originalContent.style.display = null;
+        this.setState({ style: {} })
+        this.setState({ detailOpen: false })
     }
 
-    render () {
+    render() {
         return (
             <div>
-                <div>
-                    <button className="red-button" onClick={this.detailOpen}>Detail View</button>
-                    |
-                    <button onClick={this.detailClose}>List View</button>
-                </div>
+                <div ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
                 {this.state.detailOpen && <div><h2>THIS IS REACT</h2></div>}
-                <div style={this.state.style} dangerouslySetInnerHTML={ {__html: this.props.originalContent} } />
             </div>
-    )}
+        )
+    }
 }
 
+
 export default hot(module)(App)

opentech/static_src/src/app/src/App.scss

-.red-button {
-    background-color: red;
-}

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

@@ -4,10 +4,10 @@ import ReactDOM from 'react-dom';
 import App from './App'
 
 
-const container = document.getElementById('react-app')
+const container = document.getElementById('react-app');
 
 
 ReactDOM.render(
-    <App originalContent={container.innerHTML} />,
+    <App pageContent={container.innerHTML} originalContent={document.getElementById('react-original-content')} />,
     container
 );

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

-var path = require("path")
+var path = require('path');
 
 module.exports = {
     context: __dirname,
@@ -6,7 +6,7 @@ module.exports = {
     entry: ['./src/index'],
 
     output: {
-        filename: "[name]-[hash].js"
+        filename: '[name]-[hash].js'
     },
 
     plugins: [
@@ -33,6 +33,10 @@ module.exports = {
                     'css-loader',
                     'sass-loader'
                 ]
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack']
             }
         ]
     },
@@ -40,5 +44,5 @@ module.exports = {
     resolve: {
         modules: ['node_modules'],
         extensions: ['.js', '.jsx']
-    },
-}
+    }
+};

opentech/static_src/src/images/icon-array.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 18h3V5H4v13zM18 5v13h3V5h-3zM8 18h9V5H8v13z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file

opentech/static_src/src/images/icon-grid.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file

package.json

@@ -12,6 +12,7 @@
         "last 2 versions"
     ],
     "dependencies": {
+        "@svgr/webpack": "^4.1.0",
         "del": "^3.0.0",
         "gulp": "^4.0.0",
         "gulp-babel": "^8.0.0",