chore: Update BrandContainer to pass navigate prop to ListContainer

BananasDev0 · Jul 24, 2024 · 939f756 · 939f756
1 parent 29f8ddf
commit 939f756
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 155 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "firebase": "^10.8.0",
-    "framer-motion": "^11.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-photoswipe-gallery": "^3.0.1",

diff --git a/src/components/CustomSearchBar.jsx b/src/components/CustomSearchBar.jsx
@@ -1,24 +1,18 @@
 import { Select, MenuItem } from '@mui/material';
 import CustomInput from "./CustomInput";
 import { useProductsContext } from '../pages/Products/ProductsContext';
-import { ProductTypes, SearchOptions } from '../pages/Products/ProductsConstants';
+import { SearchOptions } from '../pages/Products/ProductsConstants';
+import BrandContainer from '../pages/Products/BrandViewer/BrandContainer';
+import CarModelListContainer from '../pages/Products/ModelViewer/CarModelContainer';
+import ProductContainer from '../pages/Products/ProductViewer/ProductContainer';
+import { getProductVerbiage } from '../util/generalUtils';
 
-const CustomSearchBar = () => {
+const CustomSearchBar = ({ navigate }) => {
   const { searchOption, searchTerm, handleSearchOptionChange, setSearchTerm, productType } = useProductsContext();
 
-  const handleSearchChange = (e) => {
-    const newSearchTerm = e.target.value;
-    setSearchTerm(newSearchTerm);
-  }
 
   let placeholder = '';
-  let productVerbiage = 'Radiadores';
-
-  if (productType === ProductTypes.CAP) {
-    productVerbiage = 'Tapas';
-  } else if (productType === ProductTypes.FAN) {
-    productVerbiage = 'Abanicos';
-  }
+  let productVerbiage = getProductVerbiage(productType);
 
   if (searchOption === SearchOptions.BRANDS) {
     placeholder = 'Buscar marcas...';
@@ -28,12 +22,34 @@ const CustomSearchBar = () => {
     placeholder = `Buscar ${productVerbiage}...`;
   }
 
+  const handleSearchChange = (e) => {
+    const newSearchTerm = e.target.value;
+    setSearchTerm(newSearchTerm);
+  }
+
+  const handleOptionChange = (option) => {
+    handleSearchOptionChange(option);
+
+    switch (option) {
+      case SearchOptions.BRANDS:
+        navigate(<BrandContainer />, 'Marcas');
+        break;
+      case SearchOptions.MODELS:
+        navigate(<CarModelListContainer />, 'Modelos');
+        break;
+      case SearchOptions.PRODUCTS:
+        navigate(<ProductContainer />, productVerbiage);
+        break;
+      default:
+        break;
+    }
+  }
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px', marginBottom: '10px' }}>
       <Select
         value={searchOption}
-        onChange={(event) => handleSearchOptionChange(event.target.value)}
+        onChange={(event) => handleOptionChange(event.target.value)}
         displayEmpty
         inputProps={{ 'aria-label': 'Buscar por' }}
         sx={{ height: '35px', marginRight: '5px' }}

diff --git a/src/components/NavigationManager.jsx b/src/components/NavigationManager.jsx
@@ -3,36 +3,26 @@ import { Box, Breadcrumbs, Link, Typography } from '@mui/material';
 
 const NavigationManager = ({ initialComponent, initialTitle }) => {
   const [navigationStack, setNavigationStack] = useState([
-    { component: initialComponent, title: initialTitle, onBack: null }
+    { component: initialComponent, title: initialTitle }
   ]);
 
-  const navigate = useCallback((component, title, onBack = null) => {
-    setNavigationStack(prevStack => [...prevStack, { component, title, onBack }]);
-    window.history.pushState(null, '', window.location.pathname);
-  }, []);
-
-  const navigateBack = useCallback(() => {
+  const navigate = useCallback((component, title) => {
     setNavigationStack(prevStack => {
-      if (prevStack.length > 1) {
-        const currentView = prevStack[prevStack.length - 1];
-        if (currentView.onBack) {
-          currentView.onBack();
-        }
-        return prevStack.slice(0, -1);
+      const existingIndex = prevStack.findIndex(item => item.title === title);
+      if (existingIndex !== -1) {
+        // Cut the stack to the existing item
+        return prevStack.slice(0, existingIndex + 1);
       }
-      return prevStack;
+      return [...prevStack, { component, title }];
     });
   }, []);
 
+  const navigateBack = useCallback(() => {
+    setNavigationStack(prevStack => prevStack.slice(0, -1));
+  }, []);
+
   const resetNavigation = useCallback(() => {
-    setNavigationStack(prevStack => {
-      prevStack.slice(1).forEach(view => {
-        if (view.onBack) {
-          view.onBack();
-        }
-      });
-      return [prevStack[0]];
-    });
+    setNavigationStack(prevStack => [prevStack[0]]);
   }, []);
 
   useEffect(() => {
@@ -42,6 +32,7 @@ const NavigationManager = ({ initialComponent, initialTitle }) => {
     };
 
     window.addEventListener('popstate', handlePopState);
+
     return () => {
       window.removeEventListener('popstate', handlePopState);
     };
@@ -62,11 +53,6 @@ const NavigationManager = ({ initialComponent, initialTitle }) => {
             href="#"
             onClick={(e) => {
               e.preventDefault();
-              navigationStack.slice(index + 1).forEach(view => {
-                if (view.onBack) {
-                  view.onBack();
-                }
-              });
               setNavigationStack(prevStack => prevStack.slice(0, index + 1));
             }}
           >
@@ -79,8 +65,9 @@ const NavigationManager = ({ initialComponent, initialTitle }) => {
 
   return (
     <div>
-      {<Box sx={{ marginBottom: '15px' }}>
-        {renderBreadcrumbs()}</Box>}
+      <Box sx={{ marginBottom: '15px' }}>
+        {renderBreadcrumbs()}
+      </Box>
       {React.cloneElement(currentView.component, { navigate, navigateBack, resetNavigation })}
     </div>
   );

diff --git a/src/pages/Products/BrandViewer/BrandContainer.jsx b/src/pages/Products/BrandViewer/BrandContainer.jsx
@@ -61,7 +61,7 @@ const BrandContainer = ({navigate}) => {
   };
 
   return (
-    <ListContainer>
+    <ListContainer navigate={navigate}>
       <CSSTransition
         in={brands.length > 0}
         timeout={300}

diff --git a/src/pages/Products/ListContainer.jsx b/src/pages/Products/ListContainer.jsx
@@ -4,12 +4,12 @@ import CustomSearchBar from '../../components/CustomSearchBar';
 import { useProductsContext } from './ProductsContext';
 import ProductDialog from './ProductDialog/ProductDialog';
 
-const ListContainer = ({ children }) => {
+const ListContainer = ({ children, navigate }) => {
   const { loading, handleOpenDialog } = useProductsContext();
 
   return (
     <Box sx={{ width: '100%', '& > *:not(style)': { mb: 3 } }}>
-      <CustomSearchBar />
+      <CustomSearchBar navigate={navigate}/>
 
       <Box sx={{ flexGrow: 1, overflow: 'auto', mt: 2 }}>
         {loading ? (

diff --git a/src/pages/Products/ModelViewer/CarModelContainer.jsx b/src/pages/Products/ModelViewer/CarModelContainer.jsx
@@ -7,15 +7,17 @@ import { useProductsContext } from '../ProductsContext';
 import { Screens } from '../ProductsConstants';
 import ProductContainer from '../ProductViewer/ProductContainer';
 import ListContainer from '../ListContainer';
+import { getProductVerbiage } from '../../../util/generalUtils';
 
-const CarModelListContainer = ({navigate}) => {
+const CarModelListContainer = ({ navigate }) => {
     const [carModels, setCarModels] = useState([]);
     const { openSnackbar } = useSnackbar();
-    const { selectedBrand, handleItemSelect, setLoading, searchTerm, navigateBack} = useProductsContext();
+    const { selectedBrand, handleItemSelect, setLoading, searchTerm, navigateBack, productType } = useProductsContext();
 
     const onCarModelSelect = (e, carModel) => {
+        let productVerbiage = getProductVerbiage(productType);
         handleItemSelect(carModel, Screens.MODELS);
-        navigate(<ProductContainer/>, 'Productos', navigateBack);
+        navigate(<ProductContainer />, productVerbiage, navigateBack);
     }
 
     const handleOnDelete = async (carModel) => {
@@ -38,7 +40,7 @@ const CarModelListContainer = ({navigate}) => {
             try {
                 setLoading(true);
                 let models = [];
-                if (selectedBrand && selectedBrand.id ) {
+                if (selectedBrand && selectedBrand.id) {
                     models = await getCarModelsByBrandId(selectedBrand.id);
                 } else {
                     models = await getCarModels(searchTerm);
@@ -55,8 +57,8 @@ const CarModelListContainer = ({navigate}) => {
     }, [selectedBrand, searchTerm]);
 
     return (
-        <ListContainer>
-            <CarModelList carModels={carModels} onCarModelSelect={onCarModelSelect} handleOnDelete={handleOnDelete}/>
+        <ListContainer navigate={navigate}>
+            <CarModelList carModels={carModels} onCarModelSelect={onCarModelSelect} handleOnDelete={handleOnDelete} />
         </ListContainer>
     );
 };

diff --git a/src/pages/Products/ProductSelector.jsx b/src/pages/Products/ProductSelector.jsx
diff --git a/src/pages/Products/ProductSelectorNav.jsx b/src/pages/Products/ProductSelectorNav.jsx
diff --git a/src/pages/Products/ProductTypeSelector.jsx b/src/pages/Products/ProductTypeSelector.jsx
@@ -29,7 +29,7 @@ const ProductTypeSelector = ({navigate}) => {
 
   const handleOnProductTypeClick = (type) => {
     handleChangeProductType(type);
-    navigate(<BrandContainer/>, 'Marcas');
+    navigate(<BrandContainer />, 'Marcas');
   }
 
   return (

diff --git a/src/pages/Products/ProductViewer/ProductContainer.jsx b/src/pages/Products/ProductViewer/ProductContainer.jsx
@@ -11,7 +11,7 @@ import { ProductCarModel } from '../../../models/ProductCarModel';
 import { deleteProduct } from '../../../services/ProductService';
 import ListContainer from '../ListContainer';
 
-const ProductContainer = () => {
+const ProductContainer = ({navigate}) => {
   const [productCarModels, setProductCarModels] = useState([]);
   const { openSnackbar } = useSnackbar();
   const { handleItemSelect, searchTerm, setLoading, selectedCarModel, productType } = useProductsContext();
@@ -84,7 +84,7 @@ const ProductContainer = () => {
 
 
   return (
-    <ListContainer>
+    <ListContainer navigate={navigate}>
       <CSSTransition
       in={productCarModels.length > 0} // Establece la condición para mostrar la animación
       timeout={300}

diff --git a/src/pages/Products/ProductsContext.jsx b/src/pages/Products/ProductsContext.jsx
@@ -44,6 +44,17 @@ export const ProductsProvider = ({ children }) => {
     }
   }, [currentScreen, openDialog]);
 
+  const resetState = () => {
+    setCurrentScreen(Screens.BRANDS);
+    setOpenDialog(false);
+    setSelectedBrand(null);
+    setSelectedCarModel(null);
+    setSearchTerm('');
+    setSearchOption(SearchOptions.BRANDS);
+    setLoading(false);
+    setScrollPosition(0);
+  }
+
   const handleItemSelect = (item, type) => {
     switch (type) {
       case Screens.BRANDS:
@@ -80,6 +91,7 @@ export const ProductsProvider = ({ children }) => {
   const handleSearchOptionChange = (value) => {
     setSearchTerm('');
     setSearchOption(value);
+    resetState();
     if (value === SearchOptions.BRANDS) {
       setCurrentScreen(Screens.BRANDS);
     } else if (value === SearchOptions.MODELS) {

diff --git a/src/util/generalUtils.js b/src/util/generalUtils.js
@@ -1,3 +1,5 @@
+import { ProductTypes } from "../pages/Products/ProductsConstants";
+
 export function modifyAndClone(obj, path, value) {
   // Realiza una clonación profunda del objeto original
   const clone = JSON.parse(JSON.stringify(obj));
@@ -62,3 +64,13 @@ export const base64ToBlob = (base64) => {
   const blob = new Blob(byteArrays, { type: mimeType });
   return blob;
 }
+
+export const getProductVerbiage = (productType) => {
+  let productVerbiage = 'Radiadores';
+  if (productType === ProductTypes.CAP) {
+    productVerbiage = 'Tapas';
+  } else if (productType === ProductTypes.FAN) {
+    productVerbiage = 'Abanicos';
+  }
+  return productVerbiage;
+}