From 1ea39e988044005bb840993865ec9ad033fd1920 Mon Sep 17 00:00:00 2001
From: RodrigoTomeES <tomecafeconrodrigo@live.com>
Date: Wed, 18 Dec 2019 13:31:51 +0100
Subject: [PATCH] Added lazy loading

---
 src/App.js                               | 24 +++++++++++++++++-------
 src/hoc/asyncComponent/asyncComponent.js | 24 ++++++++++++++++++++++++
 src/store/actions/auth.js                |  1 -
 3 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/hoc/asyncComponent/asyncComponent.js

diff --git a/src/App.js b/src/App.js
index 72f61f9..40ef4f8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,11 +4,21 @@ import {connect} from 'react-redux';
 
 import Layout from './hoc/Layout/Layout';
 import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
-import Checkout from './containers/Checkout/Checkout';
-import Orders from './containers/Orders/Orders';
-import Auth from './containers/Auth/Auth';
 import Logout from './containers/Auth/Logout/Logout';
 import * as actions from './store/actions/auth';
+import asyncComponent from './hoc/asyncComponent/asyncComponent';
+
+const asyncCheckout = asyncComponent(() => {
+  return import('./containers/Checkout/Checkout');
+});
+
+const asyncOrders = asyncComponent(() => {
+  return import('./containers/Orders/Orders');
+});
+
+const asyncAuth = asyncComponent(() => {
+  return import('./containers/Auth/Auth');
+});
 
 class App extends Component {
   componentDidMount() {
@@ -18,7 +28,7 @@ class App extends Component {
   render() {
     let routes = (
       <Switch>
-        <Route path="/auth" component={Auth} />
+        <Route path="/auth" component={asyncAuth} />
         <Route path="/" exact component={BurgerBuilder} />
         <Redirect to="/" />
       </Switch>
@@ -27,10 +37,10 @@ class App extends Component {
     if (this.props.isAuthenticated) {
       routes = (
         <Switch>
-          <Route path="/checkout" component={Checkout} />
-          <Route path="/orders" component={Orders} />
+          <Route path="/checkout" component={asyncCheckout} />
+          <Route path="/orders" component={asyncOrders} />
           <Route path="/logout" component={Logout} />
-          <Route path="/auth" component={Auth} />
+          <Route path="/auth" component={asyncAuth} />
           <Route path="/" exact component={BurgerBuilder} />
           <Redirect to="/" />
         </Switch>
diff --git a/src/hoc/asyncComponent/asyncComponent.js b/src/hoc/asyncComponent/asyncComponent.js
new file mode 100644
index 0000000..08e6772
--- /dev/null
+++ b/src/hoc/asyncComponent/asyncComponent.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+const asyncComponent = (importComponent) => {
+    return class extends Component {
+        state = {
+            component: null
+        }
+
+        componentDidMount () {
+            importComponent()
+                .then(cmp => {
+                    this.setState({component: cmp.default});
+                });
+        }
+        
+        render () {
+            const C = this.state.component;
+
+            return C ? <C {...this.props} /> : null;
+        }
+    }
+}
+
+export default asyncComponent;
diff --git a/src/store/actions/auth.js b/src/store/actions/auth.js
index 52333cf..1a24bae 100644
--- a/src/store/actions/auth.js
+++ b/src/store/actions/auth.js
@@ -13,7 +13,6 @@ export const authSuccess = (token, userId) => {
 };
 
 export const authFail = (error) => {
-    console.log(error)
     return {
         type: actionTypes.AUTH_FAIL,
         error: error