mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-09 17:42:03 +05:30
Add some split points for routes
This commit is contained in:
parent
5428e53a86
commit
03e26209f4
@ -4,6 +4,8 @@ import { Skin } from 'app/components/ui';
|
||||
|
||||
import styles from './componentLoader.scss';
|
||||
|
||||
// TODO: add mode to not show loader until first ~150ms
|
||||
|
||||
function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
|
||||
return (
|
||||
<div
|
||||
|
@ -7,17 +7,39 @@ import PasswordRequestForm from 'app/components/profile/passwordRequestForm/Pass
|
||||
import logger from 'app/services/logger';
|
||||
import { browserHistory } from 'app/services/history';
|
||||
import { FooterMenu } from 'app/components/footerMenu';
|
||||
import Profile from 'app/components/profile/Profile';
|
||||
import ChangePasswordPage from 'app/pages/profile/ChangePasswordPage';
|
||||
import ChangeUsernamePage from 'app/pages/profile/ChangeUsernamePage';
|
||||
import ChangeEmailPage from 'app/pages/profile/ChangeEmailPage';
|
||||
import MultiFactorAuthPage from 'app/pages/profile/MultiFactorAuthPage';
|
||||
import { FormModel } from 'app/components/ui/form';
|
||||
import { RootState } from 'app/reducers';
|
||||
import { Provider } from 'app/components/profile/Context';
|
||||
import { ComponentLoader } from 'app/components/ui/loader';
|
||||
|
||||
import styles from './profile.scss';
|
||||
|
||||
const Profile = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-index" */ 'app/components/profile/Profile'
|
||||
),
|
||||
);
|
||||
const ChangePasswordPage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'
|
||||
),
|
||||
);
|
||||
const ChangeUsernamePage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'
|
||||
),
|
||||
);
|
||||
const ChangeEmailPage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'
|
||||
),
|
||||
);
|
||||
const MultiFactorAuthPage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'
|
||||
),
|
||||
);
|
||||
|
||||
interface Props {
|
||||
userId: number;
|
||||
onSubmit: (options: {
|
||||
@ -40,30 +62,36 @@ class ProfilePage extends React.Component<Props> {
|
||||
goToProfile: this.goToProfile,
|
||||
}}
|
||||
>
|
||||
<Switch>
|
||||
<Route
|
||||
path="/profile/mfa/step:step([1-3])"
|
||||
component={MultiFactorAuthPage}
|
||||
/>
|
||||
<Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
|
||||
<Route
|
||||
path="/profile/change-password"
|
||||
exact
|
||||
component={ChangePasswordPage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/change-username"
|
||||
exact
|
||||
component={ChangeUsernamePage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/change-email/:step?/:code?"
|
||||
component={ChangeEmailPage}
|
||||
/>
|
||||
<Route path="/profile" exact component={Profile} />
|
||||
<Route path="/" exact component={Profile} />
|
||||
<Redirect to="/404" />
|
||||
</Switch>
|
||||
<React.Suspense fallback={<ComponentLoader />}>
|
||||
<Switch>
|
||||
<Route
|
||||
path="/profile/mfa/step:step([1-3])"
|
||||
component={MultiFactorAuthPage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/mfa"
|
||||
exact
|
||||
component={MultiFactorAuthPage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/change-password"
|
||||
exact
|
||||
component={ChangePasswordPage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/change-username"
|
||||
exact
|
||||
component={ChangeUsernamePage}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/change-email/:step?/:code?"
|
||||
component={ChangeEmailPage}
|
||||
/>
|
||||
<Route path="/profile" exact component={Profile} />
|
||||
<Route path="/" exact component={Profile} />
|
||||
<Redirect to="/404" />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<FooterMenu />
|
||||
|
@ -6,11 +6,6 @@ import { FormattedMessage as Message } from 'react-intl';
|
||||
import { Route, Link, Switch } from 'react-router-dom';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import clsx from 'clsx';
|
||||
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';
|
||||
@ -21,10 +16,31 @@ 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';
|
||||
import { ComponentLoader } from 'app/components/ui/loader';
|
||||
|
||||
import styles from './root.scss';
|
||||
import messages from './RootPage.intl.json';
|
||||
|
||||
const ProfilePage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfilePage'
|
||||
),
|
||||
);
|
||||
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'),
|
||||
);
|
||||
|
||||
class RootPage extends React.PureComponent<{
|
||||
account: Account | null;
|
||||
user: User;
|
||||
@ -88,22 +104,24 @@ class RootPage extends React.PureComponent<{
|
||||
</div>
|
||||
</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} />
|
||||
<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} />
|
||||
|
||||
<AuthFlowRoute
|
||||
exact
|
||||
path="/"
|
||||
key="indexPage"
|
||||
component={user.isGuest ? AuthPage : ProfilePage}
|
||||
/>
|
||||
<AuthFlowRoute path="/" component={AuthPage} />
|
||||
<AuthFlowRoute
|
||||
exact
|
||||
path="/"
|
||||
key="indexPage"
|
||||
component={user.isGuest ? AuthPage : ProfilePage}
|
||||
/>
|
||||
<AuthFlowRoute path="/" component={AuthPage} />
|
||||
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</div>
|
||||
</div>
|
||||
<PopupStack />
|
||||
|
@ -4,20 +4,28 @@ import { Route, Switch } from 'react-router-dom';
|
||||
import { Store } from 'app/reducers';
|
||||
import AuthFlowRoute from 'app/containers/AuthFlowRoute';
|
||||
import RootPage from 'app/pages/root/RootPage';
|
||||
import SuccessOauthPage from 'app/pages/auth/SuccessOauthPage';
|
||||
import { ComponentLoader } from 'app/components/ui/loader';
|
||||
|
||||
import ContextProvider from './ContextProvider';
|
||||
|
||||
const SuccessOauthPage = React.lazy(() =>
|
||||
import(
|
||||
/* webpackChunkName: "page-oauth-success" */ 'app/pages/auth/SuccessOauthPage'
|
||||
),
|
||||
);
|
||||
|
||||
const App = ({ store, history }: { store: Store; history: any }) => (
|
||||
<ContextProvider store={store} history={history}>
|
||||
<Switch>
|
||||
<Route path="/oauth2/code/success" component={SuccessOauthPage} />
|
||||
<AuthFlowRoute
|
||||
path="/oauth2/:version(v\d+)/:clientId?"
|
||||
component={() => null}
|
||||
/>
|
||||
<Route path="/" component={RootPage} />
|
||||
</Switch>
|
||||
<React.Suspense fallback={<ComponentLoader />}>
|
||||
<Switch>
|
||||
<Route path="/oauth2/code/success" component={SuccessOauthPage} />
|
||||
<AuthFlowRoute
|
||||
path="/oauth2/:version(v\d+)/:clientId?"
|
||||
component={() => null}
|
||||
/>
|
||||
<Route path="/" component={RootPage} />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</ContextProvider>
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user