Merge pull request #22 from Chamindu36/dev

[T19] Add spinner when categories are loading with async behavior

.eslintrc.js

@@ -1,13 +1,13 @@
-// parserOptions: {
-//     parser: '@babel/eslint-parser',
-//         requireConfigFile: false, // <== ADD THIS
-//             ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-//                 sourceType: 'module' // Allows for the use of imports
-// }
-
 parserOptions: {
-    parser: '@babel/eslint-parser';
-    requireConfigFile: false; // <== ADD THIS
-    ecmaVersion: 2018; // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
-}
+    parser: '@babel/eslint-parser',
+        requireConfigFile: false, // <== ADD THIS
+            ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+                sourceType: 'module' // Allows for the use of imports
+}
+
+// parserOptions: {
+//     parser: '@babel/eslint-parser';
+//     requireConfigFile: false; // <== ADD THIS
+//     ecmaVersion: 2018; // Allows for the parsing of modern ECMAScript features
+//     sourceType: 'module' // Allows for the use of imports
+// }

README.md

@@ -1,5 +1,3 @@
-[![Netlify Status](https://api.netlify.com/api/v1/badges/73553229-0d8d-4f13-877e-b4abbc33ef8a/deploy-status)](https://app.netlify.com/sites/chamindu-market-place-ecom/deploys)
-
 # market-place-pet-project
 
 E-commerce app project with Redux, Hooks, GraphQL, Stripe, Firebase

src/components/spinner/spinner.component.jsx

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

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);
+    }
+  }
+`;

src/routes/categories-preview/categories-preview.component.jsx

@@ -1,21 +1,25 @@
 import { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectCategoriesMap } from '../../store/category/category.selector';
+import { selectCategoriesIsLoading, selectCategoriesMap } from '../../store/category/category.selector';
 
 import CategoryPreview from '../../components/category-preview/category-preview.component';
+import Spinner from '../../components/spinner/spinner.component';
 
 const CategoriesPreview = () => {
     const categoriesMap = useSelector(selectCategoriesMap);
+    const isLoading = useSelector(selectCategoriesIsLoading);
 
     return (
         <Fragment>
-            {Object.keys(categoriesMap).map((title) => {
-                const products = categoriesMap[title];
-                return (
-                    <CategoryPreview key={title} title={title} products={products} />
-                );
-            })}
+            {isLoading ? <Spinner /> :
+                (Object.keys(categoriesMap).map((title) => {
+                    const products = categoriesMap[title];
+                    return (
+                        <CategoryPreview key={title} title={title} products={products} />
+                    );
+                }))
+            }
         </Fragment>
     );
 };

src/routes/category/category.component.jsx

@@ -2,30 +2,35 @@ import { useParams } from 'react-router-dom';
 import { useState, useEffect, Fragment } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectCategoriesMap } from '../../store/category/category.selector';
+import { selectCategoriesIsLoading, selectCategoriesMap } from '../../store/category/category.selector';
 
 import { CategoryContainer, CategoryTitle } from './category.styles';
 import ProductCard from '../../components/product-card/product-card.components';
+import Spinner from '../../components/spinner/spinner.component';
 
 const Category = () => {
     const categoriesMap = useSelector(selectCategoriesMap);
+    const isLoading = useSelector(selectCategoriesIsLoading);
 
     const { category } = useParams();
     const [products, setProducts] = useState(categoriesMap[category]);
 
+
     useEffect(() => {
         setProducts(categoriesMap[category]);
     }, [category, categoriesMap]);
 
     return (
         <Fragment>
             <CategoryTitle>{category.toUpperCase()}</CategoryTitle>
-            <CategoryContainer>
-                {
-                    products && products.map((product) =>
-                        <ProductCard key={product.id} product={product} />)
-                }
-            </CategoryContainer>
+            {isLoading ? <Spinner /> :
+                <CategoryContainer>
+                    {
+                        products && products.map((product) =>
+                            <ProductCard key={product.id} product={product} />)
+                    }
+                </CategoryContainer>}
+
         </Fragment>
     );
 }

src/store/category/category.selector.js

@@ -14,4 +14,10 @@ export const selectCategoriesMap = createSelector(
             acc[title.toLowerCase()] = items;
             return acc;
         }, {})
+);
+
+// Add categories is loading selector to use with spinner
+export const selectCategoriesIsLoading = createSelector(
+    [selectCategoryReducer],
+    (categoriesSlice) => categoriesSlice.isLoading
 );

src/store/store.js

@@ -11,7 +11,7 @@ import { rootReducer } from './root-reducer';
 const persistConfig = {
     key: 'root',
     storage,
-    blacklist: ['user']
+    whitelist: ['cart']
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);