diff --git a/src/hoc/asyncComponent/asyncComponent.tsx b/src/hoc/asyncComponent/asyncComponent.tsx new file mode 100644 index 0000000..3714bc6 --- /dev/null +++ b/src/hoc/asyncComponent/asyncComponent.tsx @@ -0,0 +1,24 @@ +import React, { Component } from 'react' + +const asyncComponent = (importComponent: any) => { + return class extends Component { + state = { + component: null + } + + componentDidMount () { + importComponent() + .then((cmp: any) => { + this.setState({component: cmp.default}) + }) + } + + render () { + const C: any = this.state.component + + return C ? : null + } + } +} + +export default asyncComponent \ No newline at end of file diff --git a/src/routes/HomeRouter.tsx b/src/routes/HomeRouter.tsx index 7d581ff..c9b24fb 100644 --- a/src/routes/HomeRouter.tsx +++ b/src/routes/HomeRouter.tsx @@ -6,31 +6,43 @@ import { connect } from 'react-redux' import { Route, Switch, withRouter, Redirect, NavLink } from 'react-router-dom' import { getTranslate, getActiveLanguage } from 'react-localize-redux' -// - Import app components -import StreamComponent from 'containers/stream' -import Profile from 'containers/profile' -import PostPage from 'containers/postPage' -import People from 'containers/people' - +import asyncComponent from 'hoc/asyncComponent/asyncComponent' import { IRouterProps } from './IRouterProps' +// - Async Components +const AsyncStream = asyncComponent(() => { + return import('containers/stream') +}) + +const AsyncProfile = asyncComponent(() => { + return import('containers/profile') +}) + +const AsyncPostPage = asyncComponent(() => { + return import('containers/postPage') +}) + +const AsyncPeople = asyncComponent(() => { + return import('containers/people') +}) + /** * Home Router */ export class HomeRouter extends Component { render () { const { enabled, match, data, translate } = this.props - const St = StreamComponent as any + const St = AsyncStream as any return ( enabled ? ( - } /> + } /> )} /> - - + + { + return import('containers/home') +}) + +const AsyncSignup = asyncComponent(() => { + return import('containers/signup') +}) + +const AsyncEmailVerification = asyncComponent(() => { + return import('containers/emailVerification') +}) + +const AsyncResetPassword = asyncComponent(() => { + return import('containers/resetPassword') +}) + +const AsyncLogin = asyncComponent(() => { + return import('containers/login') +}) + +const AsyncSetting = asyncComponent(() => { + return import('containers/setting') +}) + /** * Master router */ @@ -25,12 +43,12 @@ export class MasterRouter extends Component { return ( enabled ? ( - - - - - } /> - } /> + + + + + } /> + } /> ) : ''