ProfilePage.js 7.15 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
import React, { useState, useEffect } from 'react'
Choi Ga Young's avatar
Choi Ga Young committed
2
import Menu from '../Components/Menu';
Choi Ga Young's avatar
Choi Ga Young committed
3
4
import { Image, Button, Container, Form, Row, Col, Dropdown } from 'react-bootstrap';
import { BrowserRouter as Link } from 'react-router-dom';
JeongYeonwoo's avatar
   
JeongYeonwoo committed
5
import axios from 'axios'
JeongYeonwoo's avatar
JeongYeonwoo committed
6
7
import catchErrors from '../utils/catchErrors'
import { isAuthenticated } from '../utils/auth';
우지원's avatar
ul    
우지원 committed
8
9


JeongYeonwoo's avatar
JeongYeonwoo committed
10
11
12
13
14
15
const INIT_USER = {
    username: '',
    email: '',
    nickname: '',
    imageUrl: []
}
우지원's avatar
ul    
우지원 committed
16

JeongYeonwoo's avatar
   
JeongYeonwoo committed
17
function ProfilePage() {
JeongYeonwoo's avatar
JeongYeonwoo committed
18
19
    const [user, setUser] = useState(INIT_USER)
    const [error, setError] = useState('')
우지원's avatar
ul    
우지원 committed
20

JeongYeonwoo's avatar
   
JeongYeonwoo committed
21
    const [hidden, setHidden] = useState(true)
JeongYeonwoo's avatar
JeongYeonwoo committed
22
    const [changed, setChanged] = useState(false)
우지원's avatar
ul    
우지원 committed
23

JeongYeonwoo's avatar
JeongYeonwoo committed
24
    const userId = isAuthenticated()
우지원's avatar
ul    
우지원 committed
25

JeongYeonwoo's avatar
JeongYeonwoo committed
26
27
28
29
30
31
32
    async function getProfile(userId) {
        try {
            const response = await axios.get(`/users/${userId}`)
            setUser(response.data)
        } catch (error) {
            catchErrors(error, setError)
        }
JeongYeonwoo's avatar
   
JeongYeonwoo committed
33
    }
우지원's avatar
ul    
우지원 committed
34

JeongYeonwoo's avatar
JeongYeonwoo committed
35
    function handleSubmitHidVis(e) {
JeongYeonwoo's avatar
JeongYeonwoo committed
36
        e.preventDefault()
JeongYeonwoo's avatar
   
JeongYeonwoo committed
37
38
39
40
41
42
        if (hidden) {
            setHidden(false)
        } else {
            setHidden(true)
        }
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
43
    function handleChange(e) {
JeongYeonwoo's avatar
JeongYeonwoo committed
44
45
46
47
48
        const { name, value, files } = e.target
        if (files) {
            setUser({ ...user, [name]: files })
        } else {
            setUser({ ...user, [name]: value })
우지원's avatar
ul    
우지원 committed
49
        }
JeongYeonwoo's avatar
JeongYeonwoo committed
50
51
52
53
54
55
        setChanged(true)
    }
    async function handleSubmit(e) {
        e.preventDefault()
        if (changed) {
            const formData = new FormData()
JeongYeonwoo's avatar
JeongYeonwoo committed
56
57
58
59
            if (user.imageUrl) {
                formData.append('imageUrl', user.imageUrl[0])
            }
            formData.append('newNickname', user.nickname)   //얘네는 req.body로 들어감
JeongYeonwoo's avatar
JeongYeonwoo committed
60
            try {
JeongYeonwoo's avatar
JeongYeonwoo committed
61
                if (userId) {
JeongYeonwoo's avatar
JeongYeonwoo committed
62
63
64
65
66
67
68
                    await axios.put(`/users/${userId}`, formData)
                    alert('저장되었습니다.')
                    window.location.reload()
                }
            } catch (error) {
                catchErrors(error, setError)
            }
JeongYeonwoo's avatar
JeongYeonwoo committed
69
70
        }
        else {
JeongYeonwoo's avatar
JeongYeonwoo committed
71
            alert('변경사항이 없습니다.')
우지원's avatar
ul    
우지원 committed
72
73
        }
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
74

JeongYeonwoo's avatar
JeongYeonwoo committed
75
    useEffect(() => {
JeongYeonwoo's avatar
JeongYeonwoo committed
76
77
        getProfile(userId)
    }, [userId])
JeongYeonwoo's avatar
   
JeongYeonwoo committed
78

JeongYeonwoo's avatar
JeongYeonwoo committed
79
80
81
82
83
84
85
86
87
88
89
90
91
92

    //     const [img, setImg] = useState('')
    // function bbb(e) {
    //     const { name } = e.target
    //     let reader = new FileReader();
    //     reader.onload = function (e){
    //         console.log(e.target.result)
    //         // setImg(e.target.result)
    //         // setProfileimg
    //         // console.log(user,name)
    //         setUser({...user, [name]: e.target.result})
    //     };
    //     reader.readAsDataURL(e.target.files[0])
    //  )
우지원's avatar
ul    
우지원 committed
93
    return (
JeongYeonwoo's avatar
JeongYeonwoo committed
94
        <>
Choi Ga Young's avatar
Choi Ga Young committed
95
            <Menu />
JeongYeonwoo's avatar
JeongYeonwoo committed
96
97
            <Container>
                <Row >
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
98
                    <Col sm={4}>
JeongYeonwoo's avatar
JeongYeonwoo committed
99
                        <Row className='justify-content-center'>
JeongYeonwoo's avatar
JeongYeonwoo committed
100
101
102
                            {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />}
                            {/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle hidden={!hidden}/> */}
                            {/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */}
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
103
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
104
105
                        <Row className='ml-3 mt-3 justify-content-center'>
                            <Form className="d-flex">
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
106
                                <Form.Group>
JeongYeonwoo's avatar
JeongYeonwoo committed
107
                                    <Form.Label>프로필 사진 변경</Form.Label>
JeongYeonwoo's avatar
JeongYeonwoo committed
108
                                    <Form.Control type='file' name='imageUrl' onChange={handleChange} accept='image/*' />
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
109
110
111
                                </Form.Group>
                            </Form>
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
112
113
114
115
116
117
118
119
120
                        {/* 
{img?<Image src={img}/> : <h2>아직입니다.</h2>}
                        <Row className='ml-3 mt-3 justify-content-center'>
                            <Form className="d-flex">
                                <Form.Group>
                                    <Form.Label>프로필 사진 변경</Form.Label>
                                    <Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
                                </Form.Group>
                            </Form>
JeongYeonwoo's avatar
JeongYeonwoo committed
121
                        </Row> */}
JeongYeonwoo's avatar
JeongYeonwoo committed
122

JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
123
124
                    </Col>
                    <Col sm={8}>
JeongYeonwoo's avatar
JeongYeonwoo committed
125
126
                        <Row className='m-5 justify-content-center'>
                            <h2>{user.username}님의 프로필 정보</h2>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
127
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
128
129
130
                        <Row className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>이름 :</Col>
                            <Col xs={6}>{user.username}</Col>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
131
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
132
133
134
135
136
137
138
                        <Row className="m-3 justify-content-flex-start" id="nickname" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>별명 :</Col>
                            <Col xs={6} hidden={!hidden}>
                                {user.nickname}
                            </Col>
                            <Col xs={6} hidden={hidden}>
                                <Form>
JeongYeonwoo's avatar
JeongYeonwoo committed
139
                                    <Form.Control defaultValue={user.nickname} name='nickname' style={{ width: "110%" }} onChange={handleChange} />
JeongYeonwoo's avatar
JeongYeonwoo committed
140
141
142
                                </Form>
                            </Col>
                            <Col xs={3}>
JeongYeonwoo's avatar
JeongYeonwoo committed
143
                                <Form className="d-flex" onSubmit={handleSubmitHidVis}>
JeongYeonwoo's avatar
JeongYeonwoo committed
144
145
146
                                    <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
                                </Form>
                            </Col>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
147
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
148
149
150
151
152
                        <Row className="m-3" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>이메일 : </Col>
                            <Col xs={6}>{user.email}</Col>
                        </Row>
                        <Row className='m-3 justify-content-center'>
JeongYeonwoo's avatar
JeongYeonwoo committed
153
154
                            <Form onSubmit={handleSubmit}>
                                <Button variant="outline-success" size="sm" className="mr-4" type='submit'>저장</Button>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
155
156
157
158
159
160
161
162
                                <Link to='/'>
                                    <Button variant="outline-success" size="sm" className="ml-4" > 화면으로</Button>
                                </Link>
                            </Form>
                        </Row>
                    </Col>
                </Row>
            </Container>
JeongYeonwoo's avatar
JeongYeonwoo committed
163
        </>
우지원's avatar
ul    
우지원 committed
164
165
166
167
    )
}

export default ProfilePage