Tony.Rinaldi.ATX.Advanced2

README.md

@@ -1,3 +1,6 @@
+#### Name
+Tony Rinaldi
+
 #### Setup
 Fork, clone, run yarn install, yarn start, pull request
 

public/css/shop-homepage.css

@@ -40,6 +40,11 @@ body {
     color: #d17581;
 }
 
+.reviews {
+    clear: both;
+    text-align: left;
+}
+
 .thumbnail {
     padding: 0;
 }

src/App.js

@@ -1,39 +1,38 @@
-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';
 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;

src/components/Carousel.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
  function Carousel(){
      return (

src/components/Footer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 function Footer(){
      return (    

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">

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;

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;

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",