update framework

Author: lisong

src/containers/AccessKeysContainer.js

@@ -7,8 +7,6 @@ import * as usersActions from '../actions/usersActions';
 import * as authActions from '../actions/authActions';
 import * as routesActions from '../actions/routesActions';
 import AccessKeys from '../components/AccessKeys';
-import HeaderContainer from './HeaderContainer';
-import Footer from '../components/Footer';
 
 class AccessKeysContainer extends Component {
   componentDidMount() {
@@ -24,21 +22,17 @@ class AccessKeysContainer extends Component {
   render() {
     const {accessKeys, actions } = this.props;
     return (
-      <div>
-        <HeaderContainer/>
-        <AccessKeys
-          isFetching={_.get(accessKeys, 'isFetching')}
-          rs={_.get(accessKeys, 'rs')}
-          removeKey={actions.reomveAccessKey}
-          patchKey={actions.patchAccessKey}
-          isCreating={_.get(accessKeys, 'isCreating')}
-          createKey={actions.createAccessKey}
-          isShowKey={_.get(accessKeys, 'showKey.isOpen')}
-          close={actions.closePopShowKey}
-          token={_.get(accessKeys, 'showKey.token')}
-        />
-        <Footer/>
-      </div>
+      <AccessKeys
+        isFetching={_.get(accessKeys, 'isFetching')}
+        rs={_.get(accessKeys, 'rs')}
+        removeKey={actions.reomveAccessKey}
+        patchKey={actions.patchAccessKey}
+        isCreating={_.get(accessKeys, 'isCreating')}
+        createKey={actions.createAccessKey}
+        isShowKey={_.get(accessKeys, 'showKey.isOpen')}
+        close={actions.closePopShowKey}
+        token={_.get(accessKeys, 'showKey.token')}
+      />
     );
   }
 }

src/containers/ChangePasswordContainer.js

@@ -7,8 +7,6 @@ import * as usersActions from '../actions/usersActions';
 import * as authActions from '../actions/authActions';
 import * as routesActions from '../actions/routesActions';
 import ChangePassword from '../components/ChangePassword';
-import HeaderContainer from './HeaderContainer';
-import Footer from '../components/Footer';
 
 class ChangePasswordContainer extends Component {
   componentDidMount() {
@@ -27,21 +25,17 @@ class ChangePasswordContainer extends Component {
     let oldPassword = _.get(password, 'oldPassword');
     let newPassword = _.get(password, 'newPassword');
     return (
-      <div>
-        <HeaderContainer/>
-        <ChangePassword
-          isFetching={_.get(password, 'isFetching')}
-          oldPassword={oldPassword}
-          oldPasswordInputChange={actions.passwordChangeOldInput}
-          newPassword={newPassword}
-          newPasswordInputChange={actions.passwordChangeNewInput}
-          newPasswordConfirm={_.get(password, 'newPasswordConfirm')}
-          newPasswordConfirmInputChange={actions.passwordChangeNewConfirmInput}
-          submit={()=>actions.modifyPassword(oldPassword, newPassword)}
-          error={_.get(password, 'error')}
-        />
-        <Footer/>
-      </div>
+      <ChangePassword
+        isFetching={_.get(password, 'isFetching')}
+        oldPassword={oldPassword}
+        oldPasswordInputChange={actions.passwordChangeOldInput}
+        newPassword={newPassword}
+        newPasswordInputChange={actions.passwordChangeNewInput}
+        newPasswordConfirm={_.get(password, 'newPasswordConfirm')}
+        newPasswordConfirmInputChange={actions.passwordChangeNewConfirmInput}
+        submit={()=>actions.modifyPassword(oldPassword, newPassword)}
+        error={_.get(password, 'error')}
+      />
     );
   }
 }

src/containers/HeaderContainer.js

@@ -6,19 +6,11 @@ import _ from 'lodash';
 import * as usersActions from '../actions/usersActions';
 import * as routesActions from '../actions/routesActions';
 import Home from '../components/Home';
-import HeaderContainer from './HeaderContainer';
-import Footer from '../components/Footer';
 
 class HomeContainer extends Component {
   render() {
     const {html, actions } = this.props;
-    return (
-      <div>
-        <HeaderContainer/>
-        <Home html={html}/>
-        <Footer/>
-      </div>
-    );
+    return  <Home html={html}/>;
   }
 }
 

src/containers/HomeContainer.js

@@ -7,8 +7,6 @@ import * as usersActions from '../actions/usersActions';
 import * as authActions from '../actions/authActions';
 import * as routesActions from '../actions/routesActions';
 import ProductList from '../components/ProductList';
-import HeaderContainer from './HeaderContainer';
-import Footer from '../components/Footer';
 
 class ProductListContainer extends Component {
   componentDidMount() {
@@ -24,14 +22,10 @@ class ProductListContainer extends Component {
   render() {
     const {products, actions } = this.props;
     return (
-      <div>
-        <HeaderContainer/>
-        <ProductList
-          isFetching={_.get(products, 'isFetching')}
-          rs={_.get(products, 'rs')}
-        />
-        <Footer/>
-      </div>
+      <ProductList
+        isFetching={_.get(products, 'isFetching')}
+        rs={_.get(products, 'rs')}
+      />
     );
   }
 }

src/containers/ProductListContainer.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import Layout from '../../components/Layout';
-import AccessKeysContainer from '../../containers/AccessKeysContainer';
+import LayoutContainer from '../../containers/LayoutContainer';
 import { fetchAccessKeys } from '../../actions/authActions';
 
 export default {
@@ -13,9 +12,11 @@ export default {
         store.dispatch(fetchAccessKeys());
       }, 100);
     }
+    const AccessKeysContainer = await require.ensure([], require => require('../../containers/AccessKeysContainer').default, 'accessKeys');
     return {
       title: '我的密钥',
-      component: <Layout><AccessKeysContainer /></Layout>,
+      chunk: 'accessKeys',
+      component: <LayoutContainer><AccessKeysContainer /></LayoutContainer>,
     };
   },
 

src/routes/accessKeys/index.js

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import Layout from '../../components/Layout';
+import LayoutContainer from '../../containers/LayoutContainer';
 import { getProducts } from '../../actions/productsActions';
 
 export default {
@@ -17,7 +17,7 @@ export default {
     return {
       title: '应用管理',
       chunk: 'apps',
-      component: <Layout><ProductListContainer /></Layout>,
+      component: <LayoutContainer><ProductListContainer /></LayoutContainer>,
     };
   },
 

src/routes/apps/index.js

@@ -9,9 +9,8 @@
 
 import React from 'react';
 import fetch from '../../core/fetch';
-import Layout from '../../components/Layout';
+import LayoutContainer from '../../containers/LayoutContainer';
 import restApi from '../../network/RestApi';
-import HomeContainer from '../../containers/HomeContainer';
 
 export default {
 
@@ -28,9 +27,11 @@ export default {
     });
     if (resp.status !== 200) throw new Error(resp.statusText);
     const data = await resp.text();
+    const HomeContainer = await require.ensure([], require => require('../../containers/HomeContainer').default, 'home');
     return {
       title: 'CodePushServer',
-      component: <Layout><HomeContainer html={data} /></Layout>,
+      chunk: 'home',
+      component: <LayoutContainer><HomeContainer html={data} /></LayoutContainer>,
     };
   },
 

src/routes/home/index.js

@@ -33,7 +33,7 @@ export default {
     const route = await next();
 
     // Provide default values for title, description etc.
-    route.title = `${route.title || 'Untitled Page'} - www.reactstarterkit.com`;
+    route.title = `${route.title || 'Untitled Page'}`;
     route.description = route.description || '';
 
     return route;

src/routes/index.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import Layout from '../../components/Layout';
-import LoginContainer from '../../containers/LoginContainer';
 import LogoutContainer from '../../containers/LogoutContainer';
 
 const login = {
 
   path: '/login',
 
-  action() {
+  async action() {
+    const LoginContainer = await require.ensure([], require => require('../../containers/LoginContainer').default, 'login');
     return {
       title: '登录',
+      chunk: 'login',
       component: <Layout><LoginContainer /></Layout>,
     };
   },
@@ -19,7 +20,7 @@ const logout = {
 
   path: '/logout',
 
-  action() {
+  async action() {
     return {
       title: '退出',
       component: <Layout><LogoutContainer /></Layout>,