From b5cb69df8631789eb5b216a2ed53d156947df090 Mon Sep 17 00:00:00 2001
From: bttodd11 <bttodd@icloud.com>
Date: Fri, 28 Apr 2017 16:10:04 -0500
Subject: [PATCH 1/2] Updated Advanced State Practice

---
 src/components/ProductDetail.js |  5 +++--
 src/components/Reviews.js       | 15 +++++++++++++++
 yarn.lock                       | 10 +++-------
 3 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Reviews.js

diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..a5baec3 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Reviews from "./Reviews";
 
 function ProductDetail(props) {
   const {name,description,rating,imgUrl} = props.product;
@@ -14,11 +15,11 @@ 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 /> </p>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..286719e
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,15 @@
+import React from "react";
+import state from "../state.js";
+
+class Reviews extends React.Component {
+  constructor(props) {
+    super(props);
+       //this.state =  {visible:true};
+
+
+  }
+  render() {
+    return <div>{this.props.reviews} </div>;
+  }
+}
+export default Reviews;
diff --git a/yarn.lock b/yarn.lock
index 5390255..88ac4d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2570,11 +2570,11 @@ got@^5.0.0:
     unzip-response "^1.0.2"
     url-parse-lax "^1.0.0"
 
-graceful-fs@4.1.10:
+graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -4557,14 +4557,10 @@ q-io@1.13.2:
     qs "^1.2.1"
     url2 "^0.0.0"
 
-q@1.4.1:
+q@1.4.1, q@^1.0.1, q@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
-q@^1.0.1, q@^1.1.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
-
 qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"

From f02a4dfad65d17c11c98fd78ee1c7f2e330fe60c Mon Sep 17 00:00:00 2001
From: bttodd11 <bttodd@icloud.com>
Date: Sun, 30 Apr 2017 22:27:19 -0500
Subject: [PATCH 2/2] Updated Advanced State Practice

---
 src/components/ProductDetail.js | 17 ++++++-----
 src/components/Reviews.js       | 52 +++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index a5baec3..4c0212c 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,13 +1,12 @@
 import React from "react";
-import Reviews from "./Reviews";
+import Reviews from "./Reviews.js";
 
 function ProductDetail(props) {
-  const {name,description,rating,imgUrl} = props.product;
+  const {name,description,rating,imgUrl, reviews} = props.product;
   const stars = [];
   for (let i = 0; i < rating; i++) {
     stars.push(<span className="glyphicon glyphicon-star" />);
   }
-
   return (
     <div className="col-sm-4 col-lg-4 col-md-4">
       <div className="thumbnail">
@@ -18,11 +17,15 @@ function ProductDetail(props) {
           <p>{description}
           </p>
         </div>
-        <div className="ratings">
-          <p className="pull-right"> <Reviews /> </p>
-          <p>
-            {stars}
+        <div className="ratings" >
+        <p>
+          {stars}
+        </p>
+          <p >
+          <Reviews products={reviews}/>
+
           </p>
+
         </div>
       </div>
     </div>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
index 286719e..bc0b87a 100644
--- a/src/components/Reviews.js
+++ b/src/components/Reviews.js
@@ -1,15 +1,55 @@
 import React from "react";
-import state from "../state.js";
 
 class Reviews extends React.Component {
-  constructor(props) {
-    super(props);
-       //this.state =  {visible:true};
+  constructor (props) {
+    super();
+    this.state ={
+      visible:false,
+    };
+  }
+  render(){
+  function fillStars(value){
+    var arr=[];
+    for (let i=0; i<value; i++){
+      arr.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+    return arr;
+  };
+    const reviewState = this.props.products;
+    let reviewDiv= "";
+    let reviewTag;
+  if( reviewState.length > 1) {
+    reviewTag= "Reviews";
+  }
+  else {
+    reviewTag="Review"
+  }
+  if (this.state.visible){
+    reviewDiv=  reviewState.map(function(type, index) {
+      return(
+      <div>
 
 
+        <p key={index}>{type.description}</p> <p>{fillStars(type.rating)} </p>
+
+      </div>
+);
+    })
   }
-  render() {
-    return <div>{this.props.reviews} </div>;
+  else{
+    reviewDiv="";
   }
+  return(
+    <div>
+    <a onClick={(e)=>{
+      this.setState({
+        visible:!this.state.visible
+      });
+    }}>{reviewTag}</a>
+{reviewDiv}
+
+    </div>
+  );
+}
 }
 export default Reviews;