이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
ijunseong
25d5c86b 1 parent a2b93076

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

Inline Side-by-side
Showing 1 changed file with 56 additions and 29 deletions
...@@ -32,26 +32,49 @@ const quit = (channelName)=>{ ...@@ -32,26 +32,49 @@ const quit = (channelName)=>{
32 socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름. 32 socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
33 } 33 }
34 34
35 -export function Channel(props) { 35 +export class Channel extends React.Component {
36 - const channel = props.channel; 36 + constructor(props) {
37 + super(props);
38 + this.state = {
39 + id: props.channel.id,
40 + nickname: props.channel.nickname,
41 + url: props.channel.url,
42 + thumbnail: props.channel.thumbnail,
43 + category: props.channel.category, // game에서 category로 변경
44 + view: props.channel.view,
45 + isPlay: props.channel.isPlay || false,
46 + }
47 + }
48 +
49 + componentDidUpdate() {
50 + if (this.props.isPlay !== this.state.isPlay){
51 + console.log('cdu')
52 + console.log(this.state.isPlay)
53 + this.setState( {isPlay: this.props.isPlay}, () => {
37 54
38 - return ( 55 + } );
39 - <div className="channel"> 56 + }
40 - <a href={channel.url} className="channel__url"> 57 + }
41 - {channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>} 58 +
42 - {!channel.thumbnail && <PersonIcon className="channel__icon"/>} 59 + render(){
43 - <div className="channel__box"> 60 + return (
44 - <div className="channel__info"> 61 + <div className="channel">
45 - <div className="channel__name">{channel.name}</div> 62 + <a href={this.state.url} className="channel__url">
46 - <div className="channel__game">{channel.game}</div> 63 + {this.state.thumbnail && <img className="channel__thumbnail" src={this.state.thumbnail} alt=""></img>}
64 + {!this.state.thumbnail && <PersonIcon className="channel__icon"/>}
65 + <div className="channel__box">
66 + <div className="channel__info">
67 + <div className="channel__name">{ `${this.state.nickname} (${this.state.id})` }</div>
68 + <div className="channel__game">{this.state.category}</div>
69 + </div>
70 + <div className="channel__view">{this.state.view}</div>
47 </div> 71 </div>
48 - <div className="channel__view">{channel.view}</div> 72 + </a>
49 - </div> 73 + {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
50 - </a> 74 + {!this.props.channel.isPlay && <PlayArrowIcon className="play__icon" onClick={this.props.onClick} />}
51 - {channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />} 75 + </div>
52 - {!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />} 76 + )
53 - </div> 77 + }
54 - );
55 } 78 }
56 79
57 export class ChannelList extends React.Component { 80 export class ChannelList extends React.Component {
...@@ -60,17 +83,17 @@ export class ChannelList extends React.Component { ...@@ -60,17 +83,17 @@ export class ChannelList extends React.Component {
60 83
61 // data for test 84 // data for test
62 const test = [ 85 const test = [
63 - {"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"}, 86 + {"id": "umi0410", "nickname": "진수", "view": 123124124, "category": "game2" , "url": "https://www.twitch.tv/umi0410", "isPlay": false},
64 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, 87 + {"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},
65 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, 88 + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
66 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, 89 + /* {"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},
67 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, 90 + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
68 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, 91 + {"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},
69 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, 92 + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
70 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, 93 + {"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},
71 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, 94 + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
72 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, 95 + {"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},
73 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, 96 + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, */
74 97
75 ] 98 ]
76 99
...@@ -85,6 +108,8 @@ export class ChannelList extends React.Component { ...@@ -85,6 +108,8 @@ export class ChannelList extends React.Component {
85 // 버튼을 누른 채널이 재생중일때 108 // 버튼을 누른 채널이 재생중일때
86 if (channel.isPlay === true) { 109 if (channel.isPlay === true) {
87 channels[index].isPlay = false; 110 channels[index].isPlay = false;
111 + console.log(channels[index].isPlay);
112 + console.log(channels);
88 this.setState({ 113 this.setState({
89 channels: channels, 114 channels: channels,
90 xisPlaying: null, 115 xisPlaying: null,
...@@ -93,6 +118,8 @@ export class ChannelList extends React.Component { ...@@ -93,6 +118,8 @@ export class ChannelList extends React.Component {
93 118
94 // 버튼을 누른 채널이 재생중이 아닐 때 119 // 버튼을 누른 채널이 재생중이 아닐 때
95 else { 120 else {
121 + console.log(channels[index].isPlay);
122 + console.log(channels);
96 // xisPlaying이 null이 아닐 때 123 // xisPlaying이 null이 아닐 때
97 if (this.state.xisPlaying !== null) { 124 if (this.state.xisPlaying !== null) {
98 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경 125 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
......