From 2397f95b1423f0ed13dc234c6272d22339db74bf Mon Sep 17 00:00:00 2001
From: Deandre Crayton <deandrecrayton@gmail.com>
Date: Wed, 31 Jan 2018 10:00:21 -0600
Subject: [PATCH 1/2] Advanced State Practice

---
 public/css/shop-homepage.css    | 56 +++++++++++++++++++++++++++++++--
 src/App.js                      |  2 +-
 src/components/ProductDetail.js | 10 +++---
 src/components/Reviews.js       | 35 +++++++++++++++++++++
 src/components/Stars.js         | 29 +++++++++++++++++
 5 files changed, 124 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Reviews.js
 create mode 100644 src/components/Stars.js

diff --git a/public/css/shop-homepage.css b/public/css/shop-homepage.css
index b498194..a57affc 100755
--- a/public/css/shop-homepage.css
+++ b/public/css/shop-homepage.css
@@ -34,12 +34,62 @@ 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.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;
 }
diff --git a/src/App.js b/src/App.js
index 8dfa97f..d37bf15 100644
--- a/src/App.js
+++ b/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">
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..6d70b63 100644
--- a/src/components/ProductDetail.js
+++ b/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>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..bd7f6e7
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+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">{review.description}</li>
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default Reviews;
\ No newline at end of file
diff --git a/src/components/Stars.js b/src/components/Stars.js
new file mode 100644
index 0000000..6abb71a
--- /dev/null
+++ b/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;
\ No newline at end of file

From 332e54969a5e11c0374088b1eda35ec8b56a4373 Mon Sep 17 00:00:00 2001
From: Deandre Crayton <deandrecrayton@gmail.com>
Date: Wed, 31 Jan 2018 18:15:34 -0600
Subject: [PATCH 2/2] added star rating to individual reviews

---
 public/css/shop-homepage.css | 5 +++++
 src/components/Reviews.js    | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/css/shop-homepage.css b/public/css/shop-homepage.css
index a57affc..ec1df4a 100755
--- a/public/css/shop-homepage.css
+++ b/public/css/shop-homepage.css
@@ -71,6 +71,11 @@ body {
         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;
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
index bd7f6e7..0efc39a 100644
--- a/src/components/Reviews.js
+++ b/src/components/Reviews.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Stars from './Stars';
 
 class Reviews extends React.Component {
     constructor(props) {
@@ -24,7 +25,7 @@ class Reviews extends React.Component {
 
                 <ul className={`list-group ${this.state.visible}`}>
                     {this.props.product.reviews.map( function(review, i){
-                        return <li key={i} className="list-group-item">{review.description}</li>
+                        return <li key={i} className="list-group-item"><span>{review.description}</span><Stars rating={review.rating} /></li>
                     })}
                 </ul>
             </div>