From 33c53f30192f7fdf7c2ebdd640dd2bbcb0d10474 Mon Sep 17 00:00:00 2001 From: Peter Harrington Date: Mon, 24 Aug 2020 16:55:28 -0400 Subject: [PATCH 1/3] Add react routing to all category files --- package-lock.json | 14 +++++++++++++- src/App.js | 28 +++++++++++++++++++++++++++ src/Categories.js | 37 ++++++++++++++++++++++++++++++++++++ src/Logos.js | 45 +++++++++++++++++++++++++++++++++++++++----- src/Product-Types.js | 38 +++++++++++++++++++++++++++++++++++++ src/Products.js | 6 ++++-- src/Stores.js | 37 ++++++++++++++++++++++++++++++++++++ src/Variations.js | 37 ++++++++++++++++++++++++++++++++++++ 8 files changed, 234 insertions(+), 8 deletions(-) create mode 100644 src/Categories.js create mode 100644 src/Product-Types.js create mode 100644 src/Stores.js create mode 100644 src/Variations.js diff --git a/package-lock.json b/package-lock.json index 4d5340b..81f569a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3582,6 +3582,8 @@ }, "@testing-library/jest-dom": { "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", + "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", "requires": { "@babel/runtime": "^7.5.1", "chalk": "^2.4.1", @@ -3606,6 +3608,8 @@ }, "@testing-library/react": { "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", + "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", "requires": { "@babel/runtime": "^7.8.4", "@testing-library/dom": "^6.15.0", @@ -3613,7 +3617,9 @@ } }, "@testing-library/user-event": { - "version": "7.2.1" + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", + "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, "@types/babel__core": { "version": "7.1.9", @@ -12632,6 +12638,8 @@ }, "react": { "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -12838,6 +12846,8 @@ }, "react-dom": { "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -12903,6 +12913,8 @@ }, "react-scripts": { "version": "3.4.3", + "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz", + "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==", "requires": { "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", diff --git a/src/App.js b/src/App.js index 77b5976..21e8ddf 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,10 @@ import { import Products from './Products' import Logos from './Logos' +import Categories from './Categories' +import Stores from './Stores' +import Variations from './Variations' +import ProductTypes from './Product-Types' // This site has 3 pages, all of which are rendered // dynamically in the browser (not server rendered). @@ -32,6 +36,18 @@ export default function BasicExample() {
  • Logos
    • +
  • + Categories +
    • +
  • + Stores +
    • +
  • + Variations +
    • +
  • + Product Types +
    • @@ -53,6 +69,18 @@ export default function BasicExample() { + + + + + + + + + + + + diff --git a/src/Categories.js b/src/Categories.js new file mode 100644 index 0000000..5fcd375 --- /dev/null +++ b/src/Categories.js @@ -0,0 +1,37 @@ +import React from 'react' + +class Categories extends React.Component { + constructor () { + super() + this.state = { + response: [] + } + } + + componentDidMount () { + this.callApi() + .then((response) => { + this.setState({response: response.length + 'items found'}) + }) + .catch(err => console.log(err)) + } + + callApi = async () => { + const response = await fetch('http://localhost:3001/Categories') + const body = await response.json(); + if (response.status !== 200) throw Error (body.message); + + return body + } + + render () { + return ( +
    +
    Categories practice in class
    +
    {this.state.response}
    +
    + ) + } +} + +export default Categories \ No newline at end of file diff --git a/src/Logos.js b/src/Logos.js index 3c49978..aa69281 100644 --- a/src/Logos.js +++ b/src/Logos.js @@ -1,8 +1,43 @@ import React from 'react' +class Logos extends React.Component { + constructor () { + super() + this.state = { + response: [] + } + } -export default () => { - return ( -
    Logos Place holder
    - ) -} \ No newline at end of file + componentDidMount() { + this.callApi() + .then((response) => { + this.setState({ response: response.length + 'items found'}) + }) + .catch(err => console.log(err)) + } + + callApi = async () => { + const response = await fetch ('http://localhost:3001/logos') + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + + return body; + } + + render () { + return ( +
    +
    Logos in class practice
    +
    {this.state.response}
    +
    + ) + } +} + +export default Logos + +// export default () => { +// return ( +//
    Logos Place holder
    +// ) +// } \ No newline at end of file diff --git a/src/Product-Types.js b/src/Product-Types.js new file mode 100644 index 0000000..8d8d2d6 --- /dev/null +++ b/src/Product-Types.js @@ -0,0 +1,38 @@ +import React from 'react' + +class ProductTypes extends React.Component { + constructor() { + super () + this.state= { + response: [] + } + } + + componentDidMount () { + this.callApi() + .then((response) => { + this.setState({ response: response.length + 'items found' }) + }) + .catch(err => console.log(err)) + } + + callApi = async () => { + const response = await fetch('http://localhost:3001/Product-Types') + const body = await response.json(); + if (response.status !== 200) throw Error (body.message); + + return body + } + + render () { + return ( +
    +
    Set up Product Types for integrations
    +
    {this.state.response}
    +
    + ) + } + +} + +export default ProductTypes \ No newline at end of file diff --git a/src/Products.js b/src/Products.js index ce27ed2..1572f9e 100644 --- a/src/Products.js +++ b/src/Products.js @@ -4,13 +4,15 @@ class Products extends React.Component { constructor () { super() this.state = { - results: [] + response: [] } } componentDidMount() { this.callApi() - .then(res => this.setState({ response: res.express })) + .then((response) => { + this.setState({ response: response.length + 'items found' }) + }) .catch(err => console.log(err)); } diff --git a/src/Stores.js b/src/Stores.js new file mode 100644 index 0000000..1a451c6 --- /dev/null +++ b/src/Stores.js @@ -0,0 +1,37 @@ +import React from 'react' + +class Stores extends React.Component { + constructor () { + super() + this.state = { + response: [] + } + } + + componentDidMount () { + this.callApi() + .then((response) => { + this.setState({ response: response.length + 'items found' }) + }) + .catch(err => console.log(err)) + } + + callApi = async () => { + const response = await fetch('http://localhost:3001/Stores') + const body = await response.json(); + if (response.status !== 200) throw Error (body.message); + + return body + } + + render () { + return ( +
    +
    Practice Stores in class
    +
    {this.state.response}
    +
    + ) + } +} + +export default Stores \ No newline at end of file diff --git a/src/Variations.js b/src/Variations.js new file mode 100644 index 0000000..0fb2a4a --- /dev/null +++ b/src/Variations.js @@ -0,0 +1,37 @@ +import React from 'react' + +class Variations extends React.Component { + constructor () { + super () + this.state = { + response: [] + } + } + + componentDidMount () { + this.callApi() + .then((response) => { + this.setState({ response: response.length + 'items found' }) + }) + .catch(err => console.log(err)) + } + + callApi = async () => { + const response = await fetch('http://localhost:3001/Variations') + const body = await response.json(); + if (response.status !== 200) throw Error (body.message); + + return body + } + + render () { + return ( +
    +
    Setup for Variations integration
    +
    {this.state.response}
    +
    + ) + } +} + +export default Variations \ No newline at end of file From 2dd02320b1c94b3d2316fac4671bab933f792459 Mon Sep 17 00:00:00 2001 From: Peter Harrington Date: Tue, 25 Aug 2020 13:13:02 -0400 Subject: [PATCH 2/3] Refactor Products.js to display list of product titles --- src/Products.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/Products.js b/src/Products.js index 1572f9e..de60e45 100644 --- a/src/Products.js +++ b/src/Products.js @@ -11,7 +11,7 @@ class Products extends React.Component { componentDidMount() { this.callApi() .then((response) => { - this.setState({ response: response.length + 'items found' }) + this.setState({ response }) }) .catch(err => console.log(err)); } @@ -25,10 +25,20 @@ class Products extends React.Component { }; render () { + const { response } = this.state; + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.title}
    • ) + } + return (
    -
    Products Place holder
    -
    {this.state.response}
    +

    {response.length} items found

    +
      + {itemsList} +
    ) } From 0e7cca9b418d6ef9b35a4116e95f66d92d7c2281 Mon Sep 17 00:00:00 2001 From: Peter Harrington Date: Tue, 25 Aug 2020 13:25:30 -0400 Subject: [PATCH 3/3] Refactor src files to show lists of items in render --- src/Categories.js | 17 ++++++++++++++--- src/Logos.js | 16 +++++++++++++--- src/Product-Types.js | 16 +++++++++++++--- src/Stores.js | 16 +++++++++++++--- src/Variations.js | 16 +++++++++++++--- 5 files changed, 66 insertions(+), 15 deletions(-) diff --git a/src/Categories.js b/src/Categories.js index 5fcd375..a97d411 100644 --- a/src/Categories.js +++ b/src/Categories.js @@ -11,7 +11,7 @@ class Categories extends React.Component { componentDidMount () { this.callApi() .then((response) => { - this.setState({response: response.length + 'items found'}) + this.setState({ response }) }) .catch(err => console.log(err)) } @@ -25,12 +25,23 @@ class Categories extends React.Component { } render () { + const { response } = this.state + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.category}
    • ) + } + return (
    -
    Categories practice in class
    -
    {this.state.response}
    +

    { response.length } items found

    +
      + {itemsList} +
    ) + } } diff --git a/src/Logos.js b/src/Logos.js index aa69281..c4eff57 100644 --- a/src/Logos.js +++ b/src/Logos.js @@ -11,7 +11,7 @@ class Logos extends React.Component { componentDidMount() { this.callApi() .then((response) => { - this.setState({ response: response.length + 'items found'}) + this.setState({ response }) }) .catch(err => console.log(err)) } @@ -25,10 +25,20 @@ class Logos extends React.Component { } render () { + const { response } = this.state + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.name}
    • ) + } + return (
    -
    Logos in class practice
    -
    {this.state.response}
    +

    { response.length } items found

    +
      + {itemsList} +
    ) } diff --git a/src/Product-Types.js b/src/Product-Types.js index 8d8d2d6..f7cc66b 100644 --- a/src/Product-Types.js +++ b/src/Product-Types.js @@ -11,7 +11,7 @@ class ProductTypes extends React.Component { componentDidMount () { this.callApi() .then((response) => { - this.setState({ response: response.length + 'items found' }) + this.setState({ response }) }) .catch(err => console.log(err)) } @@ -25,10 +25,20 @@ class ProductTypes extends React.Component { } render () { + const { response } = this.state + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.name}
    • ) + } + return (
    -
    Set up Product Types for integrations
    -
    {this.state.response}
    +

    { response.length } items found

    +
      + {itemsList} +
    ) } diff --git a/src/Stores.js b/src/Stores.js index 1a451c6..eec83ee 100644 --- a/src/Stores.js +++ b/src/Stores.js @@ -11,7 +11,7 @@ class Stores extends React.Component { componentDidMount () { this.callApi() .then((response) => { - this.setState({ response: response.length + 'items found' }) + this.setState({ response }) }) .catch(err => console.log(err)) } @@ -25,10 +25,20 @@ class Stores extends React.Component { } render () { + const { response } = this.state + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.name}
    • ) + } + return (
    -
    Practice Stores in class
    -
    {this.state.response}
    +

    { response.length } items found

    +
      + {itemsList} +
    ) } diff --git a/src/Variations.js b/src/Variations.js index 0fb2a4a..013b450 100644 --- a/src/Variations.js +++ b/src/Variations.js @@ -11,7 +11,7 @@ class Variations extends React.Component { componentDidMount () { this.callApi() .then((response) => { - this.setState({ response: response.length + 'items found' }) + this.setState({ response }) }) .catch(err => console.log(err)) } @@ -25,10 +25,20 @@ class Variations extends React.Component { } render () { + const { response } = this.state + + const itemsList = [] + + for (const [index, item] of response.entries()) { + itemsList.push(
  • {item.variation}
    • ) + } + return (
    -
    Setup for Variations integration
    -
    {this.state.response}
    +

    { response.length } items found

    +
      + {itemsList} +
    ) }