Login title (#3564)

* Added document title to UserLayout by identifying the current route object and using its name kaey to set the title

* Adjusment to document title

* feat: use same getPageTile function

config/router.config.js

@@ -5,9 +5,13 @@ export default [
     component: '../layouts/UserLayout',
     routes: [
       { path: '/user', redirect: '/user/login' },
-      { path: '/user/login', component: './User/Login' },
-      { path: '/user/register', component: './User/Register' },
-      { path: '/user/register-result', component: './User/RegisterResult' },
+      { path: '/user/login', name: 'login', component: './User/Login' },
+      { path: '/user/register', name: 'register', component: './User/Register' },
+      {
+        path: '/user/register-result',
+        name: 'register.result',
+        component: './User/RegisterResult',
+      },
     ],
   },
   // app

src/layouts/BasicLayout.js

@@ -1,14 +1,11 @@
 import React, { Suspense } from 'react';
 import { Layout } from 'antd';
 import DocumentTitle from 'react-document-title';
-import isEqual from 'lodash/isEqual';
-import memoizeOne from 'memoize-one';
 import { connect } from 'dva';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import pathToRegexp from 'path-to-regexp';
 import Media from 'react-media';
-import { formatMessage } from 'umi/locale';
 import Authorized from '@/utils/Authorized';
 import logo from '../assets/logo.svg';
 import Footer from './Footer';
@@ -17,8 +14,7 @@ import Context from './MenuContext';
 import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';
-import { menu, title } from '../defaultSettings';
-
+import getPageTitle from '@/utils/getPageTitle';
 import styles from './BasicLayout.less';
 
 // lazy load SettingDrawer
@@ -52,12 +48,6 @@ const query = {
 };
 
 class BasicLayout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getPageTitle = memoizeOne(this.getPageTitle);
-    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
-  }
-
   componentDidMount() {
     const {
       dispatch,
@@ -83,11 +73,6 @@ class BasicLayout extends React.Component {
     };
   }
 
-  matchParamsPath = (pathname, breadcrumbNameMap) => {
-    const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
-    return breadcrumbNameMap[pathKey];
-  };
-
   getRouteAuthority = (pathname, routeData) => {
     const routes = routeData.slice(); // clone
 
@@ -111,22 +96,6 @@ class BasicLayout extends React.Component {
     return getAuthority(routes, pathname);
   };
 
-  getPageTitle = (pathname, breadcrumbNameMap) => {
-    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
-
-    if (!currRouterData) {
-      return title;
-    }
-    const pageName = menu.disableLocal
-      ? currRouterData.name
-      : formatMessage({
-          id: currRouterData.locale || currRouterData.name,
-          defaultMessage: currRouterData.name,
-        });
-
-    return `${pageName} - ${title}`;
-  };
-
   getLayoutStyle = () => {
     const { fixSiderbar, isMobile, collapsed, layout } = this.props;
     if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
@@ -206,7 +175,7 @@ class BasicLayout extends React.Component {
     );
     return (
       <React.Fragment>
-        <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
+        <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
           <ContainerQuery query={query}>
             {params => (
               <Context.Provider value={this.getContext()}>

src/layouts/UserLayout.js

@@ -1,11 +1,14 @@
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { formatMessage } from 'umi/locale';
+import { connect } from 'dva';
 import Link from 'umi/link';
 import { Icon } from 'antd';
 import GlobalFooter from '@/components/GlobalFooter';
+import DocumentTitle from 'react-document-title';
 import SelectLang from '@/components/SelectLang';
 import styles from './UserLayout.less';
 import logo from '../assets/logo.svg';
+import getPageTitle from '@/utils/getPageTitle';
 
 const links = [
   {
@@ -31,26 +34,50 @@ const copyright = (
   </Fragment>
 );
 
-const UserLayout = ({ children }) => (
-  // @TODO <DocumentTitle title={this.getPageTitle()}>
-  <div className={styles.container}>
-    <div className={styles.lang}>
-      <SelectLang />
-    </div>
-    <div className={styles.content}>
-      <div className={styles.top}>
-        <div className={styles.header}>
-          <Link to="/">
-            <img alt="logo" className={styles.logo} src={logo} />
-            <span className={styles.title}>Ant Design</span>
-          </Link>
+class UserLayout extends Component {
+  componentDidMount() {
+    const {
+      dispatch,
+      route: { routes, authority },
+    } = this.props;
+    dispatch({
+      type: 'menu/getMenuData',
+      payload: { routes, authority },
+    });
+  }
+
+  render() {
+    const {
+      children,
+      location: { pathname },
+      breadcrumbNameMap,
+    } = this.props;
+    return (
+      <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
+        <div className={styles.container}>
+          <div className={styles.lang}>
+            <SelectLang />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.top}>
+              <div className={styles.header}>
+                <Link to="/">
+                  <img alt="logo" className={styles.logo} src={logo} />
+                  <span className={styles.title}>Ant Design</span>
+                </Link>
+              </div>
+              <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+            </div>
+            {children}
+          </div>
+          <GlobalFooter links={links} copyright={copyright} />
         </div>
-        <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
-      </div>
-      {children}
-    </div>
-    <GlobalFooter links={links} copyright={copyright} />
-  </div>
-);
+      </DocumentTitle>
+    );
+  }
+}
 
-export default UserLayout;
+export default connect(({ menu: menuModel }) => ({
+  menuData: menuModel.menuData,
+  breadcrumbNameMap: menuModel.breadcrumbNameMap,
+}))(UserLayout);

src/locales/en-US/menu.js

@@ -1,5 +1,8 @@
 export default {
   'menu.home': 'Home',
+  'menu.login': 'Login',
+  'menu.register': 'Register',
+  'menu.register.result': 'Register Result',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': 'Analysis',
   'menu.dashboard.monitor': 'Monitor',

src/locales/pt-BR/menu.js

@@ -1,5 +1,8 @@
 export default {
   'menu.home': 'Início',
+  'menu.login': 'Login',
+  'menu.register': 'Registro',
+  'menu.register.result': 'Resultado de registro',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': 'Análise',
   'menu.dashboard.monitor': 'Monitor',

src/locales/zh-CN/menu.js

@@ -1,5 +1,8 @@
 export default {
   'menu.home': '首页',
+  'menu.login': '登录',
+  'menu.register': '注册',
+  'menu.register.result': '注册结果',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': '分析页',
   'menu.dashboard.monitor': '监控页',

src/locales/zh-TW/menu.js

@@ -1,5 +1,8 @@
 export default {
   'menu.home': '首頁',
+  'menu.login': '登錄',
+  'menu.register': '註冊',
+  'menu.register.resultt': '註冊結果',
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': '分析頁',
   'menu.dashboard.monitor': '監控頁',

src/pages/User/Login.less

@@ -1,7 +1,7 @@
 @import '~antd/lib/style/themes/default.less';
 
 .main {
-  width: 368px;
+  width: 388px;
   margin: 0 auto;
   @media screen and (max-width: @screen-sm) {
     width: 95%;

src/pages/User/Register.less

@@ -1,7 +1,7 @@
 @import '~antd/lib/style/themes/default.less';
 
 .main {
-  width: 368px;
+  width: 388px;
   margin: 0 auto;
 
   :global {

src/utils/getPageTitle.js

@@ -0,0 +1,26 @@
+import { formatMessage } from 'umi/locale';
+import pathToRegexp from 'path-to-regexp';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
+import { menu, title } from '../defaultSettings';
+
+export const matchParamsPath = (pathname, breadcrumbNameMap) => {
+  const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
+  return breadcrumbNameMap[pathKey];
+};
+const getPageTitle = (pathname, breadcrumbNameMap) => {
+  const currRouterData = matchParamsPath(pathname, breadcrumbNameMap);
+  if (!currRouterData) {
+    return title;
+  }
+  const pageName = menu.disableLocal
+    ? currRouterData.name
+    : formatMessage({
+        id: currRouterData.locale || currRouterData.name,
+        defaultMessage: currRouterData.name,
+      });
+
+  return `${pageName} - ${title}`;
+};
+
+export default memoizeOne(getPageTitle, isEqual);