Commit f6c113bd authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

임시완성 profile

parent af72d9ac
...@@ -26,6 +26,10 @@ function Chat(props) { ...@@ -26,6 +26,10 @@ function Chat(props) {
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => {
setChat([...chat, props.recievedMsg])
}, [props.recievedMsg])
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}> <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
......
...@@ -16,7 +16,6 @@ function Menu() { ...@@ -16,7 +16,6 @@ function Menu() {
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link> <Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link> <Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav> </Nav>
<Link to="./login"> <Link to="./login">
<Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button> <Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
......
...@@ -30,6 +30,7 @@ function Home() { ...@@ -30,6 +30,7 @@ function Home() {
const [singleChat, setSingleChat] = useState('') const [singleChat, setSingleChat] = useState('')
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
const [recievedMsg, setRecievedMsg] = useState('')
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
...@@ -80,11 +81,19 @@ function Home() { ...@@ -80,11 +81,19 @@ function Home() {
roomName: roomName, roomName: roomName,
msg: singleChat msg: singleChat
}) })
socket.on('broadcast', (msg) => { }, [singleChat])
useEffect(() => {
socket.on("sendedMSG", (msg) => {
console.log(msg) console.log(msg)
setSingleChat(msg) setRecievedMsg(msg)
}) })
}, [singleChat]) }, [])
// socket.on('broadcast', (msg) => {
// console.log(msg)
// setSingleChat(msg)
// })
// }, [singleChat])
return ( return (
<> <>
...@@ -101,7 +110,7 @@ function Home() { ...@@ -101,7 +110,7 @@ function Home() {
</Tabs> </Tabs>
</Col> </Col>
<Col style={{ padding: "0" }}> <Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName} /> : null} {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName} recievedMsg={recievedMsg} /> : null}
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}> <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShow} size="lg" block> <Button variant="primary" onClick={handleShow} size="lg" block>
......
...@@ -53,24 +53,21 @@ function ProfilePage() { ...@@ -53,24 +53,21 @@ function ProfilePage() {
e.preventDefault() e.preventDefault()
if (changed) { if (changed) {
const formData = new FormData() const formData = new FormData()
if (user.imageUrl) {
formData.append('imageUrl', user.imageUrl[0]) formData.append('imageUrl', user.imageUrl[0])
formData.append('newNickname', user.nickname) }
formData.append('newNickname', user.nickname) //얘네는 req.body로 들어감
try { try {
if (userId && user.imageUrl) { if (userId) {
await axios.put(`/users/${userId}`, formData) await axios.put(`/users/${userId}`, formData)
alert('저장되었습니다.') alert('저장되었습니다.')
window.location.reload() window.location.reload()
} }
// else{
// console.log("삐빅")
// const formData = new FormData()
// formData.append('newNickname', user.nickname)
// const response = await axios.put(`/users/${userId}`, formData)
// }
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} else { }
else {
alert('변경사항이 없습니다.') alert('변경사항이 없습니다.')
} }
} }
...@@ -79,35 +76,50 @@ function ProfilePage() { ...@@ -79,35 +76,50 @@ function ProfilePage() {
getProfile(userId) getProfile(userId)
}, [userId]) }, [userId])
// 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])
// )
return ( return (
<> <>
<Menu /> <Menu />
<Container className='border' fluid> <Container>
<Row> <Row >
<Col sm={4}> <Col sm={4}>
<Row className='justify-content-center'> <Row className='justify-content-center'>
{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 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 />} */}
</Row> </Row>
<Row className='ml-3 mt-3 justify-content-center'> <Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex"> <Form className="d-flex">
<Form.Group> <Form.Group>
<Form.Label>프로필 사진 변경</Form.Label> <Form.Label>프로필 사진 변경</Form.Label>
<Form.Control type='file' name='imageUrl' onChange={handleChange} /> <Form.Control type='file' name='imageUrl' onChange={handleChange} accept='image/*' />
</Form.Group> </Form.Group>
</Form> </Form>
</Row> </Row>
{/* <Row className="d-flex justify-content-center mb-3"> {/*
<Dropdown> {img?<Image src={img}/> : <h2>아직입니다.</h2>}
<Dropdown.Toggle variant='success' id='dropdown-basic'> <Row className='ml-3 mt-3 justify-content-center'>
프로필 사진 선택 <Form className="d-flex">
</Dropdown.Toggle> <Form.Group>
<Dropdown.Menu> <Form.Label>프로필 사진 변경</Form.Label>
<Dropdown.Item as='button'>홈으로</Dropdown.Item> <Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
<Dropdown.Item href='/'>라이언</Dropdown.Item> </Form.Group>
<Dropdown.Item href='/'>어피치</Dropdown.Item> </Form>
</Dropdown.Menu>
</Dropdown>
</Row> */} </Row> */}
</Col> </Col>
<Col sm={8}> <Col sm={8}>
<Row className='m-5 justify-content-center'> <Row className='m-5 justify-content-center'>
......
...@@ -2,10 +2,7 @@ import User from "../models/User.js" ...@@ -2,10 +2,7 @@ import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js' import isEmail from 'validator/lib/isEmail.js'
import bcrypt from "bcryptjs"; import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
import multer from "multer"; import multer from "multer";
import catchErrors from "../../client/src/utils/catchErrors.js";
const upload = multer({ dest: 'uploads/' }) const upload = multer({ dest: 'uploads/' })
const profileUpload = upload.fields([ const profileUpload = upload.fields([
...@@ -54,9 +51,14 @@ const update = async (req, res) => { ...@@ -54,9 +51,14 @@ const update = async (req, res) => {
const newNickname = req.body.newNickname const newNickname = req.body.newNickname
try { try {
await User.updateOne({ 'username': username }, { 'nickname': newNickname }) await User.updateOne({ 'username': username }, { 'nickname': newNickname })
const imageUrl = req.files['imageUrl'][0] let imageUrl = ''
if (req.files['imageUrl']) {
imageUrl = req.files['imageUrl'][0]
}
const user = req.user const user = req.user
if (req.files['imageUrl']) {
user.profileimg = imageUrl.filename //우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장 user.profileimg = imageUrl.filename //우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장
}
const updatedUser = await user.save() const updatedUser = await user.save()
res.json(updatedUser) res.json(updatedUser)
} catch (error) { } catch (error) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment