nick.rodriguez.atx.advanced.1

README.md

@@ -7,6 +7,6 @@ Fork, clone, run yarn install, yarn start, pull request
  * 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
+ * It will create a list of the reviews description which will initially be hidden
  * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
+ * When clicked again, hide the reviews

src/App.js

@@ -1,39 +1,55 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-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} />;
-    });
+import React from "react";
+import PropTypes from "prop-types";
+// import logo from "./logo.svg";
+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) {
+
+  const products = props.state.products.map(function (prod) {
+  //  console.log(prod.id)
     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>
+      <ProductDetail
+        product={prod}
+        key={prod.id}
+        />
+    );
+
+  });
+
+  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">
+            <div className="row">
+              <Carousel />
+
+              {products}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
 }
 
+App.propTypes = {
+  state: PropTypes.object
+};
+
 export default App;

src/components/Carousel.js

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

src/components/Footer.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 function Footer(){
-     return (    
+     return (
      <div className="container">
         <hr/>
         <footer>
@@ -14,4 +14,4 @@ function Footer(){
     </div>
     )
 }
-export default Footer;
+export default Footer;

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

src/components/ProductDetail-original

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+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" />);
+  }
+
+  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>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ProductDetail.propTypes = {
+  product: PropTypes.object
+};
+
+export default ProductDetail;

src/components/ProductDetail.js

@@ -1,30 +1,61 @@
-import React from "react";
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import Review from "./Review";
 
-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" />);
+class ProductDetail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showReview: false
+    };
   }
 
-  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>
+  showStars() {
+    const stars = [];
+    for (let i = 0; i < this.props.product.rating; i++) {
+      stars.push(<span className="glyphicon glyphicon-star" />);
+    }
+    return stars;
+  }
+
+  toggleReview() {
+    this.setState({
+      showReview: !this.state.showReview
+    });
+  }
+//  const {name,description,rating,imgUrl} = props.product;
+  render() {
+    return (
+      <div className="col-sm-4 col-lg-4 col-md-4">
+        <div className="thumbnail">
+          <img style={{width: "320px",height: "150px"}} src={this.props.product.imgUrl} alt="" />
+          <div className="caption">
+            <h4><a href="#">{this.props.product.name}</a>
+            </h4>
+            <p>{this.props.product.description}
+            </p>
+          </div>
+          <div className="ratings">
+
+            <Review
+              numReview={this.numberOfReviews}
+              showReview={this.state.showReview}
+              toggleReview={() => {
+                this.toggleReview();
+              }}
+              product={this.props.product} />
+            <p>
+              {this.showStars()}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  );
-}
+    );
+  } // end of return
+} // end of render
+
+ProductDetail.propTypes = {
+  product: PropTypes.object
+};
+
 export default ProductDetail;

src/components/Review.js

@@ -0,0 +1,48 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+class Review extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      review: this.props.product.review,
+      reviewText: "Reviews",
+      reviewDetails: this.props.product.reviews
+    };
+  }
+
+  showReviewDetail() {
+    return this.state.reviewDetails.map((reviewDetails,index) => {
+      return (
+        <p key={index}>
+          {this.state.reviewDetails[index].description}
+        </p>
+      ); // end of map
+    }); // end of return
+  } // end of function
+
+  render() {
+// console.log(this.props.product)
+    if (this.state.reviews <= 1) {
+      this.setState({
+        reviewText: "Nothing"
+      }); // turning it "true"
+    }
+    return (
+      <div>
+        <div onClick={this.props.toggleReview}>
+          {this.state.review} {this.props.product.reviews.length} {this.state.reviewText} 
+          {this.props.showReview && this.showReviewDetail()}
+        </div>
+      </div>
+    ); // end of return
+  } // end of return
+} // end of render
+
+
+Review.propTypes = {
+  product: PropTypes.object,
+  toggleReview: PropTypes.func
+};
+
+export default Review;