RightHamburger.js 8.37 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
import { useState, useEffect } from "react";
우지원's avatar
우지원 committed
2
import { Link, useParams } from "react-router-dom";
Kim, Chaerin's avatar
Kim, Chaerin committed
3
4
5
import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
우지원's avatar
0712    
우지원 committed
6

이재연's avatar
aaaa    
이재연 committed
7
const INIT_ROOM = {
이재연's avatar
이재연 committed
8
9
  name: "",
};
이재연's avatar
aaaa    
이재연 committed
10

Kim, Chaerin's avatar
Kim, Chaerin committed
11
const INIT_CHANNEL = {
이재연's avatar
이재연 committed
12
13
  channelName: "",
  joinName: [],
Kim, Chaerin's avatar
Kim, Chaerin committed
14
15
};
const RightHamburger = () => {
이재연's avatar
이재연 committed
16
17
18
19
20
  const [channel, setChannel] = useState([INIT_CHANNEL]);
  const [room, setRoom] = useState([INIT_ROOM]);
  const { roomId } = useParams();
  const [error, setError] = useState("");
  const id = localStorage.getItem("user");
우지원's avatar
우지원 committed
21

이재연's avatar
이재연 committed
22
23
24
25
26
27
28
29
  async function getRoom(roomId) {
    try {
      const data = await RoomApi.getRoom([roomId]);
      setRoom({ ...room, name: data[0].name });
    } catch (error) {
      catchErrors(error, setError);
    }
  }
Kim, Chaerin's avatar
Kim, Chaerin committed
30

이재연's avatar
이재연 committed
31
32
33
34
35
36
37
  async function exitRoom() {
    console.log("id, roomid정보", id, roomId);
    try {
      const data = await RoomApi.exitRoom({ id, roomId });
      console.log(data);
    } catch (error) {
      catchErrors(error, setError);
Kim, Chaerin's avatar
Kim, Chaerin committed
38
    }
이재연's avatar
이재연 committed
39
  }
우지원's avatar
0712    
우지원 committed
40

이재연's avatar
이재연 committed
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  async function getChannel(roomId) {
    const ID = roomId;
    try {
      const data = await RoomApi.getRoom([ID]);
      const Channel = data[0].channel;
      console.log("방데이터:", Channel);
      const channelList = [];
      for (const prop in Channel) {
        // Channel의 항목(prop)으로 작업을 실행합니다
        for (const key in Channel[prop]) {
          console.log(key);
          console.log(prop);
          console.log(Channel[prop][key]);
          channelList.push({
            channelName: key,
            joinName: Channel[prop][key],
          });
Kim, Chaerin's avatar
Kim, Chaerin committed
58
        }
이재연's avatar
이재연 committed
59
60
61
62
      }
      setChannel(channelList);
    } catch (error) {
      catchErrors(error, setError);
Kim, Chaerin's avatar
Kim, Chaerin committed
63
    }
이재연's avatar
이재연 committed
64
65
  }

Kim, Chaerin's avatar
Kim, Chaerin committed
66
67
68
69
  // console.log(channel)

  useEffect(() => {
    getChannel(roomId);
이재연's avatar
이재연 committed
70
    getRoom(roomId);
Kim, Chaerin's avatar
Kim, Chaerin committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
  }, [roomId]);

  function roomIdCopy() {
    const t = document.querySelector("#roomId").innerText;
    console.log(t);
    navigator.clipboard.writeText(t);
    document.execCommand("copy");
  }
  return (
    <div>
      <div>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#right-hamburger"
          aria-controls="right-hamburger"
          aria-expanded="false"
          aria-label="Toggle navigation"
          style={{ border: "#f4c1f2" }}
        >
seoyeon's avatar
seoyeon committed
92
          <img src="/RightHamburgerImg.png" width="50px" height="30px" />
Kim, Chaerin's avatar
Kim, Chaerin committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
        </button>
      </div>
      <div
        className="offcanvas offcanvas-end"
        style={{ width: "330px" }}
        tabIndex="-1"
        id="right-hamburger"
        aria-labelledby="hamburgerLabel"
      >
        <div className="offcanvas-header">
          <p
            className="col-6 offcanvas-title"
            id="offcanvasExampleLabel"
            style={{
              fontWeight: "bold",
              fontSize: "15px",
              overflow: "hidden",
              whiteSpace: "nowrap",
              width: "150px",
              color: "#000000",
            }}
          >
            {room.name}
          </p>
          <h6 className="mt-2" id="roomId">
            {" "}
            {`${roomId}`}{" "}
          </h6>
          <button
            type="button"
            className="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div>
이재연's avatar
이재연 committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
          <ChannelSingle channel={channel} />
          <div className="d-flex flex-row-reverse">
            <button
              type="button"
              className="m-3 rounded"
              data-bs-toggle="modal"
              data-bs-target="#inviteRoom"
              style={{
                height: "30px",
                fontWeight: "bold",
                backgroundColor: "#E0CEE8",
                color: "black",
                border: "1px #D64D61",
              }}
            >
              초대
            </button>
            <div
              className="modal fade"
              id="inviteRoom"
              tabIndex="-1"
              aria-labelledby="exitRoomLabel"
              aria-hidden="true"
            >
              <div className="modal-dialog">
                <div className="modal-content">
                  <div className="modal-header">
                    <button
                      type="button"
                      className="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div className="modal-body d-flex justify-content-center">
                    어떤 방식으로 초대하시겠습니까?
                  </div>
                  <div className="row mb-3">
                    <div className="d-flex justify-content-evenly">
                      <button
                        type="submit"
                        className="col-2 p-1 btn btn-primary"
                        style={{ width: "120px" }}
                      >
                        카카오로 초대
                      </button>
                      <button
                        type="submit"
                        className="col-2 p-1 btn btn-primary"
                        data-bs-dismiss="modal"
                        style={{ width: "120px" }}
                        onClick={roomIdCopy}
                      >
                         Id 복사
                      </button>
Kim, Chaerin's avatar
Kim, Chaerin committed
184
                    </div>
이재연's avatar
이재연 committed
185
                  </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
186
                </div>
이재연's avatar
이재연 committed
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
              </div>
            </div>
            <div className="d-flex flex-row-reverse">
              <button
                type="button"
                className="m-3 rounded text-white"
                data-bs-toggle="modal"
                data-bs-target="#exitRoom"
                style={{
                  height: "30px",
                  fontWeight: "bold",
                  backgroundColor: "#d86da6",
                  color: "black",
                  border: "1px #d86da6",
                }}
              >
                퇴장
              </button>
              {/* {admin ? (
이재연's avatar
aaaa    
이재연 committed
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
              <button
                type="button"
                className="m-3 rounded"
                style={{
                  height: "30px",
                  fontWeight: "bold",
                  backgroundColor: "#E0CEE8",
                  color: "black",
                  border: "1px #D64D61",
                }}
              >
                설정
              </button>
            ) : null} */}

이재연's avatar
이재연 committed
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
              <div
                className="modal fade"
                id="exitRoom"
                tabIndex="-1"
                aria-labelledby="exitRoomLabel"
                aria-hidden="true"
              >
                <div className="modal-dialog">
                  <div className="modal-content">
                    <div className="modal-header">
                      <button
                        type="button"
                        className="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div className="modal-body d-flex justify-content-center">
                      이방에서 퇴장하시겠습니까?
                    </div>
                    <div className="row mb-3">
                      <div className="d-flex justify-content-evenly">
                        <Link
                          to={`/user/${id}`}
                          className="col-2 p-1 btn btn-primary"
                        >
                          <button
                            type="button"
                            onClick={exitRoom}
                            className="btn btn-primary"
                            data-bs-dismiss="modal"
                          >
                            
                          </button>
                        </Link>
                        <button
                          type="submit"
                          className="btn btn-primary"
                          data-bs-dismiss="modal"
260
                        >
이재연's avatar
이재연 committed
261
262
263
                          아니요
                        </button>
                      </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
264
                    </div>
이재연's avatar
이재연 committed
265
                  </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
266
                </div>
이재연's avatar
이재연 committed
267
              </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
268
            </div>
이재연's avatar
이재연 committed
269
          </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
270
        </div>
이재연's avatar
이재연 committed
271
272
273
274
      </div>
    </div>
  );
};
우지원's avatar
0712    
우지원 committed
275

이재연's avatar
이재연 committed
276
export default RightHamburger;