ClosedList.js

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


function ClosedList(props) {
  const [error, setError] = useState('')
  const realTime = new Date().toISOString()

  async function recordEntryLog(e) {
    const leaveInfo = { userId: props.userId, roomCode: e.target.name, 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)
    }
  }

  async 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)

    await recordEntryLog(e) //방 입장시 시간 업데이트 (그래야 안 읽은 메세지가 0개로  되니까)
    props.unreadMessage() //방 입장시 메세지 개수 다시셈 (그래야 입장시 0으로 초기화 되니까)

  }

  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //안읽은 메세지 count하는 부분


  useEffect(() => { // 누군가 보내면 다시 개수 셈
    console.log('chat 클라이언트 변경!')
    props.unreadMessage()
  }, [props.checknew])

  useEffect(() => { //일단 들오면 실행해야지
    props.unreadMessage()
  }, [props.closedlist])



  let count=[]
  const [unread, setUnread] = useState([])
  useEffect(() => { //unread정보가 들어오면 재정비해서 뿌려주기 위한 작업!
    for (let i = 0; i < props.unreadnumber.length; i++) {
      count.push(props.unreadnumber[i].unreadcount)
    }
    setUnread(count)
  }, [props.unreadnumber])

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

export default ClosedList