import axios from 'axios'; import React, { useState, useEffect } from 'react'; import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; import { isAuthenticated } from '../utils/auth'; import catchErrors from '../utils/catchErrors'; function Chat(props) { // let defaultname = sessionStorage.getItem('name'); const [inner, setInner] = useState(['']) const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [disabled, setDisabled] = useState(true) const [user, setUser] = useState('') const [error, setError] = useState(''); const userId = isAuthenticated() async function getProfile(userId) { try { const response = await axios.get(`/users/${userId}`) setUser(response.data) } catch (error) { catchErrors(error, setError) } } function handleChange(e) { e.preventDefault() setInner(e.target.value) console.log(e.target.value) setDisabled(false) } function sendMsgCH(e) { e.preventDefault() props.setSingleChat(inner) props.sendMsg(e) setInner('') setDisabled(true) console.log(chat) } function handleClick(e) { setChat([]) props.handleChatc() } useEffect(() => { getProfile(userId) }, [userId]) useEffect(() => { setChat([...chat, props.singleChat]) console.log('UseEffect singlechat', chat) // check() }, [props.singleChat]) useEffect(() => { setChat([...chat, props.recievedMsg]) console.log('UseEffect recievechat', chat) }, [props.recievedMsg]) // function check() { // // if (chat[chat.length-1].user ===chat[chat.length-2].user){ //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교 // if (chat.length === 2) { // setHidden(false) // } else { // setHidden(true) // } // console.log(hidden) // } const time = new Date().toLocaleTimeString() return (

해당 방에 대한 참여코드는 {props.roomCode} 입니다.

{/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */} {chat.map((value, index) => { if (!(value == '')) { return ( {user.profileimg ? : } {user.nickname}의 {index} {value} {new Date().toLocaleTimeString()} ) } else { return null } }) } {/* 내가 보낸 메세지 띄우기 */} {chat.map((value, index) => { if (!(value == '')) { return (
{time} {value}
) } else { return null } }) }
); } export default Chat;