chat 변수 형태 변경

client/src/Components/Chat.js

@@ -4,12 +4,19 @@ 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([])   //object로 key는 보낸사람 value는 메세지
+  const [chat, setChat] = useState([INIT_CHAT])   //object로 key는 보낸사람 value는 메세지
 
   const [img, setImg] = useState([])
   const [time, setTime] = useState([''])
@@ -17,7 +24,6 @@ function Chat(props) {
   const usualTime = simpleTime.substring(0, simpleTime.length - 3)
   const realTime = new Date().toISOString()
 
-const  r = Date.parse(realTime)
 
 
   const [disabled, setDisabled] = useState(true)
@@ -49,6 +55,7 @@ const  r = Date.parse(realTime)
     e.preventDefault()
     setInner(e.target.value)
     setDisabled(false)
+    console.log(chat)
   }
 
   function sendMsgCH(e) {
@@ -62,18 +69,35 @@ const  r = Date.parse(realTime)
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
-    // console.log('보내기', chat)
   }
 
   function handleClick() {
     props.setRecievedMsg('')
-    console.log('chat1', chat)
-    setChat(['초기화  '])
-
-    console.log('chat2', chat)
-    props.handleChatc()
-    props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
-    console.log('나간시간',realTime, usualTime)
+    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) {
@@ -97,28 +121,26 @@ const  r = Date.parse(realTime)
     //메세지, 닉네임, 시간 불러오기
     const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
     const info = respond.data
-    let chatlist = []
+
+    let intochat = []
+    let msglist = []
     let userlist = []
-    let timelist = []
+    let hourlist = []
     let imglist = []
-    for (let i = 0; i <= info.length - 1; i++) {  //사용하려는 형식에 맞게 수정 
-      chatlist = [...chatlist, info[i].message]
-      userlist = [...userlist, info[i].username]
-      timelist = [...timelist, info[i].createdAt]
-      let hour = timelist[i].split('T')[1].split(':')
-      timelist[i] = settingtime(hour[0]) + ':' + hour[1]
+    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)
     }
-
-    //그 nick에 맞는 프사 불러오기
     const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } })
-    const imginfo = respond2.data
-    for (let j = 0; j <= imginfo.length - 1; j++) {
-      imglist = [...imglist, imginfo[j][0].profileimg]
+    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(chatlist)
-    setSender(userlist)
-    setImg(imglist)
-    setTime(timelist)
+    setChat(intochat)
   }
 
   useEffect(() => {
@@ -126,26 +148,17 @@ const  r = Date.parse(realTime)
   }, [userId])
 
   useEffect(() => {
-    setTime([...time, props.singleTime])
-    setImg([...img, props.singleImg])
-    setSender([...sender, props.singleUser])
-    setChat([...chat, props.singleChat])
+    setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }])
   }, [props.singleChat])
 
   useEffect(() => {
-    setTime([...time, props.recievedTime])
-    setImg([...img, props.recievedImg])
-    setSender([...sender, props.recievedUser])
-    setChat([...chat, props.recievedMsg])
+    setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }])
   }, [props.recievedMsg])
 
-  useEffect(() => {
-    getPreviousChat()
-  }, [props.roomCode])
-
   useEffect(() => {
     getRoomName(props.roomCode)
-    console.log('겟 룸네임', chat)
+    getPreviousChat()
+    // console.log('겟 룸네임', chat)
   }, [props.roomCode])
 
 
