Skip to content

Commit 39eb3d2

Browse files
AndreRimesAndreRimes
committed
Notification/Loading
-Add Notification when user add to cart -Add loading stage when loading from local storage
1 parent 39536c8 commit 39eb3d2

File tree

7 files changed

+84
-37
lines changed

7 files changed

+84
-37
lines changed

‎app/Cart/page.jsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import { useCartProducts } from '../Domain/cartContext'
88
import Image from 'next/image';
99
import emptyCart from '../images/empty-cart.png'
1010
import Link from 'next/link';
11+
import Loading from '../components/loading';
1112

1213
export default function CartPage() {
1314
const { isDarkMode } = useTheme();
1415
const [subTotal, setSubTotal] = useState(0)
1516
const [showModal, setShowModal] = useState(false)
16-
const { cartProducts } = useCartProducts();
17+
const { cartProducts, cartLoading } = useCartProducts();
1718

1819
useEffect(() => {
1920
let newSubtotal = 0
@@ -30,35 +31,37 @@ export default function CartPage() {
3031
<div className='h-24 w-[80vw] font-bold mt-16 flex flex-col items-center justify-center '>
3132
<h1 className='text-3xl'>Shopping Cart</h1>
3233
</div>
33-
{cartProducts.length === 0 ?
34-
<div className='flex flex-col items-center justify-center mt-10'>
35-
<div className='h-40 w-40 rounded-full border-2 border-black flex items-center justify-center mb-4'>
36-
<Image src={emptyCart} width={100} height={100} alt='Empty Cart Image'/>
37-
</div>
38-
<h1 className='text-3xl font-bold mb-2'>Your Cart is currently empty</h1>
39-
<p className='text-lg'>Looks Like you haven&apos;t add anything to your cart yet</p>
40-
<Link href='/' className=' hover:scale-110 mt-8 bg-ACMDARK w-44 h-10 flex items-center justify-center rounded-lg duration-200 transition-all ease-out'>Continue Shopping</Link>
41-
</div>
42-
: <>
43-
<div>
44-
{cartProducts && cartProducts.map((product) => {
45-
return (
46-
<CartProduct key={product.id} product={product} />
47-
)
48-
})}
49-
</div>
50-
<div className='w-10/12 flex flex-col items-end '>
51-
<div className={`w-60 flex justify-between flex-row text-xl font-bold mb-4 text-ACMDARK`}>
52-
<h1 className='' >SubTotal</h1>
53-
<h1>${subTotal}</h1>
34+
{cartLoading ? <Loading isRed={false} /> : (<>
35+
{cartProducts.length === 0 ?
36+
<div className='flex flex-col items-center justify-center mt-10'>
37+
<div className='h-40 w-40 rounded-full border-2 border-black flex items-center justify-center mb-4'>
38+
<Image src={emptyCart} width={100} height={100} alt='Empty Cart Image' />
5439
</div>
55-
<button
56-
onClick={() => setShowModal(true)}
57-
className='hover:scale-110 text-lg duration-200 mb-10 transition-all ease-out bg-ACMDARK w-60 h-10 pt-1 pb-1 rounded-lg text-white' >
58-
Checkout
59-
</button>
40+
<h1 className='text-3xl font-bold mb-2'>Your Cart is currently empty</h1>
41+
<p className='text-lg'>Looks Like you haven&apos;t add anything to your cart yet</p>
42+
<Link href='/' className=' hover:scale-110 mt-8 bg-ACMDARK w-44 h-10 flex items-center justify-center rounded-lg duration-200 transition-all ease-out'>Continue Shopping</Link>
6043
</div>
61-
</>}
44+
: <>
45+
<div>
46+
{cartProducts && cartProducts.map((product) => {
47+
return (
48+
<CartProduct key={product.id} product={product} />
49+
)
50+
})}
51+
</div>
52+
<div className='w-10/12 flex flex-col items-end '>
53+
<div className={`w-60 flex justify-between flex-row text-xl font-bold mb-4 text-ACMDARK`}>
54+
<h1 className='' >SubTotal</h1>
55+
<h1>${subTotal}</h1>
56+
</div>
57+
<button
58+
onClick={() => setShowModal(true)}
59+
className='hover:scale-110 text-lg duration-200 mb-10 transition-all ease-out bg-ACMDARK w-60 h-10 pt-1 pb-1 rounded-lg text-white' >
60+
Checkout
61+
</button>
62+
</div>
63+
</>}
64+
</>)}
6265
<ModalCheckOut products={cartProducts} subTotal={subTotal} showModal={showModal} setShowModal={setShowModal} />
6366
</div>
6467
</div>

‎app/Domain/cartContext.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const CartContext = createContext();
44

55
export function CartContextProvider({ children }) {
66
const [cartProducts, setCartProducts] = useState([]);
7+
const [cartLoading , setCarLoading] = useState(true)
78

89
const saveStateToLocalStorage = (state) => {
910
const serializedState = JSON.stringify(state);
@@ -22,6 +23,7 @@ export function CartContextProvider({ children }) {
2223
useEffect(() => {
2324
const loadedCartState = loadStateFromLocalStorage();
2425
setCartProducts(loadedCartState);
26+
setCarLoading(false)
2527
}, []);
2628

2729
useEffect(() => {
@@ -82,7 +84,7 @@ export function CartContextProvider({ children }) {
8284
}
8385

8486
return (
85-
<CartContext.Provider value={{ cartProducts, addToCart, removeOne, removeAll, isInCart, clearCart}}>
87+
<CartContext.Provider value={{ cartProducts, addToCart, removeOne, removeAll, isInCart, clearCart,cartLoading}}>
8688
{children}
8789
</CartContext.Provider>
8890
);

‎app/components/ProductDescription.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState } from "react";
22
import { useCartProducts } from "../Domain/cartContext";
33
import { useRouter } from "next/navigation";
44

5-
export default function ProductDescription({product ,title, description, quantity, price }) {
5+
export default function ProductDescription({product ,title, description, quantity, price,setShowNotification }) {
66
const { addToCart } = useCartProducts();
77
const [selectedQuantity, setSelectedQuantity] = useState(0);
88
const router = useRouter();
@@ -23,6 +23,7 @@ export default function ProductDescription({product ,title, description, quantit
2323

2424
function handleAddToCart() {
2525
addToCart(product,selectedQuantity)
26+
setShowNotification(true)
2627
}
2728

2829

@@ -32,16 +33,16 @@ export default function ProductDescription({product ,title, description, quantit
3233
}
3334

3435
return (
35-
<div className="flex w-[55%] h-[65%] flex-col items-center justify-evenly">
36-
<div className="w-7/12 h-4/6 bg-white flex flex-col items-center justify-center rounded-lg">
36+
<div className="flex w-[55%] h-[65%] flex-col items-center justify-evenly ">
37+
<div className="w-7/12 h-4/6 bg-white flex flex-col items-center justify-center rounded-lg ">
3738
<div className="w-11/12 h-10">
3839
<h1 className="text-2xl font-bold">{title}</h1>
3940
</div>
4041
<div className="w-11/12 h-0 border border-black"></div>
4142
<div className="w-11/12 h-8">
4243
<h2 className="text-xl font-bold">${price}</h2>
4344
</div>
44-
<p className="w-11/12 max-h-56 overflow-hidden">{description}</p>
45+
<p className="w-11/12 h-56 max-h-56 overflow-hidden py-2">{description}</p>
4546
</div>
4647
<div className="w-7/12 flex flex-row items-center justify-between text-lg font-semibold ">
4748
<button
@@ -52,7 +53,7 @@ export default function ProductDescription({product ,title, description, quantit
5253
</button>
5354
<select
5455
name="Qty: "
55-
className="w-1/3 h-10 rounded-lg bg-ACMDARK text-white border-none px-2"
56+
className="w-1/3 h-10 rounded-lg bg-ACMDARK text-white border-none px-2 cursor-pointer"
5657
onChange={(e) => setSelectedQuantity(parseInt(e.target.value))}
5758
>
5859
{quantityOptions}

‎app/components/cartProduct.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function CartProduct({ product }) {
3030
))}
3131
</div>
3232

33-
<div className="h-5/6 flex flex-col">
33+
<div className="h-5/6 flex flex-col 2xl:mr-0 mr-10">
3434
<div className="flex flex-row font-bold mb-10">
3535
<h2 className="text-2xl mr-14">${price}</h2>
3636
<h2 onClick={() => removeAll(id)} onMouseLeave={(e) => handleLeave(e)} onMouseEnter={(e) => handleEnter(e)} className="text-2xl duration-200 transition-all ease-in cursor-pointer">X</h2>

‎app/components/notification.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useState, useEffect } from "react";
2+
3+
export default function Notification({ setShowNotification }) {
4+
const [progress, setProgress] = useState(100);
5+
6+
useEffect(() => {
7+
const interval = setInterval(() => {
8+
setProgress((prevProgress) => (prevProgress - 1));
9+
}, 60);
10+
11+
}, []);
12+
13+
useEffect(() => {
14+
if (progress <= 0) {
15+
setShowNotification(false);
16+
}
17+
}, [progress, setShowNotification]);
18+
19+
return (
20+
<div className="animate-notification absolute w-1/4 h-[80px] translate-y-[-30vh] flex items-center justify-center flex-col bg-ACMDARK text-white rounded-lg">
21+
<div className="w-11/12 text-xl font-semibold">
22+
<h1 className="cursor-pointer" onClick={() => setShowNotification(false)}>X</h1>
23+
</div>
24+
<h1 className="text-lg font-semibold mb-2">Product Add to the cart effectively</h1>
25+
<div className="w-[95%] h-10 bg-black mb-2 ">
26+
<div
27+
className={`h-full bg-white `}
28+
style={{ width: `${progress}%` }}
29+
/>
30+
</div>
31+
</div>
32+
);
33+
}

‎app/products/[id]/page.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { useTheme } from "../../Domain/ThemeContext";
44
import { useProducts } from "@/app/Domain/ProductContext";
55
import Image from "next/image";
66
import ProductDescription from "@/app/components/ProductDescription";
7+
import Notification from "@/app/components/notification";
78

89
export default function product({ params }) {
910
const { isDarkMode } = useTheme();
1011
const { products, getURL } = useProducts();
1112
const [product, setProduct] = useState({})
13+
const [showNotification,setShowNotification] = useState(false)
1214

1315

1416
useEffect(() => {
@@ -22,9 +24,10 @@ export default function product({ params }) {
2224
return (
2325
<>
2426
<div className={`${isDarkMode ? 'bg-ACMPrimary' : 'bg-ACMBLUE'} flex flex-row items-center justify-center text-ACMDARK h-screen bg-cover bg-center w-full`}>
27+
{showNotification && <Notification setShowNotification={setShowNotification}/>}
2528
<div className="w-full h-full flex flex-row items-center justify-center mt-28">
2629
<Image src={getURL(product)} width={400} height={400} />
27-
<ProductDescription product={product} title={product?.title} price={product?.price} quantity={product?.quantity} description={product?.description} />
30+
<ProductDescription setShowNotification={setShowNotification} product={product} title={product?.title} price={product?.price} quantity={product?.quantity} description={product?.description} />
2831
</div>
2932
</div>
3033

‎tailwind.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,14 @@ module.exports = {
2929
typewriter: 'typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 5 normal',
3030
dropTop: 'dropTop 0.2s ease-in',
3131
slideIn: 'slideIn 0.3s ease-out',
32-
loading: 'loading 2s infinite ease-in-out'
32+
loading: 'loading 2s infinite ease-in-out',
33+
notification:'notification 0.3s ease-out'
3334
},
3435
keyframes:{
36+
notification:{
37+
'0%':{transform:'translateY(-120vh)',opacity:'0'},
38+
'100%':{transform:'translateY(-30vh)',opacity:'1'}
39+
},
3540
dropTop:{
3641
'0%': {transform: 'translate(50%,50%)', opacity:'0',scale:'0.5' },
3742
'100%': {transform:'translate(0%,0%)',opacity:'1',scale:'1'}

0 commit comments

Comments
 (0)