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:
parent
0a2672270e
commit
e66a4de026
@ -1,54 +1,43 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Layout, Content, Footer, Grid, Cell } from 'react-mdl';
|
|
||||||
import { Route, Redirect, Switch } from 'react-router-dom';
|
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 Features from '../page/features';
|
||||||
|
|
||||||
import { FooterMenu } from './menu/footer';
|
|
||||||
import { routes } from './menu/routes';
|
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 = {
|
static propTypes = {
|
||||||
location: PropTypes.object.isRequired,
|
location: PropTypes.object.isRequired,
|
||||||
match: PropTypes.object.isRequired,
|
match: PropTypes.object.isRequired,
|
||||||
history: PropTypes.object.isRequired,
|
history: PropTypes.object.isRequired,
|
||||||
|
user: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
if (this.props.user.authDetails) {
|
||||||
|
return <AuthenticationContainer history={this.props.history} />;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<AuthenticationContainer history={this.props.history} />
|
<MainLayout {...this.props}>
|
||||||
<Layout fixedHeader>
|
<Switch>
|
||||||
<Header location={this.props.location} />
|
<Route exact path="/" render={() => <Redirect to="/features" component={Features} />} />
|
||||||
<Content className="mdl-color--grey-50" style={{ display: 'flex', flexDirection: 'column' }}>
|
{routes.map(route => (
|
||||||
<Grid noSpacing className={styles.content} style={{ flex: 1 }}>
|
<Route key={route.path} path={route.path} component={route.component} />
|
||||||
<Cell col={12}>
|
))}
|
||||||
<Switch>
|
</Switch>
|
||||||
<Route
|
</MainLayout>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
user: state.user.toJS(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(App);
|
||||||
|
35
frontend/src/component/layout/main.jsx
Normal file
35
frontend/src/component/layout/main.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user