Ericka Barnes-Emery (advanced)

README.md

@@ -1,12 +1,21 @@
 #### Setup
+DONE
 Fork, clone, run yarn install, yarn start, pull request
 
 #### Do
+DONE
  * Add a new class component for Reviews
+DONE
  * Make sure to use extends and super
+DONE
  * Import and use this component in ProductDetail
+DONE
  * This component will take a product from props
+DONE
  * 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
+ DONE
+ * It will create a list of the reviews description which will initially be hidden
+ DONE
  * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
+ DONE
+ * When clicked again, hide the reviews

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

src/components/ProductDetail.js

@@ -1,10 +1,12 @@
 import React from "react";
+import Reviews from "./Reviews"
 
 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" />);
+    stars.push(<span className="glyphicon glyphicon-star" key={i}/>);
+    console.log("what is this?",props);
   }
 
   return (
@@ -14,11 +16,12 @@ 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"></p>
+          <Reviews product={props.product.reviews}/>
           <p>
             {stars}
           </p>

src/components/Reviews.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+class Reviews extends React.Component{
+  constructor (props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+    this.handleReviewClick = this.handleReviewClick.bind(this);
+  }
+
+  handleReviewClick() {
+    this.setState(function(prevState) {
+      return {
+        visible: !prevState.visible
+      }
+    });
+  }
+
+  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 onClick={this.handleReviewClick}>
+      {numOfReviews} review{numOfReviews <= 1 ? " " : "s" }
+      <div>{reviewDiv}</div>
+      </div>
+      );
+    }
+  }
+
+export default Reviews;