ijunseong

Update: channel to react component

...@@ -33,41 +33,18 @@ const quit = (channelName)=>{ ...@@ -33,41 +33,18 @@ const quit = (channelName)=>{
33 } 33 }
34 34
35 export class Channel extends React.Component { 35 export class Channel extends React.Component {
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}, () => {
54 -
55 - } );
56 - }
57 - }
58 -
59 render(){ 36 render(){
60 return ( 37 return (
61 <div className="channel"> 38 <div className="channel">
62 - <a href={this.state.url} className="channel__url"> 39 + <a href={this.props.channel.url} className="channel__url">
63 - {this.state.thumbnail && <img className="channel__thumbnail" src={this.state.thumbnail} alt=""></img>} 40 + {this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>}
64 - {!this.state.thumbnail && <PersonIcon className="channel__icon"/>} 41 + {!this.props.channel.thumbnail && <PersonIcon className="channel__icon"/>}
65 <div className="channel__box"> 42 <div className="channel__box">
66 <div className="channel__info"> 43 <div className="channel__info">
67 - <div className="channel__name">{ `${this.state.nickname} (${this.state.id})` }</div> 44 + <div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
68 - <div className="channel__game">{this.state.category}</div> 45 + <div className="channel__game">{this.props.channel.category}</div>
69 </div> 46 </div>
70 - <div className="channel__view">{this.state.view}</div> 47 + <div className="channel__view">{this.props.channel.view}</div>
71 </div> 48 </div>
72 </a> 49 </a>
73 {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />} 50 {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
......