-
Notifications
You must be signed in to change notification settings - Fork 0
/
ProductDetail.jsx
96 lines (85 loc) · 3.46 KB
/
ProductDetail.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React, {useEffect, useState} from 'react'
import { useCart } from '../context/CartCotext'
import { useLocation } from 'react-router-dom'
import {motion} from 'framer-motion'
import pImg from '../assets/cart/image-xx59-headphones.jpg'
import { Message } from './message'
const ProductDetail = () => {
const {addToCart, incCount, decCount, count} = useCart();
const [randomNumber,setRandomNumber] = useState(0)
const [showMessage,setShowMessage] = useState(false)
let location = useLocation();
const handlerCartAdd = () => {
const newCartItem = {};
newCartItem.id = location.state.pid;
newCartItem.pid = location.state.pid;
newCartItem.name = location.state.name;
newCartItem.desc = location.state.desc;
newCartItem.img = location.state.img?location.state.img:pImg;
newCartItem.count = count;
newCartItem.price = randomNumber;
addToCart(newCartItem, count)
setShowMessage(true)
}
useEffect(()=> {
setRandomNumber(200);
// setRandomNumber(Math.floor(Math.random() * 1000) + 1);
},[])
const handlerDecBtn = () => {
decCount();
}
const handlerIncBtn = () => {
incCount();
}
function handlerMessageVisibility() {
setShowMessage(false)
}
useEffect(() => {
showMessage &&
setTimeout(() => {
handlerMessageVisibility()
}, 2000);
}, [showMessage])
return (
<section id='productDetail'>
{
showMessage && <Message func={handlerMessageVisibility} productName={location.state.name}/>
}
<div className='w_100 boxRow pdCard pt_2'>
<motion.img
className='pDImg pr_2'
src={location.state.img?location.state.img:pImg}
alt={'product'}
initial={{x: -100}}
animate={{x: 0}}
transition={{duration:.6,}}
/>
<motion.div
className='pdDesc w_50 boxColumn gap_3 p_6 pt_0 pb_0 left'
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{duration:.6,}}
>
<h1 className='text_h1 w_50 selfLeft'>
{location.state.name}
</h1>
<p className='opacity_50 w_100'>
{location.state.desc ? location.state.desc : 'The new XX99 Mark II headphones is the pinnacle of pristine audio. It redefines your premium headphone experience by reproducing the balanced depth and precision of studio-quality sound.'}
</p>
<p className='text_body w_100'>
$ {randomNumber}
</p>
<div className='boxRow gap_1 left w_100 fleWrap'>
<div className='boxRow bgGray'>
<button className='p_1' onClick={handlerDecBtn}>-</button>
<button className='p_1'>{count}</button>
<button className='p_1' onClick={handlerIncBtn}>+</button>
</div>
<button onClick={handlerCartAdd} className='btn_orange selfLeft' >ADD TO CART</button>
</div>
</motion.div>
</div>
</section>
)
}
export default ProductDetail