From 5b3f916573205f501c8aa22ad2a22ea143735722 Mon Sep 17 00:00:00 2001
From: Roel Mendoza <roelmdz@gmail.com>
Date: Tue, 6 Aug 2024 12:44:38 -0600
Subject: [PATCH] placeholder when empty data

---
 src/components/ItemCardList.jsx               | 17 +++++++++++---
 .../ModelViewer/CarModelContainer.jsx         |  3 ++-
 .../ProductViewer/ProductContainer.jsx        | 23 ++++++++-----------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/ItemCardList.jsx b/src/components/ItemCardList.jsx
index 41a120f..4dee196 100644
--- a/src/components/ItemCardList.jsx
+++ b/src/components/ItemCardList.jsx
@@ -1,7 +1,18 @@
 import Grid from '@mui/material/Grid';
-import {ItemCard} from './ItemCard'; // Assuming ItemCard is in the same directory
+import { ItemCard } from './ItemCard';
+import { Typography, Box } from '@mui/material';
+
+const ItemsCardList = ({ rows, columns, itemCardProps }) => {
+    if (rows.length === 0) {
+        return (
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
+                <Typography variant="h6" color="text.secondary">
+                    No hay elementos disponibles en este momento.
+                </Typography>
+            </Box>
+        );
+    }
 
-const ItemsCardList = ({ rows, columns, itemCardProps}) => {
     return (
         <Grid container spacing={2}>
             {rows.map((row) => (
@@ -13,4 +24,4 @@ const ItemsCardList = ({ rows, columns, itemCardProps}) => {
     );
 };
 
-export default ItemsCardList;
+export default ItemsCardList;
\ No newline at end of file
diff --git a/src/pages/Products/ModelViewer/CarModelContainer.jsx b/src/pages/Products/ModelViewer/CarModelContainer.jsx
index a2b44d0..a321bab 100644
--- a/src/pages/Products/ModelViewer/CarModelContainer.jsx
+++ b/src/pages/Products/ModelViewer/CarModelContainer.jsx
@@ -58,7 +58,8 @@ const CarModelListContainer = () => {
                 setLoading(false); // Set loading to false after fetching data
             } catch (error) {
                 setLoading(false); // Set loading to false in case of error
-                openSnackbar(`Error al obtener los modelos de vehículos: ${error.errorMessage}`, 'error');
+                const severity = error.statusCode >= 400 && error.statusCode < 500 ? 'warning' : 'error';
+                openSnackbar(`Error al obtener los modelos de vehículos: ${error.errorMessage}`, severity);
             }
         };
 
diff --git a/src/pages/Products/ProductViewer/ProductContainer.jsx b/src/pages/Products/ProductViewer/ProductContainer.jsx
index 2b5a2ce..d33c5cf 100644
--- a/src/pages/Products/ProductViewer/ProductContainer.jsx
+++ b/src/pages/Products/ProductViewer/ProductContainer.jsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { getImageURLFromStorage } from '../../../services/Firebase/storage';
-import { CSSTransition } from 'react-transition-group'; // Importa CSSTransition
 import '../../../styles/brandContainer.css';
 import { useSnackbar } from '../../../components/SnackbarContext';
 import { getAllCarModelsProducts, getCarModelProducts } from '../../../services/CarModelService';
@@ -9,11 +8,12 @@ import { Screens } from '../ProductsConstants';
 import ProductList from './ProductList';
 import { ProductCarModel } from '../../../models/ProductCarModel';
 import { deleteProduct } from '../../../services/ProductService';
+import { Box, CircularProgress } from '@mui/material';
 
 const ProductContainer = () => {
   const [productCarModels, setProductCarModels] = useState([]);
   const { openSnackbar } = useSnackbar();
-  const { handleItemSelect, searchTerm, setLoading, selectedCarModel, productType } = useProductsContext();
+  const { handleItemSelect, searchTerm, setLoading, selectedCarModel, productType, loading } = useProductsContext();
 
   const handleProductSelect = (e, item) => {
     const productCarModel = productCarModels.find(productCarModel => productCarModel.product.id === item.id);
@@ -22,7 +22,6 @@ const ProductContainer = () => {
 
   const handleOnDelete = async (productCarModel) => {
     try {
-      console.log(productCarModel)
       let result = await deleteProduct(productCarModel.id);
       if (result) {
         const products = productCarModels.filter(pcm => pcm.product.id !== productCarModel.id);
@@ -81,18 +80,16 @@ const ProductContainer = () => {
     fetchProducts();
   }, [searchTerm, setLoading]);
 
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
+        <CircularProgress size={40} />
+      </Box>
+    );
+  }
 
   return (
-    <CSSTransition
-      in={productCarModels.length > 0} // Establece la condición para mostrar la animación
-      timeout={300}
-      classNames="fade"
-      unmountOnExit
-    >
-      <div>
-        <ProductList products={productCarModels} onProductSelect={handleProductSelect} handleOnDelete={handleOnDelete} />
-      </div>
-    </CSSTransition>
+    <ProductList products={productCarModels} onProductSelect={handleProductSelect} handleOnDelete={handleOnDelete} />
   );
 };