Commit 0d18a2ca authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

0120 푸쉬

parent bd29d142
...@@ -8,9 +8,7 @@ import catchErrors from '../utils/catchErrors'; ...@@ -8,9 +8,7 @@ import catchErrors from '../utils/catchErrors';
function Chat(props) { function Chat(props) {
// let defaultname = sessionStorage.getItem('name'); // let defaultname = sessionStorage.getItem('name');
const [name, setName] = useState([''])
const [sender, setSender] = useState([]) const [sender, setSender] = useState([])
const [senderimg, setSenderimg] = useState('')
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지
...@@ -38,8 +36,6 @@ function Chat(props) { ...@@ -38,8 +36,6 @@ function Chat(props) {
function sendMsgCH(e) { function sendMsgCH(e) {
e.preventDefault() e.preventDefault()
setName(sessionStorage.getItem('name'))
props.setSingleUser(sessionStorage.getItem('name')) props.setSingleUser(sessionStorage.getItem('name'))
props.setSingleChat(inner) props.setSingleChat(inner)
...@@ -47,9 +43,6 @@ function Chat(props) { ...@@ -47,9 +43,6 @@ function Chat(props) {
setInner('') setInner('')
setDisabled(true) setDisabled(true)
console.log(chat) console.log(chat)
} }
useEffect(() => { useEffect(() => {
getProfile(userId) getProfile(userId)
...@@ -62,41 +55,34 @@ function Chat(props) { ...@@ -62,41 +55,34 @@ function Chat(props) {
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
// console.log('UseEffect singlechat', chat) // console.log('UseEffect singlechat', chat)
console.log('Chat에 Sing있는 name = ', props.singleUser)
console.log('Chat에 Sing있는 name = ', name, props.singleUser) }, [props.singleChat])
}, [props.singleChat, props.singleUser])
useEffect(() => { useEffect(() => {
setSender([...sender, props.recievedUser]) setSender([...sender, props.recievedUser])
console.log('UseEffect RecievedUser', sender) console.log('UseEffect RecievedUser', sender)
console.log('Chat에 Reci있는 name = ', name) console.log('Chat에 Reci있는 name = ')
setChat([...chat, props.recievedMsg]) setChat([...chat, props.recievedMsg])
// console.log('UseEffect recievechat', chat) // console.log('UseEffect recievechat', chat)
}, [props.recievedMsg])
// setName('')
}, [props.recievedMsg, props.recievedUser])
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <Container className="chat" id="chat" style={{ padding: '20px', border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2> <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
{/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */} {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value == '')) { if (!(value == '')) {
if (!(sender[index] === sessionStorage.getItem('name'))) { if (!(sender[index] === sessionStorage.getItem('name'))) {
return ( return (
<Row key={index} className='m-1 ml-3' > <Row key={index} className='m-1' >
<Col xs={2}> <Col xs={2}>
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />} {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
</Col> </Col>
<Col xs={8}> <Col xs={8}>
<Row><strong>{sender[index]} {index}</strong></Row> <Row><strong>{sender[index]}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <Row className='d-flex flex-wrap-nowrap'>
<Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row> <Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
<Col className='ml-1'>{time}</Col> <Col className='ml-1'>{time}</Col>
...@@ -104,17 +90,16 @@ function Chat(props) { ...@@ -104,17 +90,16 @@ function Chat(props) {
</Col> </Col>
</Row> </Row>
) )
}else{ } else {
return ( return (
<Row key={index} className='m-1 justify-content-end'> <Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' > <Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{user.nickname} {time}</Col> <Col className='mr-1'>{time}</Col>
<Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row> <Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</Row> </Row>
</Row> </Row>
) )
} }
} else { } else {
return null return null
} }
...@@ -131,7 +116,7 @@ function Chat(props) { ...@@ -131,7 +116,7 @@ function Chat(props) {
</Form.Group> </Form.Group>
</Form> </Form>
</div > </Container >
); );
......
...@@ -57,7 +57,7 @@ function Home() { ...@@ -57,7 +57,7 @@ function Home() {
}) })
//setSingleChat(['']) //setSingleChat([''])
} }
}, [singleChat, singleUser]) }, [singleChat])
useEffect(() => { useEffect(() => {
......
...@@ -14,4 +14,6 @@ router.route(`/users/:userId`) ...@@ -14,4 +14,6 @@ router.route(`/users/:userId`)
router.param('userId', userCtrl.userById) router.param('userId', userCtrl.userById)
export default router export default router
\ No newline at end of file
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