diff --git a/README.md b/README.md index 258a878..93752dd 100644 --- a/README.md +++ b/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 \ No newline at end of file + * When clicked again, hide the reviews diff --git a/src/App.js b/src/App.js index 8dfa97f..883d5b6 100644 --- a/src/App.js +++ b/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 ; - }); +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 ( -
- -
-
-
-

Shop Name

- -
-
- -
- {products} -
-
-
+ + ); + + }); + + return ( +
+ +
+
+
+

Shop Name

+ -
- ); +
+
+ + + {products} +
+
+
+
+
+
+ ); } +App.propTypes = { + state: PropTypes.object +}; + export default App; diff --git a/src/components/Carousel.js b/src/components/Carousel.js index a10b02b..b4717d2 100644 --- a/src/components/Carousel.js +++ b/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; - diff --git a/src/components/Footer.js b/src/components/Footer.js index b1cffbd..116f9ff 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,7 +1,7 @@ -import React, { Component } from 'react'; +import React from 'react'; function Footer(){ - return ( + return (
@@ -14,4 +14,4 @@ function Footer(){
) } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 0fc4200..4de36b3 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; function NavBar(){ return (
) } -export default NavBar; \ No newline at end of file +export default NavBar; diff --git a/src/components/ProductDetail-original b/src/components/ProductDetail-original new file mode 100644 index 0000000..e38b778 --- /dev/null +++ b/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(); + } + + return ( +
+
+ +
+

{name} +

+

{description} +

+
+
+

15 reviews

+

+ {stars} +

+
+
+
+ ); +} + +ProductDetail.propTypes = { + product: PropTypes.object +}; + +export default ProductDetail; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 885919a..3d1308b 100644 --- a/src/components/ProductDetail.js +++ b/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(); +class ProductDetail extends Component { + constructor(props) { + super(props); + this.state = { + showReview: false + }; } - return ( -
-
- -
-

{name} -

-

{description} -

-
-
-

15 reviews

-

- {stars} -

+ showStars() { + const stars = []; + for (let i = 0; i < this.props.product.rating; i++) { + stars.push(); + } + return stars; + } + + toggleReview() { + this.setState({ + showReview: !this.state.showReview + }); + } +// const {name,description,rating,imgUrl} = props.product; + render() { + return ( +
+
+ +
+

{this.props.product.name} +

+

{this.props.product.description} +

+
+
+ + { + this.toggleReview(); + }} + product={this.props.product} /> +

+ {this.showStars()} +

+
-
- ); -} + ); + } // end of return +} // end of render + +ProductDetail.propTypes = { + product: PropTypes.object +}; + export default ProductDetail; diff --git a/src/components/Review.js b/src/components/Review.js new file mode 100644 index 0000000..e19268d --- /dev/null +++ b/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 ( +

+ {this.state.reviewDetails[index].description} +

+ ); // 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 ( +
+
+ {this.state.review} {this.props.product.reviews.length} {this.state.reviewText} + {this.props.showReview && this.showReviewDetail()} +
+
+ ); // end of return + } // end of return +} // end of render + + +Review.propTypes = { + product: PropTypes.object, + toggleReview: PropTypes.func +}; + +export default Review;