diff --git a/opentech/apply/funds/serializers.py b/opentech/apply/funds/serializers.py index da59d604d37d77946005695b7b9cea9dc3f4d2cc..0f453edd6eefda1b2b80fa0774852e10b1886613 100644 --- a/opentech/apply/funds/serializers.py +++ b/opentech/apply/funds/serializers.py @@ -53,7 +53,13 @@ class ReviewSummarySerializer(serializers.Field): { 'id': review.id, 'author': str(review.author), + 'icon': 'https://fillmurray.com/12/12', 'score': review.score, + 'opinions': [{ + 'author': str(opinion.author), + 'opinion': opinion.get_opinion_display(), + 'icon': 'https://fillmurray.com/12/12', + } for opinion in review.opinions.all()], 'recommendation': { 'value': review.recommendation, 'display': review.get_recommendation_display(), diff --git a/opentech/static_src/src/app/src/components/ReviewBlock/index.js b/opentech/static_src/src/app/src/components/ReviewBlock/index.js index 06e24dd835c5b4f76c1282b0c195e066a96fc0ee..eeead1d2002cc425042fbb003f3735eae7c84e1e 100644 --- a/opentech/static_src/src/app/src/components/ReviewBlock/index.js +++ b/opentech/static_src/src/app/src/components/ReviewBlock/index.js @@ -3,15 +3,41 @@ import PropTypes from 'prop-types' import './styles.scss'; +const Opinion = ({ opinion }) => ( + <li className="reviews-sidebar__item reviews-sidebar__item--decision"> + <div className="reviews-sidebar__name"> + <span>{opinion.author}</span> + <img src={opinion.icon} /> + </div> + <div></div> + <div className={`reviews-sidebar__outcome ${opinion.opinion.toLowerCase()}`}>{opinion.opinion}</div> + </li> +) + +Opinion.propTypes = { + opinion: PropTypes.object, +} + const Review = ({ review }) => { - const { reviewUrl, author, score, recommendation } = review + const { reviewUrl, author, score, recommendation, opinions } = review + const hasOpinions = opinions.length > 0; return ( - <li className="reviews-sidebar__item"> - <a target="_blank" rel="noopener noreferrer" href={reviewUrl}>{author}</a> - <div>{recommendation.display}</div> - <div>{score}</div> - </li> + <> + <li className="reviews-sidebar__item"> + <a target="_blank" rel="noopener noreferrer" href={reviewUrl}>{author}</a> + <div>{recommendation.display}</div> + <div>{score}</div> + </li> + + {hasOpinions && + <ul className="reviews-sidebar__decision"> + {opinions.map((opinion, i) => { + return <Opinion key={i} {...{ opinion }} /> + })} + </ul> + } + </> ) }