From fd54a76f24e6abea6ae9489db6a7e8d3b30740f5 Mon Sep 17 00:00:00 2001 From: Wesley Date: Thu, 20 Aug 2020 21:51:58 -0400 Subject: [PATCH 1/2] Day two of react --- package-lock.json | 14 +++++++++++++- src/App.js | 7 +++++++ src/Logos.js | 40 +++++++++++++++++++++++++++++++++++----- src/Products.js | 6 ++++-- src/Stores.js | 37 +++++++++++++++++++++++++++++++++++++ 5 files changed, 96 insertions(+), 8 deletions(-) create mode 100644 src/Stores.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..ddc838a 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { import Products from './Products' import Logos from './Logos' +import Stores from './Stores' // This site has 3 pages, all of which are rendered // dynamically in the browser (not server rendered). @@ -32,6 +33,9 @@ export default function BasicExample() {
  • Logos
    • +
  • + Stores +
    • @@ -53,6 +57,9 @@ export default function BasicExample() { + + + diff --git a/src/Logos.js b/src/Logos.js index 3c49978..292765f 100644 --- a/src/Logos.js +++ b/src/Logos.js @@ -1,8 +1,38 @@ import React from 'react' -export default () => { - return ( -
    Logos Place holder
    - ) -} \ No newline at end of file +class Logos 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/logos'); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + + return body; + }; + + render () { + return ( +
    +
    Logos Place holder
    +
    {this.state.response}
    +
    + ) + } +} + +export default Logos \ No newline at end of file diff --git a/src/Products.js b/src/Products.js index ce27ed2..1a25614 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..7dd4caf --- /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 ( +
    +
    Stores Place holder
    +
    {this.state.response}
    +
    + ) + } +} + +export default Stores \ No newline at end of file From 35ee6bb9bc12de9dfe50d12aeb79066cc05d09fe Mon Sep 17 00:00:00 2001 From: Wesley Date: Thu, 27 Aug 2020 16:45:46 -0400 Subject: [PATCH 2/2] Added new sub-category --- src/App.css | 19 ++++++++++++++++++- src/App.js | 16 ++++++++++++---- src/NewArrival.js | 38 ++++++++++++++++++++++++++++++++++++++ src/index.css | 1 + 4 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 src/NewArrival.js diff --git a/src/App.css b/src/App.css index 74b5e05..84dbe71 100644 --- a/src/App.css +++ b/src/App.css @@ -14,7 +14,7 @@ } .App-header { - background-color: #282c34; + background-color: pink; min-height: 100vh; display: flex; flex-direction: column; @@ -36,3 +36,20 @@ transform: rotate(360deg); } } + +.App { + .Logos {background-color: #4CAF50;} /* Green */ +.Logos:hover {background-color: #46a049;} + + .Products {background-color: #2196F3;} /* Blue */ +.Products:hover {background: #0b7dda;} + + .Stores {background-color: #ff9800;} /* Orange */ +.Stores:hover {background: #e68a00;} + + .NewArrival {background-color: #f44336;} /* Red */ +.NewArrival:hover {background: #da190b;} + + .Home {background-color: #e7e7e7; color: black;} /* Gray */ +.Home:hover {background: #ddd;} +} diff --git a/src/App.js b/src/App.js index ddc838a..b66cdaa 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import { import Products from './Products' import Logos from './Logos' import Stores from './Stores' +import NewArrival from './NewArrival' // This site has 3 pages, all of which are rendered // dynamically in the browser (not server rendered). @@ -25,16 +26,20 @@ export default function BasicExample() {
    • - Home +
    • - Products +
    • - Logos +
    • - Stores + +
      • +
    • + +
    @@ -60,6 +65,9 @@ export default function BasicExample() { + + +
    diff --git a/src/NewArrival.js b/src/NewArrival.js new file mode 100644 index 0000000..649ba3e --- /dev/null +++ b/src/NewArrival.js @@ -0,0 +1,38 @@ +import React from 'react' + + +class NewArrival 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/NewArrival'); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + + return body; + }; + + render () { + return ( +
    +
    New arrival Place holder
    +
    {this.state.response}
    +
    + ) + } +} + +export default NewArrival \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..794f418 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,4 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +