diff --git a/.eslintrc b/.eslintrc index ee54d86..38bd8a9 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,238 +1,240 @@ { - "parser": "babel-eslint", + "parser": "babel-eslint", - "plugins": [ - "babel", - "eslint-plugin-react", - "react" - ], + "plugins": ["babel", "eslint-plugin-react", "react"], - "extends": ["eslint:recommended", "plugin:react/recommended"], + "extends": ["eslint:recommended", "plugin:react/recommended"], - "env": { - "browser": true, - "es6": true, - "node": true - }, + "env": { + "browser": true, + "es6": true, + "node": true + }, - "ecmaFeatures": { - "arrowFunctions": true, - "binaryLiterals": true, - "blockBindings": true, - "classes": true, - "defaultParams": true, - "destructuring": true, - "experimentalObjectRestSpread": true, - "forOf": true, - "generators": true, - "globalReturn": true, - "jsx": true, - "modules": true, - "objectLiteralComputedProperties": true, - "objectLiteralDuplicateProperties": true, - "objectLiteralShorthandMethods": true, - "objectLiteralShorthandProperties": true, - "octalLiterals": true, - "regexUFlag": true, - "regexYFlag": true, - "restParams": true, - "spread": true, - "superInFunctions": true, - "templateStrings": true, - "unicodeCodePointEscapes": true - }, + "ecmaFeatures": { + "arrowFunctions": true, + "binaryLiterals": true, + "blockBindings": true, + "classes": true, + "defaultParams": true, + "destructuring": true, + "experimentalObjectRestSpread": true, + "forOf": true, + "generators": true, + "globalReturn": true, + "jsx": true, + "modules": true, + "objectLiteralComputedProperties": true, + "objectLiteralDuplicateProperties": true, + "objectLiteralShorthandMethods": true, + "objectLiteralShorthandProperties": true, + "octalLiterals": true, + "regexUFlag": true, + "regexYFlag": true, + "restParams": true, + "spread": true, + "superInFunctions": true, + "templateStrings": true, + "unicodeCodePointEscapes": true + }, - "rules": { - "babel/arrow-parens": [2, "as-needed"], - "babel/array-bracket-spacing": [2, "always"], - "babel/generator-star-spacing": [2, {"before": true, "after": false}], - "array-bracket-spacing": 0, - "generator-star-spacing": 0, + "rules": { + "babel/arrow-parens": [2, "as-needed"], + "babel/array-bracket-spacing": [2, "always"], + "babel/generator-star-spacing": [2, { "before": true, "after": false }], + "array-bracket-spacing": 0, + "generator-star-spacing": 0, - "arrow-spacing": 2, - "block-scoped-var": 0, - "brace-style": [2, "1tbs", {"allowSingleLine": true}], - "callback-return": 2, - "camelcase": [2, {"properties": "always"}], - "comma-dangle": 0, - "comma-spacing": 0, - "comma-style": [2, "last"], - "complexity": 0, - "computed-property-spacing": [2, "never"], - "consistent-return": 0, - "consistent-this": 0, - "curly": [2, "all"], - "default-case": 0, - "dot-location": [2, "property"], - "dot-notation": 0, - "eol-last": 2, - "eqeqeq": 2, - "func-names": 0, - "func-style": 0, - "guard-for-in": 2, - "handle-callback-err": [2, "error"], - "id-length": 0, - "id-match": [2, "^(?:_?[a-zA-Z0-9]*)|[_A-Z0-9]+$"], - "indent": [2, 2, {"SwitchCase": 1}], - "init-declarations": 0, - "key-spacing": [2, {"beforeColon": false, "afterColon": true}], - "keyword-spacing": 2, - "linebreak-style": 2, - "lines-around-comment": 0, - "max-depth": 0, - "max-len": [2, 100, 4, {"ignoreUrls": true}], - "max-nested-callbacks": 0, - "max-params": 0, - "max-statements": 0, - "new-cap": 0, - "new-parens": 2, - "newline-after-var": 0, - "no-alert": 2, - "no-array-constructor": 2, - "no-bitwise": 0, - "no-caller": 2, - "no-catch-shadow": 0, - "no-class-assign": 2, - "no-cond-assign": 2, - "no-console": 1, - "no-const-assign": 2, - "no-constant-condition": 2, - "no-continue": 0, - "no-control-regex": 0, - "no-debugger": 1, - "no-delete-var": 2, - "no-div-regex": 2, - "no-dupe-args": 2, - "no-dupe-keys": 2, - "no-duplicate-case": 2, - "no-else-return": 2, - "no-empty": 2, - "no-empty-character-class": 2, - "no-eq-null": 0, - "no-eval": 2, - "no-ex-assign": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-extra-boolean-cast": 2, - "no-extra-parens": 0, - "no-extra-semi": 2, - "no-fallthrough": 2, - "no-floating-decimal": 2, - "no-func-assign": 2, - "no-implicit-coercion": 2, - "no-implied-eval": 2, - "no-inline-comments": 0, - "no-inner-declarations": [2, "functions"], - "no-invalid-regexp": 2, - "no-invalid-this": 0, - "no-irregular-whitespace": 2, - "no-iterator": 2, - "no-label-var": 2, - "no-labels": [2, {"allowLoop": true}], - "no-lone-blocks": 2, - "no-lonely-if": 2, - "no-loop-func": 0, - "no-mixed-requires": [2, true], - "no-mixed-spaces-and-tabs": 2, - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-multiple-empty-lines": 0, - "no-native-reassign": 0, - "no-negated-in-lhs": 2, - "no-nested-ternary": 0, - "no-new": 2, - "no-new-func": 0, - "no-new-object": 2, - "no-new-require": 2, - "no-new-wrappers": 2, - "no-obj-calls": 2, - "no-octal": 2, - "no-octal-escape": 2, - "no-param-reassign": 2, - "no-path-concat": 2, - "no-plusplus": 0, - "no-process-env": 0, - "no-process-exit": 0, - "no-proto": 2, - "no-redeclare": 2, - "no-regex-spaces": 2, - "no-restricted-modules": 0, - "no-return-assign": 2, - "no-script-url": 2, - "no-self-compare": 0, - "no-sequences": 2, - "no-shadow": 2, - "no-shadow-restricted-names": 2, - "no-spaced-func": 2, - "no-sparse-arrays": 2, - "no-sync": 2, - "no-ternary": 0, - "no-this-before-super": 2, - "no-throw-literal": 2, - "no-undef": 2, - "no-undef-init": 2, - "no-undefined": 0, - "no-underscore-dangle": 0, - "no-unexpected-multiline": 2, - "no-unneeded-ternary": 2, - "no-unreachable": 2, - "no-unused-expressions": 2, - "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], - "no-use-before-define": 0, - "no-useless-call": 2, - "no-var": 2, - "no-void": 2, - "no-warning-comments": 0, - "no-with": 2, - "object-curly-spacing": [0, "always"], - "object-shorthand": [2, "always"], - "one-var": [2, "never"], - "operator-assignment": [2, "always"], - "operator-linebreak": [2, "after"], - "padded-blocks": 0, - "prefer-const": 2, - "prefer-reflect": 0, - "prefer-spread": 0, - "quote-props": [2, "as-needed"], - "quotes": [2, "double"], - "radix": 2, - "require-yield": 2, - "semi": [2, "always"], - "semi-spacing": [2, {"before": false, "after": true}], - "sort-vars": 0, - "space-before-blocks": [2, "always"], - "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], - "space-in-parens": 0, - "space-infix-ops": [2, {"int32Hint": false}], - "space-unary-ops": [2, {"words": true, "nonwords": false}], - "spaced-comment": [2, "always"], - "strict": 0, - "use-isnan": 2, - "valid-jsdoc": 0, - "valid-typeof": 2, - "vars-on-top": 0, - "wrap-iife": 2, - "wrap-regex": 0, - "yoda": [2, "never", {"exceptRange": true}], + "arrow-spacing": 2, + "block-scoped-var": 0, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "callback-return": 2, + "camelcase": [2, { "properties": "always" }], + "comma-dangle": 0, + "comma-spacing": 0, + "comma-style": [2, "last"], + "complexity": 0, + "computed-property-spacing": [2, "never"], + "consistent-return": 0, + "consistent-this": 0, + "curly": [2, "all"], + "default-case": 0, + "dot-location": [2, "property"], + "dot-notation": 0, + "eol-last": 2, + "eqeqeq": 2, + "func-names": 0, + "func-style": 0, + "guard-for-in": 2, + "handle-callback-err": [2, "error"], + "id-length": 0, + "id-match": [2, "^(?:_?[a-zA-Z0-9]*)|[_A-Z0-9]+$"], + "indent": [2, 2, { "SwitchCase": 1 }], + "init-declarations": 0, + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "keyword-spacing": 2, + "linebreak-style": 2, + "lines-around-comment": 0, + "max-depth": 0, + "max-len": [2, 100, 4, { "ignoreUrls": true }], + "max-nested-callbacks": 0, + "max-params": 0, + "max-statements": 0, + "new-cap": 0, + "new-parens": 2, + "newline-after-var": 0, + "no-alert": 2, + "no-array-constructor": 2, + "no-bitwise": 0, + "no-caller": 2, + "no-catch-shadow": 0, + "no-class-assign": 2, + "no-cond-assign": 2, + "no-console": 1, + "no-const-assign": 2, + "no-constant-condition": 2, + "no-continue": 0, + "no-control-regex": 0, + "no-debugger": 1, + "no-delete-var": 2, + "no-div-regex": 2, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-else-return": 2, + "no-empty": 2, + "no-empty-character-class": 2, + "no-eq-null": 0, + "no-eval": 2, + "no-ex-assign": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 0, + "no-extra-semi": 2, + "no-fallthrough": 2, + "no-floating-decimal": 2, + "no-func-assign": 2, + "no-implicit-coercion": 2, + "no-implied-eval": 2, + "no-inline-comments": 0, + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": 2, + "no-invalid-this": 0, + "no-irregular-whitespace": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": [2, { "allowLoop": true }], + "no-lone-blocks": 2, + "no-lonely-if": 2, + "no-loop-func": 0, + "no-mixed-requires": [2, true], + "no-mixed-spaces-and-tabs": 2, + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-multiple-empty-lines": 0, + "no-native-reassign": 0, + "no-negated-in-lhs": 2, + "no-nested-ternary": 0, + "no-new": 2, + "no-new-func": 0, + "no-new-object": 2, + "no-new-require": 2, + "no-new-wrappers": 2, + "no-obj-calls": 2, + "no-octal": 2, + "no-octal-escape": 2, + "no-param-reassign": 2, + "no-path-concat": 2, + "no-plusplus": 0, + "no-process-env": 0, + "no-process-exit": 0, + "no-proto": 2, + "no-redeclare": 2, + "no-regex-spaces": 2, + "no-restricted-modules": 0, + "no-return-assign": 2, + "no-script-url": 2, + "no-self-compare": 0, + "no-sequences": 2, + "no-shadow": 2, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-sparse-arrays": 2, + "no-sync": 2, + "no-ternary": 0, + "no-this-before-super": 2, + "no-throw-literal": 2, + "no-undef": 2, + "no-undef-init": 2, + "no-undefined": 0, + "no-underscore-dangle": 0, + "no-unexpected-multiline": 2, + "no-unneeded-ternary": 2, + "no-unreachable": 2, + "no-unused-expressions": 2, + "no-unused-vars": [2, { "vars": "all", "args": "after-used" }], + "no-use-before-define": 0, + "no-useless-call": 2, + "no-var": 2, + "no-void": 2, + "no-warning-comments": 0, + "no-with": 2, + "object-curly-spacing": [0, "always"], + "object-shorthand": [2, "always"], + "one-var": [2, "never"], + "operator-assignment": [2, "always"], + "operator-linebreak": [2, "after"], + "padded-blocks": 0, + "prefer-const": 2, + "prefer-reflect": 0, + "prefer-spread": 0, + "quote-props": [2, "as-needed"], + "quotes": [2, "single"], + "radix": 2, + "require-yield": 2, + "semi": [2, "always"], + "semi-spacing": [2, { "before": false, "after": true }], + "sort-vars": 0, + "space-before-blocks": [2, "always"], + "space-before-function-paren": [ + 2, + { "anonymous": "always", "named": "never" } + ], + "space-in-parens": 0, + "space-infix-ops": [2, { "int32Hint": false }], + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-comment": [2, "always"], + "strict": 0, + "use-isnan": 2, + "valid-jsdoc": 0, + "valid-typeof": 2, + "vars-on-top": 0, + "wrap-iife": 2, + "wrap-regex": 0, + "yoda": [2, "never", { "exceptRange": true }], - "react/jsx-key": 2, - "react/jsx-no-duplicate-props": 2, - "react/jsx-no-undef": 2, - "react/jsx-pascal-case": ["error", {"allowAllCaps": false}], - "react/jsx-space-before-closing": [0, "never"], - "react/jsx-tag-spacing" : [ "error", { - closingSlash : "never", - beforeSelfClosing : "always", - afterOpening : "never", - }], - "jsx-quotes": [2, "prefer-double"], - "react/jsx-boolean-value": 2, - "react/jsx-curly-spacing": [2, "never"], - "react/jsx-equals-spacing": [2, "never"], - "react/jsx-indent": [2, 2], - "react/jsx-indent-props": [2, 2], - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/self-closing-comp": 2 - } + "react/jsx-key": 2, + "react/jsx-no-duplicate-props": 2, + "react/jsx-no-undef": 2, + "react/jsx-pascal-case": ["error", { "allowAllCaps": false }], + "react/jsx-space-before-closing": [0, "never"], + "react/jsx-tag-spacing": [ + "error", + { + closingSlash: "never", + beforeSelfClosing: "always", + afterOpening: "never" + } + ], + "jsx-quotes": [2, "prefer-double"], + "react/jsx-boolean-value": 2, + "react/jsx-curly-spacing": [2, "never"], + "react/jsx-equals-spacing": [2, "never"], + "react/jsx-indent": [2, 2], + "react/jsx-indent-props": [2, 2], + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/self-closing-comp": 2 + } } diff --git a/README.md b/README.md index a6ae27c..fc18478 100644 --- a/README.md +++ b/README.md @@ -3,21 +3,21 @@ Fork, Clone, yarn install, yarn start ### Do * Take the html out of the App component and put in separate components - * Header - look for div with a className of "top-header" - * Footer - look for div with a className of "footer" - * ImageSlider - look for div with className of "image-slider" - * ProductDetail - look for div with className of "grid_1_of_5" - * Use PropTypes to require a prop "product" + * Header - look for div with a className of "top-header" -DONE + * Footer - look for div with a className of "footer" - DONE + * ImageSlider - look for div with className of "image-slider" - DONE + * ProductDetail - look for div with className of "grid_1_of_5" - DONE + * Use PropTypes to require a prop "product" - DONE * Use product prop to populate the UI instead of hard coded - * SubHeader - look for div with className of "sub-header" - * TopNav - look for div with className of "top-nav" -* Make sure to import and use all these components back in App -* Create a variable in index.js called currentCategory and set it to "tires" -* Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render() -* Send the changeCategory function to App and then to the TopNav component by way of props -* Send the currentCategory to App by way of props -* App should use the currentCategory value to filter the array of products by category and then map over them to create ProductDetail components -* Modify TopNav - * Remove existing href and replace with "#" - * Register onClick for the links, make sure to use arrow function. Make sure to preventDefault. - * In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link + * SubHeader - look for div with className of "sub-header" - DONE + * TopNav - look for div with className of "top-nav" -DONE +* Make sure to import and use all these components back in App - DONE +* Create a variable in index.js called currentCategory and set it to "tires" - DONE +* Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render() -DONE +* Send the changeCategory function to App and then to the TopNav component by way of props - DONE +* Send the currentCategory to App by way of props - DONE +* App should use the currentCategory value to filter the array of products by category and then map over them to create ProductDetail components - DONE +* Modify TopNav - DONE + * Remove existing href and replace with "#" - DONE + * Register onClick for the links, make sure to use arrow function. Make sure to preventDefault. - DONE + * In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link - DONE diff --git a/src/App.js b/src/App.js index 4513d4b..4d921b8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,210 +1,140 @@ -import React from "react"; -import "./App.css"; +import React from 'react'; +import PropTypes from 'prop-types'; +import Footer from './components/Footer'; +import Header from './components/Header'; +import ImageSlider from './components/ImageSlider'; +import SubHeader from './components/SubHeader'; +import ProductDetail from './components/ProductDetail'; +import TopNav from './components/TopNav'; +import './App.css'; function App(props) { - return ( -
-
- -
- -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
-
-
-
- -
-
- - -
-
-
-
-
- -
- -
- - -
- -
    -
    • -
    • -
    • -
