ChannelSingle.js 3.29 KB
Newer Older
우지원's avatar
0805    
우지원 committed
1
import { useState } from 'react'
우지원's avatar
우지원 committed
2
import { Link, useParams } from 'react-router-dom'
3
4
5
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api'
import catchErrors from "../../context/catchError";
우지원's avatar
우지원 committed
6

Kim, Chaerin's avatar
Kim, Chaerin committed
7
const ChannelSingle = (props) => {
8
  console.log(props.channel);
9
  const [error, setError] = useState("");
우지원's avatar
0805    
우지원 committed
10
  const [success, setSuccess] = useState(false);
11
12
  const [roomName, setRoomName] = useState('');
  const { roomId, channelId } = useParams();
이재연's avatar
이재연 committed
13
  const userId = sessionStorage.getItem('user')
14
15
16
17
18


  async function joinChannel(e) {
    try {
      const data = await userApi.getUser(userId);
우지원's avatar
우지원 committed
19
20
21
      const index1 = indexCheck(e)
      const A = doubleJoinCheck(data.name)
      const mem = props.channel[index1].joinUser
22
23
      const joinCh = mem.includes(data.name);
      if (!joinCh) {
우지원's avatar
우지원 committed
24
        if (A) {
25
          await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
우지원's avatar
우지원 committed
26
        }
우지원's avatar
우지원 committed
27
        await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
28
        setRoomName(e)
우지원's avatar
0805    
우지원 committed
29
        setSuccess(true)
30
31
32
33
34
35
36
      } else {
        alert('이미 참여된 채널입니다.')
      }
    } catch (error) {
      catchErrors(error, setError);
    }
  }
우지원's avatar
0805    
우지원 committed
37

38
  function indexCheck(e) {
우지원's avatar
우지원 committed
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
    for (const index1 in props.channel) {
      if (props.channel[index1].channelName === e) {
        return index1
      }
    }
  }

  function doubleJoinCheck(e) {
    for (const index in props.channel) {
      for (const el in props.channel[index].joinUser) {
        if (props.channel[index].joinUser[el] === e) {
          const doublejoinCh = props.channel[index].channelName
          const A = {
            index1: index,
            index2: el,
            joinChName: doublejoinCh,
          }
          return A
        }
58
59
60
61
      }
    }
  }

우지원's avatar
0805    
우지원 committed
62
  if (success) {
63
    alert(`${roomName} 채널에 참가되었습니다.`)
우지원's avatar
0805    
우지원 committed
64
    window.location.href = `/room/${roomId}/${roomName}`
65
66
  }

Kim, Chaerin's avatar
Kim, Chaerin committed
67
68
  return (
    <div>
우지원's avatar
우지원 committed
69
      <div className="overflow-auto" style={{ height: '610px' }}>
Kim, Chaerin's avatar
Kim, Chaerin committed
70
71
        {props.channel.map((el,i) => (
          <div className="mb-3" key={`channel${i}`}>
우지원's avatar
우지원 committed
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
            <div
              className="m-3 p-1 row"
              style={{ backgroundColor: '#E0CEE8' }}
              onClick={() => joinChannel(el.channelName)}
            >
              {el.channelName === channelId ? (
                <img
                  className="col-auto mt-2"
                  src="/fullSpeaker.png"
                  width="25px"
                  height="25px"
                />
              ) : (
                <img
                  className="col-auto mt-2"
                  src="/emptySpeaker.png"
                  width="25px"
                  height="25px"
                />
              )}
              <h5 className="col mt-2" style={{ color: 'black' }}>
                {el.channelName}
              </h5>
            </div>
우지원's avatar
우지원 committed
96

우지원's avatar
우지원 committed
97
98
            {el.joinUser &&
              el.joinUser.map((e,i) => (
Kim, Chaerin's avatar
Kim, Chaerin committed
99
                <div key={`member${i}`}>
우지원's avatar
우지원 committed
100
                  <ul className="mx-5" style={{ color: '#76D079' }}>
Kim, Chaerin's avatar
Kim, Chaerin committed
101
                    <li>
우지원's avatar
우지원 committed
102
                      <p style={{ color: 'black' }}>{e}</p>
Kim, Chaerin's avatar
Kim, Chaerin committed
103
104
105
106
107
108
                    </li>
                  </ul>
                </div>
              ))}
          </div>
        ))}
seoyeon's avatar
seoyeon committed
109
110
      </div>
    </div>
우지원's avatar
우지원 committed
111
112
  )
}
Kim, Chaerin's avatar
Kim, Chaerin committed
113

우지원's avatar
우지원 committed
114
export default ChannelSingle