Skip to content

Commit f0bcbab

Browse files
xidedixxidedix
committed
refactor(DefaultLayout) code splitting with React.lazy
- remove `react-loadable` - `Suspense` with routes, Aside, Footer, Header - add `onLogout` for DefaultHeader
1 parent 2e8c6c1 commit f0bcbab

File tree

3 files changed

+77
-200
lines changed

3 files changed

+77
-200
lines changed

‎src/containers/DefaultLayout/DefaultHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ class DefaultHeader extends Component {
6565
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
6666
<DropdownItem divider />
6767
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
68-
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
68+
<DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
6969
</DropdownMenu>
7070
</AppHeaderDropdown>
7171
</Nav>

‎src/containers/DefaultLayout/DefaultLayout.js‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { Component, Suspense } from 'react';
22
import { Redirect, Route, Switch } from 'react-router-dom';
33
import { Container } from 'reactstrap';
44

@@ -18,46 +18,70 @@ import {
1818
import navigation from '../../_nav';
1919
// routes config
2020
import routes from '../../routes';
21-
import DefaultAside from './DefaultAside';
22-
import DefaultFooter from './DefaultFooter';
23-
import DefaultHeader from './DefaultHeader';
21+
22+
const DefaultAside = React.lazy(() => import('./DefaultAside'));
23+
const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
24+
const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
2425

2526
class DefaultLayout extends Component {
27+
28+
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
29+
30+
signOut(e) {
31+
e.preventDefault()
32+
this.props.history.push('/login')
33+
}
34+
2635
render() {
2736
return (
2837
<div className="app">
2938
<AppHeader fixed>
30-
<DefaultHeader />
39+
<Suspense fallback={this.loading()}>
40+
<DefaultHeader onLogout={e=>this.signOut(e)}/>
41+
</Suspense>
3142
</AppHeader>
3243
<div className="app-body">
3344
<AppSidebar fixed display="lg">
3445
<AppSidebarHeader />
3546
<AppSidebarForm />
47+
<Suspense>
3648
<AppSidebarNav navConfig={navigation} {...this.props} />
49+
</Suspense>
3750
<AppSidebarFooter />
3851
<AppSidebarMinimizer />
3952
</AppSidebar>
4053
<main className="main">
4154
<AppBreadcrumb appRoutes={routes}/>
4255
<Container fluid>
43-
<Switch>
44-
{routes.map((route, idx) => {
45-
return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
46-
<route.component {...props} />
47-
)} />)
48-
: (null);
49-
},
50-
)}
51-
<Redirect from="/" to="/dashboard" />
52-
</Switch>
56+
<Suspense fallback={this.loading()}>
57+
<Switch>
58+
{routes.map((route, idx) => {
59+
return route.component ? (
60+
<Route
61+
key={idx}
62+
path={route.path}
63+
exact={route.exact}
64+
name={route.name}
65+
render={props => (
66+
<route.component {...props} />
67+
)} />
68+
) : (null);
69+
})}
70+
<Redirect from="/" to="/dashboard" />
71+
</Switch>
72+
</Suspense>
5373
</Container>
5474
</main>
5575
<AppAside fixed>
56-
<DefaultAside />
76+
<Suspense fallback={this.loading()}>
77+
<DefaultAside />
78+
</Suspense>
5779
</AppAside>
5880
</div>
5981
<AppFooter>
60-
<DefaultFooter />
82+
<Suspense fallback={this.loading()}>
83+
<DefaultFooter />
84+
</Suspense>
6185
</AppFooter>
6286
</div>
6387
);

‎src/routes.js‎

Lines changed: 35 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,41 @@
11
import React from 'react';
2-
import Loadable from 'react-loadable'
3-
42
import DefaultLayout from './containers/DefaultLayout';
53

6-
function Loading() {
7-
return <div>Loading...</div>;
8-
}
9-
10-
const Breadcrumbs = Loadable({
11-
loader: () => import('./views/Base/Breadcrumbs'),
12-
loading: Loading,
13-
});
14-
15-
const Cards = Loadable({
16-
loader: () => import('./views/Base/Cards'),
17-
loading: Loading,
18-
});
19-
20-
const Carousels = Loadable({
21-
loader: () => import('./views/Base/Carousels'),
22-
loading: Loading,
23-
});
24-
25-
const Collapses = Loadable({
26-
loader: () => import('./views/Base/Collapses'),
27-
loading: Loading,
28-
});
29-
30-
const Dropdowns = Loadable({
31-
loader: () => import('./views/Base/Dropdowns'),
32-
loading: Loading,
33-
});
34-
35-
const Forms = Loadable({
36-
loader: () => import('./views/Base/Forms'),
37-
loading: Loading,
38-
});
39-
40-
const Jumbotrons = Loadable({
41-
loader: () => import('./views/Base/Jumbotrons'),
42-
loading: Loading,
43-
});
44-
45-
const ListGroups = Loadable({
46-
loader: () => import('./views/Base/ListGroups'),
47-
loading: Loading,
48-
});
49-
50-
const Navbars = Loadable({
51-
loader: () => import('./views/Base/Navbars'),
52-
loading: Loading,
53-
});
54-
55-
const Navs = Loadable({
56-
loader: () => import('./views/Base/Navs'),
57-
loading: Loading,
58-
});
59-
60-
const Paginations = Loadable({
61-
loader: () => import('./views/Base/Paginations'),
62-
loading: Loading,
63-
});
64-
65-
const Popovers = Loadable({
66-
loader: () => import('./views/Base/Popovers'),
67-
loading: Loading,
68-
});
69-
70-
const ProgressBar = Loadable({
71-
loader: () => import('./views/Base/ProgressBar'),
72-
loading: Loading,
73-
});
74-
75-
const Switches = Loadable({
76-
loader: () => import('./views/Base/Switches'),
77-
loading: Loading,
78-
});
79-
80-
const Tables = Loadable({
81-
loader: () => import('./views/Base/Tables'),
82-
loading: Loading,
83-
});
84-
85-
const Tabs = Loadable({
86-
loader: () => import('./views/Base/Tabs'),
87-
loading: Loading,
88-
});
89-
90-
const Tooltips = Loadable({
91-
loader: () => import('./views/Base/Tooltips'),
92-
loading: Loading,
93-
});
94-
95-
const BrandButtons = Loadable({
96-
loader: () => import('./views/Buttons/BrandButtons'),
97-
loading: Loading,
98-
});
99-
100-
const ButtonDropdowns = Loadable({
101-
loader: () => import('./views/Buttons/ButtonDropdowns'),
102-
loading: Loading,
103-
});
104-
105-
const ButtonGroups = Loadable({
106-
loader: () => import('./views/Buttons/ButtonGroups'),
107-
loading: Loading,
108-
});
109-
110-
const Buttons = Loadable({
111-
loader: () => import('./views/Buttons/Buttons'),
112-
loading: Loading,
113-
});
114-
115-
const Charts = Loadable({
116-
loader: () => import('./views/Charts'),
117-
loading: Loading,
118-
});
119-
120-
const Dashboard = Loadable({
121-
loader: () => import('./views/Dashboard'),
122-
loading: Loading,
123-
});
124-
125-
const CoreUIIcons = Loadable({
126-
loader: () => import('./views/Icons/CoreUIIcons'),
127-
loading: Loading,
128-
});
129-
130-
const Flags = Loadable({
131-
loader: () => import('./views/Icons/Flags'),
132-
loading: Loading,
133-
});
134-
135-
const FontAwesome = Loadable({
136-
loader: () => import('./views/Icons/FontAwesome'),
137-
loading: Loading,
138-
});
139-
140-
const SimpleLineIcons = Loadable({
141-
loader: () => import('./views/Icons/SimpleLineIcons'),
142-
loading: Loading,
143-
});
144-
145-
const Alerts = Loadable({
146-
loader: () => import('./views/Notifications/Alerts'),
147-
loading: Loading,
148-
});
149-
150-
const Badges = Loadable({
151-
loader: () => import('./views/Notifications/Badges'),
152-
loading: Loading,
153-
});
154-
155-
const Modals = Loadable({
156-
loader: () => import('./views/Notifications/Modals'),
157-
loading: Loading,
158-
});
159-
160-
const Colors = Loadable({
161-
loader: () => import('./views/Theme/Colors'),
162-
loading: Loading,
163-
});
164-
165-
const Typography = Loadable({
166-
loader: () => import('./views/Theme/Typography'),
167-
loading: Loading,
168-
});
169-
170-
const Widgets = Loadable({
171-
loader: () => import('./views/Widgets/Widgets'),
172-
loading: Loading,
173-
});
174-
175-
const Users = Loadable({
176-
loader: () => import('./views/Users/Users'),
177-
loading: Loading,
178-
});
179-
180-
const User = Loadable({
181-
loader: () => import('./views/Users/User'),
182-
loading: Loading,
183-
});
184-
185-
4+
const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
5+
const Cards = React.lazy(() => import('./views/Base/Cards'));
6+
const Carousels = React.lazy(() => import('./views/Base/Carousels'));
7+
const Collapses = React.lazy(() => import('./views/Base/Collapses'));
8+
const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));
9+
const Forms = React.lazy(() => import('./views/Base/Forms'));
10+
const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));
11+
const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));
12+
const Navbars = React.lazy(() => import('./views/Base/Navbars'));
13+
const Navs = React.lazy(() => import('./views/Base/Navs'));
14+
const Paginations = React.lazy(() => import('./views/Base/Paginations'));
15+
const Popovers = React.lazy(() => import('./views/Base/Popovers'));
16+
const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));
17+
const Switches = React.lazy(() => import('./views/Base/Switches'));
18+
const Tables = React.lazy(() => import('./views/Base/Tables'));
19+
const Tabs = React.lazy(() => import('./views/Base/Tabs'));
20+
const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));
21+
const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));
22+
const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));
23+
const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));
24+
const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));
25+
const Charts = React.lazy(() => import('./views/Charts'));
26+
const Dashboard = React.lazy(() => import('./views/Dashboard'));
27+
const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));
28+
const Flags = React.lazy(() => import('./views/Icons/Flags'));
29+
const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));
30+
const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));
31+
const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
32+
const Badges = React.lazy(() => import('./views/Notifications/Badges'));
33+
const Modals = React.lazy(() => import('./views/Notifications/Modals'));
34+
const Colors = React.lazy(() => import('./views/Theme/Colors'));
35+
const Typography = React.lazy(() => import('./views/Theme/Typography'));
36+
const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
37+
const Users = React.lazy(() => import('./views/Users/Users'));
38+
const User = React.lazy(() => import('./views/Users/User'));
18639

18740
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
18841
const routes = [

0 commit comments

Comments
 (0)