Merge branch 'development'

CRCunha · Mar 15, 2021 · 3bb2673 · 3bb2673
2 parents 20a4436 + d9a087c
commit 3bb2673
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 39 deletions.
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
@@ -34,6 +34,7 @@ export default function Menu() {
       .get('    https://fakestoreapi.com/products')
       .then((response) => {
         dispatch(ProductActions.setProductList(response.data));
+        dispatch(ProductActions.setLoading(false));
       })
       .catch((error) => {
         // eslint-disable-next-line no-console

diff --git a/src/components/pages/productPage/content/index.js b/src/components/pages/productPage/content/index.js
@@ -1,5 +1,5 @@
 import { React } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, CircularProgress } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import clsx from 'clsx';
 import ExplanatoryCard from '../../../explanatoryCard';
@@ -10,7 +10,7 @@ export default function Content() {
 
   const productsStates = useSelector((state) => state.products, []);
   // eslint-disable-next-line no-console
-  console.log('productsStates', productsStates.products);
+  console.log('productsStates', productsStates.loading);
 
   return (
     <div>
@@ -19,44 +19,62 @@ export default function Content() {
           <Grid container justify="center">
             <Grid item xs={10}>
               <ExplanatoryCard />
-              <Grid
-                container
-                style={{
-                  marginTop: 20,
-                  overflow: 'auto',
-                  height: '51vh',
-                }}
-              >
-                {productsStates.products.map((value) => {
-                  return (
-                    <Grid item xs={12}>
-                      <Grid
-                        container
-                        alignItems="center"
-                        className={clsx(classes.drawer, {
-                          [classes.gridCardError]: value.price < 50.0,
-                          [classes.gridCardWarning]:
-                            value.price >= 50.0 && value.price < 100.0,
-                          [classes.gridCardOk]: value.price > 100.0,
-                        })}
-                      >
-                        <Grid item xs={4}>
-                          {value.title}
-                        </Grid>
-                        <Grid item xs={1}>
-                          {value.price}
-                        </Grid>
-                        <Grid item xs={1}>
-                          {value.category}
-                        </Grid>
-                        <Grid item xs={6} style={{ paddingLeft: 10 }}>
-                          {value.description}
+              {!productsStates.loading ? (
+                <Grid
+                  container
+                  style={{
+                    marginTop: 20,
+                    overflow: 'auto',
+                    height: '51vh',
+                  }}
+                >
+                  {productsStates.products.map((value) => {
+                    return (
+                      <Grid item xs={12}>
+                        <Grid
+                          container
+                          alignItems="center"
+                          className={clsx(classes.drawer, {
+                            [classes.gridCardError]: value.price < 50.0,
+                            [classes.gridCardWarning]:
+                              value.price >= 50.0 && value.price < 100.0,
+                            [classes.gridCardOk]: value.price > 100.0,
+                          })}
+                        >
+                          <Grid item xs={4}>
+                            {value.title}
+                          </Grid>
+                          <Grid item xs={1}>
+                            {value.price}
+                          </Grid>
+                          <Grid item xs={1}>
+                            {value.category}
+                          </Grid>
+                          <Grid item xs={6} style={{ paddingLeft: 10 }}>
+                            {value.description}
+                          </Grid>
                         </Grid>
                       </Grid>
-                    </Grid>
-                  );
-                })}
-              </Grid>
+                    );
+                  })}
+                </Grid>
+              ) : (
+                <Grid
+                  container
+                  alignItems="center"
+                  justify="center"
+                  style={{
+                    marginTop: 20,
+                    overflow: 'auto',
+                    height: '51vh',
+                    backgroundColor: 'rgba(255,255,255, 0.55)',
+                    boxShadow: '0 20px 30px -16px rgba(9,9,16,0.03)',
+                    borderRadius: 10,
+                  }}
+                >
+                  <CircularProgress />
+                </Grid>
+              )}
             </Grid>
           </Grid>
         </Grid>

diff --git a/src/components/pages/usersPage/content/index.js b/src/components/pages/usersPage/content/index.js
@@ -54,7 +54,7 @@ export default function Content() {
   };
 
   // eslint-disable-next-line no-console
-  console.log(usersStates.usersList);
+  // console.log(usersStates.usersList);
 
   return (
     <div>

diff --git a/src/store/modules/products/actions.js b/src/store/modules/products/actions.js
@@ -2,3 +2,7 @@
 export const setProductList = (productsObject) => {
   return { type: '@app/SET_PRODUCT_LIST', productsObject };
 };
+
+export const setLoading = (loading) => {
+  return { type: '@app/SET_LOADING', loading };
+};
diff --git a/src/store/modules/products/reducer.js b/src/store/modules/products/reducer.js
@@ -2,6 +2,7 @@ import produce from 'immer';
 
 const initialState = {
   products: [],
+  loading: true,
 };
 
 export default function products(state = initialState, action) {
@@ -11,6 +12,11 @@ export default function products(state = initialState, action) {
         draft.products = action.productsObject;
       });
 
+    case '@app/SET_LOADING':
+      return produce(state, (draft) => {
+        draft.loading = action.loading;
+      });
+
     default:
       return state;
   }