From 69b54932845f8634377bc99f57d10a3f5de3a897 Mon Sep 17 00:00:00 2001
From: Tony <arinaldi@vt.edu>
Date: Tue, 25 Apr 2017 20:46:55 -0500
Subject: [PATCH 1/2] Initial commit

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 258a878..e4c5852 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+#### Name
+Tony Rinaldi
+
 #### Setup
 Fork, clone, run yarn install, yarn start, pull request
 

From 274c9477ca3d827c01d7e884f304c4d762ba1942 Mon Sep 17 00:00:00 2001
From: Tony <arinaldi@vt.edu>
Date: Thu, 27 Apr 2017 12:35:41 -0500
Subject: [PATCH 2/2] Met requirements of assignment

---
 public/css/shop-homepage.css    |   5 ++
 src/App.js                      |  53 ++++++++-------
 src/components/Carousel.js      |   2 +-
 src/components/Footer.js        |   2 +-
 src/components/NavBar.js        |   2 +-
 src/components/ProductDetail.js | 115 +++++++++++++++++++++++++-------
 src/components/Reviews.js       |  31 +++++++++
 src/state.js                    |  20 +++---
 8 files changed, 166 insertions(+), 64 deletions(-)
 create mode 100644 src/components/Reviews.js

diff --git a/public/css/shop-homepage.css b/public/css/shop-homepage.css
index b498194..3647b7f 100755
--- a/public/css/shop-homepage.css
+++ b/public/css/shop-homepage.css
@@ -40,6 +40,11 @@ body {
     color: #d17581;
 }
 
+.reviews {
+    clear: both;
+    text-align: left;
+}
+
 .thumbnail {
     padding: 0;
 }
