Skip to content

Commit 7489ecb

Browse files
xidedixxidedix
authored
Merge pull request #132 from coreui/dev-lazy-loading
v2.1.1
2 parents c9f9bfd + aeccb70 commit 7489ecb

File tree

14 files changed

+177
-250
lines changed

14 files changed

+177
-250
lines changed

‎CHANGELOG.md

+14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
22

3+
##### `v2.1.1`
4+
- refactor(App.js): code splitting with `react-loadable` (waiting for release of `react-router-dom`)
5+
- refactor(routes.js): code splitting with `React.lazy`, remove `react-loadable`
6+
- refactor(DefaultLayout): code splitting with `React.lazy` Aside, Footer, Header, routes
7+
- refactor(Dashboard): tweak lazy and Suspense for Widget03
8+
- refactor(Login): add router link to `Register` button
9+
- refactor(Register): add margins to social-media buttons
10+
- chore: disable eslint warning for href="#" attribute
11+
- chore: update `@coreui/coreui` to `^2.1.1`
12+
- chore: update `enzyme-adapter-react-16` to `1.7.0`
13+
- chore: update `react` to `16.6.3`
14+
- chore: update `react-dom` to `16.6.3`
15+
- chore: update `react-test-renderer` to `16.6.3`
16+
317
##### `v2.1.0`
418
- feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
519
- valid attributes: `rel`, `target`, `hidden`, `disabled`, etc...

‎package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/coreui-free-react-admin-template",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
55
"author": "Łukasz Holeczek",
66
"homepage": "https://coreui.io",
@@ -12,7 +12,7 @@
1212
"url": "[email protected]:coreui/coreui-free-react-admin-template.git"
1313
},
1414
"dependencies": {
15-
"@coreui/coreui": "^2.1.0",
15+
"@coreui/coreui": "^2.1.1",
1616
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
1717
"@coreui/icons": "0.3.0",
1818
"@coreui/react": "^2.1.0",
@@ -21,19 +21,19 @@
2121
"classnames": "^2.2.6",
2222
"core-js": "^2.5.7",
2323
"enzyme": "^3.7.0",
24-
"enzyme-adapter-react-16": "^1.6.0",
24+
"enzyme-adapter-react-16": "^1.7.0",
2525
"flag-icon-css": "^3.2.1",
2626
"font-awesome": "^4.7.0",
2727
"node-sass": "^4.10.0",
2828
"prop-types": "^15.6.2",
29-
"react": "^16.6.1",
29+
"react": "^16.6.3",
3030
"react-app-polyfill": "^0.1.3",
3131
"react-chartjs-2": "^2.7.2",
32-
"react-dom": "^16.6.1",
32+
"react-dom": "^16.6.3",
3333
"react-loadable": "^5.5.0",
3434
"react-router-config": "^4.4.0-beta.6",
3535
"react-router-dom": "^4.3.1",
36-
"react-test-renderer": "^16.6.1",
36+
"react-test-renderer": "^16.6.3",
3737
"reactstrap": "^6.5.0",
3838
"simple-line-icons": "^2.4.1"
3939
},

‎src/App.js

+35-10
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
11
import React, { Component } from 'react';
22
import { HashRouter, Route, Switch } from 'react-router-dom';
3+
// import { renderRoutes } from 'react-router-config';
4+
import Loadable from 'react-loadable';
35
import './App.scss';
46

7+
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
8+
59
// Containers
6-
import { DefaultLayout } from './containers';
10+
const DefaultLayout = Loadable({
11+
loader: () => import('./containers/DefaultLayout'),
12+
loading
13+
});
14+
715
// Pages
8-
import { Login, Page404, Page500, Register } from './views/Pages';
16+
const Login = Loadable({
17+
loader: () => import('./views/Pages/Login'),
18+
loading
19+
});
920

10-
// import { renderRoutes } from 'react-router-config';
21+
const Register = Loadable({
22+
loader: () => import('./views/Pages/Register'),
23+
loading
24+
});
25+
26+
const Page404 = Loadable({
27+
loader: () => import('./views/Pages/Page404'),
28+
loading
29+
});
30+
31+
const Page500 = Loadable({
32+
loader: () => import('./views/Pages/Page500'),
33+
loading
34+
});
1135

1236
class App extends Component {
37+
1338
render() {
1439
return (
1540
<HashRouter>
16-
<Switch>
17-
<Route exact path="/login" name="Login Page" component={Login} />
18-
<Route exact path="/register" name="Register Page" component={Register} />
19-
<Route exact path="/404" name="Page 404" component={Page404} />
20-
<Route exact path="/500" name="Page 500" component={Page500} />
21-
<Route path="/" name="Home" component={DefaultLayout} />
22-
</Switch>
41+
<Switch>
42+
<Route exact path="/login" name="Login Page" component={Login} />
43+
<Route exact path="/register" name="Register Page" component={Register} />
44+
<Route exact path="/404" name="Page 404" component={Page404} />
45+
<Route exact path="/500" name="Page 500" component={Page500} />
46+
<Route path="/" name="Home" component={DefaultLayout} />
47+
</Switch>
2348
</HashRouter>
2449
);
2550
}

‎src/containers/DefaultLayout/DefaultHeader.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
23
import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
34
import PropTypes from 'prop-types';
45

@@ -32,7 +33,7 @@ class DefaultHeader extends Component {
3233
<NavLink href="/">Dashboard</NavLink>
3334
</NavItem>
3435
<NavItem className="px-3">
35-
<NavLink href="#/users">Users</NavLink>
36+
<Link to="/users">Users</Link>
3637
</NavItem>
3738
<NavItem className="px-3">
3839
<NavLink href="#">Settings</NavLink>
@@ -50,7 +51,7 @@ class DefaultHeader extends Component {
5051
</NavItem>
5152
<AppHeaderDropdown direction="down">
5253
<DropdownToggle nav>
53-
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
54+
<img src={'../../assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
5455
</DropdownToggle>
5556
<DropdownMenu right style={{ right: 'auto' }}>
5657
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
@@ -65,7 +66,7 @@ class DefaultHeader extends Component {
6566
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
6667
<DropdownItem divider />
6768
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
68-
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
69+
<DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
6970
</DropdownMenu>
7071
</AppHeaderDropdown>
7172
</Nav>

‎src/containers/DefaultLayout/DefaultLayout.js

+41-17
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
);

0 commit comments

Comments
 (0)