Deandre Crayton

public/css/shop-homepage.css

@@ -34,12 +34,67 @@ body {
     width: 100%;
 }
 
-.ratings {
-    padding-right: 10px;
-    padding-left: 10px;
+/* ------- Ratings: ------- */
+
+.ratings { 
+    position: relative;
+    padding: 0 20px;
     color: #d17581;
 }
 
+    .ratings::after {
+        content: " ";
+        display: block; 
+        height: 0; 
+        clear: both;        
+    }
+
+    .ratings .stars {
+        position: absolute;
+        top: 0;
+        left: 20px;
+    }
+
+    .ratings .print { 
+        float: right;
+        cursor: pointer;
+    }
+
+/* ------- Reviews: ------- */
+
+.reviews { position: relative; }
+
+    .reviews ul { 
+        font-size: 12px;
+        position: absolute;
+        z-index: 1;
+        box-shadow: 0 10px 10px rgba(0,0,0,0.2);
+    }
+
+    .reviews ul li > span {
+        display: block;
+        width: 100%;
+    }
+
+    .reviews ul.visible-reviews {
+        visibility: visible;
+        opacity: 1;
+        top: 40px;
+        transition: visibility 0.3s, opacity 0.3s, top 0.3s;
+    }
+
+    .reviews ul.hidden-reviews {
+        visibility: hidden;
+        opacity: 0;
+        top: 30px;
+        transition: visibility 0.3s, opacity 0.3s, top 0.3s;
+    }
+
+    .reviews li {
+        text-align: left;
+        color: #999;
+    }
+
 .thumbnail {
     padding: 0;
 }

src/App.js

@@ -8,7 +8,7 @@ import Carousel from './components/Carousel';
 function App (props) {
 
     var products = props.state.products.map(function(prod){
-        return <ProductDetail product={prod} />;
+        return <ProductDetail key={prod.id} product={prod} />;
     });
     return (
           <div className="App">

src/components/ProductDetail.js

@@ -1,10 +1,12 @@
 import React from "react";
+import Reviews from "./Reviews";
+import Stars from "./Stars";
 
 function ProductDetail(props) {
   const {name,description,rating,imgUrl} = props.product;
   const stars = [];
   for (let i = 0; i < rating; i++) {
-    stars.push(<span className="glyphicon glyphicon-star" />);
+    stars.push(<span key={i} className="glyphicon glyphicon-star" />);
   }
 
   return (
@@ -18,10 +20,10 @@ function ProductDetail(props) {
           </p>
         </div>
         <div className="ratings">
-          <p className="pull-right">15 reviews</p>
-          <p>
-            {stars}
+          <p className="stars">
+            <Stars rating={rating} />
           </p>
+          <Reviews product={props.product} />
         </div>
       </div>
     </div>

src/components/Reviews.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Stars from './Stars';
+
+class Reviews extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {visible: "hidden-reviews"}
+        this.exapndReviews = this.exapndReviews.bind(this);
+    }
+
+    format(reviews) {
+        const plurality = reviews > 1 ? "reviews" : "review";
+        return `${reviews} ${plurality}`;
+    }
+
+    exapndReviews() {
+        const toggle = this.state.visible == "hidden-reviews" ? "visible-reviews" : "hidden-reviews";
+        this.setState({visible: toggle});
+    }
+
+    render() {
+        return(
+            <div className="reviews">
+                <p className="print" onClick={this.exapndReviews}>{this.format(this.props.product.reviews.length)}</p>
+
+                <ul className={`list-group ${this.state.visible}`}>
+                    {this.props.product.reviews.map( function(review, i){
+                        return <li key={i} className="list-group-item"><span>{review.description}</span><Stars rating={review.rating} /></li>
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default Reviews;

src/components/Stars.js

@@ -0,0 +1,29 @@
+import React from "react";
+
+class Stars extends React.Component {
+    icons () {
+        var rating = this.props.rating;
+        var empties = 5 - this.props.rating;
+        var icons = [];
+        var i = 1;
+        while (rating--) {
+            icons.push(<span key={i} className="glyphicon glyphicon-star"></span>);
+            i++;
+        }
+        while (empties--) {
+            icons.push(<span key={i} className="glyphicon glyphicon-star-empty"></span>);
+            i++;
+        }
+        return icons;
+    }
+
+    render () {
+        return (
+            <span>
+                {this.icons()}
+            </span>
+        );
+    }
+}
+
+export default Stars;