add specific category page and routes

src/App.js

@@ -1,17 +1,18 @@
-import './components/category-item/category-item.styles.scss'
-import { Routes, Route } from 'react-router-dom'
-import Home from './routes/home/home.component'
-import Navigation from './routes/navigation/navigation.component'
-import Authentication from './routes/authentication/authentication.component'
-import Shop from './routes/shop/shop.component'
+import { Routes, Route } from 'react-router-dom';
+import Home from './routes/home/home.component';
+import Navigation from './routes/navigation/navigation.component';
+import Authentication from './routes/authentication/authentication.component';
+import Shop from './routes/shop/shop.component';
+import Checkout from './routes/checkout/checkout.component';
 
 const App = ()=> {
   return (
     <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>
     </Routes>
   );

src/components/cart-dropdown/card-dropdown.component.jsx

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import { CartContext } from '../../context/cart.context';
 import Button from '../button/button.component';
 import CartItem from '../cart-item/cart-item.component';
@@ -7,6 +8,10 @@ import './cart-dropdown.styles.scss'
 const DropDown = () => {
     const { cartItems } = useContext(CartContext);
     console.log("items:", cartItems);
+
+    const navigate = useNavigate();
+    const goToCheckout = ()=> navigate('/checkout');
+
     return (
     <div className="cart-dropdown-container">
         <div className="cart-items">
@@ -19,7 +24,7 @@ const DropDown = () => {
             : <div>Your cart is empty</div>
             }
         </div>
-        <Button>Go To Checkout</Button>
+        <Button onClick={goToCheckout}>Go To Checkout</Button>
     </div>
     );
 }

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

@@ -0,0 +1,24 @@
+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 {
+    width: 100%;
+    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/checkout-item/checkout-item.component.jsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { CartContext } from '../../context/cart.context';
+import './checkout-item.styles.scss';
+
+const CheckoutItem = ({item})=> {
+    const { name, price, imageUrl, quantity } = item;
+    const { addItem, decreaseItem, removeItem } = useContext(CartContext);
+    const addItemHandler = ()=> addItem(item);
+    const decreaseItemHandler = () => decreaseItem(item);
+    const removeItemHandler = () => removeItem(item);
+    return (
+        <div className='checkout-item-container'>
+            <div className='image-container'>
+                <img src={imageUrl} alt={`${name}`}/>
+            </div>
+            <span className='name'>{name}</span>
+            <span className='quantity'>
+                <div className='arrow' onClick={decreaseItemHandler}>&#10094;</div>
+                <span className='value'>{quantity}</span>
+                <div className='arrow' onClick={addItemHandler}>&#10095;</div>
+            </span>
+            <span className='price'>${price}</span>
+            <div className='remove-button' onClick={removeItemHandler}>&#10005;</div>
+        </div>
+    );
+};
+
+export default CheckoutItem;

src/components/checkout-item/checkout-item.styles.scss

@@ -0,0 +1,41 @@
+.checkout-item-container {
+    width: 100%;
+    display: flex;
+    min-height: 100px;
+    border-bottom: 1px solid darkgrey;
+    padding: 15px 0;
+    font-size: 20px;
+    align-items: center;
+
+    .image-container {
+      width: 23%;
+      padding-right: 15px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .name,
+    .quantity,
+    .price {
+      width: 23%;
+    }
+
+    .quantity {
+      display: flex;
+
+      .arrow {
+        cursor: pointer;
+      }
+
+      .value {
+        margin: 0 10px;
+      }
+    }
+
+    .remove-button {
+      padding-left: 12px;
+      cursor: pointer;
+    }
+  }

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

@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom';
+import './directory-item.styles.scss';
+
+const DirectoryItem = ({category}) => {
+    const { title, imgUrl} = category;
+    return (
+        <div className='directory-item-container'>
+            <div className='background-image' style={{backgroundImage: `url(${imgUrl})`}}/>
+            <div className='body'>
+                <Link className='title' to={`shop/${title.toLowerCase()}`}>
+                    <h2>{title}</h2>
+                </Link>
+                <p>shop now</p>
+            </div>
+        </div> 
+    )
+}
+
+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;
@@ -41,7 +41,7 @@
       background-position: center;
     }
 
-    .category-body-container {
+    .body {
       height: 90px;
       padding: 0 25px;
       display: flex;

src/components/directory/directory.component.jsx

@@ -1,14 +1,14 @@
-import CategoryItem from '../category-item/category-item.component'
-import './directory.styles.scss'
+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>
     )
 }
 
-export default Directory
+export default Directory;

src/context/cart.context.jsx

@@ -4,33 +4,61 @@ export const CartContext = createContext({
     isCartOpen: false,
     setCartOpen: ()=>{},
     cartItems: [],
-    addItem: ({item})=>{},
+    addItem: ()=>{},
+    decreaseItem: ()=>{},
+    removeItem: ()=>{},
     totalQuantity: 0,
+    totalPrice: 0,
 });
 
-const addItemToCart = (cartItems, itemToAdd)=> {
+const addItemToCart = (cartItems, itemToAdd) => {
     const existItem = cartItems.find((item)=> item.id===itemToAdd.id);
     if (existItem) {
         // If exist, just increase the quantity of the exist item.
-        return cartItems.map((item)=> item.id===itemToAdd.id ? {...item, quantity: item.quantity+itemToAdd.quantity} : item);
+        return cartItems.map((item)=> item.id===itemToAdd.id ? {...item, quantity: item.quantity+1} : item);
     } // Otherwise, add new item to the cart.
     return [...cartItems, itemToAdd];
 };
 
+const descreaseItemFromCart = (cartItems, itemToDecrease) => {
+    const existItem = cartItems.find((item)=>item.id===itemToDecrease.id);
+    if (existItem.quantity===1) {
+        return cartItems.filter((item) => item.id!==itemToDecrease.id);
+    } else { // existItem.quantity > 1
+        return cartItems.map((item)=> item.id===itemToDecrease.id ? {...item, quantity:item.quantity-1} : item);
+    }
+};
+
+const removeItemFromCart = (cartItems, itemToRemove) => cartItems.filter((item) => item.id!==itemToRemove.id);
+
 export const CartProvider = ({ children }) => {
     const [ isCartOpen, setCartOpen ] = useState(false);
     const [ cartItems, setCartItems ] = useState([]);
     const [ totalQuantity, setTotalQuantity ] = useState(0);
+    const [ totalPrice, setTotalPrice ] = useState(0);
 
     useEffect(()=>{
-        const newTotalQuantity = cartItems.reduce((sum, item)=>{ return sum+item.quantity}, 0);
+        const newTotalQuantity = cartItems.reduce((sum, item)=>sum+item.quantity, 0);
         setTotalQuantity(newTotalQuantity);
     }, [cartItems]);
 
-    const addItem = (product)=> {
+    useEffect(()=>{
+        const newTotalPrice = cartItems.reduce((sum, item)=>sum+item.quantity*item.price, 0);
+        setTotalPrice(newTotalPrice);
+    } ,[cartItems]);
+
+    const addItem = (product) => {
         setCartItems(addItemToCart(cartItems, product));
     };
-    const value = {isCartOpen, setCartOpen, cartItems, addItem, totalQuantity};
+
+    const decreaseItem = (prodcut) => {
+        setCartItems(descreaseItemFromCart(cartItems, prodcut));
+    };
+
+    const removeItem = (product) => {
+        setCartItems(removeItemFromCart(cartItems, product));
+    }
+    const value = {isCartOpen, setCartOpen, cartItems, addItem, decreaseItem, removeItem, totalQuantity, totalPrice};
 
     return (<CartContext.Provider value={value}>{children}</CartContext.Provider>);
 };

src/context/categories.context.jsx

@@ -0,0 +1,23 @@
+import { useState, useEffect, createContext } from "react";
+// import SHOP_DATA from '../shop-data.js';
+import { getCollectionAndDocuments } from '../utils/firebase/firebase.utils';
+
+export const CategoriesContext = createContext({
+    categories: {},
+    setCategories: ()=>null,
+});
+
+export const CategoriesProvider = ({ children }) => {
+    const [ categories, setCategories] = useState({});
+    const value = {categories};
+    useEffect(() => {
+        const getCategoriesMap = async ()=> {
+            const categoriesMap = await getCollectionAndDocuments();
+            setCategories(categoriesMap);
+            console.log(categoriesMap);
+        };
+        getCategoriesMap(); 
+    }, []);
+
+    return (<CategoriesContext.Provider value={value}>{children}</CategoriesContext.Provider>);
+};

src/index.js

@@ -4,7 +4,7 @@ import './index.scss';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import { UserProvider } from './context/user.context';
-import { ProductProvider } from './context/product.context';
+import { CategoriesProvider } from './context/categories.context';
 import { CartProvider } from './context/cart.context';
 import reportWebVitals from './reportWebVitals';
 
@@ -14,11 +14,11 @@ root.render(
   // <React.StrictMode>
     <BrowserRouter>
       <UserProvider>
-        <ProductProvider>
+        <CategoriesProvider>
           <CartProvider>
               <App />
           </CartProvider>
-        </ProductProvider>
+        </CategoriesProvider>
       </UserProvider>
     </BrowserRouter>
   // </React.StrictMode>