category added

src/App.js

@@ -10,7 +10,7 @@ const App = () => {
     < Routes >
       <Route path='/' element={<Navigation />}>
         <Route index element={<Home />} />
-        <Route path='shop' element={<Shop />} />
+        <Route path='shop/*' element={<Shop />} />
         <Route path='auth' element={<Authentication />} />
         <Route path='checkout' element={<Checkout />} />
       </Route>

src/components/category-preview/category-preview.component.jsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import ProductCard from '../product-card/product-card.component';
+import './category-preview.styles.scss';
+
+const CategoryPreview = ({ title, products }) => {
+    return (
+        <div className='category-preview-container'>
+            <h2>
+                <Link className='title' to={title}>{title.toUpperCase()}</Link>
+            </h2>
+            <div className='preview'>
+                {
+                    products
+                        .filter((_, idx) => idx < 4)
+                        .map((product) => <ProductCard key={product.id} product={product} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CategoryPreview;

src/components/category-preview/category-preview.styles.scss

@@ -0,0 +1,18 @@
+.category-preview-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 30px;
+
+    .title {
+      font-size: 28px;
+      margin-bottom: 25px;
+      cursor: pointer;
+    }
+
+    .preview {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      column-gap: 20px;
+    }
+  }
+

src/components/category-item/category-item.component.jsx → src/components/directory-item/directory-item.component.jsx

@@ -1,14 +1,14 @@
-import './category-item.styles.scss'
+import './directory-item.styles.scss'
 
-const CategoryItem = ({category}) => {
+const DirectoryItem = ({category}) => {
     const {imageUrl, title} = category;
     return (
-        <div className="category-container">
+        <div className="directory-item-container">
           <div className="background-image" 
           style={{
             backgroundImage:`url(${imageUrl})`
           }}/>
-          <div className="category-body-container">
+          <div className="directory-item-body">
             <h2>{title}</h2>
             <p>Shop Now</p>
 
@@ -17,4 +17,4 @@ const CategoryItem = ({category}) => {
     )
 }
 
-export default CategoryItem
+export default DirectoryItem

src/components/category-item/category-item.styles.scss → src/components/directory-item/directory-item.styles.scss

@@ -1,4 +1,4 @@
-.category-container {
+.directory-item-container {
   min-width: 30%;
   height: 240px;
   flex: 1 1 auto;
@@ -17,7 +17,7 @@
       transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
     }
 
-    & .category-body-container {
+    & .directory-item-body {
       opacity: 0.9;
     }
   }
@@ -41,7 +41,7 @@
     background-position: center;
   }
 
-  .category-body-container {
+  .directory-item-body {
     height: 90px;
     padding: 0 25px;
     display: flex;

src/components/directory/directory.component.jsx

@@ -1,10 +1,10 @@
-import CategoryItem from '../category-item/category-item.component'
+import DirectoryItem from '../directory-item/directory-item.component';
 import './directory.styles.scss'
 const Directory = ({categories}) => {
 return (
     <div className="directory-container">
       {categories.map((category) => (
-        <CategoryItem key={category.id} category={category}/>
+        <DirectoryItem key={category.id} category={category}/>
       ))}
     </div>
 )

src/contexts/categories.context.jsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { createContext, useState } from "react";
+import { GetCategoriesAndDocuments } from "../utils/firebase/firebase.utils";
+
+
+export const CategoriesContext = createContext({
+    categoriesMap: [],
+});
+
+export const CategoriesProvider = ({ children }) => {
+    const [categoriesMap, setCategoriesMap] = useState({});
+    useEffect(() => {
+        const getCategoriesMap = async () => {
+            const categoriesMap = await GetCategoriesAndDocuments();
+            setCategoriesMap(categoriesMap)
+        }
+
+        getCategoriesMap();
+    }, [])
+    const value = { categoriesMap };
+    return (
+        <CategoriesContext.Provider value={value}>
+            {children}
+        </CategoriesContext.Provider>
+    )
+}

src/index.js

@@ -6,19 +6,19 @@ import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import { UserProvider } from './contexts/user.context';
-import { ProductsProvider } from './contexts/products.context';
+import { CategoriesProvider } from './contexts/categories.context';
 import { CartProvider } from './contexts/cart.context';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
       <UserProvider>
-        <ProductsProvider>
+        <CategoriesProvider>
           <CartProvider>
             <App />
           </CartProvider>
-        </ProductsProvider>
+        </CategoriesProvider>
       </UserProvider>
     </BrowserRouter>
   </React.StrictMode>

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

@@ -0,0 +1,22 @@
+import { useContext, Fragment } from "react";
+import { CategoriesContext } from "../../contexts/categories.context";
+import CategoryPreview from "../../components/category-preview/category-preview.component";
+
+const CategoriesPreview = () => {
+    const { categoriesMap } = useContext(CategoriesContext);
+
+    return (
+        <Fragment>
+            {
+                Object.keys(categoriesMap).map(title => {
+                    const products = categoriesMap[title];
+                    return <CategoryPreview key={title} title={title} products={products} />
+                })
+            }
+
+        </Fragment>
+    )
+
+}
+
+export default CategoriesPreview;

src/routes/category/category-component.jsx

@@ -0,0 +1,31 @@
+import { Fragment, useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { CategoriesContext } from '../../contexts/categories.context';
+import ProductCard from '../../components/product-card/product-card.component';
+import './category.styles.scss';
+
+const Category = () => {
+    const { category } = useParams()
+    const { categoriesMap } = useContext(CategoriesContext)
+    const [products, setProducts] = useState(categoriesMap[category])
+
+    useEffect(() => {
+        setProducts(categoriesMap[category])
+    }, [categoriesMap, category])
+
+    return (
+        <Fragment>
+            <h2 className='category-title'>
+                {category}
+            </h2>
+            <div className='category-container'>
+                {products &&
+                    products.map((product) => <ProductCard key={product.id} product={product} />)
+                }
+            </div>
+        </Fragment>
+
+    )
+}
+
+export default Category;

src/routes/category/category.styles.scss

@@ -0,0 +1,13 @@
+.category-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 20px;
+    row-gap: 50px;
+
+}
+
+.category-title {
+    font-size: 38px;
+    margin-bottom: 25px;
+    text-align: center;
+}

src/routes/shop/shop.component.jsx

@@ -1,17 +1,14 @@
-import { useContext } from "react";
-import { ProductContext } from "../../contexts/products.context";
-import ProductCard from "../../components/product-card/product-card.component";
+import { Routes, Route } from 'react-router-dom';
+import CategoriesPreview from '../categories-preview/categories-preview.component';
+import Category from '../category/category-component';
 import './shop.styles.scss';
 
 const Shop = () => {
-    const { products } = useContext(ProductContext);
-
     return (
-        <div className="products-container">
-            {products.map((product) => (
-                <ProductCard key={product.id} product={product} />
-            ))}
-        </div>
+       <Routes>
+        <Route index element={<CategoriesPreview />} />
+        <Route path=':category' element={<Category />} />
+       </Routes>
     )
 
 }