accounts-frontend/packages/app/pages/root/RootPage.tsx

125 lines
4.7 KiB
TypeScript
Raw Normal View History

2019-12-10 13:17:32 +05:30
import React from 'react';
import { connect } from 'react-redux';
import { resetAuth } from 'app/components/auth/actions';
import { withRouter } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';
import { Route, Link, Switch } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
2019-12-08 01:13:08 +05:30
import clsx from 'clsx';
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 * as 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';
2019-12-30 13:45:40 +05:30
import { ComponentLoader } from 'app/components/ui/loader';
2016-01-04 02:48:42 +05:30
import styles from './root.scss';
import siteName from './siteName.intl';
2019-12-30 13:45:40 +05:30
const ProfilePage = React.lazy(() =>
2020-05-24 04:38:24 +05:30
import(/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfilePage'),
2019-12-30 13:45:40 +05:30
);
2020-05-24 04:38:24 +05:30
const PageNotFound = React.lazy(() => import(/* webpackChunkName: "page-not-found" */ 'app/pages/404/PageNotFound'));
const RulesPage = React.lazy(() => import(/* webpackChunkName: "page-rules" */ 'app/pages/rules/RulesPage'));
const DevPage = React.lazy(() => import(/* webpackChunkName: "page-dev-applications" */ 'app/pages/dev/DevPage'));
const AuthPage = React.lazy(() => import(/* webpackChunkName: "page-auth" */ 'app/pages/auth/AuthPage'));
2019-12-30 13:45:40 +05:30
2019-12-10 13:17:32 +05:30
class RootPage extends React.PureComponent<{
2020-05-24 04:38:24 +05:30
account: Account | null;
user: User;
isPopupActive: boolean;
onLogoClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
location: {
pathname: string;
};
2017-08-23 02:01:41 +05:30
}> {
2020-05-24 04:38:24 +05:30
componentDidMount() {
this.onPageUpdate();
}
2020-05-24 04:38:24 +05:30
componentDidUpdate() {
this.onPageUpdate();
}
2020-05-24 04:38:24 +05:30
onPageUpdate() {
loader.hide();
}
2020-05-24 04:38:24 +05:30
render() {
const { props } = this;
const { user, account, isPopupActive, onLogoClick } = this.props;
const isRegisterPage = props.location.pathname === '/register';
2020-05-24 04:38:24 +05:30
if (document && document.body) {
document.body.style.overflow = isPopupActive ? 'hidden' : '';
}
2020-05-24 04:38:24 +05:30
return (
<div className={styles.root}>
<Helmet>
<html lang={user.lang} />
</Helmet>
2020-05-24 04:38:24 +05:30
<ScrollIntoView top />
2020-05-24 04:38:24 +05:30
<div
id="view-port"
className={clsx(styles.viewPort, {
[styles.isPopupActive]: isPopupActive,
})}
>
<div className={styles.header} data-testid="toolbar">
<div className={styles.headerContent}>
<Link to="/" className={styles.logo} onClick={onLogoClick} data-testid="home-page">
<Message {...siteName} />
2020-05-24 04:38:24 +05:30
</Link>
<div className={styles.userbar}>
<Userbar account={account} guestAction={isRegisterPage ? 'login' : 'register'} />
</div>
</div>
</div>
<div className={styles.body}>
<React.Suspense fallback={<ComponentLoader />}>
<Switch>
<PrivateRoute path="/profile" component={ProfilePage} />
<Route path="/404" component={PageNotFound} />
<Route path="/rules" component={RulesPage} />
<Route path="/dev" component={DevPage} />
2019-12-10 13:17:32 +05:30
2020-05-24 04:38:24 +05:30
<AuthFlowRoute
exact
path="/"
key="indexPage"
component={user.isGuest ? AuthPage : ProfilePage}
/>
<AuthFlowRoute path="/" component={AuthPage} />
2020-05-24 04:38:24 +05:30
<Route component={PageNotFound} />
</Switch>
</React.Suspense>
</div>
</div>
<PopupStack />
</div>
);
}
2016-01-04 02:48:42 +05:30
}
export default withRouter(
2020-05-24 04:38:24 +05:30
connect(
(state: RootState) => ({
user: state.user,
account: getActiveAccount(state),
isPopupActive: state.popup.popups.length > 0,
}),
{
onLogoClick: resetAuth,
},
)(RootPage),
);