ijunseong

Update: channel to react component

......@@ -33,41 +33,18 @@ const quit = (channelName)=>{
}
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}, () => {
} );
}
}
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"/>}
<a href={this.props.channel.url} className="channel__url">
{this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>}
{!this.props.channel.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 className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
<div className="channel__game">{this.props.channel.category}</div>
</div>
<div className="channel__view">{this.state.view}</div>
<div className="channel__view">{this.props.channel.view}</div>
</div>
</a>
{this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
......