import React, { useState, useEffect, useRef } from 'react';
import { Redirect, Link, useHistory } from 'react-router-dom';
import ListCard from "../Components/ListCard";
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
function Product({ location }) {
const [product, setProduct] = useState(location.state)
const [productList, setProductList] = useState([])
const [color, setColor] = useState("")
const [size, setSize] = useState("")
const [cart, setCart] = useState([])
const [error, setError] = useState('')
const [selected, setSelected] = useState({ sizes: false, colors: false })
const [count, setCount] = useState(1)
const [price, setPrice] = useState(0)
const [show, setShow] = useState(false);
let history = useHistory();
const boxRef = useRef(null);
const handleClose = () => setShow(false);
useEffect(() => {
getRecommend()
}, [product])
useEffect(() => {
setProduct(location.state)
}, [location.state])
useEffect(() => {
if (size && color) {
pushOptions()
}
}, [size, color])
async function getRecommend() {
try {
const response = await axios.get(`/api/order/recommend?products=${product.id}`)
setProductList(response.data)
if (response.data.length == 0) {
boxRef.current.style.display = "none"
}
} catch (error) {
catchErrors(error, setError)
}
}
function handleClick() {
boxRef.current.style.display = "none"
}
function pushOptions() {
const cartSet = cart.map(el => {
const newObj = {}
newObj["color"] = el.color;
newObj["size"] = el.size;
return newObj
})
const isDuplicated = cartSet.some(el => el.color === color && el.size === size)
if (isDuplicated) {
selected.sizes = false
selected.colors = false
setColor("")
setSize("")
alert("이미 선택한 옵션입니다.")
} else {
selected.sizes = false
selected.colors = false
setCart([...cart, { color, size, productId: product.id, count: 1, checked: false }])
setColor("")
setSize("")
setPrice(product.price + price)
}
}
function handleChange(e) {
const { name, value } = e.target
if (name === "sizes") {
setSize(value)
selected.sizes = true
} else if (name === "colors") {
setColor(value)
selected.colors = true
}
}
function deleteOption(e) {
e.preventDefault()
let preprice = 0
const list = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
list.map((el) => {
preprice = preprice + el.count * product.price
})
setCart(list)
setPrice(Number(preprice))
}
function handleCount(e) {
const addCount = cart.map((el) => {
if (el.color !== e.target.id || el.size !== e.target.name) {
return { ...el }
} else {
return { ...el, count: e.target.value }
}
})
let preprice = 0
addCount.map((el) => {
preprice = preprice + el.count * product.price
})
setPrice(Number(preprice))
setCart(addCount)
setCount(e.value)
}
async function addCart(event) {
if (cart.length < 1) {
alert("옵션을 선택해주세요")
}
else if (localStorage.getItem('id')) {
if (event.target.name === "shoppingcart") {
try {
setError('')
const response = await axios.put('/api/cart/addcart', {
userId: localStorage.getItem('id'),
products: cart
})
setShow(true)
} catch (error) {
catchErrors(error, setError)
}
} else {
try {
setError('')
cart.map((el) => {
el.checked = true
})
const response = await axios.put('/api/cart/addcart', {
userId: localStorage.getItem('id'),
products: cart
})
history.push("/payment")
} catch (error) {
catchErrors(error, setError)
}
}
} else {
alert("로그인을 해주세요.")
return
}
}
return (
장바구니에 상품담기
정상적으로 장바구니에 상품을 담았습니다.
{product.name}
가격 : {product.price}원
설명
{product.name}
[ Description ]
{product.description}
[ Detail Images ]
{product.detail_imgs.map((el) => (
))}
회원님이 선호할만한 상품 추천
X
{productList.map(pro => (
))}
)
}
export default Product