ShoppingCart.js 4.94 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { Link, Redirect } from 'react-router-dom';
3
import { Card, Button, Container, Row, Col } from 'react-bootstrap';
4
import axios from 'axios';
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
5
6
7
import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard';
8

Kim, Subin's avatar
Kim, Subin committed
9
function ShoppingCart() {
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
10
    const [error, setError] = useState('')
Jiwon Yoon's avatar
Jiwon Yoon committed
11
    const [cart, setCart] = useState([])
Jiwon Yoon's avatar
Jiwon Yoon committed
12
    const [finalCart, setFinalCart] = useState([])
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
13
    const [finalPrice, setFinalPrice] = useState(0)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
14
15
16
17
    const user = isAuthenticated()

    useEffect(() => {
        getCart()
18
        // console.log(cart)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
19
    }, [user])
20

Jiwon Yoon's avatar
Jiwon Yoon committed
21
22
23
24
25
26
27
28
29
    function plusNum(e) {
        const addCount = cart.map((el) => {
            if (el._id === e.target.name) {
                return { ...el, count: el.count+1}
            } else {
                return { ...el }
            }
        })
        setCart(addCount)
30
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
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
    function minusNum(e) {
        const addCount = cart.map((el) => {
            if (el._id === e.target.name) {
                return { ...el, count: el.count-1 }
            } else {
                return { ...el }
            }
        })
        setCart(addCount)
    }

    function checkedCart(e) {
        let price = 0
        const cartCheck = cart.map((el) => {
            if (el._id === e.target.name) {
                return { ...el, checked: !el.checked }
            } else {
                return { ...el }
            }
        })
        const asd = cartCheck.filter((el) => el.checked === true)
        asd.map((el)=>{
            price = el.count*el.productId.price  + price
        })
        setFinalPrice(price)
        setCart(cartCheck)
        setFinalCart(asd)
58
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
59

Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
60
    async function deleteCart(e) {
61
        //장바구니 DB에서 해당 항목 삭제 
62
        // console.log(e.target.name)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
63
        try {
Jiwon Yoon's avatar
Jiwon Yoon committed
64
65
66
67
            const response = await axios.post('/api/cart/deletecart', {
                userId: user,
                cartId: e.target.name
            })
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
68
            console.log(response.data)
Jiwon Yoon's avatar
Jiwon Yoon committed
69
            setCart(response.data.products)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
70
71
72
        } catch (error) {
            catchErrors(error, setError)
        }
73
        // console.log('카트에 담긴 항목을 삭제했습니다.')
74
75
    }

Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
76
77
    async function getCart() {
        try {
Jiwon Yoon's avatar
Jiwon Yoon committed
78
            setError('')
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
79
            const response = await axios.get(`/api/cart/showcart/${user}`)
Jiwon Yoon's avatar
Jiwon Yoon committed
80
81
            const addChecked = response.data.map((el) => {
                    return { ...el, checked: false }
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
82
            })
Jiwon Yoon's avatar
Jiwon Yoon committed
83
84
            console.log("addchecked=",addChecked)
            setCart(addChecked)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
85
86
87
88
        } catch (error) {
            catchErrors(error, setError)
        }
    }
89

Jiwon Yoon's avatar
Jiwon Yoon committed
90
91
92
93
94
95
96
97
98
99
100
101
102
    function putCheckedCart(){
        try {
            setError('')
            const response =  axios.post(`/api/cart/changecart`, {
                userId:user,
                products: cart
            })
            console.log(response.data)
        } catch (error) {
            catchErrors(error, setError)
        }
    }

Kim, Subin's avatar
Kim, Subin committed
103
104
    return (
        <div>
105
            {/* {console.log(cart)} */}
106
            <Container className="justify-content-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
107
                <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
108
                <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
109
                    <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
Jiwon Yoon's avatar
Jiwon Yoon committed
110
111
                    {cart.length > 0
                        ? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} checkedCart={checkedCart} />
Jiwon Yoon's avatar
Jiwon Yoon committed
112
                        : <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
113

114
                </div>
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
115
                <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
116
117
118
                    <ul className="pl-0" style={{ listStyle: 'none' }}>
                        <li>
                            <span className="text-secondary"> 상품금액</span>
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
119
                            <span className="text-secondary float-right">{finalPrice}</span>
120
121
122
                        </li>
                        <li>
                            <span className="text-secondary">배송비</span>
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
123
                            <span className="text-secondary float-right">2500</span>
124
125
126
                        </li>
                    </ul>
                    <div className="my-1 pt-2 border-top font-weight-bold">
Jiwon Yoon's avatar
Jiwon Yoon committed
127
                        결제금액<span className="float-right">{finalPrice + 2500}</span>
128
129
130
                    </div>
                </div>
                <div className="text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
131
                    <Button as={Link} to={{
Jiwon Yoon's avatar
Jiwon Yoon committed
132
133
                        pathname: `/payment`,
                        state: finalCart 
Jiwon Yoon's avatar
Jiwon Yoon committed
134
                    }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
135
136
137
                </div>
            </Container>

Kim, Subin's avatar
Kim, Subin committed
138
139
140
141
142
        </div>
    )
}

export default ShoppingCart