1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

fix: hide content if showing authentication modal

This commit is contained in:
Ivar Conradi Østhus 2020-10-04 20:27:52 +02:00
parent 0a2672270e
commit e66a4de026
2 changed files with 58 additions and 34 deletions

View File

@ -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);

View File

@ -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>
);
}
}