- -
- -
-
-
-
FEATURED PRODUCTS
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$500.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
-
-
-
Our Specials
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$600.00$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$352.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00$202.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$322.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$700.00$602.00

- -
-
-
-
-
-
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
-
- + const filteredCategory = props.state.products.filter(product => { + return product.category === props.currentCategory; + }); + const itemDetails = filteredCategory.map((product, i) => { + return ; + }); + + return ( +
+
+
+
+
+ +
+ +
+ + + +
+
+
+
+ FEATURED PRODUCTS +
+
{itemDetails}
+
+
+
+ Our Specials +
+
+
+ +

Lorem Ipsum is simply

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, in + reprehenderit. +

+

+ $600.00$512.00 +

+
+ + Read More + +
+
+
+ +

Lorem Ipsum is simply

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, in + reprehenderit. +

+

+ $400.00$352.00 +

+
+ + Read More + +
+
+
+ +

Lorem Ipsum is simply

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, in + reprehenderit. +

+

+ $300.00$202.00 +

+
+ + Read More + +
+
+
+ +

Lorem Ipsum is simply

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, in + reprehenderit. +

+

+ $400.00$322.00 +

+
+ + Read More + +
+
+
+ +

Lorem Ipsum is simply

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, in + reprehenderit. +

+

+ $700.00$602.00 +

+
+ + Read More + +
+
+
+
+
+
+
+
- ); +
+ ); } +App.propTypes = { + state: PropTypes.object, + changeCategory: PropTypes.func +}; export default App; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..3b2e811 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,100 @@ +import React from 'react'; + +const Footer = () => { + return ( +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+ +

+ Design by W3layouts +

+
+
+
+ ); +}; + +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js index f882be0..9668f48 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,41 @@ -import React from "react"; +import React from 'react'; function Header() { - return (
); + return ( +
+
+ +
+
+
    +
  • + CURRENCY: +
    • +
  • + +
    • +
+
+
+
+ ); } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..afbb3e0 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,21 @@ +import React from 'react'; + +const ImageSlider = () => { + return ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ ); +}; + +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..668796c --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const ProductDetail = props => { + return ( +
+ +

{props.product.name}

+

{props.product.description}

+

{props.product.price}

+
+ + Read More + +
+
+ ); +}; + +ProductDetail.propTypes = { + product: PropTypes.object.isRequired +}; + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..653dd45 --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,33 @@ +import React from 'react'; + +const SubHeader = () => { + return ( +
+
+ + + +
+
+ + + +
+
+
+ ); +}; + +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..572fea6 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +function TopNav(props) { + return ( +
+ +
+ ); +} + +TopNav.propTypes = { + changeCategory: PropTypes.func +}; +export default TopNav; diff --git a/src/index.js b/src/index.js index 34d8803..6be55b5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,23 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; -import "./index.css"; -import state from "./state"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import './index.css'; +import state from './state'; -function render() { +let currentCategory = 'tires'; +const changeCategory = category => { + currentCategory = category; + render(); +}; + +function render(props) { ReactDOM.render( - , - document.getElementById("root") + , + document.getElementById('root') ); } render(); - diff --git a/src/state.js b/src/state.js index 4f52c2c..17daccf 100644 --- a/src/state.js +++ b/src/state.js @@ -1,272 +1,308 @@ export default { - products:[{ - "id": 1, - "name": "Namfix", - "description": "Extraction of Nasal Turbinate, Open Approach", - "price": "$23.85", - "imgUrl": "/images/t1.jpg", - "category": "tires", - "rating": 3, - "reviews": 5 -}, { - "id": 2, - "name": "Opela", - "description": "Insert Spacer in R Finger Phalanx Jt, Perc Endo", - "price": "$0.63", - "imgUrl": "/images/t2.jpg", - "category": "tires", - "rating": 3, - "reviews": 4 -}, { - "id": 3, - "name": "Tampflex", - "description": "Excision of Pudendal Nerve, Percutaneous Approach, Diagn", - "price": "$79.50", - "imgUrl": "/images/t3.jpg", - "category": "tires", - "rating": 1, - "reviews": 1 -}, { - "id": 4, - "name": "Aerified", - "description": "Repair Prepuce, Percutaneous Endoscopic Approach", - "price": "$19.76", - "imgUrl": "/images/t4.jpg", - "category": "tires", - "rating": 3, - "reviews": 4 -}, { - "id": 5, - "name": "Y-Solowarm", - "description": "Repair Right Pleura, Percutaneous Approach", - "price": "$10.39", - "imgUrl": "/images/t5.jpg", - "category": "tires", - "rating": 1, - "reviews": 4 -}, { - "id": 6, - "name": "Trippledex", - "description": "Bypass Left Kidney Pelvis to Ileum, Perc Endo Approach", - "price": "$76.24", - "imgUrl": "/images/b1.jpg", - "category": "bumpers", - "rating": 1, - "reviews": 4 -}, { - "id": 7, - "name": "Flowdesk", - "description": "Excision of Right Inguinal Lymphatic, Open Approach", - "price": "$29.81", - "imgUrl": "/images/b2.jpg", - "category": "bumpers", - "rating": 3, - "reviews": 3 -}, { - "id": 8, - "name": "Temp", - "description": "Dilate L Int Iliac Art, Bifurc, w 3 Drug-elut, Perc", - "price": "$2.07", - "imgUrl": "/images/b3.jpg", - "category": "bumpers", - "rating": 3, - "reviews": 5 -}, { - "id": 9, - "name": "Ventosanzap", - "description": "Drainage of Right Lower Lung Lobe, Via Opening", - "price": "$57.59", - "imgUrl": "/images/b4.jpg", - "category": "bumpers", - "rating": 2, - "reviews": 4 -}, { - "id": 10, - "name": "Aerified", - "description": "Removal of Infusion Device from Mediastinum, Open Approach", - "price": "$89.68", - "imgUrl": "/images/b5.jpg", - "category": "bumpers", - "rating": 2, - "reviews": 1 -}, { - "id": 11, - "name": "Stringtough", - "description": "Revision of Radioactive Element in Abd Wall, Open Approach", - "price": "$28.78", - "imgUrl": "/images/a1.jpg", - "category": "audio", - "rating": 2, - "reviews": 3 -}, { - "id": 12, - "name": "Zaam-Dox", - "description": "Restriction of R Lg Intest with Intralum Dev, Perc Approach", - "price": "$46.67", - "imgUrl": "/images/a2.jpg", - "category": "audio", - "rating": 3, - "reviews": 4 -}, { - "id": 13, - "name": "Asoka", - "description": "Excision of Upper Tooth, Open Approach, Single", - "price": "$35.28", - "imgUrl": "/images/a3.jpg", - "category": "audio", - "rating": 1, - "reviews": 5 -}, { - "id": 14, - "name": "Hatity", - "description": "Insert Infusion Dev ", - "price": "$51.42", - "imgUrl": "/images/g1.jpg", - "category": "engine", - "rating": 1, - "reviews": 2 -}, { - "id": 15, - "name": "Bamity", - "description": "Excision of Left Testis, Percutaneous Endoscopic Approach", - "price": "$83.34", - "imgUrl": "/images/g2.jpg", - "category": "engine", - "rating": 4, - "reviews": 2 -}, { - "id": 16, - "name": "Temp", - "description": "LDR Brachytherapy of Trachea using Palladium 103", - "price": "$29.93", - "imgUrl": "/images/g3.jpg", - "category": "engine", - "rating": 5, - "reviews": 3 -}, { - "id": 17, - "name": "Aerified", - "description": "Revision of Spacer in L Finger Phalanx Jt, Extern Approach", - "price": "$77.88", - "imgUrl": "/images/g4.jpg", - "category": "engine", - "rating": 2, - "reviews": 2 -}, { - "id": 18, - "name": "Overhold", - "description": "Drainage of Left Upper Leg Tendon, Perc Endo Approach, Diagn", - "price": "$16.28", - "imgUrl": "/images/g5.jpg", - "category": "engine", - "rating": 4, - "reviews": 3 -}, { - "id": 19, - "name": "Andalax", - "description": "Release Left Subclavian Vein, Percutaneous Approach", - "price": "$65.18", - "imgUrl": "/images/g6.jpg", - "category": "engine", - "rating": 5, - "reviews": 2 -}, { - "id": 20, - "name": "Latlux", - "description": "Excision of Left Kidney, Percutaneous Endoscopic Approach", - "price": "$34.48", - "imgUrl": "/images/g7.jpg", - "category": "engine", - "rating": 2, - "reviews": 2 -}, { - "id": 21, - "name": "Flowdesk", - "description": "Revision of Drain Dev in L Metacarpophal Jt, Open Approach", - "price": "$21.31", - "imgUrl": "/images/g8.jpg", - "category": "engine", - "rating": 3, - "reviews": 2 -}, { - "id": 22, - "name": "Tresom", - "description": "Dilate of L Low Lobe Bronc with Intralum Dev, Perc Approach", - "price": "$4.03", - "imgUrl": "/images/g9.jpg", - "category": "engine", - "rating": 4, - "reviews": 2 -}, { - "id": 23, - "name": "Voyatouch", - "description": "Removal of Synth Sub from R Pleural Cav, Perc Endo Approach", - "price": "$90.33", - "imgUrl": "/images/g10.jpg", - "category": "engine", - "rating": 2, - "reviews": 5 -}, { - "id": 24, - "name": "Solarbreeze", - "description": "Bypass L Subclav Art to Low Arm Vein w Autol Art, Open", - "price": "$10.92", - "imgUrl": "/images/h1.jpg", - "category": "headlights", - "rating": 5, - "reviews": 1 -}, { - "id": 25, - "name": "Konklux", - "description": "Restriction of Left Main Bronchus, Via Opening", - "price": "$72.31", - "imgUrl": "/images/h2.jpg", - "category": "headlights", - "rating": 2, - "reviews": 4 -}, { - "id": 26, - "name": "Latlux", - "description": "Insertion of Infusion Dev into Fem Perineum, Open Approach", - "price": "$33.06", - "imgUrl": "/images/h3.jpg", - "category": "headlights", - "rating": 2, - "reviews": 5 -}, { - "id": 27, - "name": "Stim", - "description": "Transfer Olfact Nrv to Trochlear Nrv, Perc Endo Approach", - "price": "$69.86", - "imgUrl": "/images/h4.jpg", - "category": "headlights", - "rating": 2, - "reviews": 5 -}, { - "id": 28, - "name": "Greenlam", - "description": "Bypass L Innom Vein to Up Vein w Autol Sub, Perc Endo", - "price": "$63.77", - "imgUrl": "/images/h5.jpg", - "category": "headlights", - "rating": 5, - "reviews": 3 -}, { - "id": 29, - "name": "Fintone", - "description": "Beam Radiation using Photons 1 - 10 MeV", - "price": "$26.56", - "imgUrl": "/images/t6.jpg", - "category": "tires", - "rating": 5, - "reviews": 5 -}, { - "id": 30, - "name": "Stim", - "description": "Ultrasonography of Right Lower Extremity Veins, Guidance", - "price": "$47.57", - "imgUrl": "/images/t7.jpg", - "category": "tires", - "rating": 2, - "reviews": 1 -}]}; \ No newline at end of file + products: [ + { + id: 1, + name: 'Namfix', + description: 'Extraction of Nasal Turbinate, Open Approach', + price: '$23.85', + imgUrl: '/images/t1.jpg', + category: 'tires', + rating: 3, + reviews: 5 + }, + { + id: 2, + name: 'Opela', + description: 'Insert Spacer in R Finger Phalanx Jt, Perc Endo', + price: '$0.63', + imgUrl: '/images/t2.jpg', + category: 'tires', + rating: 3, + reviews: 4 + }, + { + id: 3, + name: 'Tampflex', + description: 'Excision of Pudendal Nerve, Percutaneous Approach, Diagn', + price: '$79.50', + imgUrl: '/images/t3.jpg', + category: 'tires', + rating: 1, + reviews: 1 + }, + { + id: 4, + name: 'Aerified', + description: 'Repair Prepuce, Percutaneous Endoscopic Approach', + price: '$19.76', + imgUrl: '/images/t4.jpg', + category: 'tires', + rating: 3, + reviews: 4 + }, + { + id: 5, + name: 'Y-Solowarm', + description: 'Repair Right Pleura, Percutaneous Approach', + price: '$10.39', + imgUrl: '/images/t5.jpg', + category: 'tires', + rating: 1, + reviews: 4 + }, + { + id: 6, + name: 'Trippledex', + description: 'Bypass Left Kidney Pelvis to Ileum, Perc Endo Approach', + price: '$76.24', + imgUrl: '/images/b1.jpg', + category: 'bumpers', + rating: 1, + reviews: 4 + }, + { + id: 7, + name: 'Flowdesk', + description: 'Excision of Right Inguinal Lymphatic, Open Approach', + price: '$29.81', + imgUrl: '/images/b2.jpg', + category: 'bumpers', + rating: 3, + reviews: 3 + }, + { + id: 8, + name: 'Temp', + description: 'Dilate L Int Iliac Art, Bifurc, w 3 Drug-elut, Perc', + price: '$2.07', + imgUrl: '/images/b3.jpg', + category: 'bumpers', + rating: 3, + reviews: 5 + }, + { + id: 9, + name: 'Ventosanzap', + description: 'Drainage of Right Lower Lung Lobe, Via Opening', + price: '$57.59', + imgUrl: '/images/b4.jpg', + category: 'bumpers', + rating: 2, + reviews: 4 + }, + { + id: 10, + name: 'Aerified', + description: 'Removal of Infusion Device from Mediastinum, Open Approach', + price: '$89.68', + imgUrl: '/images/b5.jpg', + category: 'bumpers', + rating: 2, + reviews: 1 + }, + { + id: 11, + name: 'Stringtough', + description: 'Revision of Radioactive Element in Abd Wall, Open Approach', + price: '$28.78', + imgUrl: '/images/a1.jpg', + category: 'audio', + rating: 2, + reviews: 3 + }, + { + id: 12, + name: 'Zaam-Dox', + description: + 'Restriction of R Lg Intest with Intralum Dev, Perc Approach', + price: '$46.67', + imgUrl: '/images/a2.jpg', + category: 'audio', + rating: 3, + reviews: 4 + }, + { + id: 13, + name: 'Asoka', + description: 'Excision of Upper Tooth, Open Approach, Single', + price: '$35.28', + imgUrl: '/images/a3.jpg', + category: 'audio', + rating: 1, + reviews: 5 + }, + { + id: 14, + name: 'Hatity', + description: 'Insert Infusion Dev ', + price: '$51.42', + imgUrl: '/images/g1.jpg', + category: 'engine', + rating: 1, + reviews: 2 + }, + { + id: 15, + name: 'Bamity', + description: 'Excision of Left Testis, Percutaneous Endoscopic Approach', + price: '$83.34', + imgUrl: '/images/g2.jpg', + category: 'engine', + rating: 4, + reviews: 2 + }, + { + id: 16, + name: 'Temp', + description: 'LDR Brachytherapy of Trachea using Palladium 103', + price: '$29.93', + imgUrl: '/images/g3.jpg', + category: 'engine', + rating: 5, + reviews: 3 + }, + { + id: 17, + name: 'Aerified', + description: 'Revision of Spacer in L Finger Phalanx Jt, Extern Approach', + price: '$77.88', + imgUrl: '/images/g4.jpg', + category: 'engine', + rating: 2, + reviews: 2 + }, + { + id: 18, + name: 'Overhold', + description: + 'Drainage of Left Upper Leg Tendon, Perc Endo Approach, Diagn', + price: '$16.28', + imgUrl: '/images/g5.jpg', + category: 'engine', + rating: 4, + reviews: 3 + }, + { + id: 19, + name: 'Andalax', + description: 'Release Left Subclavian Vein, Percutaneous Approach', + price: '$65.18', + imgUrl: '/images/g6.jpg', + category: 'engine', + rating: 5, + reviews: 2 + }, + { + id: 20, + name: 'Latlux', + description: 'Excision of Left Kidney, Percutaneous Endoscopic Approach', + price: '$34.48', + imgUrl: '/images/g7.jpg', + category: 'engine', + rating: 2, + reviews: 2 + }, + { + id: 21, + name: 'Flowdesk', + description: 'Revision of Drain Dev in L Metacarpophal Jt, Open Approach', + price: '$21.31', + imgUrl: '/images/g8.jpg', + category: 'engine', + rating: 3, + reviews: 2 + }, + { + id: 22, + name: 'Tresom', + description: + 'Dilate of L Low Lobe Bronc with Intralum Dev, Perc Approach', + price: '$4.03', + imgUrl: '/images/g9.jpg', + category: 'engine', + rating: 4, + reviews: 2 + }, + { + id: 23, + name: 'Voyatouch', + description: + 'Removal of Synth Sub from R Pleural Cav, Perc Endo Approach', + price: '$90.33', + imgUrl: '/images/g10.jpg', + category: 'engine', + rating: 2, + reviews: 5 + }, + { + id: 24, + name: 'Solarbreeze', + description: 'Bypass L Subclav Art to Low Arm Vein w Autol Art, Open', + price: '$10.92', + imgUrl: '/images/h1.jpg', + category: 'headlights', + rating: 5, + reviews: 1 + }, + { + id: 25, + name: 'Konklux', + description: 'Restriction of Left Main Bronchus, Via Opening', + price: '$72.31', + imgUrl: '/images/h2.jpg', + category: 'headlights', + rating: 2, + reviews: 4 + }, + { + id: 26, + name: 'Latlux', + description: 'Insertion of Infusion Dev into Fem Perineum, Open Approach', + price: '$33.06', + imgUrl: '/images/h3.jpg', + category: 'headlights', + rating: 2, + reviews: 5 + }, + { + id: 27, + name: 'Stim', + description: 'Transfer Olfact Nrv to Trochlear Nrv, Perc Endo Approach', + price: '$69.86', + imgUrl: '/images/h4.jpg', + category: 'headlights', + rating: 2, + reviews: 5 + }, + { + id: 28, + name: 'Greenlam', + description: 'Bypass L Innom Vein to Up Vein w Autol Sub, Perc Endo', + price: '$63.77', + imgUrl: '/images/h5.jpg', + category: 'headlights', + rating: 5, + reviews: 3 + }, + { + id: 29, + name: 'Fintone', + description: 'Beam Radiation using Photons 1 - 10 MeV', + price: '$26.56', + imgUrl: '/images/t6.jpg', + category: 'tires', + rating: 5, + reviews: 5 + }, + { + id: 30, + name: 'Stim', + description: 'Ultrasonography of Right Lower Extremity Veins, Guidance', + price: '$47.57', + imgUrl: '/images/t7.jpg', + category: 'tires', + rating: 2, + reviews: 1 + } + ] +};