@@ -163,18 +176,18 @@ const  r = Date.parse(realTime)
         </Row>
         <p>{props.newUser}님이 입장하셨습니다.</p>
         {chat.map((value, index) => {
-          if (!(value == '')) {
-            if (!(sender[index] === user.nickname)) {
+          if (!(value.msg == '')) {
+            if (!(value.sender === user.nickname)) {
               return (
                 <Row key={index} className='m-1' >
                   <Col xs={2}>
-                    <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
+                    <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
                   </Col>
                   <Col xs={8}>
-                    <Row><strong>{sender[index]}</strong></Row>
+                    <Row><strong>{value.sender}</strong></Row>
                     <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>
-                      <Col className='ml-1'>{time[index]}</Col>
+                      <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.msg}</Row>
+                      <Col className='ml-1'>{value.time}</Col>
                     </Row>
                   </Col>
                 </Row>
@@ -183,8 +196,8 @@ const  r = Date.parse(realTime)
               return (
                 <Row key={index} className='m-1 justify-content-end'>
                   <Row className='d-flex flex-wrap-nowrap' >
-                    <Col className='mr-1'>{time[index]}</Col>
-                    <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>
+                    <Col className='mr-1'>{value.time}</Col>
+                    <Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
                   </Row>
                 </Row>
               )

client/src/Components/ClosedList.js

@@ -2,17 +2,21 @@ import React, { useState, useEffect } from 'react'
 import { Badge, Button, ListGroup } from 'react-bootstrap';
 import axios from 'axios'
 
+const INIT_LIST = [{
+  interest: '',
+  isOpen: '',
+  memeber: [],
+  roomId: '',
+  roomName: '',
+}]
 function ClosedList(props) {
 
-  const [list, setList] = useState([]);
+  const [list, setList] = useState(INIT_LIST);
 
   useEffect(() => {
     getClosedList();
   }, [props.roomCode]);
 
-  useEffect(() => {
-    console.log('안읽은정보', props.leaveInfo)
-  }, [props.leaveInfo])
 
   async function getClosedList() {
     const userid = sessionStorage.getItem('userId')
@@ -20,30 +24,54 @@ function ClosedList(props) {
     setList(res.data)
   }
 
+  const realTime = new Date().toISOString()
+
   function enterChatRoomCH(e) {
     const roomCode = e.target.name
     const roomName = e.target.value
     props.enterChatRoom(roomCode)
     props.setRoomCode(roomCode)
 
+
+console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
   }
 
 
-//   async function unreadMessage() {
-//     //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
-//     //물론 그 방 별로 찾아서 list를 맵써서 하던?
-//     const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': 'fd5243a90f' } })
-//     console.log('클라이언트 클로즈드 카운드', respond)
-//     // console.log('클라이언트 unreadmsg',respond.data)
-//     const respond222 = await axios.get('/room/dbChat')
-//     return respond
-//   }
-// let c=''
-//   useEffect(() => {
-//     c =unreadMessage()
-//     console.log('클로즈드 이펙트',c)
-    
-//   },[])
+
+  const [checknew, setChecknew] = useState([])
+  const [unreadnumber, setUnreadnumber] = useState([''])
+  async function dbChat() {
+    for (let i = 0; i <= list.length - 1; i++) {
+      const respond = await axios.get('/room/dbChat', { params: { 'roomId': list[i].roomId } })
+      setChecknew(respond.data)
+    }
+  }
+  useEffect(() => {
+    dbChat()
+  }, [props.singleChat, props.recievedMsg])
+
+  useEffect(() => {
+    // console.log('chat 클라이언트 변경!')
+    unreadMessage()
+  }, [checknew])
+
+  async function unreadMessage() {
+    //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
+    //물론 그 방 별로 찾아서 list를 맵써서 하던?
+    // console.log('ddddddddd', list[0].roomId)
+
+    setUnreadnumber([''])
+    let arr = []
+    for (let i = 0; i <= list.length - 1; i++) {
+      const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': list[i].roomId } })
+      // setUnreadnumber([...unreadnumber, respond.data])
+      arr = [...arr, respond.data]
+    }
+    setUnreadnumber(arr)
+    // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)
+
+  }
+
 
   return (
     <div>
@@ -51,7 +79,7 @@ function ClosedList(props) {
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
             {item.roomName}
-            <Badge className='ml-2' pill variant='danger'>8</Badge>
+            {unreadnumber[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''}
           </ListGroup.Item>
         </ListGroup>
       )}

client/src/Pages/HomePage.js

@@ -44,7 +44,7 @@ function Home() {
 
   const [singleTime, setSingleTime] = useState('')
   const [recievedTime, setRecievedTime] = useState('')
-  const [leaveInfo, setLeaveInfo] = useState([''])
+  const [leaveInfo, setLeaveInfo] = useState([{roomName:"" , leaveTime: ""}])
 
 
   //SOCKET 관련 시작
@@ -131,7 +131,7 @@ function Home() {
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList leaveInfo={leaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+              <ClosedList singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
               <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />

server/controllers/room.controller.js

@@ -104,45 +104,40 @@ const roomInf = async (req, res) => {
     }
 }
 
-// const unreadMessage = async (req, res) => {
-//     let leaveInfo = req.query.leaveInfo
-//     // leaveInfo.shift()
-//     const roomId = req.query.roomId
-//     let leaveTime = ''
-//     for (let i = 1; i < leaveInfo.length - 1; i++) {    //일단 형식좀 맞추고
-//         leaveInfo[i] = JSON.parse(leaveInfo[i])
-//     }
-
+const unreadMessage = async (req, res) => {
+    let leaveInfo = req.query.leaveInfo
+    const roomId = req.query.roomId
+    let leaveTime = ''
+    for (let i = 1; i < leaveInfo.length; i++) {    //일단 형식좀 맞추고
+        leaveInfo[i] = JSON.parse(leaveInfo[i])
+    }
 
-//     for (let i = 1; i <= leaveInfo.length - 1; i++) {   //그 방의 id와 나간기록의 방과 일치하는지 확인하고
-//         if (leaveInfo[i].roomName === roomId) {
-//             leaveTime = leaveInfo[i].leaveTime  //그 방에서 나간 시간을 찾아옴
-//             console.log('서버의 포문', i, leaveTime)
-//             break;
-//         }
-//     }
-//     // console.log('서버에서 unreadMessage', leaveInfo, roomId)
-//     const room_id = await Room.find({ roomId: roomId }).select('_id')   //id로 _id를 찾아와서
-//     let unreadMsg = await Chat.find({ room: room_id }).select('message createdAt')  //그 방의 메세지와 전송시간을 가져옴
-//     // console.log('서버에서 두번재 언리드', unreadMsg)
-//     console.log('서버에서 언리드', leaveTime)
-//     let count = 0
-//     for (let i = 0; i <= unreadMsg.length - 1; i++) {
-//         const dbtime = Date.parse(unreadMsg[i].createdAt)
-//         const parsedleaveTime = Date.parse(leaveTime)
-//         if (parsedleaveTime > dbtime) {
-//             console.log('이번째부터 나중에온 메세지', i)
-//             count += 1
-//         }
-//     }
-//     console.log('카운트 세버', count)
-//     return count
-// }
+    for (let i = 1; i <= leaveInfo.length - 1; i++) {   //그 방의 id와 나간기록의 방과 일치하는지 확인하고
+        if (leaveInfo[i].roomName === roomId) {
+            leaveTime = leaveInfo[i].leaveTime  //그 방에서 나간 시간을 찾아옴
+            break;
+        }
+    }
 
-// const dbChat = async (req, res) => {
-//     const chatlist = await Chat
-//     console.log(chatlist)
+    const room_id = await Room.find({ roomId: roomId }).select('_id')   //id로 _id를 찾아와서
+    let unreadMsg = await Chat.find({ room: room_id }).select('createdAt')  //그 방의 메세지와 전송시간을 가져옴
+    let count = 0
+    for (let i = 0; i <= unreadMsg.length - 1; i++) {
+        const dbtime = Date.parse(unreadMsg[i].createdAt)
+        const parsedleaveTime = Date.parse(leaveTime)
+        if (parsedleaveTime < dbtime) {         //시간 비교를하고 이후에 온 메세지의 개수를 count함
+            console.log('이번째부터 나중에온 메세지', i)
+            count += 1
+        }
+    }
+    res.json(count)
+}
 
-// }
+const dbChat = async (req, res) => {
+    const roomId = req.query.roomId
+    const room_id = await Room.find({ roomId: roomId }).select('_id')
+    let chatlist = await Chat.find({ room: room_id }).select('message')
+    res.json(chatlist)
+}
 
-export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf }
+export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf, unreadMessage, dbChat }

server/controllers/roomEnter.controller.js

@@ -39,8 +39,9 @@ const getProfileImage = async (req, res) => {
     const nicknamelist = req.query.userlist
     try {
         let imglist = []
-        for (let i = 0; i <= nicknamelist.length - 1; i++) {
-            const eachimg = await User.find({ nickname: nicknamelist[i] }).select('profileimg')
+        for (let prop in nicknamelist) {
+            const getimg = await User.find({ nickname: nicknamelist[prop] }).select('profileimg')
+            const eachimg = { profileimg: getimg[0].profileimg }
             imglist = [...imglist, eachimg]
         }
         res.json(imglist)

server/models/User.js

@@ -3,6 +3,7 @@
 import mongoose from 'mongoose'
 
 const { String } = mongoose.Schema.Types
+const { Array } = mongoose.Schema.Types
 //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
 //object의 id를 쓸때에도 추가시켜줘야됨.
 
@@ -31,8 +32,11 @@ const UserSchema = new mongoose.Schema({
     },
     profileimg: {
         type: String,
-        default : '3cd14b9bcb2007f324fcb82e0b566cce',
+        default: '3cd14b9bcb2007f324fcb82e0b566cce',
     },
+    entrylog: {
+        type: Array,
+    }
 }, {
     //옵셥을 정의함.
     timestamps: true

server/routes/room.routers.js

@@ -22,10 +22,10 @@ router.route('/room/member')
 router.route('/room/getRoomName')
     .get(roomCtrl.getRoomName)
 
-// router.route('/room/unreadMessage')
-//     .get(roomCtrl.unreadMessage)
+router.route('/room/unreadMessage')
+    .get(roomCtrl.unreadMessage)
 
-// router.route('/room/dbChat')
-//     .get(roomCtrl.dbChat)
+router.route('/room/dbChat')
+    .get(roomCtrl.dbChat)
 
 export default router
\ No newline at end of file