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 (
<>
{props.newUser}님이 입장하셨습니다.