import { 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"; const ChannelSingle = (props) => { const [error, setError] = useState(""); const [success, setSuccess] = useState(false); const [roomName, setRoomName] = useState(''); const { roomId, channelId } = useParams(); console.log('props', props.channel) console.log('hi', channelId) const userId = localStorage.getItem('user') async function joinChannel(e) { console.log(e, userId) try { const data = await userApi.getUser(userId); const el = indexCheck(e) console.log(el) const mem = props.channel[el].joinUser console.log(mem) const joinCh = mem.includes(data.name); console.log(joinCh) if (!joinCh) { const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: el }) console.log(roomA) setRoomName(e) setSuccess(true) } else { alert('이미 참여된 채널입니다.') } } catch (error) { catchErrors(error, setError); } } console.log('정보들어왔나', roomName, success) function indexCheck(e) { for (const el in props.channel) { console.log('체크', props.channel[el].channelName, e) console.log('체크', props.channel[el].channelName === e) if (props.channel[el].channelName === e) { console.log('el', el) return el } } } if (success) { alert(`${roomName} 채널에 참가되었습니다.`) window.location.href = `/room/${roomId}/${roomName}` } return (
{props.channel.map((el) => (
joinChannel(el.channelName)} > {el.channelName === channelId ? ( ) : ( )}
{el.channelName}
{el.joinUser && el.joinUser.map((e) => (
  • {e}

))}
))}
) } export default ChannelSingle