updated add cart for menu page

donutshop_ecommerce/src/app/menu/page.js

@@ -1,9 +1,6 @@
 "use client"
 import React, { useEffect, useState } from 'react'
 import Menu from '../../components/menu/Menu';
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 
 const MenuPage = () => {
     const [categories, setCategories] = useState([]);
@@ -19,48 +16,14 @@ const MenuPage = () => {
 
     }, []);
 
-    //slider
+    
-    var menuSlide = {
-        dots: false,
-        infinite: false,
-        speed: 500,
-        slidesToShow: 2,
-        responsive: [
-          {
-            breakpoint: 640,
-            settings: {
-            slidesToShow: 2,
-            slidesToScroll: 2,
-            infinite: true,
-            dots: false
-            }
-          },
-          {
-            breakpoint: 480,
-            settings: {
-            slidesToShow: 1,
-            slidesToScroll: 1
-            }
-          }
-        ]
-    };
-
 
   return (
     <div className='w-full h-full pb-20 md:pb-40'>
         {categories?.length > 0 && categories.map(c => (
             <div className='px-5 lg:px-10 py-5 sm:py-10'>
                 <p className='text-center text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>{c.name}</p>
-                <div className='block md:hidden py-5 sm:py-10 px-5 sm:px-10'>
+                <div className='grid grid-cols-1 min-[480px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5 mt-10'>
-                    <Slider arrows={false} {...menuSlide}>
-                        {menuItems.filter(item => item.category === c._id).map(item => (
-                            <div className='px-2'>
-                                <Menu {...item}/>
-                            </div>
-                        ))}
-                    </Slider>
-                </div>
-                <div className='hidden md:grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5 mt-10'>
                     {menuItems.filter(item => item.category === c._id).map(item => (
                         <Menu {...item}/>
                     ))}

donutshop_ecommerce/src/components/AppContext.js

@@ -1,6 +1,6 @@
 "use client"
 import { SessionProvider } from 'next-auth/react'
-import React, { createContext, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 
 
 export const CartContext = createContext({});
@@ -8,17 +8,47 @@ export const CartContext = createContext({});
 const AppProvider = ({children}) => {
   const [cartProducts, setCartProducts] = useState([]);
 
+  const ls = typeof window !== 'undefined' ? window.localStorage : null;
+
+
+  useEffect(() => {
+    if(ls && ls.getItem('cart')){
+      setCartProducts( JSON.parse( ls.getItem('cart') ) )
+    }
+  }, []);
+
+  function clearCart(){
+    setCartProducts([]);
+    saveCartProductsToLocalStorage([]);
+  }
+
+  function removeCartProduct(indexToRemove){
+    setCartProducts(prevCartProducts => {
+      const newCartProducts = prevCartProducts.filter((v, index) => index !== indexToRemove);
+      saveCartProductsToLocalStorage(newCartProducts)
+
+      return newCartProducts;
+    });
+  }
+
+  function saveCartProductsToLocalStorage(cartProducts){
+    if(ls){
+      ls.setItem('cart', JSON.stringify(cartProducts))
+    }
+  }
+
   function addToCart(product, size=null){
     setCartProducts(prevProducts => {
       const cartProduct = {...product, size}
       const newProducts = [...prevProducts, cartProduct];
+      saveCartProductsToLocalStorage(newProducts);
       return newProducts
     })
   }
 
   return (
     <SessionProvider>
-      <CartContext.Provider value={{cartProducts, setCartProducts, addToCart,}}>
+      <CartContext.Provider value={{cartProducts, setCartProducts, addToCart, clearCart, removeCartProduct}}>
         {children}
       </CartContext.Provider>
     </SessionProvider>

donutshop_ecommerce/src/components/layout/HomeCreateBox.js

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react'
 import { Parallax } from "react-scroll-parallax";
 
@@ -8,14 +9,14 @@ const HomeCreateBox = () => {
       <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10 px-5'>
         <div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
           <div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
-            <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
+            <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</Link>
           </div>
           <div className='flex flex-col gap-4'>
             <p className='text-center md:text-end text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
             <p className='w-full text-center md:text-end text-base lg:text-lg xl:text-xl text-[#95743D]'>Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!</p> 
           </div>
           <div className='w-full flex md:hidden mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
-            <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
+            <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</Link>
           </div>
         </div>
         <div className='flex flex-col md:flex-row justify-between px-2 lg:px-5 mb-5'>

donutshop_ecommerce/src/components/layout/HomeMenu.js

@@ -5,6 +5,7 @@ import MenuItem from '../menu/MenuItem';
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import Link from 'next/link';
 
 
 const HomeDrink = () => {
@@ -72,7 +73,7 @@ const HomeDrink = () => {
           <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese</p> 
         </div>
         <div className='w-full flex mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
-          <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border text-white hover:text-[#D1BB9E] hover:bg-[#95743D] hover:border-[#95743D] duration-300'>View All</button>
+          <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border text-white hover:text-[#D1BB9E] hover:bg-[#95743D] hover:border-[#95743D] duration-300'>View All</Link>
         </div>
       </div>
       <div className='py-2 sm:py-10 px-10'>

donutshop_ecommerce/src/components/menu/Menu.js

@@ -1,15 +1,38 @@
 import Image from 'next/image'
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import { CartContext } from '../AppContext';
+import toast from 'react-hot-toast';
+
+const Menu = (menuItem) => {
+  const {menuImg, itemName, description, basePrice, sizes} = menuItem
+  const {addToCart} = useContext(CartContext);
+  const [showPopup, setShowPopup] = useState(false);
+
+  function handleAddToCartButtonClick(){
+    if(sizes.length === 0 ){
+      toast.success('Add to cart');
+      addToCart(menuItem);
+    } else{
+      setShowPopup(true)
+    }
+  }
+
 
-const Menu = ({menuImg, itemName, description, basePrice, sizes}) => {
   return (
-    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl border border-pink-500 h-[300px] sm:h-[450px] shadow-md hover:shadow-[#E78895] duration-300'>
+    <>
-      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[150px] sm:w-[230px]'/>
+    {showPopup && (
+      <div className='fixed inset-0 bg-black/80 block sm:flex justify-center items-center'>
+        <div className='bg-white p-5 rounded-md'>test</div>
+      </div>
+    )}
+    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl border border-pink-500 h-[300px] sm:h-[400px] lg:h-[450px] shadow-md hover:shadow-[#E78895] duration-300'>
+      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[150px] sm:w-[180px] lg:w-[230px]'/>
       <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
       <p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
       <p className='text-[#95743D] text-sm font-semibold'>${basePrice}</p>
-      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+      <button type='button' onClick={handleAddToCartButtonClick} className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
     </div>
+    </>
   )
 }
 

donutshop_ecommerce/src/components/menu/MenuItem.js

@@ -1,19 +1,37 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import Image from 'next/image';
 import { CartContext } from '../AppContext';
+import toast from 'react-hot-toast';
 
 const MenuItem = (menuItem) => {
   const {menuImg, itemName, description, basePrice, sizes} = menuItem
-  const {addToCart} = useContext(CartContext)
+  const {addToCart} = useContext(CartContext);
+  const [showPopup, setShowPopup] = useState(false);
+
+  function handleAddToCartButtonClick(){
+    if(sizes.length === 0 ){
+      addToCart(menuItem);
+      toast.success('Add to cart');
+    } else{
+      setShowPopup(true)
+    }
+  }
   
   return (
-    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
+    <>
-      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[250px]'/>
+    {showPopup && (
-      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
+      <div className='fixed inset-0 bg-black/80'>
-      <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
+
-      <p className='text-[#95743D] text-sm'>${basePrice}</p>
+      </div>
-      <button onClick={() => addToCart(menuItem)} className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+    )}
-    </div>
+      <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
+        <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[250px]'/>
+        <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
+        <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
+        <p className='text-[#95743D] text-sm'>${basePrice}</p>
+        <button type='button' onClick={handleAddToCartButtonClick} className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+      </div>
+    </>
   )
 }