From e66a4de0269fbf253f084979011acc2c7d0970ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Sun, 4 Oct 2020 20:27:52 +0200
Subject: [PATCH] fix: hide content if showing authentication modal

---
 frontend/src/component/app.jsx         | 57 +++++++++++---------------
 frontend/src/component/layout/main.jsx | 35 ++++++++++++++++
 2 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/component/layout/main.jsx

diff --git a/frontend/src/component/app.jsx b/frontend/src/component/app.jsx
index 7daa4b05cc..f566fadc48 100644
--- a/frontend/src/component/app.jsx
+++ b/frontend/src/component/app.jsx
@@ -1,54 +1,43 @@
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Layout, Content, Footer, Grid, Cell } from 'react-mdl';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import styles from './styles.scss';
-import ErrorContainer from './error/error-container';
-import Header from './menu/header';
-import AuthenticationContainer from './user/authentication-container';
 
-import ShowApiDetailsContainer from './api/show-api-details-container';
 import Features from '../page/features';
-
-import { FooterMenu } from './menu/footer';
 import { routes } from './menu/routes';
+import styles from './styles.scss';
+import AuthenticationContainer from './user/authentication-container';
+import MainLayout from './layout/main';
 
-export default class App extends PureComponent {
+class App extends PureComponent {
     static propTypes = {
         location: PropTypes.object.isRequired,
         match: PropTypes.object.isRequired,
         history: PropTypes.object.isRequired,
+        user: PropTypes.object,
     };
 
     render() {
+        if (this.props.user.authDetails) {
+            return <AuthenticationContainer history={this.props.history} />;
+        }
         return (
             <div className={styles.container}>
-                <AuthenticationContainer history={this.props.history} />
-                <Layout fixedHeader>
-                    <Header location={this.props.location} />
-                    <Content className="mdl-color--grey-50" style={{ display: 'flex', flexDirection: 'column' }}>
-                        <Grid noSpacing className={styles.content} style={{ flex: 1 }}>
-                            <Cell col={12}>
-                                <Switch>
-                                    <Route
-                                        exact
-                                        path="/"
-                                        render={() => <Redirect to="/features" component={Features} />}
-                                    />
-                                    {routes.map(route => (
-                                        <Route key={route.path} path={route.path} component={route.component} />
-                                    ))}
-                                </Switch>
-                                <ErrorContainer />
-                            </Cell>
-                        </Grid>
-                        <Footer size="mega">
-                            <FooterMenu />
-                            <ShowApiDetailsContainer />
-                        </Footer>
-                    </Content>
-                </Layout>
+                <MainLayout {...this.props}>
+                    <Switch>
+                        <Route exact path="/" render={() => <Redirect to="/features" component={Features} />} />
+                        {routes.map(route => (
+                            <Route key={route.path} path={route.path} component={route.component} />
+                        ))}
+                    </Switch>
+                </MainLayout>
             </div>
         );
     }
 }
+
+const mapStateToProps = state => ({
+    user: state.user.toJS(),
+});
+
+export default connect(mapStateToProps)(App);
diff --git a/frontend/src/component/layout/main.jsx b/frontend/src/component/layout/main.jsx
new file mode 100644
index 0000000000..9aa5ddece1
--- /dev/null
+++ b/frontend/src/component/layout/main.jsx
@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Layout, Content, Footer, Grid, Cell } from 'react-mdl';
+
+import styles from '../styles.scss';
+import ErrorContainer from '../error/error-container';
+import Header from '../menu/header';
+import ShowApiDetailsContainer from '../api/show-api-details-container';
+import { FooterMenu } from '../menu/footer';
+
+export default class App extends PureComponent {
+    static propTypes = {
+        location: PropTypes.object.isRequired,
+    };
+
+    render() {
+        return (
+            <Layout fixedHeader>
+                <Header location={this.props.location} />
+                <Content className="mdl-color--grey-50" style={{ display: 'flex', flexDirection: 'column' }}>
+                    <Grid noSpacing className={styles.content} style={{ flex: 1 }}>
+                        <Cell col={12}>
+                            {this.props.children}
+                            <ErrorContainer />
+                        </Cell>
+                    </Grid>
+                    <Footer size="mega">
+                        <FooterMenu />
+                        <ShowApiDetailsContainer />
+                    </Footer>
+                </Content>
+            </Layout>
+        );
+    }
+}