Account.js 8.14 KB
Newer Older
kusang96's avatar
최종    
kusang96 committed
1
2
import React, { useEffect, useState } from 'react';
import { Card, Image, Container, Row, Col, Button, Form, Modal } from 'react-bootstrap';
3
import { Link } from 'react-router-dom';
kusang96's avatar
kusang96 committed
4
5
import axios from 'axios';
import catchError from '../utils/catchErrors';
6
import { isAuthenticated } from '../utils/auth';
이재연's avatar
이재연 committed
7
import OrderCard from '../Components/OrderCard';
Jiwon Yoon's avatar
Jiwon Yoon committed
8

9
10
const INIT_ACCOUNT = {
    name: "",
박상호's avatar
박상호 committed
11
    avatarUrl: ''
12
}
Jiwon Yoon's avatar
Jiwon Yoon committed
13
14

function Account() {
15
    const [account, setAccount] = useState(INIT_ACCOUNT)
kusang96's avatar
kusang96 committed
16
    const [show, setShow] = useState(false);
박상호's avatar
0120    
박상호 committed
17
    const [proshow, setProshow] = useState(false)
18
19
    const [error, setError] = useState("")
    const userId = isAuthenticated()
이재연's avatar
이재연 committed
20
    const [ordered, setOrdered] = useState([])
21
22
23
24
25
26

    async function getUsername(user) {
        try {
            const response = await axios.get(`/api/users/account/${user}`)
            setAccount(response.data)
        } catch (error) {
kusang96's avatar
kusang96 committed
27
            catchError(error, setError)
28
29
30
31
32
        }
    }

    useEffect(() => {
        getUsername(userId)
이재연's avatar
이재연 committed
33
        getOrdered()
34
35
    }, [userId])

박상호's avatar
박상호 committed
36
37
38
39
40
41
42
43
    const handleChange = (event) => {
        const { name, value, files } = event.target
        if (files) {
            setAccount({ ...account, [name]: files })
        } else {
            setAccount({ ...account, [name]: value })
        }
    }
44

kusang96's avatar
최종    
kusang96 committed
45
    const handleBasic = async () => {
박상호's avatar
박상호 committed
46
47
48
49
50
51
52
53
        const formData = new FormData()
        formData.append('avatar', '')
        try {
            if (userId) {
                const response = await axios.put(`/api/users/account/${userId}`, formData)
                window.location.reload()
            }
        } catch (error) {
kusang96's avatar
kusang96 committed
54
            catchError(error, setError)
박상호's avatar
박상호 committed
55
56
57
        }
        setShow(false)
    }
58
59


박상호's avatar
박상호 committed
60
61
62
63
64
65
66
67
68
69
70
    const handleSubmit = async (event) => {
        event.preventDefault()
        if (account.avatar) {
            const formData = new FormData()
            formData.append('avatar', account.avatar[0])
            try {
                if (userId) {
                    const response = await axios.put(`/api/users/account/${userId}`, formData)
                    window.location.reload()
                }
            } catch (error) {
kusang96's avatar
kusang96 committed
71
                catchError(error, setError)
박상호's avatar
박상호 committed
72
73
74
            }
        } else {
            alert("파일을 선택해주세요.")
kusang96's avatar
kusang96 committed
75
        }
박상호's avatar
박상호 committed
76
    }
77

kusang96's avatar
최종    
kusang96 committed
78
    async function getOrdered({ }) {
79
        try {
80
81
            const response = await axios.post(`/api/users/addorder`, {
                userId: userId
이재연's avatar
이재연 committed
82
            })
83
            const a = response.data
이재연's avatar
이재연 committed
84
85
            setOrdered(a)
            console.log("what=", response.data)
86
87
88
89
90
        } catch (error) {
            catchError(error, setError)
        }
    }

91

박상호's avatar
박상호 committed
92
    return (
93
        <Container className="px-3">
kusang96's avatar
kusang96 committed
94
95
96
97
98
99
100
101
            <style type="text/css">
                {`
                a, a:hover, a:active {
                    color: #91877F;
                    text-decoration-color: #91877F;
                }
                `}
            </style>
102
103
104
            <h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
            <Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}>
                <Row className="p-2">
박상호's avatar
박상호 committed
105
                    <Col md={5} className="d-flex align-content-center justify-content-center">
kusang96's avatar
kusang96 committed
106
                        <Button variant="outline-light" onClick={() => setShow(true)}>
박상호's avatar
박상호 committed
107
                            {account.avatarUrl ? (
kusang96's avatar
kusang96 committed
108
                                <Image src={account.avatarUrl && `/images/${account.avatarUrl}`} className="img-thumbnail"
박상호's avatar
박상호 committed
109
110
                                    roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
                            ) : (
kusang96's avatar
0115    
kusang96 committed
111
                                    <Image src="/icon/person.svg" className="img-thumbnail"
박상호's avatar
박상호 committed
112
113
                                        roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
                                )}
114
                        </Button>
kusang96's avatar
kusang96 committed
115
                        <Modal show={show} onHide={() => setShow(false)}>
116
                            <Modal.Header closeButton style={{ background: "#F7F3F3" }}>
박상호's avatar
0120    
박상호 committed
117
                                <Modal.Title >이미지를 변경하시겠습니까?</Modal.Title>
박상호's avatar
박상호 committed
118
119
120
121
122
123
124
125
126
127
                            </Modal.Header>
                            <Form onSubmit={handleSubmit}>
                                <Modal.Body>
                                    <Form.Control type="file" name="avatar" onChange={handleChange} />
                                </Modal.Body>
                                <Modal.Footer>
                                    <Col className="px-0">
                                        <Button variant="outline-secondary" onClick={handleBasic}
                                            className="d-flex justify-content-start"><small>기본이미지로</small></Button>
                                    </Col>
kusang96's avatar
kusang96 committed
128
129
                                    <Button variant="secondary" onClick={() => setShow(false)}>취소</Button>
                                    <Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button>
박상호's avatar
박상호 committed
130
131
132
                                </Modal.Footer>
                            </Form>
                        </Modal>
133
134
135
136
137
                    </Col>
                    <Col >
                        <Row className="mt-4 text-center">
                            <Col>
                                <h2>
박상호's avatar
0120    
박상호 committed
138
139
140
141
142
143
144
                                    <strong title='회원정보' style={{ cursor: "pointer", textDecoration: 'underline' }} onClick={() => setProshow(true)}>
                                        {account.name}
                                    </strong>
                                    <Modal
                                        size="sm"
                                        show={proshow}
                                        onHide={() => setProshow(false)}>
145
                                        <Modal.Header closeButton style={{ background: "#F7F3F3" }}>
박상호's avatar
0120    
박상호 committed
146
147
148
149
150
151
152
153
154
155
156
157
158
                                            <Modal.Title>회원정보</Modal.Title>
                                        </Modal.Header>
                                        <Modal.Body>
                                            <Col className="p-1">
                                                <li><strong>Role :</strong> {account.role}</li>
                                                <li><strong>ID :</strong> {account.id}</li>
                                                <li><strong>Username :</strong> {account.name}</li>
                                                <li><strong>Email :</strong> {account.email}</li>
                                                <li><strong>Tel :</strong> {account.tel}</li>
                                            </Col>
                                        </Modal.Body>
                                    </Modal>
                                    <small>{' '}({account.id}){" "}</small>
159
160
161
162
163
                                </h2>
                            </Col>
                        </Row>
                        <Row className="px-3">
                            <Card.Body className="p-2 text-center">
kusang96's avatar
kusang96 committed
164
                                <h4><Link to="/">
165
                                    <strong title="홈으로">
kusang96's avatar
0115    
kusang96 committed
166
                                        <Image src="/icon/mypagetiger.svg" width={"30rem"} roundedCircle className="img-thumbnail" >
167
                                        </Image>KU#
kusang96's avatar
kusang96 committed
168
                                    </strong>
169
                                </Link>
kusang96's avatar
kusang96 committed
170
171
172
                 방문해주신 <em>{account.name}</em> 님,<br />
                진심으로 환영합니다! 즐거운 쇼핑 되세요.
                </h4>
173
174
175
176
177
178
179
180
181
182
                            </Card.Body>
                        </Row>
                        <Row className="mr-1 text-muted d-flex justify-content-end">
                            <a href="mailto:shoppingmall_KU@korea.ac.kr">
                                <small title="메일보내기"> * 문의 : shoppingmall_KU@korea.ac.kr </small>
                            </a>
                        </Row>
                    </Col>
                </Row>
            </Card>
이재연's avatar
이재연 committed
183
            <Card>
184
                <OrderCard ordered={ordered} />
이재연's avatar
이재연 committed
185
            </Card>
186
        </Container >
Jiwon Yoon's avatar
Jiwon Yoon committed
187
    )
박상호's avatar
박상호 committed
188
}
Jiwon Yoon's avatar
Jiwon Yoon committed
189

kusang96's avatar
0115    
kusang96 committed
190
export default Account