Update: separate channel.name to channel.id and channel.nickname

@@ -32,26 +32,49 @@ const quit = (channelName)=>{
     socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
 }
 
-export function Channel(props) {
-    const channel = props.channel;
+export class Channel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            id: props.channel.id,
+            nickname: props.channel.nickname,
+            url: props.channel.url,
+            thumbnail: props.channel.thumbnail,
+            category: props.channel.category,   // game에서 category로 변경
+            view: props.channel.view,
+            isPlay: props.channel.isPlay || false,
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.props.isPlay !== this.state.isPlay){
+            console.log('cdu')
+            console.log(this.state.isPlay)
+            this.setState( {isPlay: this.props.isPlay}, () => {
 
-    return (
-        <div className="channel">
-            <a href={channel.url} className="channel__url">
-                {channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>}
-                {!channel.thumbnail && <PersonIcon className="channel__icon"/>}
-                <div className="channel__box">
-                    <div className="channel__info">
-                        <div className="channel__name">{channel.name}</div>
-                        <div className="channel__game">{channel.game}</div>
+            } );
+        }
+    }
+
+    render(){
+        return (
+            <div className="channel">
+                <a href={this.state.url} className="channel__url">
+                    {this.state.thumbnail && <img className="channel__thumbnail" src={this.state.thumbnail} alt=""></img>}
+                    {!this.state.thumbnail && <PersonIcon className="channel__icon"/>}
+                    <div className="channel__box">
+                        <div className="channel__info">
+                            <div className="channel__name">{ `${this.state.nickname} (${this.state.id})` }</div>
+                            <div className="channel__game">{this.state.category}</div>
+                        </div>
+                        <div className="channel__view">{this.state.view}</div>
                     </div>
-                    <div className="channel__view">{channel.view}</div>
-                </div>
-            </a>
-            {channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />}
-            {!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />}
-        </div>
-    );
+                </a>
+                {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
+                {!this.props.channel.isPlay && <PlayArrowIcon className="play__icon" onClick={this.props.onClick} />}
+            </div>
+        )
+    }
 }
 
 export class ChannelList extends React.Component {
@@ -60,17 +83,17 @@ export class ChannelList extends React.Component {
         
         // data for test
         const test = [
-            {"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"},
-            {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
-            {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
-            {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
-            {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
-            {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
-            {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
-            {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
-            {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
-            {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
-            {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
+            {"id": "umi0410", "nickname": "진수", "view": 123124124, "category": "game2" , "url": "https://www.twitch.tv/umi0410", "isPlay": false},
+            {"id": "name1", "nickname": "nick", "view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
+            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
+            /* {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
+            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
+            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
+            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
+            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
+            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
+            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
+            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, */
             
         ]
 
@@ -85,6 +108,8 @@ export class ChannelList extends React.Component {
         // 버튼을 누른 채널이 재생중일때
         if (channel.isPlay === true) {
             channels[index].isPlay = false;
+            console.log(channels[index].isPlay);
+            console.log(channels);
             this.setState({
                 channels: channels,
                 xisPlaying: null,
@@ -93,6 +118,8 @@ export class ChannelList extends React.Component {
 
         // 버튼을 누른 채널이 재생중이 아닐 때
         else {
+            console.log(channels[index].isPlay);
+            console.log(channels);
             // xisPlaying이 null이 아닐 때
             if (this.state.xisPlaying !== null) {
                 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경