From 2592c7573712140a6390fbe2694531ce6a3255f7 Mon Sep 17 00:00:00 2001
From: Mehmet Sonmezates <sonmezatesmehmet@gmail.com>
Date: Tue, 8 Aug 2017 10:59:22 -0500
Subject: [PATCH 1/2] create review component and review divs which is
 initially hidden

---
 README.md                       | 14 ++++++-------
 src/App.js                      |  2 +-
 src/components/ProductDetail.js |  9 ++++++---
 src/components/Reviews.js       | 36 +++++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Reviews.js

diff --git a/README.md b/README.md
index 258a878..7fd1902 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
 Fork, clone, run yarn install, yarn start, pull request
 
 #### Do
- * Add a new class component for Reviews
- * Make sure to use extends and super
- * Import and use this component in ProductDetail
- * This component will take a product from props
- * It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
- * It will create a list of the reviews description which will inititally be hidden
+ *- Add a new class component for Reviews
+ *- Make sure to use extends and super
+ *- Import and use this component in ProductDetail
+ *- This component will take a product from props
+ *- It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
+ *- It will create a list of the reviews description which will inititally be hidden
  * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
\ No newline at end of file
+ * When clicked again, hide the reviews
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..0ffcd32 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,10 +1,11 @@
 import React from "react";
+import Reviews from "./Reviews";
 
 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 className="glyphicon glyphicon-star" key={i}/>);
   }
 
   return (
@@ -14,11 +15,13 @@ function ProductDetail(props) {
         <div className="caption">
           <h4><a href="#">{name}</a>
           </h4>
-          <p>{description} 
+          <p>{description}
           </p>
         </div>
         <div className="ratings">
-          <p className="pull-right">15 reviews</p>
+          <p className="pull-right">
+            <Reviews product={props.product.reviews} />
+          </p>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..ecdc0f7
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,36 @@
+import React from "react";
+
+class Reviews extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  render() {
+    let reviews = this.props.product;
+    let numOfReviews = reviews.length;
+
+    const reviewDiv = reviews.map(review => {
+      if(this.state.visible) {
+        return (
+          <div>
+            <p>{review.description} {review.rating}</p>
+          </div>
+        )
+      }
+
+    });
+    return (
+
+        <div>
+          {numOfReviews} review{numOfReviews <= 1 ? " " : "s" }
+          <div>{reviewDiv}</div>
+        </div>
+
+    );
+  }
+}
+
+export default Reviews;

From 0ffafe0f568c7c600e1436b541e9e52609104cef Mon Sep 17 00:00:00 2001
From: Mehmet Sonmezates <sonmezatesmehmet@gmail.com>
Date: Tue, 8 Aug 2017 12:12:48 -0500
Subject: [PATCH 2/2] implement review toggle function

---
 README.md                 |  4 ++--
 src/components/Reviews.js | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 7fd1902..76b17ec 100644
--- a/README.md
+++ b/README.md
@@ -8,5 +8,5 @@ Fork, clone, run yarn install, yarn start, pull request
  *- This component will take a product from props
  *- It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
  *- It will create a list of the reviews description which will inititally be hidden
- * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
+ *- When the word "review" is clicked show the reviews
+ *- When clicked again, hide the reviews
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
index ecdc0f7..50d2c3b 100644
--- a/src/components/Reviews.js
+++ b/src/components/Reviews.js
@@ -6,6 +6,15 @@ class Reviews extends React.Component{
     this.state = {
       visible: false,
     };
+    this.handleReviewClick = this.handleReviewClick.bind(this);
+  }
+
+  handleReviewClick() {
+    this.setState(function(prevState) {
+      return {
+        visible: !prevState.visible
+      }
+    });
   }
 
   render() {
@@ -20,15 +29,13 @@ class Reviews extends React.Component{
           </div>
         )
       }
-
     });
-    return (
 
-        <div>
+    return (
+        <div onClick={this.handleReviewClick}>
           {numOfReviews} review{numOfReviews <= 1 ? " " : "s" }
           <div>{reviewDiv}</div>
         </div>
-
     );
   }
 }