updated add to cart functionality

This commit is contained in:
Juthatip McDevitt 2024-05-22 14:35:36 -05:00
parent 27fc571a61
commit aa8a5c26d9
4 changed files with 32 additions and 9 deletions

View file

@ -1,11 +1,26 @@
"use client"
import { SessionProvider } from 'next-auth/react'
import React from 'react'
import React, { createContext, useState } from 'react'
export const CartContext = createContext({});
const AppProvider = ({children}) => {
const [cartProducts, setCartProducts] = useState([]);
function addToCart(product, size=null){
setCartProducts(prevProducts => {
const cartProduct = {...product, size}
const newProducts = [...prevProducts, cartProduct];
return newProducts
})
}
return (
<SessionProvider>
<CartContext.Provider value={{cartProducts, setCartProducts, addToCart,}}>
{children}
</CartContext.Provider>
</SessionProvider>
)
}

View file

@ -1,10 +1,12 @@
"use client"
import React, { useState } from "react";
import React, { useContext, useState } from "react";
import {signOut, useSession} from 'next-auth/react'
import Image from 'next/image';
import Link from 'next/link';
import { IoCloseOutline } from "react-icons/io5";
import { HiBars2 } from "react-icons/hi2";
import { BsBox2Heart } from "react-icons/bs";
import { CartContext } from "../AppContext";
const Header = () => {
@ -16,6 +18,10 @@ const Header = () => {
//use session
const session = useSession();
const status = session?.status;
//add to cart
const {cartProducts} = useContext(CartContext);
//use userdata
const userData = session.data?.user;
let userName = userData?.name || userData?.email;
@ -53,6 +59,7 @@ const Header = () => {
{status === 'authenticated' && (
<>
<Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
<Link href='/cart' className="flex gap-1 items-center"><BsBox2Heart/>({cartProducts.length})</Link>
<button onClick={() => signOut()} className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300 uppercase">Logout</button>
</>
)}
@ -62,7 +69,6 @@ const Header = () => {
<Link href='/register' className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">Register</Link>
</>
)}
</ul>
<div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
{nav && (

View file

@ -6,8 +6,8 @@ const Menu = ({menuImg, itemName, description, basePrice, sizes}) => {
<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]'/>
<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>
<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>
</div>
)

View file

@ -1,8 +1,10 @@
import React from 'react'
import React, { useContext } from 'react'
import Image from 'next/image';
import { CartContext } from '../AppContext';
const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
const MenuItem = (menuItem) => {
const {menuImg, itemName, description, basePrice, sizes} = menuItem
const {addToCart} = useContext(CartContext)
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]'>
@ -10,7 +12,7 @@ const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
<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 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 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>
)
}