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'; const INIT_CHAT = { msg: '', sender: '', img: '', time: '' } function Chat(props) { const [sender, setSender] = useState([]) const [roomName, setRoomName] = useState('') const [inner, setInner] = useState(['']) const [chat, setChat] = useState([INIT_CHAT]) //object로 key는 보낸사람 value는 메세지 const [img, setImg] = useState([]) const [time, setTime] = useState(['']) const simpleTime = new Date().toLocaleTimeString() const usualTime = simpleTime.substring(0, simpleTime.length - 3) const realTime = new Date().toISOString() 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) } } async function getRoomName(roomCode) { try { let res = await axios.get('/room/getRoomName', { params: { 'roomCode': roomCode } }) console.log(res.data) setRoomName(res.data) } catch (error) { catchErrors(error, setError) } } function handleChange(e) { e.preventDefault() setInner(e.target.value) setDisabled(false) console.log(chat) } function sendMsgCH(e) { e.preventDefault() props.setSingleTime(usualTime) props.setSingleImg(user.profileimg) props.setSingleUser(user.nickname) props.setSingleChat(inner) props.sendMsg(e) setInner('') setDisabled(true) } function handleClick() { props.setRecievedMsg('') setChat(['']) // props.handleChatc() // console.log("22222222222222222", props.leaveInfo) // let find1 = props.leaveInfo.findIndex((ele) => ele.roomName === props.roomCode) // console.log("33333333333333333", find1) // let find=0 // for(let i=0;i<=props.leaveInfo.length-1;i++){ // if(props.leaveInfo[i].roomName===props.roomCode){ // find = i // break; // } // console.log('찾자',find) // } // if (props.leaveInfo[find1]) { // props.setLeaveInfo(props.leaveInfo[find1] = { roomName: props.roomCode, leaveTime: realTime }) // console.log('트루') // } else { // props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }]) // console.log('폴스') // } // console.log('나간다', props.leaveInfo) } function settingtime(hour) { let newhour = parseInt(hour) + 9 if (newhour >= 24) { newhour -= 24 } if (newhour >= 13) { newhour -= 12 newhour = '오후 ' + newhour } else { newhour = '오전 ' + newhour } return newhour } //이전 채팅 내용에 대한 것 불러오기 //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식 async function getPreviousChat() { //메세지, 닉네임, 시간 불러오기 const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } }) const info = respond.data let intochat = [] let msglist = [] let userlist = [] let hourlist = [] let imglist = [] for (let prop in info) { let hour = info[prop].createdAt.split('T')[1].split(':') hour = settingtime(hour[0]) + ':' + hour[1] msglist.push(info[prop].message) userlist.push(info[prop].username) hourlist.push(hour) } const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } }) imglist = respond2.data console.log('확인해보자', imglist) for (let i = 0; i < msglist.length; i++) { intochat.push({ msg: msglist[i], sender: userlist[i], img: imglist[i].profileimg, time: hourlist[i] }) } setChat(intochat) } useEffect(() => { getProfile(userId) }, [userId]) useEffect(() => { setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }]) }, [props.singleChat]) useEffect(() => { setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }]) }, [props.recievedMsg]) useEffect(() => { getRoomName(props.roomCode) getPreviousChat() // console.log('겟 룸네임', chat) }, [props.roomCode]) return ( <> {roomName} {props.roomCode}

{props.newUser}님이 입장하셨습니다.

{chat.map((value, index) => { if (!(value.msg == '')) { if (!(value.sender === user.nickname)) { return ( {value.sender} {value.msg} {value.time} ) } else { return ( {value.time} {value.msg} ) } } else { return null } }) }
); } export default Chat;