Advanced1_ATX_Xilin_Wang

README.md

@@ -9,4 +9,4 @@ Fork, clone, run yarn install, yarn start, pull request
  * 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
+ * When clicked again, hide the reviews

src/components/Carousel.js

@@ -33,4 +33,3 @@ import React, { Component } from 'react';
     )
 }
 export default Carousel;
-

src/components/Description.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Description(props) {
+  return (
+    <li> {props.description} </li>
+  );
+}
+
+export default Description;

src/components/NavBar.js

@@ -28,4 +28,4 @@ import React, { Component } from 'react';
         </div>
     </nav>)
 }
-export default NavBar;
+export default NavBar;

src/components/ProductDetail.js

@@ -1,20 +1,25 @@
 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" />);
   }
 
+  function toggle() {
+    this.setState({isShown: !this.state.isShown});
+  }
+
   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>{description}
           </p>
         </div>
         <div className="ratings">
@@ -23,6 +28,7 @@ function ProductDetail(props) {
             {stars}
           </p>
         </div>
+        <Reviews reviews={reviews} toggle={toggle} />
       </div>
     </div>
   );

src/components/Reviews.js

@@ -0,0 +1,35 @@
+import React, {Component} from "react";
+import Description from "./Description";
+
+class Reviews extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      isShown: false
+    };
+  }
+  render() {
+    const numOfReviews = this.props.reviews.length;
+    let reviewText = "";
+    if (numOfReviews > 1) {
+      reviewText = "reviews";
+    } else {
+      reviewText = "review";
+    }
+    const listOfDescriptions = this.props.reviews.map(review => {
+      return <Description description={review.description} />;
+    });
+
+    const list = this.state.isShown ? listOfDescriptions : "";
+    return (
+      <div>
+        <button onClick={() => {
+          this.setState({isShown: !this.state.isShown});
+        }}>{numOfReviews} {reviewText}</button>
+        <ol>{list}</ol>
+      </div>
+    );
+  }
+}
+
+export default Reviews;