Skip to content

GitLab

Commit f6c113bd authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

임시완성 profile

parent af72d9ac
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ f6c113bd
......@@ -25,6 +25,10 @@ function Chat(props) {
useEffect(() => {
setChat([...chat, props.singleChat])
}, [props.singleChat])
useEffect(() => {
setChat([...chat, props.recievedMsg])
}, [props.recievedMsg])
return (
......
client/src/Components/Menu.js
View file @ f6c113bd
......@@ -16,7 +16,6 @@ function Menu() {
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link>
</Nav>
<Link to="./login">
<Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
......
client/src/Pages/HomePage.js
View file @ f6c113bd
......@@ -30,6 +30,7 @@ function Home() {
const [singleChat, setSingleChat] = useState('')
const [roomName, setRoomName] = useState('')
const [recievedMsg, setRecievedMsg] = useState('')
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
......@@ -80,11 +81,19 @@ function Home() {
roomName: roomName,
msg: singleChat
})
socket.on('broadcast', (msg) => {
}, [singleChat])
useEffect(() => {
socket.on("sendedMSG", (msg) => {
console.log(msg)
setSingleChat(msg)
setRecievedMsg(msg)
})
}, [singleChat])
}, [])
// socket.on('broadcast', (msg) => {
// console.log(msg)
// setSingleChat(msg)
// })
// }, [singleChat])
return (
<>
......@@ -101,7 +110,7 @@ function Home() {
</Tabs>
</Col>
<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" }}>
<Button variant="primary" onClick={handleShow} size="lg" block>
......
client/src/Pages/ProfilePage.js
View file @ f6c113bd
......@@ -53,24 +53,21 @@ function ProfilePage() {
e.preventDefault()
if (changed) {
const formData = new FormData()
formData.append('imageUrl', user.imageUrl[0])
formData.append('newNickname', user.nickname)
if (user.imageUrl) {
formData.append('imageUrl', user.imageUrl[0])
}
formData.append('newNickname', user.nickname) //얘네는 req.body로 들어감
try {
if (userId && user.imageUrl) {
if (userId) {
await axios.put(`/users/${userId}`, formData)
alert('저장되었습니다.')
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) {
catchErrors(error, setError)
}
} else {
}
else {
alert('변경사항이 없습니다.')
}
}
......@@ -79,35 +76,50 @@ function ProfilePage() {
getProfile(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 (
<>
<Menu />
<Container className='border' fluid>
<Row>
<Container>
<Row >
<Col sm={4}>
<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 className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex">
<Form.Group>
<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>
</Row>
{/* <Row className="d-flex justify-content-center mb-3">
<Dropdown>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
프로필 사진 선택
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as='button'>홈으로</Dropdown.Item>
<Dropdown.Item href='/'>라이언</Dropdown.Item>
<Dropdown.Item href='/'>어피치</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/*
{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>
</Row> */}
</Col>
<Col sm={8}>
<Row className='m-5 justify-content-center'>
......
server/controllers/user.controller.js
View file @ f6c113bd
......@@ -2,10 +2,7 @@ import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js'
import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
import multer from "multer";
import catchErrors from "../../client/src/utils/catchErrors.js";
const upload = multer({ dest: 'uploads/' })
const profileUpload = upload.fields([
......@@ -54,9 +51,14 @@ const update = async (req, res) => {
const newNickname = req.body.newNickname
try {
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
user.profileimg = imageUrl.filename //우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장
if (req.files['imageUrl']) {
user.profileimg = imageUrl.filename //우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장
}
const updatedUser = await user.save()
res.json(updatedUser)
} 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