ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Add some split points for routes

Browse Source
This commit is contained in:
SleepWalker
2019-12-30 10:15:40 +02:00
parent 5428e53a86
commit 03e26209f4
4 changed files with 113 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/components/ui/loader/ComponentLoader.tsx
View File

@@ -4,6 +4,8 @@ import { Skin } from 'app/components/ui';
import styles from './componentLoader.scss'; import styles from './componentLoader.scss';
// TODO: add mode to not show loader until first ~150ms
function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) { function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
return ( return (
<div <div

86
packages/app/pages/profile/ProfilePage.tsx
View File

@@ -7,17 +7,39 @@ import PasswordRequestForm from 'app/components/profile/passwordRequestForm/Pass
import logger from 'app/services/logger'; import logger from 'app/services/logger';
import { browserHistory } from 'app/services/history'; import { browserHistory } from 'app/services/history';
import { FooterMenu } from 'app/components/footerMenu'; 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 { FormModel } from 'app/components/ui/form';
import { RootState } from 'app/reducers'; import { RootState } from 'app/reducers';
import { Provider } from 'app/components/profile/Context'; import { Provider } from 'app/components/profile/Context';
import { ComponentLoader } from 'app/components/ui/loader';
import styles from './profile.scss'; 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 { interface Props {
userId: number; userId: number;
onSubmit: (options: { onSubmit: (options: {
@@ -40,30 +62,36 @@ class ProfilePage extends React.Component<Props> {
goToProfile: this.goToProfile, goToProfile: this.goToProfile,
}} }}
> >
<Switch> <React.Suspense fallback={<ComponentLoader />}>
<Route <Switch>
path="/profile/mfa/step:step([1-3])" <Route
component={MultiFactorAuthPage} path="/profile/mfa/step:step([1-3])"
/> component={MultiFactorAuthPage}
<Route path="/profile/mfa" exact component={MultiFactorAuthPage} /> />
<Route <Route
path="/profile/change-password" path="/profile/mfa"
exact exact
component={ChangePasswordPage} component={MultiFactorAuthPage}
/> />
<Route <Route
path="/profile/change-username" path="/profile/change-password"
exact exact
component={ChangeUsernamePage} component={ChangePasswordPage}
/> />
<Route <Route
path="/profile/change-email/:step?/:code?" path="/profile/change-username"
component={ChangeEmailPage} exact
/> component={ChangeUsernamePage}
<Route path="/profile" exact component={Profile} /> />
<Route path="/" exact component={Profile} /> <Route
<Redirect to="/404" /> path="/profile/change-email/:step?/:code?"
</Switch> component={ChangeEmailPage}
/>
<Route path="/profile" exact component={Profile} />
<Route path="/" exact component={Profile} />
<Redirect to="/404" />
</Switch>
</React.Suspense>
<div className={styles.footer}> <div className={styles.footer}>
<FooterMenu /> <FooterMenu />

56
packages/app/pages/root/RootPage.tsx
View File

@@ -6,11 +6,6 @@ import { FormattedMessage as Message } from 'react-intl';
import { Route, Link, Switch } from 'react-router-dom'; import { Route, Link, Switch } from 'react-router-dom';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import clsx from 'clsx'; 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 { ScrollIntoView } from 'app/components/ui/scroll';
import PrivateRoute from 'app/containers/PrivateRoute'; import PrivateRoute from 'app/containers/PrivateRoute';
import AuthFlowRoute from 'app/containers/AuthFlowRoute'; import AuthFlowRoute from 'app/containers/AuthFlowRoute';
@@ -21,10 +16,31 @@ import { getActiveAccount } from 'app/components/accounts/reducer';
import { User } from 'app/components/user'; import { User } from 'app/components/user';
import { Account } from 'app/components/accounts/reducer'; import { Account } from 'app/components/accounts/reducer';
import { RootState } from 'app/reducers'; import { RootState } from 'app/reducers';
import { ComponentLoader } from 'app/components/ui/loader';
import styles from './root.scss'; import styles from './root.scss';
import messages from './RootPage.intl.json'; 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<{ class RootPage extends React.PureComponent<{
account: Account | null; account: Account | null;
user: User; user: User;
@@ -88,22 +104,24 @@ class RootPage extends React.PureComponent<{
</div> </div>
</div> </div>
<div className={styles.body}> <div className={styles.body}>
<Switch> <React.Suspense fallback={<ComponentLoader />}>
<PrivateRoute path="/profile" component={ProfilePage} /> <Switch>
<Route path="/404" component={PageNotFound} /> <PrivateRoute path="/profile" component={ProfilePage} />
<Route path="/rules" component={RulesPage} /> <Route path="/404" component={PageNotFound} />
<Route path="/dev" component={DevPage} /> <Route path="/rules" component={RulesPage} />
<Route path="/dev" component={DevPage} />
<AuthFlowRoute <AuthFlowRoute
exact exact
path="/" path="/"
key="indexPage" key="indexPage"
component={user.isGuest ? AuthPage : ProfilePage} component={user.isGuest ? AuthPage : ProfilePage}
/> />
<AuthFlowRoute path="/" component={AuthPage} /> <AuthFlowRoute path="/" component={AuthPage} />
<Route component={PageNotFound} /> <Route component={PageNotFound} />
</Switch> </Switch>
</React.Suspense>
</div> </div>
</div> </div>
<PopupStack /> <PopupStack />

26
packages/app/shell/App.tsx
View File

@@ -4,20 +4,28 @@ import { Route, Switch } from 'react-router-dom';
import { Store } from 'app/reducers'; import { Store } from 'app/reducers';
import AuthFlowRoute from 'app/containers/AuthFlowRoute'; import AuthFlowRoute from 'app/containers/AuthFlowRoute';
import RootPage from 'app/pages/root/RootPage'; 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'; 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 }) => ( const App = ({ store, history }: { store: Store; history: any }) => (
<ContextProvider store={store} history={history}> <ContextProvider store={store} history={history}>
<Switch> <React.Suspense fallback={<ComponentLoader />}>
<Route path="/oauth2/code/success" component={SuccessOauthPage} /> <Switch>
<AuthFlowRoute <Route path="/oauth2/code/success" component={SuccessOauthPage} />
path="/oauth2/:version(v\d+)/:clientId?" <AuthFlowRoute
component={() => null} path="/oauth2/:version(v\d+)/:clientId?"
/> component={() => null}
<Route path="/" component={RootPage} /> />
</Switch> <Route path="/" component={RootPage} />
</Switch>
</React.Suspense>
</ContextProvider> </ContextProvider>
); );