From 5df17dc850d32edd79c43ee32b46059917612d18 Mon Sep 17 00:00:00 2001 From: Deva0770 Date: Mon, 31 Aug 2020 22:38:08 -0400 Subject: [PATCH 1/2] Week 12 Product list --- package-lock.json | 14 +++++++++++++- src/App.js | 41 ++++++++--------------------------------- src/Logos.js | 33 +++++++++++++++++++++++++++++++++ src/Products.js | 33 +++++++++++++++++++++++++++++++++ 4 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 src/Logos.js create mode 100644 src/Products.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 efafdbd..b49a8ec 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,3 @@ -/** - - Code in this file is taken directly from https://reactrouter.com/web/example/basic - */ - import React from "react"; import { BrowserRouter as Router, @@ -10,7 +5,8 @@ import { Route, Link } from "react-router-dom"; - +import Products from './Products' +import Logos from './Logos' // This site has 3 pages, all of which are rendered // dynamically in the browser (not server rendered). // @@ -19,7 +15,6 @@ import { // through the site. This preserves the browser history, // making sure things like the back button and bookmarks // work properly. - export default function BasicExample() { return ( @@ -29,15 +24,13 @@ export default function BasicExample() { Home
  • - About + Products
  • - Dashboard + Logos
    • -
    - {/* A looks through all its children elements and renders the first one whose path @@ -49,41 +42,23 @@ export default function BasicExample() { - - + + - - + +     ); } - // You can think of these components as "pages" // in your app. - function Home() { return (

    Home

    ); -} - -function About() { - return ( -
    -

    About

    -
    - ); -} - -function Dashboard() { - return ( -
    -

    Dashboard

    -
    - ); } \ No newline at end of file diff --git a/src/Logos.js b/src/Logos.js new file mode 100644 index 0000000..57c5c18 --- /dev/null +++ b/src/Logos.js @@ -0,0 +1,33 @@ +import React from "react"; +class Logo extends React.Component { + constructor() { + super(); + this.state = { + response: [], + }; + } + componentDidMount() { + this.callApi() + .then((response) => { + this.setState({ response }); + }) + .catch((err) => console.log(err)); + } + callApi = async () => { + const response = await fetch("http://localhost:3001/logo"); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + return body; + }; + render() { + let logo = this.state.response + return ( +
    + {logo.map((logo) => +

    {logo.title}

    + )} +
    + ); + } +} +export default Logo; \ No newline at end of file diff --git a/src/Products.js b/src/Products.js new file mode 100644 index 0000000..711162a --- /dev/null +++ b/src/Products.js @@ -0,0 +1,33 @@ +import React from "react"; +class Products extends React.Component { + constructor() { + super(); + this.state = { + response: [], + }; + } + componentDidMount() { + this.callApi() + .then((response) => { + this.setState({ response }); + }) + .catch((err) => console.log(err)); + } + callApi = async () => { + const response = await fetch("http://localhost:3001/products"); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + return body; + }; + render() { + let products = this.state.response + return ( +
    + {products.map((product) => +

    {product.title}

    + )} +
    + ); + } +} +export default Products; \ No newline at end of file From 7fda397bcdbbd37fbbaf8f2e9f157def4248687e Mon Sep 17 00:00:00 2001 From: Deva0770 Date: Tue, 1 Sep 2020 19:19:48 -0400 Subject: [PATCH 2/2] Week 12 Store Front --- src/Logos.js | 1 + src/index.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/src/Logos.js b/src/Logos.js index 57c5c18..958527f 100644 --- a/src/Logos.js +++ b/src/Logos.js @@ -28,6 +28,7 @@ class Logo extends React.Component { )} ); + //test comment } } export default Logo; \ No newline at end of file diff --git a/src/index.js b/src/index.js index f5185c1..013f4a6 100644 --- a/src/index.js +++ b/src/index.js @@ -15,3 +15,6 @@ ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); + +//comment +