From 0c30df0b157f017e37fca32adca4a91d586f32b2 Mon Sep 17 00:00:00 2001 From: Jonathan Gucciardi Date: Thu, 27 Apr 2017 09:34:46 -0500 Subject: [PATCH 1/2] First commit, test --- src/components/Carousel.js | 61 +++++++++++++++++++------------------- yarn.lock | 10 ++----- 2 files changed, 33 insertions(+), 38 deletions(-) diff --git a/src/components/Carousel.js b/src/components/Carousel.js index a10b02b..6ed519c 100644 --- a/src/components/Carousel.js +++ b/src/components/Carousel.js @@ -1,36 +1,35 @@ import React, { Component } from 'react'; - function Carousel(){ - return ( -
-
- -
+function Carousel() { + return ( +
+
+ +
+
+ ) } export default Carousel; - 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 1b034fbab75130a4a7d0c73753f61d1083fb8991 Mon Sep 17 00:00:00 2001 From: Jonathan Gucciardi Date: Sat, 29 Apr 2017 11:34:14 -0500 Subject: [PATCH 2/2] State updated, ES6 constructor working --- src/App.js | 2 ++ src/components/ProductDetail.js | 9 ++++-- src/components/StateTests.js | 41 +++++++++++++++++++++++++ src/components/reviews.js | 54 +++++++++++++++++++++++++++++++++ 4 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 src/components/StateTests.js create mode 100644 src/components/reviews.js diff --git a/src/App.js b/src/App.js index 8dfa97f..29bdbd5 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,8 @@ import NavBar from './components/NavBar'; import Footer from './components/Footer'; import ProductDetail from './components/ProductDetail'; import Carousel from './components/Carousel'; +import reviews from "./components/reviews"; + function App (props) { var products = props.state.products.map(function(prod){ diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 885919a..3fbbd12 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,7 +1,8 @@ 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(); @@ -14,14 +15,16 @@ function ProductDetail(props) {

{name}

-

{description} +

{description}

-

15 reviews

{stars}

+

+ +

diff --git a/src/components/StateTests.js b/src/components/StateTests.js new file mode 100644 index 0000000..5943bb2 --- /dev/null +++ b/src/components/StateTests.js @@ -0,0 +1,41 @@ +/* import React from "react"; + testing code for ways to initiate the state*/ + +// this.state = is way to handle state with ES6 constructors + +/* Code I use in reviews.js */ + +/* class Reviews extends React.Component { + constructor(props) { + super(); + this.state = { + submit: false, + }; + + + later I call the state with a return statement and use a div + return ( +
+ { + this.setState({ + submit: !this.state.submit}); + }}>{displayTag} + {divReview} +
+ } +} + +tested code: + +/* if you want use the state right away, better to set to variable*/ + +/* const submit = false; + +this.state.submit = false; +this.forceUpdate(); update state right away + +this.setState({submit: true}); + + if(submit) { + //code that will use submit + }*/ diff --git a/src/components/reviews.js b/src/components/reviews.js new file mode 100644 index 0000000..080b54a --- /dev/null +++ b/src/components/reviews.js @@ -0,0 +1,54 @@ +import React from "react"; + +class Reviews extends React.Component { + constructor(props) { + super(); + this.state = { + submit: false, + }; + + } + render() { + function Stars(value) { + const arr = []; + for (let i = 0; i < value; i++) { + arr.push() + } + return arr; + } + const stateOfReview = this.props.products; + let divReview = ""; + let displayTag; + + if (stateOfReview.length > 1) { displayTag = "Reviews" } + else { displayTag = "Review"; } + + if (this.state.submit) { + divReview = stateOfReview.map(function (type, index) { + return ( +
+
+

{type.description}

{Stars(type.rating)}

+
+ ); + }); + } + else { + divReview = ""; + } + return ( +
+ { + this.setState({ + submit: !this.state.submit}); + }}>{displayTag} + {divReview} + +
+ ); + } +} + + + +export default Reviews;