From e00d537d0c21c1230e7ad0ef2864df85dd4780c3 Mon Sep 17 00:00:00 2001 From: RX7RUSS Date: Sat, 6 May 2017 11:44:13 -0500 Subject: [PATCH 1/4] Simple Change --- src/App.js | 2 +- yarn.lock | 10 +++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 8dfa97f..cb7ce3d 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ function App (props) {
-

Shop Name

+

Advanced State Practice

Category 1 Category 2 diff --git a/yarn.lock b/yarn.lock index 5390255..88ac4d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2570,11 +2570,11 @@ got@^5.0.0: unzip-response "^1.0.2" url-parse-lax "^1.0.0" -graceful-fs@4.1.10: +graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9: version "4.1.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131" -graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9: +graceful-fs@^4.1.11: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" @@ -4557,14 +4557,10 @@ q-io@1.13.2: qs "^1.2.1" url2 "^0.0.0" -q@1.4.1: +q@1.4.1, q@^1.0.1, q@^1.1.2: version "1.4.1" resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e" -q@^1.0.1, q@^1.1.2: - version "1.5.0" - resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1" - qs@6.4.0, qs@~6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" From 8201014b5c725c101b433c6fb4d112c60656d7c9 Mon Sep 17 00:00:00 2001 From: RX7RUSS Date: Wed, 10 May 2017 15:41:57 -0500 Subject: [PATCH 2/4] Reviews Added to State Practice --- src/components/ProductDetail.js | 6 +++++- src/components/Reviews.js | 36 +++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/components/Reviews.js diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 885919a..7372015 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,4 +1,5 @@ import React from "react"; +import Reviews from './Reviews.js'; function ProductDetail(props) { const {name,description,rating,imgUrl} = props.product; @@ -14,7 +15,7 @@ function ProductDetail(props) {

{name}

-

{description} +

{description}

@@ -22,6 +23,9 @@ function ProductDetail(props) {

{stars}

+

+ {Reviews} +

diff --git a/src/components/Reviews.js b/src/components/Reviews.js new file mode 100644 index 0000000..75ae21f --- /dev/null +++ b/src/components/Reviews.js @@ -0,0 +1,36 @@ +import React from "react"; + +class Reviews extends React.Component { + constructor() { + super(); + this.state = {visible: true}; + } + render(props) { + let reviewList = ""; + if (this.state.visible) { + reviewList = this.props.reviews.map((review) => { + return
+ {review.description} +
; + }); + } + + + return
+ + {reviewList} +
; + } + + + + + +} + +export default Reviews; From 38f9896ffc7bb1466f88a685e4a36e808e9dd6d3 Mon Sep 17 00:00:00 2001 From: RX7RUSS Date: Tue, 16 May 2017 18:34:58 -0500 Subject: [PATCH 3/4] Reviews and App Change --- src/App.js | 24 +++++++++++++----------- src/components/Reviews.js | 7 ++++--- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index cb7ce3d..d6082ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,16 @@ -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) { +import React from "react"; +import "./App.css"; +import NavBar from "./components/NavBar"; +import Footer from "./components/Footer"; +import ProductDetail from "./components/ProductDetail"; +import Carousel from "./components/Carousel"; - var products = props.state.products.map(function(prod){ - return ; - }); + +function App(props) { + + const products = props.state.products.map(function (prod) { + return ; + }); return (
@@ -36,4 +37,5 @@ function App (props) { ); } + export default App; diff --git a/src/components/Reviews.js b/src/components/Reviews.js index 75ae21f..b3d4763 100644 --- a/src/components/Reviews.js +++ b/src/components/Reviews.js @@ -1,11 +1,12 @@ -import React from "react"; +import React, {Component} from "react"; -class Reviews extends React.Component { + +class Reviews extends Component { constructor() { super(); this.state = {visible: true}; } - render(props) { + render() { let reviewList = ""; if (this.state.visible) { reviewList = this.props.reviews.map((review) => { From d6e2260474f2ec1942a201688e8f0e7b4d515a8e Mon Sep 17 00:00:00 2001 From: RX7RUSS Date: Mon, 29 May 2017 09:19:44 -0500 Subject: [PATCH 4/4] Problems Fixed --- src/App.js | 55 +++++++++++++---------- src/components/ProductDetail.js | 79 ++++++++++++++++++++++----------- src/components/Reviews.js | 60 ++++++++++++++----------- src/state.js | 22 ++++----- 4 files changed, 128 insertions(+), 88 deletions(-) diff --git a/src/App.js b/src/App.js index d6082ef..ec38ec6 100644 --- a/src/App.js +++ b/src/App.js @@ -4,38 +4,45 @@ import NavBar from "./components/NavBar"; import Footer from "./components/Footer"; import ProductDetail from "./components/ProductDetail"; import Carousel from "./components/Carousel"; - +import PropTypes from "prop-types"; function App(props) { const products = props.state.products.map(function (prod) { - return ; - }); return ( -
- -
-
-
-

Advanced State Practice

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

Shop Name

+ -
- ); +
+ +
+ {products} +
+
+
+
+
+
+ ); } +App.propTypes = { + state: PropTypes.object.isRequired +}; export default App; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 7372015..62761b1 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,34 +1,59 @@ -import React from "react"; -import Reviews from './Reviews.js'; +import React, {Component} from "react"; +import Reviews from "./Reviews"; +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(); +class ProductDetail extends Component { + constructor(props) { + super(props); + this.state = { + showReviews: false + }; } - return ( -
-
- -
-

{name} -

-

{description} -

-
-
-

15 reviews

-

- {stars} -

-

- {Reviews} -

+ displayStars() { + const stars = []; + for (let i = 0; i < this.props.product.rating; i++) { + stars.push(); + } + return stars; + } + + toggleReviews() { + this.setState({ + showReviews: !this.state.showReviews + }); + } + + render() { + return ( +
+
+ +
+

{this.props.product.name} +

+

{this.props.product.description} +

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

+ {this.displayStars()} +

+
-
- ); + ); + } } + +ProductDetail.propTypes = { + product: PropTypes.object.isRequired, +}; + export default ProductDetail; diff --git a/src/components/Reviews.js b/src/components/Reviews.js index b3d4763..f660f53 100644 --- a/src/components/Reviews.js +++ b/src/components/Reviews.js @@ -1,37 +1,45 @@ import React, {Component} from "react"; - +import PropTypes from "prop-types"; class Reviews extends Component { - constructor() { - super(); - this.state = {visible: true}; + constructor(props) { + super(props); + this.state = { + reviews: this.props.product.reviews, + reviewText: "Reviews", + reviewDetails: this.props.product.reviewDetails + }; + } + + showReviewDetails() { + return this.state.reviewDetails.map((each, index) => { + return ( +

+ {each.description} +

+ ); + }); } + render() { - let reviewList = ""; - if (this.state.visible) { - reviewList = this.props.reviews.map((review) => { - return
- {review.description} -
; + if (this.state.reviews <= 1) { + this.setState({ + reviewText: "Review" }); } - - - return
- - {reviewList} -
; + return ( +
+ {this.state.reviews} {this.state.reviewText} + {this.props.showReviews && this.showReviewDetails()} +
+ ); } - - - - - } +Reviews.propTypes = { + showReviews: PropTypes.bool.isRequired, + toggleReviews: PropTypes.func.isRequired, + product: PropTypes.object.isRequired +}; + export default Reviews; diff --git a/src/state.js b/src/state.js index badf378..b8c0ab9 100644 --- a/src/state.js +++ b/src/state.js @@ -9,7 +9,7 @@ export default { "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", "price": "$95.11", "category": "food", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -49,7 +49,7 @@ export default { "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff", "price": "$37.09", "category": "food", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -75,7 +75,7 @@ export default { "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000", "price": "$51.83", "category": "food", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -95,7 +95,7 @@ export default { "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff", "price": "$86.93", "category": "electronics", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -115,7 +115,7 @@ export default { "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff", "price": "$70.10", "category": "electronics", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -135,7 +135,7 @@ export default { "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", "price": "$39.25", "category": "electronics", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -155,7 +155,7 @@ export default { "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff", "price": "$99.91", "category": "sporting", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -175,7 +175,7 @@ export default { "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", "price": "$67.17", "category": "sporting", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -195,7 +195,7 @@ export default { "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff", "price": "$96.84", "category": "sporting", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 }, { @@ -215,10 +215,10 @@ export default { "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", "price": "$74.37", "category": "sporting", - "reviews": [{ + "reviewDetails": [{ "description": "architect revolutionary deliverables", "rating": 2 } ] }] -} \ No newline at end of file +};