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 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 [exit, setExit] = useState(false); 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) setDisabled(false) } 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) } async function recordEntryLog() { const leaveInfo = { userId: userId, roomCode: props.roomCode, leaveTime: realTime } try { const check = await axios.get('/room/entrylog', { params: leaveInfo }) if (check.data) { //있으면 put으로 await axios.put('/room/entrylog', leaveInfo) } else { //없으면 post await axios.post('/room/entrylog', leaveInfo) } } catch (error) { catchErrors(error, setError) } } function handleClick() { props.closeChatRoom(props.roomCode) props.setRecievedMsg('') props.handleChatc() setChat(['']) recordEntryLog() //아니 0으로 바꿔도 개수 세는걸 업데이트안하니까 소용없음 usestate해서 useEffect에 leaveInfo를 달아줘야할듯@@@@ //누르면 now를 0으로 // for (let i = 0; i < props.closedlist.length; i++) { // props.leaveInfo[i].now = 0 //그냥 싹다 0으로 해도되잖아? // if (props.leaveInfo[i].roomCode === props.roomCode) { // // setLeftInfo(leftInfo[i].now='보는중') // props.leaveInfo[i].now = 0 // 방 나가면 안 보는중으로 하기 위해 0으로 바꾸기!!!!!@@@@@@@@@@ // //usestate로 해보기@@@@@@ // console.log(i, '아아아아아아아아') // } else { // props.leaveInfo[i].now = 0 // } // } } 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 = [] for (let prop in info) { let hour = info[prop].createdAt.split('T')[1].split(':') hour = settingtime(hour[0]) + ':' + hour[1] intochat.push({ msg: info[prop].message, sender: info[prop].username, img: info[prop].profileimg, time: hour }) } setChat(intochat) } async function exitAndCloseRoom() { props.exitRoom(props.roomCode) setExit(false) props.handleChatc() } 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(() => { getPreviousChat() }, [props.roomCode]) return ( <> {props.roomName} {props.roomCode} {exit ? 퇴장하시겠습니까? : null} {chat.map((value, index) => { if (!(value.msg === '')) { if (!(value.sender === user.nickname)) { return ( {value.sender} {value.msg} {value.time} ) } else if (sender[index] === "") { return ( { value } ) } else { return ( //내가 보낸 메시지 {value.time} {value.msg} ) } } else { return null } }) }
); } export default Chat;