ClosedList.js

import React, { useState, useEffect } from 'react'
import { Badge, ListGroup } from 'react-bootstrap';
import axios from 'axios'


function ClosedList(props) {

  function enterChatRoomCH(e) {
    if (props.roomCode) {
      props.closeChatRoom(props.roomCode)
    }
    const roomCode = e.target.name
    const roomName = e.target.value
    props.enterChatRoom(roomCode)
    props.setRoomCode(roomCode)
    props.setRoomName(roomName)

    // console.log('rrrrrrrrrrrrrrr',props.closedlist)
    // console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
    // unreadMessage()
  }
  
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//안읽은 메세지 count하는 부분

  // const [checknew, setChecknew] = useState([])
  // const [unreadnumber, setUnreadnumber] = useState([''])
  // async function dbChat() {
  //   for (let i = 0; i <= props.closedlist.length - 1; i++) {
  //     const respond = await axios.get('/room/dbChat', { params: { 'roomId': props.closedlist[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 <= props.closedlist.length - 1; i++) {
  //     const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': props.closedlist[i].roomId } })
  //     // setUnreadnumber([...unreadnumber, respond.data])
  //     arr = [...arr, respond.data]
  //   }
  //   setUnreadnumber(arr)
  //   // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)


  // }

  return (
    <div>
      {props.closedlist.map((item, index) =>
        <ListGroup key={index}>
          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
            {item.roomName}
            {<Badge className='ml-2' pill variant='danger'>7</Badge>}
          </ListGroup.Item>
        </ListGroup>
      )
      }
    </div >
  )
}

export default ClosedList