gistfile1.js

import React, { Component } from 'react';
import { withRouter } from 'react-router'
import { connect } from 'react-redux';
import { compose } from 'redux';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';

const Container = styled(Flex)`
  width: 100%;
`;

const ReviewHeader = styled.div`
  text-align: left;
  margin-bottom: 10px;
`;

const ReviewAvgRating = styled.div`
  display: inline-block;
  text-align: left;
`;

const ReviewSummary = styled.div`
  font-family: "AT Surt", sans-serif;
  display: inline-block;
  text-align: left;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 10px;
  margin-left: 5px;
`;

const Star = styled.svg`
  margin-right: 3px;
  margin-bottom: -2px;
`;

class MainDescription extends Component {
  
  state = { reviews: [], avgRating: null }
  
  componentWillReceiveProps(nextProps) {
    const { reviews } = nextProps;
    if (reviews && JSON.stringify(reviews) !== JSON.stringify(this.state.reviews)) {
      const avgRating = Object.keys(reviews).reduce((previous, key) => {
        return previous + parseFloat(reviews[key].score)
      }, 0) / reviews.length;
      this.setState({
        reviews,
        avgRating
      });
    }
  }

  getStars = rating => {
    let stars = [];

    for (let i = 1; i <= 5; i++) {
      if (i <= rating) {
        stars.push(
          <Star version="1.1" width="14" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" style={{ enableBackground: 'new 0 0 17 17' }} xmlSpace="preserve">
            <style >
              {`.st0{fill:#BF6929;}`}
            </style>
            <path class="st0" d="M13.6,16.5l-5.1-2.7l-5.1,2.7l1-5.6l-4.1-4L6,6l2.5-5.1L11,6l5.7,0.8l-4.1,4L13.6,16.5z" />
          </Star>
        );
      } else {
        stars.push(
          <Star version="1.1" width="14" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" style={{ enableBackground: 'new 0 0 17 17' }} xmlSpace="preserve">
            <style type="text/css">
            {`.st0{fill:#BF6929;}`}
            </style>
            <path className="st0" d="M13.6,16.5l-5.1-2.7l-5.1,2.7l1-5.6l-4.1-4L6,6l2.5-5.1L11,6l5.7,0.8l-4.1,4L13.6,16.5z M8.5,12.7l3.7,2
            l-0.7-4.2l3-3l-4.2-0.6L8.5,3.1L6.6,6.9L2.4,7.5l3,3l-0.7,4.2L8.5,12.7z"/>
          </Star>
        );
      }
    }

    return stars;
  };


  render () {
    const {  reviews, avgRating } = this.state;

    return (
      <Container
        justifyContent='flex-start'
        flexDirection='column'
      >
        {reviews.length > 0 && (
          <ReviewHeader>
            <ReviewAvgRating>{this.getStars(avgRating)}</ReviewAvgRating>
            <ReviewSummary>
              ({reviews.length} REVIEWS) {avgRating}/5 STARS
            </ReviewSummary>
          </ReviewHeader>
        )}
      </Container>
    );
  }
};

const mapStateToProps = (state) => ({
  reviews: state.yotpo.reviews,
});

const mapDispatchToProps = dispatch =>({
});

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withRouter, withConnect)(MainDescription);