2019-12-10 09:47:32 +02:00
|
|
|
import React from 'react';
|
2017-09-09 21:01:02 +03:00
|
|
|
import { connect } from 'react-redux';
|
2019-12-07 21:02:00 +02:00
|
|
|
import { resetAuth } from 'app/components/auth/actions';
|
2019-06-30 16:32:50 +03:00
|
|
|
import { withRouter } from 'react-router-dom';
|
2016-05-20 00:30:28 +03:00
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
2017-05-25 22:11:57 +03:00
|
|
|
import { Route, Link, Switch } from 'react-router-dom';
|
2017-06-08 20:59:31 +03:00
|
|
|
import Helmet from 'react-helmet';
|
2019-12-07 21:43:08 +02:00
|
|
|
import clsx from 'clsx';
|
2019-12-07 21:02:00 +02:00
|
|
|
import AuthPage from 'app/pages/auth/AuthPage';
|
|
|
|
|
import ProfilePage from 'app/pages/profile/ProfilePage';
|
|
|
|
|
import RulesPage from 'app/pages/rules/RulesPage';
|
|
|
|
|
import DevPage from 'app/pages/dev/DevPage';
|
|
|
|
|
import PageNotFound from 'app/pages/404/PageNotFound';
|
|
|
|
|
import { ScrollIntoView } from 'app/components/ui/scroll';
|
|
|
|
|
import PrivateRoute from 'app/containers/PrivateRoute';
|
|
|
|
|
import AuthFlowRoute from 'app/containers/AuthFlowRoute';
|
|
|
|
|
import Userbar from 'app/components/userbar/Userbar';
|
|
|
|
|
import PopupStack from 'app/components/ui/popup/PopupStack';
|
|
|
|
|
import loader from 'app/services/loader';
|
|
|
|
|
import { getActiveAccount } from 'app/components/accounts/reducer';
|
|
|
|
|
import { User } from 'app/components/user';
|
|
|
|
|
import { Account } from 'app/components/accounts/reducer';
|
|
|
|
|
import { RootState } from 'app/reducers';
|
2016-01-03 23:18:42 +02:00
|
|
|
|
|
|
|
|
import styles from './root.scss';
|
2016-05-20 00:30:28 +03:00
|
|
|
import messages from './RootPage.intl.json';
|
|
|
|
|
|
2019-12-10 09:47:32 +02:00
|
|
|
class RootPage extends React.PureComponent<{
|
2019-12-07 13:28:52 +02:00
|
|
|
account: Account | null;
|
|
|
|
|
user: User;
|
|
|
|
|
isPopupActive: boolean;
|
|
|
|
|
onLogoClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
2019-11-27 11:03:32 +02:00
|
|
|
location: {
|
2019-12-07 13:28:52 +02:00
|
|
|
pathname: string;
|
|
|
|
|
};
|
2017-08-22 23:31:41 +03:00
|
|
|
}> {
|
2019-11-27 11:03:32 +02:00
|
|
|
componentDidMount() {
|
|
|
|
|
this.onPageUpdate();
|
|
|
|
|
}
|
2017-05-25 22:11:57 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
componentDidUpdate() {
|
|
|
|
|
this.onPageUpdate();
|
|
|
|
|
}
|
2017-05-25 22:11:57 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
onPageUpdate() {
|
|
|
|
|
loader.hide();
|
|
|
|
|
}
|
2016-06-05 13:31:17 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
render() {
|
|
|
|
|
const { props } = this;
|
|
|
|
|
const { user, account, isPopupActive, onLogoClick } = this.props;
|
|
|
|
|
const isRegisterPage = props.location.pathname === '/register';
|
2016-10-09 20:54:35 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
if (document && document.body) {
|
|
|
|
|
document.body.style.overflow = isPopupActive ? 'hidden' : '';
|
|
|
|
|
}
|
2017-05-25 22:11:57 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
return (
|
|
|
|
|
<div className={styles.root}>
|
|
|
|
|
<Helmet>
|
|
|
|
|
<html lang={user.lang} />
|
|
|
|
|
</Helmet>
|
2017-10-28 16:38:07 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
<ScrollIntoView top />
|
2017-10-28 16:38:07 +03:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
<div
|
|
|
|
|
id="view-port"
|
2019-12-07 21:43:08 +02:00
|
|
|
className={clsx(styles.viewPort, {
|
2019-11-27 11:03:32 +02:00
|
|
|
[styles.isPopupActive]: isPopupActive,
|
|
|
|
|
})}
|
|
|
|
|
>
|
|
|
|
|
<div className={styles.header} data-e2e-toolbar>
|
|
|
|
|
<div className={styles.headerContent}>
|
|
|
|
|
<Link to="/" className={styles.logo} onClick={onLogoClick}>
|
|
|
|
|
<Message {...messages.siteName} />
|
|
|
|
|
</Link>
|
|
|
|
|
<div className={styles.userbar}>
|
|
|
|
|
<Userbar
|
|
|
|
|
account={account}
|
|
|
|
|
guestAction={isRegisterPage ? 'login' : 'register'}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2016-01-03 23:18:42 +02:00
|
|
|
</div>
|
2019-11-27 11:03:32 +02:00
|
|
|
</div>
|
|
|
|
|
<div className={styles.body}>
|
|
|
|
|
<Switch>
|
|
|
|
|
<PrivateRoute path="/profile" component={ProfilePage} />
|
|
|
|
|
<Route path="/404" component={PageNotFound} />
|
|
|
|
|
<Route path="/rules" component={RulesPage} />
|
|
|
|
|
<Route path="/dev" component={DevPage} />
|
2019-12-10 09:47:32 +02:00
|
|
|
|
|
|
|
|
{user.isGuest ? (
|
|
|
|
|
<AuthFlowRoute path="/" component={AuthPage} />
|
|
|
|
|
) : (
|
|
|
|
|
<AuthFlowRoute exact path="/" component={ProfilePage} />
|
|
|
|
|
)}
|
|
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
<Route component={PageNotFound} />
|
|
|
|
|
</Switch>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<PopupStack />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2016-01-03 23:18:42 +02:00
|
|
|
}
|
2016-02-13 17:28:47 +02:00
|
|
|
|
2019-11-27 11:03:32 +02:00
|
|
|
export default withRouter(
|
|
|
|
|
connect(
|
2019-12-07 13:28:52 +02:00
|
|
|
(state: RootState) => ({
|
2019-11-27 11:03:32 +02:00
|
|
|
user: state.user,
|
|
|
|
|
account: getActiveAccount(state),
|
|
|
|
|
isPopupActive: state.popup.popups.length > 0,
|
|
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
onLogoClick: resetAuth,
|
|
|
|
|
},
|
|
|
|
|
)(RootPage),
|
|
|
|
|
);
|