diff --git a/src/App.js b/src/App.js
index 8dfa97f..55b50ee 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
@@ -7,33 +6,33 @@ import ProductDetail from './components/ProductDetail';
 import Carousel from './components/Carousel';
 function App (props) {
 
-    var products = props.state.products.map(function(prod){
-        return <ProductDetail product={prod} />;
-    });
-    return (
-          <div className="App">
-            <NavBar />
-            <div className="container">
-              <div className="row">
-                  <div className="col-md-3">
-                      <p className="lead">Shop Name</p>
-                      <div className="list-group">
-                          <a href="#" className="list-group-item">Category 1</a>
-                          <a href="#" className="list-group-item">Category 2</a>
-                          <a href="#" className="list-group-item">Category 3</a>
-                      </div>
-                  </div>
-                  <div className="col-md-9">
-                      <Carousel />
-                      <div className="row">
-                        {products}
-                      </div>
-                  </div>
-              </div>
+  const products = props.state.products.map(function(prod){
+      return <ProductDetail key={prod.id} product={prod} />;
+  });
+  return (
+    <div className="App">
+      <NavBar />
+      <div className="container">
+        <div className="row">
+          <div className="col-md-3">
+            <p className="lead">Shop Name</p>
+            <div className="list-group">
+                <a href="#" className="list-group-item">Category 1</a>
+                <a href="#" className="list-group-item">Category 2</a>
+                <a href="#" className="list-group-item">Category 3</a>
             </div>
-            <Footer />
           </div>
-    );
+          <div className="col-md-9">
+            <Carousel />
+            <div className="row">
+              {products}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index a10b02b..a9e441e 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
  function Carousel(){
      return (
diff --git a/src/components/Footer.js b/src/components/Footer.js
index b1cffbd..c24bb65 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 function Footer(){
      return (    
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 0fc4200..f44a1d1 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
  function NavBar(){
      return (<nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..e86ab17 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,30 +1,97 @@
-import React from "react";
+import React, { Component } 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" />);
+// function ProductDetail(props) {
+//   const { name, description, rating, imgUrl, reviews } = props.product;
+  
+//   const stars = [];
+//   const emptyStars = [];
+//   for (let i = 0; i < rating; i++) {
+//     stars.push(<span key={i} className="glyphicon glyphicon-star" />);
+//   }
+//   for (let j = 0; j < 5 - rating; j++) {
+//     emptyStars.push(<span key={j + 10} className="glyphicon glyphicon-star-empty" />);
+//   }
+
+//   let reviewText = (reviews.length > 1) ? `${reviews.length} reviews` : `${reviews.length} review`; 
+
+//   return (
+//     <div className="col-sm-4 col-lg-4 col-md-4">
+//       <div className="thumbnail">
+//         <img style={{width: "320px",height: "150px"}} src={imgUrl} alt="" />
+//         <div className="caption">
+//           <h4>
+//             <a href="#" onClick={(e) => {
+//               this.setState({
+//                 visible: !this.state.visible
+//               });
+//             }}>{name}</a>
+//           </h4>
+//           <p>{description} 
+//           </p>
+//         </div>
+//         <div className="ratings">
+//           <p className="pull-right"><a href="#">{reviewText}</a></p>
+//           <p className="pull-left">{stars}{emptyStars}</p>
+//         </div>
+//         <Reviews product={props.product} />
+//       </div>
+//     </div>
+//   );
+// }
+// export default ProductDetail;
+
+
+class ProductDetail extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      visible: false
+    };
+    this.handleClick = this.handleClick.bind(this);
   }
 
-  return (
-    <div className="col-sm-4 col-lg-4 col-md-4">
-      <div className="thumbnail">
-        <img style={{width: "320px",height: "150px"}} src={imgUrl} alt="" />
-        <div className="caption">
-          <h4><a href="#">{name}</a>
-          </h4>
-          <p>{description} 
-          </p>
-        </div>
-        <div className="ratings">
-          <p className="pull-right">15 reviews</p>
-          <p>
-            {stars}
-          </p>
+  handleClick(e) {
+    e.preventDefault();
+    this.setState({
+      visible: !this.state.visible
+    });
+  }
+
+  render() {
+    const { name, description, rating, imgUrl, reviews } = this.props.product;
+    
+    const stars = [];
+    const emptyStars = [];
+    for (let i = 0; i < rating; i++) {
+      stars.push(<span key={i} className="glyphicon glyphicon-star" />);
+    }
+    for (let j = 0; j < 5 - rating; j++) {
+      emptyStars.push(<span key={j + 10} className="glyphicon glyphicon-star-empty" />);
+    }
+
+    let reviewText = (reviews.length > 1) ? `${reviews.length} reviews` : `${reviews.length} review`; 
+      return (
+        <div className="col-sm-4 col-lg-4 col-md-4">
+          <div className="thumbnail">
+            <img style={{width: "320px",height: "150px"}} src={imgUrl} alt="" />
+            <div className="caption">
+              <h4>
+                <a href="#">{name}</a>
+              </h4>
+              <p>{description} 
+              </p>
+            </div>
+            <div className="ratings">
+              <p className="pull-right"><a href="#" onClick={this.handleClick}>{reviewText}</a></p>
+              <p className="pull-left">{stars}{emptyStars}</p>
+            </div>
+            <Reviews product={this.props.product} visible={this.state.visible}/>
+          </div>
         </div>
-      </div>
-    </div>
-  );
+      );
+  }
 }
+
 export default ProductDetail;
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..a6c6d41
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+
+class Reviews extends Component {
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    const { reviews } = this.props.product;
+    let reviewListItems = "";
+
+    if (this.props.visible) {
+      reviewListItems = reviews.map((review, index) => {
+        return <li key={index}>{review.description}</li>;
+      });
+    } else {
+      reviewListItems = "";
+    }
+
+    return (
+      <div className="reviews">
+        <ol>
+          {reviewListItems}
+        </ol>
+      </div>
+    );
+  }
+}
+
+export default Reviews;
diff --git a/src/state.js b/src/state.js
index badf378..cf3b41f 100644
--- a/src/state.js
+++ b/src/state.js
@@ -4,7 +4,7 @@ export default {
     "id": 1,
     "name": "Body Luxuries Sweet Lavender Hand Sanitizer",
     "description": "Psychotropic drugs, not elsewhere classified",
-    "reviews": 46,
+    //"reviews": 46,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff",
     "price": "$95.11",
@@ -44,7 +44,7 @@ export default {
     "id": 2,
     "name": "Topiramate",
     "description": "Injury of ulnar nerve at forearm level, left arm, sequela",
-    "reviews": 2,
+    //"reviews": 2,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff",
     "price": "$37.09",
@@ -70,7 +70,7 @@ export default {
     "id": 3,
     "name": "Almond",
     "description": "Other disorders of continuity of bone, unsp tibia and fibula",
-    "reviews": 27,
+    //"reviews": 27,
     "rating": 5,
     "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000",
     "price": "$51.83",
@@ -90,7 +90,7 @@ export default {
     "id": 4,
     "name": "VYTORIN",
     "description": "Orchard as the place of occurrence of the external cause",
-    "reviews": 60,
+    //"reviews": 60,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff",
     "price": "$86.93",
@@ -110,7 +110,7 @@ export default {
     "id": 5,
     "name": "Decolorized Iodine",
     "description": "Injury",
-    "reviews": 20,
+    //"reviews": 20,
     "rating": 1,
     "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff",
     "price": "$70.10",
@@ -130,7 +130,7 @@ export default {
     "id": 6,
     "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15",
     "description": "Unspecified open wound ",
-    "reviews": 79,
+    //"reviews": 79,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff",
     "price": "$39.25",
@@ -150,7 +150,7 @@ export default {
     "id": 7,
     "name": "LBel",
     "description": "Toxic effect of 2-Propanol, intentional self-harm, init",
-    "reviews": 76,
+    //"reviews": 76,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff",
     "price": "$99.91",
@@ -170,7 +170,7 @@ export default {
     "id": 8,
     "name": "Cholestyramine",
     "description": "Laceration without foreign body of trachea, sequela",
-    "reviews": 74,
+    //"reviews": 74,
     "rating": 3,
     "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff",
     "price": "$67.17",
@@ -190,7 +190,7 @@ export default {
     "id": 9,
     "name": "Risperidone",
     "description": "Poisn by cephalospor/oth beta-lactm antibiot, undet, sequela",
-    "reviews": 9,
+    //"reviews": 9,
     "rating": 1,
     "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff",
     "price": "$96.84",
@@ -210,7 +210,7 @@ export default {
     "id": 10,
     "name": "MAC",
     "description": "Other Gram-negative sepsis",
-    "reviews": 45,
+    //"reviews": 45,
     "rating": 2,
     "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff",
     "price": "$74.37",