From a900dce8b32f63a8135389bb8b0c47f126dcedc5 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 30 Aug 2017 19:28:54 -0500 Subject: [PATCH 1/3] initial commit --- README.md | 3 ++- src/components/Reviews.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/components/Reviews.js diff --git a/README.md b/README.md index 258a878..a509f82 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ #### Setup +DONE Fork, clone, run yarn install, yarn start, pull request #### Do @@ -9,4 +10,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 \ No newline at end of file + * When clicked again, hide the reviews diff --git a/src/components/Reviews.js b/src/components/Reviews.js new file mode 100644 index 0000000..d00d503 --- /dev/null +++ b/src/components/Reviews.js @@ -0,0 +1,11 @@ +import React from "react"; + +class Reviews extends React.Component { + constructor () { + super(); + } + + render () { + + } +} From 4322e90c41698e08692d4a80428da2c08edf4a05 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Wed, 30 Aug 2017 20:24:25 -0500 Subject: [PATCH 2/3] reviews need work, almost done --- README.md | 5 ++++- src/App.js | 2 +- src/components/ProductDetail.js | 11 ++++++---- src/components/Reviews.js | 39 ++++++++++++++++++++++++++++----- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a509f82..af1e53d 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,14 @@ DONE Fork, clone, run yarn install, yarn start, pull request #### Do +DONE * Add a new class component for Reviews + DONE * 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 + * 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 diff --git a/src/App.js b/src/App.js index 8dfa97f..d37bf15 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ import Carousel from './components/Carousel'; function App (props) { var products = props.state.products.map(function(prod){ - return ; + return ; }); return (
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 885919a..716564e 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,10 +1,12 @@ 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(); + stars.push(); + console.log("what is this?",props); } return ( @@ -14,11 +16,12 @@ function ProductDetail(props) {

{name}

-

{description} +

{description}

-

15 reviews

+

+

{stars}

diff --git a/src/components/Reviews.js b/src/components/Reviews.js index d00d503..28506a2 100644 --- a/src/components/Reviews.js +++ b/src/components/Reviews.js @@ -1,11 +1,40 @@ import React from "react"; -class Reviews extends React.Component { - constructor () { - super(); +class Reviews extends React.Component{ + constructor (props) { + super(props); + this.state = { + visible: false, + } } +// Default to hidden, changing state below to effect change when toggled + toggleHide() { + this.setState({visible: !this.state.visible}); + } + + render() { + let plural = ""; + if (this.props.product.reviews.length > 1) { + plural = "s"; + } + const reviewsDiv = this.props.product.reviews.map((review) => { + return ( +
+

Rating: {review.rating}

+
+ ) + } + ); +return ( +
+
{ + this.toggleHide() + }}>{this.props.product.reviews.length} review{plural}
- render () { - + {this.state.hidden ?
: reviewsDiv } +
+ ) } } + +export default Reviews; From 1b6cf463911e262ec468e1db25a65fccd3763ecf Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Thu, 31 Aug 2017 00:21:30 -0500 Subject: [PATCH 3/3] state practice finished --- README.md | 9 ++++-- src/components/ProductDetail.js | 2 +- src/components/Reviews.js | 53 +++++++++++++++++---------------- 3 files changed, 36 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index af1e53d..dbca118 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,17 @@ Fork, clone, run yarn install, yarn start, pull request #### Do DONE * Add a new class component for Reviews - DONE +DONE * Make sure to use extends and super - +DONE * Import and use this component in ProductDetail +DONE * This component will take a product from props +DONE * It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews + DONE * It will create a list of the reviews description which will initially be hidden + DONE * When the word "review" is clicked show the reviews + DONE * When clicked again, hide the reviews diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 716564e..c22c9e3 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -21,7 +21,7 @@ function ProductDetail(props) {

- +

{stars}

diff --git a/src/components/Reviews.js b/src/components/Reviews.js index 28506a2..f504a99 100644 --- a/src/components/Reviews.js +++ b/src/components/Reviews.js @@ -5,36 +5,39 @@ class Reviews extends React.Component{ super(props); this.state = { visible: false, - } + }; + this.handleReviewClick = this.handleReviewClick.bind(this); } -// Default to hidden, changing state below to effect change when toggled - toggleHide() { - this.setState({visible: !this.state.visible}); + + handleReviewClick() { + this.setState(function(prevState) { + return { + visible: !prevState.visible + } + }); } render() { - let plural = ""; - if (this.props.product.reviews.length > 1) { - plural = "s"; - } - const reviewsDiv = this.props.product.reviews.map((review) => { - return ( -
-

Rating: {review.rating}

-
- ) - } - ); -return ( -
-
{ - this.toggleHide() - }}>{this.props.product.reviews.length} review{plural}
+ let reviews = this.props.product; + let numOfReviews = reviews.length; + + const reviewDiv = reviews.map((review) => { + if(this.state.visible) { + return ( +
+

{review.description} {review.rating}

+
+ ) + } + }); - {this.state.hidden ?
: reviewsDiv } -
- ) + return ( +
+ {numOfReviews} review{numOfReviews <= 1 ? " " : "s" } +
{reviewDiv}
+
+ ); + } } -} export default Reviews;