v2.1.1

CHANGELOG.md

@@ -1,5 +1,19 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
 
+##### `v2.1.1`
+- refactor(App.js): code splitting with `react-loadable` (waiting for release of `react-router-dom`) 
+- refactor(routes.js): code splitting with `React.lazy`, remove `react-loadable`
+- refactor(DefaultLayout): code splitting with `React.lazy` Aside, Footer, Header, routes 
+- refactor(Dashboard): tweak lazy and Suspense for Widget03 
+- refactor(Login): add router link to `Register` button 
+- refactor(Register): add margins to social-media buttons  
+- chore: disable eslint warning for href="#" attribute
+- chore: update `@coreui/coreui` to `^2.1.1`
+- chore: update `enzyme-adapter-react-16` to `1.7.0`
+- chore: update `react` to `16.6.3`
+- chore: update `react-dom` to `16.6.3`
+- chore: update `react-test-renderer` to `16.6.3`
+
 ##### `v2.1.0` 
 - feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
   - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc...  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,7 +12,7 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.0",
+    "@coreui/coreui": "^2.1.1",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
     "@coreui/react": "^2.1.0",
@@ -21,19 +21,19 @@
     "classnames": "^2.2.6",
     "core-js": "^2.5.7",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
+    "enzyme-adapter-react-16": "^1.7.0",
     "flag-icon-css": "^3.2.1",
     "font-awesome": "^4.7.0",
     "node-sass": "^4.10.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.1",
+    "react": "^16.6.3",
     "react-app-polyfill": "^0.1.3",
     "react-chartjs-2": "^2.7.2",
-    "react-dom": "^16.6.1",
+    "react-dom": "^16.6.3",
     "react-loadable": "^5.5.0",
     "react-router-config": "^4.4.0-beta.6",
     "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^16.6.1",
+    "react-test-renderer": "^16.6.3",
     "reactstrap": "^6.5.0",
     "simple-line-icons": "^2.4.1"
   },

src/App.js

@@ -1,25 +1,50 @@
 import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+// import { renderRoutes } from 'react-router-config';
+import Loadable from 'react-loadable';
 import './App.scss';
 
+const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
+
 // Containers
-import { DefaultLayout } from './containers';
+const DefaultLayout = Loadable({
+  loader: () => import('./containers/DefaultLayout'),
+  loading
+});
+
 // Pages
-import { Login, Page404, Page500, Register } from './views/Pages';
+const Login = Loadable({
+  loader: () => import('./views/Pages/Login'),
+  loading
+});
 
-// import { renderRoutes } from 'react-router-config';
+const Register = Loadable({
+  loader: () => import('./views/Pages/Register'),
+  loading
+});
+
+const Page404 = Loadable({
+  loader: () => import('./views/Pages/Page404'),
+  loading
+});
+
+const Page500 = Loadable({
+  loader: () => import('./views/Pages/Page500'),
+  loading
+});
 
 class App extends Component {
+
   render() {
     return (
       <HashRouter>
-        <Switch>
-          <Route exact path="/login" name="Login Page" component={Login} />
-          <Route exact path="/register" name="Register Page" component={Register} />
-          <Route exact path="/404" name="Page 404" component={Page404} />
-          <Route exact path="/500" name="Page 500" component={Page500} />
-          <Route path="/" name="Home" component={DefaultLayout} />
-        </Switch>
+          <Switch>
+            <Route exact path="/login" name="Login Page" component={Login} />
+            <Route exact path="/register" name="Register Page" component={Register} />
+            <Route exact path="/404" name="Page 404" component={Page404} />
+            <Route exact path="/500" name="Page 500" component={Page500} />
+            <Route path="/" name="Home" component={DefaultLayout} />
+          </Switch>
       </HashRouter>
     );
   }

src/containers/DefaultLayout/DefaultHeader.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
 import PropTypes from 'prop-types';
 
@@ -32,7 +33,7 @@ class DefaultHeader extends Component {
             <NavLink href="/">Dashboard</NavLink>
           </NavItem>
           <NavItem className="px-3">
-            <NavLink href="#/users">Users</NavLink>
+            <Link to="/users">Users</Link>
           </NavItem>
           <NavItem className="px-3">
             <NavLink href="#">Settings</NavLink>
@@ -50,7 +51,7 @@ class DefaultHeader extends Component {
           </NavItem>
           <AppHeaderDropdown direction="down">
             <DropdownToggle nav>
-              <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+              <img src={'../../assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
             </DropdownToggle>
             <DropdownMenu right style={{ right: 'auto' }}>
               <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
@@ -65,7 +66,7 @@ class DefaultHeader extends Component {
               <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
               <DropdownItem divider />
               <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
-              <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
+              <DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
             </DropdownMenu>
           </AppHeaderDropdown>
         </Nav>

src/containers/DefaultLayout/DefaultLayout.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { Container } from 'reactstrap';
 
@@ -18,46 +18,70 @@ import {
 import navigation from '../../_nav';
 // routes config
 import routes from '../../routes';
-import DefaultAside from './DefaultAside';
-import DefaultFooter from './DefaultFooter';
-import DefaultHeader from './DefaultHeader';
+
+const DefaultAside = React.lazy(() => import('./DefaultAside'));
+const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
+const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
 
 class DefaultLayout extends Component {
+
+  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
+
+  signOut(e) {
+    e.preventDefault()
+    this.props.history.push('/login')
+  }
+
   render() {
     return (
       <div className="app">
         <AppHeader fixed>
-          <DefaultHeader />
+          <Suspense  fallback={this.loading()}>
+            <DefaultHeader onLogout={e=>this.signOut(e)}/>
+          </Suspense>
         </AppHeader>
         <div className="app-body">
           <AppSidebar fixed display="lg">
             <AppSidebarHeader />
             <AppSidebarForm />
+            <Suspense>
             <AppSidebarNav navConfig={navigation} {...this.props} />
+            </Suspense>
             <AppSidebarFooter />
             <AppSidebarMinimizer />
           </AppSidebar>
           <main className="main">
             <AppBreadcrumb appRoutes={routes}/>
             <Container fluid>
-              <Switch>
-                {routes.map((route, idx) => {
-                    return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
-                        <route.component {...props} />
-                      )} />)
-                      : (null);
-                  },
-                )}
-                <Redirect from="/" to="/dashboard" />
-              </Switch>
+              <Suspense fallback={this.loading()}>
+                <Switch>
+                  {routes.map((route, idx) => {
+                    return route.component ? (
+                      <Route
+                        key={idx}
+                        path={route.path}
+                        exact={route.exact}
+                        name={route.name}
+                        render={props => (
+                          <route.component {...props} />
+                        )} />
+                    ) : (null);
+                  })}
+                  <Redirect from="/" to="/dashboard" />
+                </Switch>
+              </Suspense>
             </Container>
           </main>
           <AppAside fixed>
-            <DefaultAside />
+            <Suspense fallback={this.loading()}>
+              <DefaultAside />
+            </Suspense>
           </AppAside>
         </div>
         <AppFooter>
-          <DefaultFooter />
+          <Suspense fallback={this.loading()}>
+            <DefaultFooter />
+          </Suspense>
         </AppFooter>
       </div>
     );