Skip to content

GitLab

Commit b41db3c2 authored by 우지원's avatar 우지원
Browse files

채널정보 가져오기/온라인사용자 가져오기

parent 7a9a45a8
Hide whitespace changes
Inline Side-by-side
client/src/apis/room.api.js
View file @ b41db3c2
import axios from "axios"; import axios from "axios";
const getRoom = async (payload) => { const getRoom = async (id) => {
const { data } = await axios.post(`/api/room/getRoom`,payload); const { data } = await axios.post('/api/room/getRoom', id);
return data; return data;
}; };
......
client/src/components/Home/RoomSingle.js
View file @ b41db3c2
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { Link } from 'react-router-dom' import { Link, useParams } from "react-router-dom";
import roomApi from '../../apis/room.api'; import roomApi from "../../apis/room.api";
import userApi from '../../apis/user.api'; import userApi from "../../apis/user.api";
import catchErrors from '../../context/catchError'; import catchErrors from "../../context/catchError";
const id = localStorage.getItem('user'); const id = localStorage.getItem("user");
const INIT_ROOM={ const INIT_ROOM = {
name:"", roomid:"",
profileimg:"", name: "",
member:"", profileimg: "",
} member: "",
};
const RoomSingle = () => { const RoomSingle = () => {
const [room, setRoom] = useState(INIT_ROOM) const [room, setRoom] = useState([INIT_ROOM]);
const [error,setError]=useState('') const [error, setError] = useState("");
const channelId = 1 // const channelId = 1;
const roomId = "1234567abc" const {roomId}=useParams();
async function getJoinRoom(Id) { async function getJoinRoom(Id) {
try { try {
const User = await userApi.getUser(Id) const User = await userApi.getUser(Id);
const RoomNumArr = User.roomNumber const RoomNumArr = User.roomNumber;
const Room= await roomApi.getRoom(RoomNumArr) const Room = await roomApi.getRoom(RoomNumArr);
console.log(Room[0]) const roomlist = [];
const rrr=Room[0] for (const prop in Room) {
const memcount= rrr.member.length roomlist.push({
setRoom({...room, name:rrr.name, profileimg: rrr.profileimg, member:memcount}) roomId:Room[prop].id,
console.log(room) name: Room[prop].name,
profileimg: Room[prop].profileimg,
member: Room[prop].member,
});
}
setRoom(roomlist);
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError);
} }
} }
useEffect(() => { useEffect(() => {
getJoinRoom(id) getJoinRoom(id);
}, [id]) }, [id]);
const { profileimg } = room;
return ( return (
<Link <div>
to={`/room/${roomId}/${channelId}`} {room &&
className="text-decoration-none text-dark" room.map((el) => (
> <Link
<div to={`/room/${el.roomId}/1`}
className="d-flex mx-4 my-2 p-2" className="text-decoration-none text-dark"
style={{ backgroundColor: '#C4C4C4' }} >
> <div
<div style={{ width: '37px', height: '37px' }}> className="d-flex mx-4 my-2 p-2"
{/* <img style={{ backgroundColor: "#C4C4C4" }}
src={`/roomUploads/${profileimg}`} >
className="rounded-circle" <div style={{ width: "37px", height: "37px" }}>
style={{ width: '37px', height: '37px' }} <img
/> */} src={`/roomUploads/${el.profileimg}`}
</div> className="rounded-circle"
<div style={{ width: "37px", height: "37px" }}
className="mx-3 mt-2" />
style={{ </div>
width: '250px', <div
overflow:'scroll', className="mx-3 mt-2"
whiteSpace: 'nowrap', style={{
msOverflowStyle:'none', width: "250px",
}} overflow: "scroll",
> whiteSpace: "nowrap",
{room.name} msOverflowStyle: "none",
</div> }}
<div className="ms-auto mt-2"> {room.member}/100 </div> >
</div> {el.name}
</div>
</Link> <div className="ms-auto mt-2"> {el.member}/100 </div>
) </div>
} </Link>
))}
</div>
);
};
export default RoomSingle export default RoomSingle;
\ No newline at end of file
client/src/components/Room/ChannelSingle.js
View file @ b41db3c2
import { Link, Route, Switch, useParams } from "react-router-dom"; import { Link, Route, Switch, useParams } from "react-router-dom";
const ChannelSingle = () => { const ChannelSingle = (props) => {
const { roomId } = useParams(); const { roomId } = useParams();
console.log('props', props.channel)
return ( return (
<div className="overflow-auto" style={{ height: "610px" }}> <div>
<div className="mb-3"> <div
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> className="overflow-auto"
<Link to={`${roomId}/meeting`}> style={{ height: "610px" }}
<img >
className="col-auto mt-2" {props.channel.map((el) => (
src="/fullSpeaker.png" <div className="mb-3">
width="25px" <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
height="25px" <Link to={`${roomId}/${el.channelName}`}>
/> <img
<h5 className="col mt-2" style={{ color: "black" }}> className="col-auto mt-2"
회의 src="/fullSpeaker.png"
</h5> width="25px"
</Link> height="25px"
</div> />
<ul className="mx-5" style={{ color: "#76D079" }}> <h5 className="col mt-2" style={{ color: "black" }}>
<li> {el.channelName}
<p style={{ color: "black" }}>CHERRY</p> </h5>
</li> </Link>
<li> </div>
<p style={{ color: "black" }}>JAEYEON</p>
</li>
<li>
<p style={{ color: "black" }}>SEOYEON</p>
</li>
<li>
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img
className="col-auto mt-2"
src="/emptySpeaker.png"
width="25px"
height="25px"
/>
<Link to={`${roomId}/normal`}>
<h5 className="col mt-2" style={{ color: "black" }}>
일반
</h5>
</Link>
</div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<li>
<p style={{ color: "black" }}>CHERRY</p>
</li>
<li>
<p style={{ color: "black" }}>JAEYEON</p>
</li>
<li>
<p style={{ color: "black" }}>SEOYEON</p>
</li>
<li>
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3"> {el.joinName && el.joinName.map((e) =>
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div><ul className="mx-5" style={{ color: "#76D079" }}>
<img <li>
className="col-auto mt-2" <p style={{ color: "black" }}>{e}</p>
src="/emptySpeaker.png" </li>
width="25px" </ul></div>)}
height="25px" </div>))}
/>
<Link to={`${roomId}/notice`}>
<h5 className="col mt-2" style={{ color: "black" }}>
공지
</h5>
</Link>
</div> </div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<li>
<p style={{ color: "black" }}>CHERRY</p>
</li>
<li>
<p style={{ color: "black" }}>JAEYEON</p>
</li>
<li>
<p style={{ color: "black" }}>SEOYEON</p>
</li>
<li>
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div>
</div> </div>
); );
}; };
......
client/src/components/Room/LeftHamburger.js
View file @ b41db3c2
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
import catchErrors from "../../context/catchError"; import catchErrors from "../../context/catchError";
import roomApi from "../../apis/room.api"; import roomApi from "../../apis/room.api";
import { useState } from "react"; import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
const userId = localStorage.getItem('user'); const userId = localStorage.getItem('user');
const INIT_ROOM = { const INIT_ROOM = {
...@@ -11,7 +12,46 @@ const INIT_ROOM = { ...@@ -11,7 +12,46 @@ const INIT_ROOM = {
profileimg: '', profileimg: '',
} }
const INIT_CHANNEL = {
channelName: "",
joinName: [],
};
const LeftHamberger = () => { const LeftHamberger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const { roomId } = useParams();
const [error, setError] = useState("");
async function getChannel(roomId) {
console.log('roomId', roomId)
const ID = roomId
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel
console.log('방데이터:', Channel[0])
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]
});
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
console.log(channel)
useEffect(() => {
console.log('roomId', roomId)
getChannel(roomId);
}, [roomId]);
function roomIdCopy() { function roomIdCopy() {
const t = document.querySelector("#roomId").innerText; const t = document.querySelector("#roomId").innerText;
...@@ -72,23 +112,17 @@ const LeftHamberger = () => { ...@@ -72,23 +112,17 @@ const LeftHamberger = () => {
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<h5 className="col mt-2">온라인 사용자</h5> <h5 className="col mt-2">온라인 사용자</h5>
</div> </div>
<ul className="mx-5" style={{ color: "#76D079" }}> {channel.map((el) => (
<li> <div>
<p style={{ color: "black" }}>CHERRY</p> {el.joinName && el.joinName.map((e) => (
</li> <ul className="mx-5" style={{ color: "#76D079" }}>
<li> <li>
<p style={{ color: "black" }}>JAEYEON</p> <p style={{ color: "black" }}>{e}</p>
</li> </li>
<li> </ul>
<p style={{ color: "black" }}>SEOYEON</p> ))}
</li> </div>
<li> ))}
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div> </div>
<div className="mb-3"> <div className="mb-3">
......
client/src/components/Room/RightHamburger.js
View file @ b41db3c2
import { useState } from "react"; import { useState, useEffect } from "react";
import ChannelSingle from './ChannelSingle' import { useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import Rightimg from "../../images/RightHamburgerImg.png";
import RoomApi from "../../apis/room.api";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const RightHamberger = () => { const INIT_CHANNEL = {
const [admin, setAdmin] = useState('true') channelName: "",
joinName: [],
};
const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const { roomId } = useParams();
const [error, setError] = useState("");
async function getChannel(roomId) {
console.log('roomId', 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]
});
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
console.log(channel)
useEffect(() => {
console.log('roomId', roomId)
getChannel(roomId);
}, [roomId]);
return ( return (
<div> <div>
<div> <div>
...@@ -14,15 +56,14 @@ const RightHamberger = () => { ...@@ -14,15 +56,14 @@ const RightHamberger = () => {
aria-controls="right-hamburger" aria-controls="right-hamburger"
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation" aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }} style={{ border: "#f4c1f2" }}
> >
<span className="navbar-toggler-icon"></span> <img src={Rightimg} width="50px" height="30px" />
</button> </button>
</div> </div>
<div <div
className="offcanvas offcanvas-end" className="offcanvas offcanvas-end"
style={{ width: '330px' }} style={{ width: "330px" }}
tabIndex="-1" tabIndex="-1"
id="right-hamburger" id="right-hamburger"
aria-labelledby="hamburgerLabel" aria-labelledby="hamburgerLabel"
...@@ -32,17 +73,20 @@ const RightHamberger = () => { ...@@ -32,17 +73,20 @@ const RightHamberger = () => {
className="col-6 offcanvas-title" className="col-6 offcanvas-title"
id="offcanvasExampleLabel" id="offcanvasExampleLabel"
style={{ style={{
fontWeight: 'bold', fontWeight: "bold",
fontSize: '15px', fontSize: "15px",
overflow: 'hidden', overflow: "hidden",
whiteSpace: 'nowrap', whiteSpace: "nowrap",
width: '150px', width: "150px",
color: '#000000', color: "#000000",
}} }}
> >
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과 방 이름{/*Room.name*/}
</p> </p>
<h6 className="mt-2" id="roomId" > #ASV2AE985 </h6> <h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button <button
type="button" type="button"
className="btn-close text-reset" className="btn-close text-reset"
...@@ -51,7 +95,7 @@ const RightHamberger = () => { ...@@ -51,7 +95,7 @@ const RightHamberger = () => {
></button> ></button>
</div> </div>
<ChannelSingle /> <ChannelSingle channel={channel}/>
<div> <div>
<div className="d-flex flex-row-reverse"> <div className="d-flex flex-row-reverse">
<button <button
...@@ -60,29 +104,31 @@ const RightHamberger = () => { ...@@ -60,29 +104,31 @@ const RightHamberger = () => {
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#exitRoom" data-bs-target="#exitRoom"
style={{ style={{
height: '30px', height: "30px",
fontWeight: 'bold', fontWeight: "bold",
backgroundColor: '#d86da6', backgroundColor: "#d86da6",
color: 'black', color: "black",
border: '1px #d86da6', border: "1px #d86da6",
}} }}
> >
퇴장 퇴장
</button> </button>
{admin ? <button {/* {admin ? (
type="button" <button
className="m-3 rounded" type="button"
style={{ className="m-3 rounded"
height: '30px', style={{
fontWeight: 'bold', height: "30px",
backgroundColor: '#E0CEE8', fontWeight: "bold",
color: 'black', backgroundColor: "#E0CEE8",
border: '1px #D64D61', color: "black",
}} border: "1px #D64D61",
> }}
설정 >
</button> : null} 설정
</button>
) : null} */}
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="exitRoom"
...@@ -129,10 +175,8 @@ const RightHamberger = () => { ...@@ -129,10 +175,8 @@ const RightHamberger = () => {
</div> </div>
</div> </div>
</div> </div>
</div > </div>
) );
};
}
export default RightHamberger export default RightHamburger;
\ No newline at end of file \ No newline at end of file
controllers/room.controller.js
View file @ b41db3c2
...@@ -92,9 +92,8 @@ const createRoom = async (req, res) => { ...@@ -92,9 +92,8 @@ const createRoom = async (req, res) => {
const getRoom = async (req, res) => { const getRoom = async (req, res) => {
console.log("fhgfghdgfdgf:", req.body); console.log("fhgfghdgfdgf:", req.body);
const roomId = req.body
try { try {
const roomlist = await Room.findAll({ where: { id: roomId } }); const roomlist = await Room.findAll({ where: { id: req.body} });
console.log(roomlist); console.log(roomlist);
res.json(roomlist) res.json(roomlist)
} catch (error) { } catch (error) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment