From e243b0fad2176705a7844eb9d28898d0e58f7a2c Mon Sep 17 00:00:00 2001
From: Morgakd <morgakd@sbcglobal.net>
Date: Wed, 26 Apr 2017 19:39:22 -0500
Subject: [PATCH 1/3] Initial Commit

---
 src/components/ProductDetail.js |  8 +++--
 src/components/Reviews.js       | 54 +++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Reviews.js

diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..866901b 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Reviews from "Reviews.js";
 
 function ProductDetail(props) {
   const {name,description,rating,imgUrl} = props.product;
@@ -14,11 +15,14 @@ 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}/>
+
+          </p>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..b3b1c25
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,54 @@
+import React from "react";
+
+class Reviews extends React.Component {
+  constructor (props) {
+    super();
+    this.state ={
+      visible:false;
+    }
+
+  }
+render(){
+  var reviewDiv="";
+  var reviewTag;
+  if(this.props.product.reviews > 1) {
+    reviewTag="Reviews"
+  }
+  else{
+    reviewTag="Review"
+  }
+  return reviewTag;
+  }
+  if(this.state.visible){
+    reviewDiv=this.props.product.reviews.map(function(type, index){
+      return
+      <div>
+        {type.description}
+        <br/>
+        {type.rating}
+        <br/>
+        <br/>
+
+
+      </div>
+
+    })
+  }
+  else{
+    reviewDiv="";
+  }
+const {reviews} = props.product;
+  return(
+
+    <a onClick={(e)=>{
+      this.setState({
+        visible:!this.state.visible
+      });
+    }}{reviewDiv} </a>
+  );
+
+}
+
+}
+
+export default Reviews

From 48a918976009cc30e8336209fa07eaf1fc6faaeb Mon Sep 17 00:00:00 2001
From: Morgakd <morgakd@sbcglobal.net>
Date: Thu, 27 Apr 2017 10:22:37 -0500
Subject: [PATCH 2/3] Final Commit

---
 public/css/shop-homepage.css    |  2 +-
 src/components/ProductDetail.js | 17 +++++------
 src/components/Reviews.js       | 50 +++++++++++++++++++--------------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/public/css/shop-homepage.css b/public/css/shop-homepage.css
index b498194..b8144a2 100755
--- a/public/css/shop-homepage.css
+++ b/public/css/shop-homepage.css
@@ -51,4 +51,4 @@ body {
 
 footer {
     margin: 50px 0;
-}
\ No newline at end of file
+}
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 866901b..f17397a 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,8 +1,8 @@
 import React from "react";
-import Reviews from "Reviews.js";
+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" />);
@@ -18,14 +18,15 @@ function ProductDetail(props) {
           <p>{description}
           </p>
         </div>
-        <div className="ratings">
-          <p className="pull-right">
-          <Reviews product={props}/>
+        <div className="ratings" >
+        <p>
+          {stars}
+        </p>
+          <p >
+          <Reviews products={reviews}/>
 
           </p>
-          <p>
-            {stars}
-          </p>
+
         </div>
       </div>
     </div>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
index b3b1c25..90b7a0d 100644
--- a/src/components/Reviews.js
+++ b/src/components/Reviews.js
@@ -4,51 +4,59 @@ class Reviews extends React.Component {
   constructor (props) {
     super();
     this.state ={
-      visible:false;
-    }
+      visible:false,
+    };
 
   }
 render(){
-  var reviewDiv="";
-  var reviewTag;
-  if(this.props.product.reviews > 1) {
-    reviewTag="Reviews"
+  function fillStars(value){
+    var arr=[];
+    for (var i=0; i<value; i++){
+      arr.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+    return arr;
+  };
+  let reviewState = this.props.products;
+  let reviewDiv="";
+  let reviewTag;
+  if(reviewState.length > 1) {
+    reviewTag="Reviews";
   }
   else{
     reviewTag="Review"
   }
-  return reviewTag;
-  }
+
+
   if(this.state.visible){
-    reviewDiv=this.props.product.reviews.map(function(type, index){
-      return
+    reviewDiv=reviewState.map(function(type, index){
+      return(
       <div>
-        {type.description}
-        <br/>
-        {type.rating}
-        <br/>
-        <br/>
 
+<hr />
+        <p  key={index}>{type.description}</p><p>{fillStars(type.rating)} </p>
 
       </div>
-
+);
     })
   }
   else{
     reviewDiv="";
   }
-const {reviews} = props.product;
-  return(
 
+  return(
+    <div>
     <a onClick={(e)=>{
       this.setState({
         visible:!this.state.visible
       });
-    }}{reviewDiv} </a>
+    }}>{reviewTag}</a>
+{reviewDiv}
+
+    </div>
   );
 
 }
-
 }
 
-export default Reviews
+
+export default Reviews;

From c03f4cddcc5ecb383601b86cdcf4c35b204bfef4 Mon Sep 17 00:00:00 2001
From: Morgakd <morgakd@sbcglobal.net>
Date: Thu, 27 Apr 2017 10:27:31 -0500
Subject: [PATCH 3/3] corrected formating

---
 src/components/Reviews.js | 115 +++++++++++++++++++-------------------
 1 file changed, 57 insertions(+), 58 deletions(-)

diff --git a/src/components/Reviews.js b/src/components/Reviews.js
index 90b7a0d..7ae16e5 100644
--- a/src/components/Reviews.js
+++ b/src/components/Reviews.js
@@ -1,62 +1,61 @@
 import React from "react";
 
 class Reviews extends React.Component {
-  constructor (props) {
-    super();
-    this.state ={
-      visible:false,
-    };
-
-  }
-render(){
-  function fillStars(value){
-    var arr=[];
-    for (var i=0; i<value; i++){
-      arr.push(<span className="glyphicon glyphicon-star"></span>)
+    constructor(props) {
+      super();
+      this.state = {
+        visible: false,
+      };
+
+    }
+    render() {
+      function fillStars(value) {
+        var arr = [];
+        for (var i = 0; i < value; i++) {
+          arr.push( < span className = "glyphicon glyphicon-star" > < /span>)
+          }
+          return arr;
+        };
+        let 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 >
+
+                <hr / >
+                <p key = {index} > {type.description} </p>
+                <p>{fillStars(type.rating)} </p >
+
+              </div>
+            );
+          })
+        } else {
+          reviewDiv = "";
+        }
+
+        return (
+          <div >
+          <a onClick = {(e) => {
+              this.setState({
+                visible: !this.state.visible
+              });
+            }
+          } > {reviewTag} < /a>
+          {reviewDiv}
+          </div>
+        );
+
+      }
     }
-    return arr;
-  };
-  let 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>
-
-<hr />
-        <p  key={index}>{type.description}</p><p>{fillStars(type.rating)} </p>
-
-      </div>
-);
-    })
-  }
-  else{
-    reviewDiv="";
-  }
-
-  return(
-    <div>
-    <a onClick={(e)=>{
-      this.setState({
-        visible:!this.state.visible
-      });
-    }}>{reviewTag}</a>
-{reviewDiv}
-
-    </div>
-  );
-
-}
-}
-
-
-export default Reviews;
+
+
+    export default Reviews;