ClosedList.js 2.54 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
import React, { useState, useEffect } from 'react'
Choi Ga Young's avatar
Choi Ga Young committed
2
import { Badge, ListGroup } from 'react-bootstrap';
Choi Ga Young's avatar
Choi Ga Young committed
3
import "../Pages/Home.css";
Choi Ga Young's avatar
Choi Ga Young committed
4
import axios from 'axios'
5
import catchErrors from '../utils/catchErrors';
Choi Ga Young's avatar
Choi Ga Young committed
6
7


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

12
13
14
15
16
17
18
19
20
21
22
23
24
  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)
    }
  }
25

26
  async function enterChatRoomCH(e) {
27
    if (props.roomCode) {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
28
29
      props.closeChatRoom(props.roomCode)
    }
30
    const roomCode = e.target.name
Soo Hyun Kim's avatar
Soo Hyun Kim committed
31
    const roomName = e.target.value
32
    props.enterChatRoom(roomCode)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
33
    props.setRoomCode(roomCode)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
34
    props.setRoomName(roomName)
35

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

39
  }
우지원's avatar
수정    
우지원 committed
40

41
42
43
44
45
  //안읽은 메세지 count하는 부분

  useEffect(() => { // 누군가 보내면 다시 개수 셈
    console.log('chat 클라이언트 변경!')
    props.unreadMessage()
Choi Ga Young's avatar
Choi Ga Young committed
46
    console.log('새 메세지가 도착했습니다.', props.leftInfo)
47
  }, [props.checknew])
JeongYeonwoo's avatar
JeongYeonwoo committed
48

49
50
51
  useEffect(() => { //일단 들오면 실행해야지
    props.unreadMessage()
  }, [props.closedlist])
JeongYeonwoo's avatar
JeongYeonwoo committed
52
53
54



Choi Ga Young's avatar
Choi Ga Young committed
55
  let count = []
56
57
58
59
60
61
62
  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])
63

Choi Ga Young's avatar
Choi Ga Young committed
64
  return (
Soo Hyun Kim's avatar
Soo Hyun Kim committed
65
66
    <div style={{height: "80vh"}}>
    <div style={{overflow: 'auto', height:"100%"}}>
67
      {props.closedlist.map((item, index) =>
Choi Ga Young's avatar
Choi Ga Young committed
68
        <ListGroup key={index}>
Choi Ga Young's avatar
Choi Ga Young committed
69
          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}
Choi Ga Young's avatar
Choi Ga Young committed
70
            className='rounded-0'>
Choi Ga Young's avatar
Choi Ga Young committed
71
            {item.roomName}
72
            {unread[index] ? <Badge className='ml-2' pill variant='danger'>{unread[index]}</Badge> : ''}
Choi Ga Young's avatar
Choi Ga Young committed
73
74
          </ListGroup.Item>
        </ListGroup>
75
76
      )
      }
77
    </div >
Soo Hyun Kim's avatar
Soo Hyun Kim committed
78
    </div>
Choi Ga Young's avatar
Choi Ga Young committed
79
80
81
  )
}

Soo Hyun Kim's avatar
Soo Hyun Kim committed
82
export default ClosedList