including optimizations

client/src/App.js

@@ -1,20 +1,25 @@
-import React, {useEffect  } from 'react';
+import React, {useEffect, lazy, Suspense } from 'react';
 
 import { Route,Switch, Redirect } from 'react-router-dom';
 import {connect} from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 
 import GlobalStyle from './global.styles';
 
-import HomePage from './pages/homepage/homepage.component';
-import Header from './components/header/header.component';
-import ShopPage from './pages/shop/shop.component';
-import CheckoutPage from './pages/checkout/checkout.component';
-import SignInAndSignUp from './pages/signin-and-singup/signin-and-singup.component';
 
 import { selectCurrentUser } from './redux/user/user.selectors';
 import { checkUserSession } from './redux/user/user.actions';
 
+import Header from './components/header/header.component';
+import Spinner from './components/spinner/spinner.component';
+import ErrorBoundary  from './components/error-boundary/error-boundary.component';
+
+//Lazy loading //Incrementing Performance of chunks files
+const HomePage = lazy(()=>import('./pages/homepage/homepage.component'));
+const ShopPage = lazy(()=>import('./pages/shop/shop.component'));
+const CheckoutPage = lazy(()=>import('./pages/checkout/checkout.component'));
+const SignInAndSignUp = lazy(()=>import('./pages/signin-and-singup/signin-and-singup.component'));
+
 const App=({checkUserSession,currentUser})=>{
   useEffect(()=>{
    checkUserSession();
@@ -23,20 +28,25 @@ const App=({checkUserSession,currentUser})=>{
   return(
       <div>
       <GlobalStyle />
-      <Header/>
+
       <Switch>
-        <Route exact path="/" component={HomePage} />
-        <Route path="/shop" component={ShopPage} />
-        <Route exact path="/checkout" component={CheckoutPage} />
-        <Route exact path="/signin" 
-          render={()=>
-                  currentUser?(
-                    <Redirect to='/' />
-                  ):(
-                    <SignInAndSignUp/>
-                  )
-                } 
-        />
+      <ErrorBoundary>
+          <Suspense fallback={<Spinner />}>
+            <Header/>
+            <Route exact path="/" component={HomePage} />
+            <Route path="/shop" component={ShopPage} />
+            <Route exact path="/checkout" component={CheckoutPage} />
+            <Route exact path="/signin" 
+              render={()=>
+                      currentUser?(
+                        <Redirect to='/' />
+                      ):(
+                        <SignInAndSignUp/>
+                      )
+                    } 
+            />
+          </Suspense>
+        </ErrorBoundary>
       </Switch>
       </div>
     );

client/src/components/cart-item/cart-item-component.jsx

@@ -15,4 +15,4 @@ const CartItem = ({item: {imageUrl, price, name, quantity}}) => (
         </CartItemContainer>
 )
 
-export default CartItem;
+export default React.memo(CartItem);

client/src/components/error-boundary/error-boundary.component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {ErrorImageContainer, ErrorImageOverlay, ErrorImageText } from './error-boundary.styles';
+
+class ErrorBoundary extends React.Component {
+  constructor(){
+    super();
+
+    this.state = {
+      hasErrored: false
+    }
+  }
+
+  static getDerivedStateFromError(error){
+    return { hasErrored: true}
+
+  }
+
+  componentDidCatch(error, info){
+    console.log(error);
+  }
+
+  render(){
+    if(this.state.hasErrored){
+      return (
+        <ErrorImageOverlay>
+          <ErrorImageContainer imageUrl='https://i.imgur.com/A040Lxr.png' />
+          <ErrorImageText>Sorry this page is broken</ErrorImageText>
+        </ErrorImageOverlay>
+      )
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

client/src/components/error-boundary/error-boundary.styles.jsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const ErrorImageOverlay = styled.div`
+  height: 60vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ErrorImageContainer = styled.div`
+  display: inline-block;
+  background-image: ${({ imageUrl }) => `url(${imageUrl})`};
+  background-size: cover;
+  background-position: center;
+  width: 40vh;
+  height: 40vh;
+`;
+
+export const ErrorImageText = styled.h2`
+  font-size: 28px;
+  color: #2f8e89;
+`;

client/src/components/spinner/spinner.component.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import {SpinnerContainer, SpinnerOverlay} from './spinner.styles';
+
+export const Spinner = () => (
+    <SpinnerOverlay>
+      <SpinnerContainer />
+    </SpinnerOverlay>
+)
+export default Spinner;

client/src/components/spinner/spinner.styles.jsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const SpinnerOverlay = styled.div`
+  height: 60vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const SpinnerContainer = styled.div`
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(195, 195, 195, 0.6);
+  border-radius: 50%;
+  border-top-color: #636767;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+  @keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+`;

client/src/components/with-spinner/with-spinner.component.jsx

@@ -1,17 +1,9 @@
 import React from 'react';
 
-import {SpinnerContainer, SpinnerOverlay} from './with-spinner.styles';
+import {Spinner} from '../spinner/spinner.component';
+
+const WithSpinner = WrappedDocument => ({isLoading, ...otherProps}) => {
+    return isLoading ? (<Spinner/>) : (<WrappedDocument {...otherProps} />)
+};
 
-const WithSpinner = WrappedDocument => {
-    const Spinner = ({isLoading, ...otherProps}) => {
-        return isLoading ? (
-            <SpinnerOverlay>
-                <SpinnerContainer />
-            </SpinnerOverlay>
-        ) : (
-            <WrappedDocument {...otherProps} />
-        )
-    }
-    return Spinner;
-}
 export default WithSpinner;

client/src/pages/homepage/homepage.component.jsx

@@ -3,9 +3,11 @@ import Directory from '../../components/directory/directory.component';
 
 import { HomePageContainer } from './homepage.styles'
 
-const HomePage = () => (
+const HomePage = () =>{
+    //throw Error;
+    return (
     <HomePageContainer>
         <Directory/>
     </HomePageContainer>
-)
+)}
 export default HomePage;

client/src/pages/shop/shop.component.jsx

@@ -1,23 +1,28 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, lazy, Suspense} from 'react';
 import { Route } from 'react-router-dom';
 import {connect} from 'react-redux';
+import Spinner from '../../components/spinner/spinner.component';
 
-import CollectionOverviewContainer from '../../components/collections-overview/collections-overview.container';
-import CollectionPageContainer from '../collection/collection.conatiner';
+import { fetchCollectionsStart } from '../../redux/shop/shop.actions';
+
+const CollectionOverviewContainer = lazy(()=>import('../../components/collections-overview/collections-overview.container'));
+const CollectionPageContainer = lazy(()=>import('../collection/collection.conatiner'));
 
 
-import { fetchCollectionsStart } from '../../redux/shop/shop.actions';
 
 
 const ShopPage = ({fetchCollectionsStart, match}) => {
     useEffect(()=>{
         fetchCollectionsStart();
     },[fetchCollectionsStart])
 
-    return(<div className='shop-page'>
-        <Route exact path={`${match.path}`} component={CollectionOverviewContainer} />
-        <Route path={`${match.path}/:collectionId`} component={CollectionPageContainer} />
-
+    return(
+        <div className='shop-page'>
+            <Suspense fallback={<Spinner />}>
+                <Route exact path={`${match.path}`} component={CollectionOverviewContainer} />
+                <Route path={`${match.path}/:collectionId`} component={CollectionPageContainer} />
+            </Suspense>
+
         </div>
         );
 }