RoomSingle.js 2.48 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
2
3
4
5
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";
Kim, Chaerin's avatar
Kim, Chaerin committed
6

Kim, Chaerin's avatar
Kim, Chaerin committed
7
8
const id = localStorage.getItem("user");
const INIT_ROOM = {
우지원's avatar
우지원 committed
9
  roomId: "",
Kim, Chaerin's avatar
Kim, Chaerin committed
10
11
12
13
  name: "",
  profileimg: "",
  member: "",
};
Kim, Chaerin's avatar
Kim, Chaerin committed
14
const RoomSingle = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
15
16
  const [room, setRoom] = useState([INIT_ROOM]);
  const [error, setError] = useState("");
Kim, Chaerin's avatar
add key    
Kim, Chaerin committed
17
  const channelId = "main";
우지원's avatar
우지원 committed
18
  const { roomId } = useParams(room.roomId);
Kim, Chaerin's avatar
Kim, Chaerin committed
19
20
21
22
23
24
25
26
  async function getJoinRoom(Id) {
    try {
      const User = await userApi.getUser(Id);
      const RoomNumArr = User.roomNumber;
      const Room = await roomApi.getRoom(RoomNumArr);
      let roomlist = [];
      for (let prop in Room) {
        roomlist.push({
우지원's avatar
우지원 committed
27
          roomId: Room[prop].id,
Kim, Chaerin's avatar
Kim, Chaerin committed
28
29
30
31
32
33
34
35
36
37
38
39
40
          name: Room[prop].name,
          profileimg: Room[prop].profileimg,
          member: Room[prop].member.length,
        });
      }
      setRoom(roomlist);
    } catch (error) {
      catchErrors(error, setError);
    }
  }
  useEffect(() => {
    getJoinRoom(id);
  }, [id]);
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
41

Kim, Chaerin's avatar
Kim, Chaerin committed
42
  const { profileimg } = room;
Kim, Chaerin's avatar
Kim, Chaerin committed
43
  return (
Kim, Chaerin's avatar
Kim, Chaerin committed
44
45
46
    <div>
      {room &&
        room.map((el) => (
우지원's avatar
우지원 committed
47
          <div>
Kim, Chaerin's avatar
add key    
Kim, Chaerin committed
48
49
50
51
52
53
54
            {room[0] === INIT_ROOM ? (
              <div></div>
            ) : (
              <Link
                to={`/room/${el.roomId}/${channelId}`}
                className="text-decoration-none text-dark"
                key={el.roomId}
Kim, Chaerin's avatar
Kim, Chaerin committed
55
              >
우지원's avatar
우지원 committed
56
                <div
Kim, Chaerin's avatar
add key    
Kim, Chaerin committed
57
58
                  className="d-flex mx-4 my-2 p-2"
                  style={{ backgroundColor: "#C4C4C4" }}
우지원's avatar
우지원 committed
59
                >
Kim, Chaerin's avatar
add key    
Kim, Chaerin committed
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
                  <div style={{ width: "37px", height: "37px" }}>
                    <img
                      src={`/roomUploads/${el.profileimg}`}
                      className="rounded-circle"
                      style={{ width: "37px", height: "37px" }}
                    />
                  </div>
                  <div
                    className="mx-3 mt-2"
                    style={{
                      width: "250px",
                      overflow: "scroll",
                      whiteSpace: "nowrap",
                      msOverflowStyle: "none",
                    }}
                  >
                    {el.name}
                  </div>
                  <div className="ms-auto mt-2"> {el.member}/100 </div>
우지원's avatar
우지원 committed
79
                </div>
Kim, Chaerin's avatar
add key    
Kim, Chaerin committed
80
81
              </Link>
            )}
우지원's avatar
우지원 committed
82
          </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
83
84
85
86
        ))}
    </div>
  );
};
Kim, Chaerin's avatar
Kim, Chaerin committed
87

Kim, Chaerin's avatar
Kim, Chaerin committed
88
export default RoomSingle;