From a8e89d45a8fb321a09c1ebb887d03c784654e426 Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Sat, 13 May 2017 16:24:56 -0500 Subject: [PATCH 1/2] upload 1 --- README.md | 4 +- src/App.js | 81 ++++++++++++++++----------- src/components/Carousel.js | 3 +- src/components/Footer.js | 6 +- src/components/NavBar.js | 4 +- src/components/ProductDetail-original | 36 ++++++++++++ src/components/ProductDetail.js | 78 ++++++++++++++++++-------- src/components/Review.js | 47 ++++++++++++++++ 8 files changed, 193 insertions(+), 66 deletions(-) create mode 100644 src/components/ProductDetail-original create mode 100644 src/components/Review.js 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..89311f6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,39 +1,54 @@ -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..102cafe 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,30 +1,60 @@ -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} +

+
+
+

15 reviews

+ { + 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..6354232 --- /dev/null +++ b/src/components/Review.js @@ -0,0 +1,47 @@ +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.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; From b3b33e8aff4b5d57dac83ea8a6b8ff40f1741257 Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Sat, 13 May 2017 17:32:17 -0500 Subject: [PATCH 2/2] num of reviews --- src/App.js | 3 ++- src/components/ProductDetail.js | 5 +++-- src/components/Review.js | 19 ++++++++++--------- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 89311f6..883d5b6 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,8 @@ function App(props) { return ( + key={prod.id} + /> ); }); diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 102cafe..3d1308b 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -36,10 +36,11 @@ class ProductDetail extends Component {

-

15 reviews

+ { + toggleReview={() => { this.toggleReview(); }} product={this.props.product} /> diff --git a/src/components/Review.js b/src/components/Review.js index 6354232..e19268d 100644 --- a/src/components/Review.js +++ b/src/components/Review.js @@ -21,20 +21,21 @@ class Review extends Component { }); // end of return } // end of function - render() { // console.log(this.props.product) - if (this.state.reviews <= 1) { - this.setState({ - reviewText: "Nothing" - }); // turning it "true" - } + if (this.state.reviews <= 1) { + this.setState({ + reviewText: "Nothing" + }); // turning it "true" + } return ( +
- {this.state.review} {this.state.reviewText} - {this.props.showReview && this.showReviewDetail()} + {this.state.review} {this.props.product.reviews.length} {this.state.reviewText} + {this.props.showReview && this.showReviewDetail()} +
- ); //end of return + ); // end of return } // end of return } // end of render