From 5d5a9565e05e5fc73bb5266d9a106482cf9d92bd Mon Sep 17 00:00:00 2001 From: Mark Hinojosa Date: Tue, 23 Jan 2018 20:10:19 -0600 Subject: [PATCH 1/5] edited --- src/App.js | 243 ++++--------------------------------- src/modules/Carousel.js | 38 ++++++ src/modules/Fifth-prod.js | 30 +++++ src/modules/First-prod.js | 30 +++++ src/modules/Footer.js | 20 +++ src/modules/Fourth-prod.js | 29 +++++ src/modules/Left-column.js | 17 +++ src/modules/Navbar.js | 40 ++++++ src/modules/Second-prod.js | 30 +++++ src/modules/Sixth-prod.js | 13 ++ src/modules/Third-prod.js | 29 +++++ 11 files changed, 302 insertions(+), 217 deletions(-) create mode 100644 src/modules/Carousel.js create mode 100644 src/modules/Fifth-prod.js create mode 100644 src/modules/First-prod.js create mode 100644 src/modules/Footer.js create mode 100644 src/modules/Fourth-prod.js create mode 100644 src/modules/Left-column.js create mode 100644 src/modules/Navbar.js create mode 100644 src/modules/Second-prod.js create mode 100644 src/modules/Sixth-prod.js create mode 100644 src/modules/Third-prod.js diff --git a/src/App.js b/src/App.js index 4139cab..97dff3f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,231 +1,40 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import Navbar from './modules/Navbar'; +import LeftColumn from './modules/Left-column'; +import Carousel from './modules/Carousel'; +import FirstProduct from './modules/First-prod'; +import SecondProduct from './modules/Second-prod'; +import ThirdProduct from './modules/Third-prod'; +import FourthProduct from './modules/Fourth-prod'; +import FifthProduct from './modules/Fifth-prod'; +import SixthProduct from './modules/Sixth-prod'; +import Foot from './modules/Footer'; function App() { return ( -
- - - - -
- -
- -
-

Shop Name

- -
- -
- -
- -
- -
- -
- +
+ +
- -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
+ +
+ +
+ + + + + +
- -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
- -
-

Like this template? -

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
-
-
- -
- -
- -
- -
- - -
-
-
-

Copyright © Your Website 2014

-
+
+
-
- -
-
+
); } diff --git a/src/modules/Carousel.js b/src/modules/Carousel.js new file mode 100644 index 0000000..59ce56a --- /dev/null +++ b/src/modules/Carousel.js @@ -0,0 +1,38 @@ +import React from 'react'; + +const Carousel = () => { + return ( +
+ +
+ +
+ +
+ ) +} + +export default Carousel; \ No newline at end of file diff --git a/src/modules/Fifth-prod.js b/src/modules/Fifth-prod.js new file mode 100644 index 0000000..4d45168 --- /dev/null +++ b/src/modules/Fifth-prod.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const FifthProduct = () => { + return ( + +
+
+ +
+

$94.99

+

Fifth Product +

+

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

18 reviews

+

+ + + + + +

+
+
+
+ ) +} + +export default FifthProduct; \ No newline at end of file diff --git a/src/modules/First-prod.js b/src/modules/First-prod.js new file mode 100644 index 0000000..090ff9a --- /dev/null +++ b/src/modules/First-prod.js @@ -0,0 +1,30 @@ +import React from 'react'; + + +const FirstProduct = () => { + return ( +
+
+ +
+

$24.99

+

First Product +

+

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

+
+
+

15 reviews

+

+ + + + + +

+
+
+
+ ) +} + +export default FirstProduct; \ No newline at end of file diff --git a/src/modules/Footer.js b/src/modules/Footer.js new file mode 100644 index 0000000..bd30fa1 --- /dev/null +++ b/src/modules/Footer.js @@ -0,0 +1,20 @@ +import React from 'react'; + +const Foot = () => { + return ( +
+
+ + +
+
+
+

Copyright © Your Website 2014

+
+
+
+
+ ) +} + +export default Foot; \ No newline at end of file diff --git a/src/modules/Fourth-prod.js b/src/modules/Fourth-prod.js new file mode 100644 index 0000000..3936e66 --- /dev/null +++ b/src/modules/Fourth-prod.js @@ -0,0 +1,29 @@ +import React from 'react'; + +const FourthProduct = () => { + return ( +
+
+ +
+

$84.99

+

Fourth Product +

+

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

6 reviews

+

+ + + + + +

+
+
+
+ ) +} + +export default FourthProduct; \ No newline at end of file diff --git a/src/modules/Left-column.js b/src/modules/Left-column.js new file mode 100644 index 0000000..5217b78 --- /dev/null +++ b/src/modules/Left-column.js @@ -0,0 +1,17 @@ +import React from 'react'; + +const LeftColumn = () => { + +return ( +
+

Shop Name

+ +
+) +} + +export default LeftColumn; \ No newline at end of file diff --git a/src/modules/Navbar.js b/src/modules/Navbar.js new file mode 100644 index 0000000..39f2964 --- /dev/null +++ b/src/modules/Navbar.js @@ -0,0 +1,40 @@ +import React from 'react'; + +const navbar = () => { + return ( + + + + ) +} + +export default navbar; \ No newline at end of file diff --git a/src/modules/Second-prod.js b/src/modules/Second-prod.js new file mode 100644 index 0000000..14538c0 --- /dev/null +++ b/src/modules/Second-prod.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const SecondProduct = () => { + return ( +
+
+ +
+

$64.99

+

Second Product +

+

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

12 reviews

+

+ + + + + +

+
+
+
+ + ) +} + +export default SecondProduct; \ No newline at end of file diff --git a/src/modules/Sixth-prod.js b/src/modules/Sixth-prod.js new file mode 100644 index 0000000..11b2ef7 --- /dev/null +++ b/src/modules/Sixth-prod.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const SixthProduct = () => { + return ( + +
+

Like this template?

+

If you like this template, then check out this tutorial on how to build a working review system for your online store!

+ View Tutorial +
+) +} +export default SixthProduct; \ No newline at end of file diff --git a/src/modules/Third-prod.js b/src/modules/Third-prod.js new file mode 100644 index 0000000..bce3b96 --- /dev/null +++ b/src/modules/Third-prod.js @@ -0,0 +1,29 @@ +import React from 'react'; + +const ThirdProduct = () => { + return ( +
+
+ +
+

$74.99

+

Third Product +

+

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

31 reviews

+

+ + + + + +

+
+
+
+ ) +} + +export default ThirdProduct; \ No newline at end of file From eedd9c45d56d4553a1cc33727e08b356f3ea018d Mon Sep 17 00:00:00 2001 From: Mark Hinojosa Date: Thu, 25 Jan 2018 13:42:28 -0600 Subject: [PATCH 2/5] edited --- .vscode/settings.json | 2 ++ src/App.js | 55 ++++++++++++++++++-------------------- src/index.js | 4 +-- src/modules/Fifth-prod.js | 30 --------------------- src/modules/First-prod.js | 30 --------------------- src/modules/Fourth-prod.js | 29 -------------------- src/modules/ProductBox.js | 29 ++++++++++++++++++++ src/modules/Second-prod.js | 30 --------------------- src/modules/Sixth-prod.js | 13 --------- src/modules/Third-prod.js | 29 -------------------- 10 files changed, 59 insertions(+), 192 deletions(-) create mode 100644 .vscode/settings.json delete mode 100644 src/modules/Fifth-prod.js delete mode 100644 src/modules/First-prod.js delete mode 100644 src/modules/Fourth-prod.js create mode 100644 src/modules/ProductBox.js delete mode 100644 src/modules/Second-prod.js delete mode 100644 src/modules/Sixth-prod.js delete mode 100644 src/modules/Third-prod.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 97dff3f..cb1efb2 100644 --- a/src/App.js +++ b/src/App.js @@ -3,39 +3,36 @@ import './App.css'; import Navbar from './modules/Navbar'; import LeftColumn from './modules/Left-column'; import Carousel from './modules/Carousel'; -import FirstProduct from './modules/First-prod'; -import SecondProduct from './modules/Second-prod'; -import ThirdProduct from './modules/Third-prod'; -import FourthProduct from './modules/Fourth-prod'; -import FifthProduct from './modules/Fifth-prod'; -import SixthProduct from './modules/Sixth-prod'; +import ProductBox from './modules/ProductBox'; import Foot from './modules/Footer'; +{/* { + const test = + props.products.products.map( + (cur, ind) => { + return + } + ) -function App() { - return ( -
- -
-
- -
- -
- - - - - - -
-
-
-
-
- + return ( +
+ +
+
+ +
+ +
+ {test}
+
- ); +
+
+ +
+
+ ); } export default App; diff --git a/src/index.js b/src/index.js index e58303d..cfe2989 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,6 @@ import './index.css'; import state from './state'; ReactDOM.render( - , + , document.getElementById('root') -); +); \ No newline at end of file diff --git a/src/modules/Fifth-prod.js b/src/modules/Fifth-prod.js deleted file mode 100644 index 4d45168..0000000 --- a/src/modules/Fifth-prod.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -const FifthProduct = () => { - return ( - -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
- ) -} - -export default FifthProduct; \ No newline at end of file diff --git a/src/modules/First-prod.js b/src/modules/First-prod.js deleted file mode 100644 index 090ff9a..0000000 --- a/src/modules/First-prod.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - - -const FirstProduct = () => { - return ( -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
-
-
- ) -} - -export default FirstProduct; \ No newline at end of file diff --git a/src/modules/Fourth-prod.js b/src/modules/Fourth-prod.js deleted file mode 100644 index 3936e66..0000000 --- a/src/modules/Fourth-prod.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -const FourthProduct = () => { - return ( -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- ) -} - -export default FourthProduct; \ No newline at end of file diff --git a/src/modules/ProductBox.js b/src/modules/ProductBox.js new file mode 100644 index 0000000..8073332 --- /dev/null +++ b/src/modules/ProductBox.js @@ -0,0 +1,29 @@ +import React from 'react'; + +const FirstProduct = (props) => { + return ( +
+
+ +
+

{props.product.price}

+

{props.product.name} +

+

{props.product.description}

+
+
+

{props.product.reviews} reviews

+

+ + + + + +

+
+
+
+ ) +} + +export default FirstProduct; \ No newline at end of file diff --git a/src/modules/Second-prod.js b/src/modules/Second-prod.js deleted file mode 100644 index 14538c0..0000000 --- a/src/modules/Second-prod.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -const SecondProduct = () => { - return ( -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
-
-
- - ) -} - -export default SecondProduct; \ No newline at end of file diff --git a/src/modules/Sixth-prod.js b/src/modules/Sixth-prod.js deleted file mode 100644 index 11b2ef7..0000000 --- a/src/modules/Sixth-prod.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -const SixthProduct = () => { - return ( - -
-

Like this template?

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
-) -} -export default SixthProduct; \ No newline at end of file diff --git a/src/modules/Third-prod.js b/src/modules/Third-prod.js deleted file mode 100644 index bce3b96..0000000 --- a/src/modules/Third-prod.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -const ThirdProduct = () => { - return ( -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- ) -} - -export default ThirdProduct; \ No newline at end of file From 5ddeaac164131b6be1b057a37ed7173c635aa7e9 Mon Sep 17 00:00:00 2001 From: Mark Hinojosa Date: Thu, 25 Jan 2018 13:43:57 -0600 Subject: [PATCH 3/5] removed unnecessary code --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index cb1efb2..e361b6c 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import LeftColumn from './modules/Left-column'; import Carousel from './modules/Carousel'; import ProductBox from './modules/ProductBox'; import Foot from './modules/Footer'; -{/* { const test = props.products.products.map( From 077e340fad3d19e17ba6fcbb8ee7f3ee9eed0a53 Mon Sep 17 00:00:00 2001 From: Mark Hinojosa Date: Fri, 26 Jan 2018 17:38:21 -0600 Subject: [PATCH 4/5] added search bar --- package.json | 7 +++-- src/App.js | 2 ++ src/modules/Left-column.js | 2 ++ src/modules/Search.js | 9 ++++++ yarn.lock | 61 ++++++++++++++++++++++++++++++++++++-- 5 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 src/modules/Search.js diff --git a/package.json b/package.json index 38a96cb..48f282d 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,3 @@ - { "name": "advanced-homework-1", "version": "0.1.0", @@ -14,7 +13,9 @@ "foreman": "^2.0.0", "json-server": "^0.9.6", "react": "^15.5.4", - "react-dom": "^15.5.4" + "react-dom": "^15.5.4", + "semantic-ui-css": "^2.2.12", + "semantic-ui-react": "^0.77.2" }, "scripts": { "start": "nf start", @@ -25,4 +26,4 @@ "test": "npm run lint && react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index e361b6c..2007b50 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import Carousel from './modules/Carousel'; import ProductBox from './modules/ProductBox'; import Foot from './modules/Footer'; + const App = (props) => { const test = props.products.products.map( @@ -20,6 +21,7 @@ const App = (props) => {
+
diff --git a/src/modules/Left-column.js b/src/modules/Left-column.js index 5217b78..8b30cc1 100644 --- a/src/modules/Left-column.js +++ b/src/modules/Left-column.js @@ -1,4 +1,5 @@ import React from 'react'; +import SearchBar from './Search'; const LeftColumn = () => { @@ -10,6 +11,7 @@ return ( Category 2 Category 3
+
) } diff --git a/src/modules/Search.js b/src/modules/Search.js new file mode 100644 index 0000000..211f662 --- /dev/null +++ b/src/modules/Search.js @@ -0,0 +1,9 @@ +import React from 'react'; +import 'semantic-ui-css/semantic.min.css'; +import { Input } from 'semantic-ui-react'; + +const SearchBar = () => ( + +) + +export default SearchBar; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b9e4fc3..c08d839 100644 --- a/yarn.lock +++ b/yarn.lock @@ -878,6 +878,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0: core-js "^2.4.0" regenerator-runtime "^0.10.0" +babel-runtime@^6.25.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333" @@ -1179,6 +1186,10 @@ clap@^1.0.9: dependencies: chalk "^1.1.3" +classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.0.x: version "4.0.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.11.tgz#a6d88bffb399420b24298db49d99a1ed067534a8" @@ -2258,6 +2269,18 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0: dependencies: bser "1.0.2" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.9: version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" @@ -3285,6 +3308,10 @@ jodid25519@^1.0.0: dependencies: jsbn "~0.1.0" +jquery@x.*: + version "3.3.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" + js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" @@ -3580,7 +3607,7 @@ lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0: +lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -3588,7 +3615,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -3937,7 +3964,7 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@4.1.1, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0: +object-assign@4.1.1, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -4475,6 +4502,14 @@ promise@7.1.1, promise@^7.1.1: dependencies: asap "~2.0.3" +prop-types@^15.5.10: + version "15.6.0" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + prop-types@^15.5.7, prop-types@~15.5.7: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" @@ -4737,6 +4772,10 @@ regenerator-runtime@^0.10.0: version "0.10.3" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e" +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + regenerator-transform@0.9.8: version "0.9.8" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c" @@ -4942,6 +4981,22 @@ sax@^1.2.1, sax@~1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828" +semantic-ui-css@^2.2.12: + version "2.2.12" + resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.2.12.tgz#afc462e5bb4f8a0dcfe3dca11274499a997490dd" + dependencies: + jquery x.* + +semantic-ui-react@^0.77.2: + version "0.77.2" + resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.77.2.tgz#c4cf0e3cd5590c906f4d655d163ac5969acd359b" + dependencies: + babel-runtime "^6.25.0" + classnames "^2.2.5" + fbjs "^0.8.16" + lodash "^4.17.4" + prop-types "^15.5.10" + semver-diff@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36" From 00612824970bd7685b7f3c7ae6102208aaeab2a3 Mon Sep 17 00:00:00 2001 From: Mark Hinojosa Date: Sat, 27 Jan 2018 18:05:33 -0600 Subject: [PATCH 5/5] added star mapping --- src/App.js | 6 +++--- src/modules/ProductBox.js | 17 ++++++++++++----- src/modules/Search.js | 3 ++- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 2007b50..dee747c 100644 --- a/src/App.js +++ b/src/App.js @@ -8,10 +8,10 @@ import Foot from './modules/Footer'; const App = (props) => { - const test = + const items = props.products.products.map( (cur, ind) => { - return + return } ) @@ -25,7 +25,7 @@ const App = (props) => {
- {test} + {items}
diff --git a/src/modules/ProductBox.js b/src/modules/ProductBox.js index 8073332..e8b694c 100644 --- a/src/modules/ProductBox.js +++ b/src/modules/ProductBox.js @@ -1,6 +1,16 @@ import React from 'react'; const FirstProduct = (props) => { + + const stars = props.product.rating + const displayStars = () => { + const starArr = []; + for(let i = 0; i < stars; i++){ + starArr.push() + } + return starArr; + } + return (
@@ -14,11 +24,8 @@ const FirstProduct = (props) => {

{props.product.reviews} reviews

- - - - - + {displayStars()} +

diff --git a/src/modules/Search.js b/src/modules/Search.js index 211f662..b9c559c 100644 --- a/src/modules/Search.js +++ b/src/modules/Search.js @@ -2,8 +2,9 @@ import React from 'react'; import 'semantic-ui-css/semantic.min.css'; import { Input } from 'semantic-ui-react'; + const SearchBar = () => ( - + ) export default SearchBar; \ No newline at end of file