updated add to cart functionality
This commit is contained in:
parent
27fc571a61
commit
aa8a5c26d9
4 changed files with 32 additions and 9 deletions
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue