Skip to content

Instantly share code, notes, and snippets.

@productioncoder productioncoder/Rating.js
Last active Nov 4, 2018

Embed
What would you like to do?
Youtube in React: make Rating component dynamic
/* ... */
import {getShortNumberString} from '../../services/number/number-format';
export function Rating(props) {
let rating = null;
let likeCount = props.likeCount !== 0 ? props.likeCount : null;
let dislikeCount = null;
if(props.likeCount && props.dislikeCount) {
const amountLikes = parseFloat(props.likeCount);
const amountDislikes = parseFloat(props.dislikeCount);
const percentagePositiveRatings = 100.0 * (amountLikes / (amountLikes + amountDislikes));
// Now that we have calculated the percentage, we bring the numbers into a better readable format
likeCount = getShortNumberString(amountLikes);
dislikeCount = getShortNumberString(amountDislikes);
rating = <Progress percent={percentagePositiveRatings} size='tiny'/>;
}
return (
<div className='rating'>
<div >
<Icon name='thumbs outline up'/>
<span>{likeCount}</span>
</div>
<div >
<Icon name='thumbs outline down'/>
<span>{dislikeCount}</span>
</div>
{rating}
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.