Fixed modal

public/components/App.jsx

@@ -35,13 +35,11 @@ import Favicon from './Favicon';
 //Routes Definitions
 const AppRoutes = (props) => {
   return (
-    <React.Fragment>
     <Routes onEntering={ props.onEntering }>
       <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
       <RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
       <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
     </Routes>
-    </React.Fragment>
   );
 };
 
@@ -61,12 +59,15 @@ class App extends React.Component {
   }
 
   render() {
-    let { className } = this.props;
+    let newProps=  {...this.props};
+    let { className, modal } = newProps;
+    ["dispatch"].forEach(e => delete newProps[e]);
 
     //Generate base clazzes
     let clazz = "c-app";
 
     //Append any other clazzes there may be.
+    if(modal.open) clazz += ' is-modal-open';
     if(className) clazz += ` ${className}`;
 
     //For testing you can switch the router type
@@ -75,7 +76,8 @@ class App extends React.Component {
 
     return (
       <RouterType>
-        <div {...this.props} className={ clazz } ref="app">
+        <div {...newProps} className={ clazz } ref="app">
+          { modal.modal }
           <Favicon />
           <Header />
           <main>
@@ -88,4 +90,6 @@ class App extends React.Component {
   }
 }
 
-export default App;
+export default connect(state => {
+  return { modal: state.modal };
+})(App);

public/objects/modal/Modal.jsx

@@ -54,15 +54,15 @@ class Modal extends React.Component {
   }
 
   render() {
-    let { buttons, closeModal, close, title, children, large, modal } = this.props;
+    let newProps = {...this.props};
+    let { buttons, closeModal, close, title, children, large, modal } = newProps;
+    ["onExited"].forEach(e => delete newProps[e]);
 
     //Add necessary buttons
     buttons = buttons || [];
     if(!Array.isArray(buttons)) buttons = [ buttons ];
 
-    if(close) {
+    if(close) buttons = [...buttons,<Button key="close" onClick={closeModal} children={Language.get("modal.close")} />];
-      buttons.push(<Button key="close" onClick={closeModal}>{ Language.get("modal.close") }</Button>);
-    }
 
     //Inner divs
     let heading,body,footer;
@@ -70,26 +70,22 @@ class Modal extends React.Component {
     if(title) {
       heading = (
         <div className="o-modal__box-heading">
-          <Heading4 className="o-modal__title">\{ title }</Heading4>
+          <Heading4 className="o-modal__title">{ title }</Heading4>
         </div>
       );
     }
-
+    if(children) body = <div className="o-modal__box-body" children={ children } />;
-    if(children) {
+    if(buttons && buttons.length) footer = <div className="o-modal__box-footer">{ buttons }</div>;
-      body = <div className="o-modal__box-body" children={ children } />;
-    }
-
-    if(buttons && buttons.length) {
-      footer = <div className="o-modal__box-footer">{ buttons }</div>;
-    }
 
     //Create our modal contents
-    let contents = (
+    let contents = <div />;
+
+    if(modal.open) {
+      contents = (
         <div className="o-modal">
           <div className="o-modal__inner">
             {/* Provides both a good overlay, and a nice clickable area  */}
-          <div className="o-modal__backdrop" onClick={closeModal}>
+            <div className="o-modal__backdrop" onClick={closeModal} />
-          </div>
 
             {/* Box itself, has a background and a shadow */}
             <div className={"o-modal__box"+(large ? " is-large":"")}>
@@ -100,29 +96,14 @@ class Modal extends React.Component {
           </div>
         </div>
       );
-
-    //Display?
-    let displayedContents = <div></div>;
-
-    if(modal.open) {
-      displayedContents = (
-        <CSSTransition
-          appear={true}
-          timeout={200}
-          classNames="o-modal__transition"
-          mountOnEnter={ true }
-          unmountOnExit={ true }
-          key="modal"
-        >
-          { contents }
-        </CSSTransition>
-      );
     }
 
     //Wrap entire contents of modal in transitional container.
     return (
       <TransitionGroup className="o-modal__transition-container">
-        { displayedContents }
+        <CSSTransition appear={true} timeout={200} classNames="o-modal__transition" mountOnEnter={ true } unmountOnExit={ true } key="modal">
+          { contents }
+        </CSSTransition>
       </TransitionGroup>
     );
   }