Skip to content

Instantly share code, notes, and snippets.

@arkilis
Created July 1, 2017 21:33
Show Gist options
  • Save arkilis/907d2936aed39334f3116ebfefc14ac4 to your computer and use it in GitHub Desktop.
Save arkilis/907d2936aed39334f3116ebfefc14ac4 to your computer and use it in GitHub Desktop.
codeschool exmpale state
class CommentBox extends React.Component {
render() {
const comments = this._getComments() || [];
return(
<div className="comment-box">
<h3>Comments</h3>
{this._getPopularMessage(comments.length)}
<h4 className="comment-count">{this._getCommentsTitle(comments.length)}</h4>
<div className="comment-list">
{comments}
</div>
</div>
);
}
_getPopularMessage(commentCount) {
const POPULAR_COUNT = 10;
if (commentCount > POPULAR_COUNT) {
return (
<div>This post is getting really popular, don not miss out!</div>
);
}
}
_getComments() {
const commentList = [
{ id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
{ id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
];
return commentList.map((comment) => {
return (<Comment
author={comment.author}
body={comment.body}
avatarUrl={comment.avatarUrl}
key={comment.id} />);
});
}
_getCommentsTitle(commentCount) {
if (commentCount === 0) {
return 'No comments yet';
} else if (commentCount === 1) {
return '1 comment';
} else {
return `${commentCount} comments`;
}
}
}
class Comment extends React.Component {
constructor() {
super();
this.state = {
isAbusive: false
};
}
render() {
let commentBody;
if (!this.state.isAbusive) {
commentBody = this.props.body;
} else {
commentBody = <em>Content marked as abusive</em>;
}
return(
<div className="comment">
<img src={this.props.avatarUrl} alt={`${this.props.author}'s picture`} />
<p className="comment-header">{this.props.author}</p>
<p className="comment-body">
{commentBody}
</p>
<div className="comment-actions">
<a href="#">Delete comment</a>
<a href="#" onClick={this._toggleAbuse.bind(this)}>Report as Abuse</a>
</div>
</div>
);
}
_toggleAbuse(event){
event.preventDefault();
if(this.state.isAbusive){
this.setState({isAbusive:false})
}else{
this.setState({isAbusive:true})
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment