use a portal to reference the switcher element

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

@@ -4,7 +4,6 @@
 {% block title %}{{ object }}{% endblock %}
 
 {% block content %}
-<div id="react-app">
     <div class="admin-bar">
         <div class="admin-bar__inner admin-bar__inner--with-button">
             <div>
@@ -16,13 +15,13 @@
         </div>
     </div>
 
-    <div id="react-original-content" class="wrapper wrapper--large">
-        {% block table %}
-            {{ block.super }}
-        {% endblock %}
+    <div id="react-app">
+        <div 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 Switcher from './components/Switcher'
 import './App.scss';
 
+
 class App extends React.Component {
     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
@@ -28,13 +14,11 @@ class App extends React.Component {
     }
 
     detailOpen = (state) => {
-        this.originalContent.style.display = 'none';
-        this.setState({ style: { display: 'None' } })
+        this.setState({ style: { display: 'none' } })
         this.setState({ detailOpen: true })
     }
 
     detailClose = () => {
-        this.originalContent.style.display = null;
         this.setState({ style: {} })
         this.setState({ detailOpen: false })
     }
@@ -42,7 +26,8 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <div ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
+                <Switcher selector='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>}
             </div>
         )

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

+import React from 'react'
+import ReactDOM from 'react-dom';
+import ArrayIcon from 'images/icon-array.svg'
+import GridIcon from 'images/icon-grid.svg';
+
+class Switcher extends React.Component {
+    constructor(props) {
+        super(props);
+        this.el = document.getElementById(props.selector);
+    }
+
+    render() {
+        const { handleOpen, handleClose, open } = this.props;
+
+        return ReactDOM.createPortal(
+            <>
+                <button className={`button button--switcher ${open ? 'is-active' : ''}`} onClick={handleOpen}><ArrayIcon /></button>
+                <button className={`button button--switcher ${open ? '' : 'is-active'}`} onClick={handleClose}><GridIcon /></button>
+            </>,
+            this.el,
+        );
+    }
+}
+
+export default Switcher

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

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

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

@@ -42,7 +42,7 @@ module.exports = {
     },
 
     resolve: {
-        modules: ['node_modules'],
+        modules: ['node_modules', './src'],
         extensions: ['.js', '.jsx']
     }
 };