mehmet.sonmezates.atx.advanced

README.md

@@ -2,11 +2,11 @@
 Fork, clone, run yarn install, yarn start, pull request
 
 #### Do
- * Add a new class component for Reviews
- * Make sure to use extends and super
- * Import and use this component in ProductDetail
- * This component will take a product from props
- * 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
- * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
+ *- Add a new class component for Reviews
+ *- Make sure to use extends and super
+ *- Import and use this component in ProductDetail
+ *- This component will take a product from props
+ *- 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
+ *- When the word "review" is clicked show the reviews
+ *- 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,11 @@
 import React 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" />);
+    stars.push(<span className="glyphicon glyphicon-star" key={i}/>);
   }
 
   return (
@@ -14,11 +15,13 @@ 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.product.reviews} />
+          </p>
           <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;