Section 3: Serving & Fetching Data From Express

Author: taepunphu

frontend/src/products.js renamed to backend/data/products.js

@@ -0,0 +1,27 @@
+import express from 'express'
+import dotenv from 'dotenv'
+import products from './data/products.js'
+
+const app = express()
+
+dotenv.config()
+
+app.get('/', (req, res) => {
+  res.send('API is running ...')
+})
+
+app.get('/api/products', (req, res) => {
+  res.json(products)
+})
+
+app.get('/api/products/:id', (req, res) => {
+  const product = products.find((p) => p._id === req.params.id)
+  res.json(product)
+})
+
+const PORT = process.env.PORT || 5000
+
+app.listen(
+  PORT,
+  console.log(`Server running in ${process.env.NODE_ENV} on port ${PORT}`)
+)

backend/server.js

@@ -1 +1 @@
-[{"D:\\fullstack-react\\proshop\\frontend\\src\\index.js":"1","D:\\fullstack-react\\proshop\\frontend\\src\\reportWebVitals.js":"2","D:\\fullstack-react\\proshop\\frontend\\src\\App.js":"3","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Header.js":"4","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Footer.js":"5","D:\\fullstack-react\\proshop\\frontend\\src\\screens\\HomeScreen.js":"6","D:\\fullstack-react\\proshop\\frontend\\src\\products.js":"7","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Product.js":"8","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Rating.js":"9","D:\\fullstack-react\\proshop\\frontend\\src\\screens\\ProductScreen.js":"10"},{"size":529,"mtime":1607255062853,"results":"11","hashOfConfig":"12"},{"size":362,"mtime":499162500000,"results":"13","hashOfConfig":"12"},{"size":644,"mtime":1609777555012,"results":"14","hashOfConfig":"12"},{"size":1072,"mtime":1609778091026,"results":"15","hashOfConfig":"12"},{"size":328,"mtime":1607255607209,"results":"16","hashOfConfig":"12"},{"size":483,"mtime":1609776864088,"results":"17","hashOfConfig":"12"},{"size":2486,"mtime":1607256618887,"results":"18","hashOfConfig":"12"},{"size":886,"mtime":1609777824480,"results":"19","hashOfConfig":"12"},{"size":1801,"mtime":1609776135148,"results":"20","hashOfConfig":"12"},{"size":2165,"mtime":1609779535448,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"146rpn5",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\fullstack-react\\proshop\\frontend\\src\\index.js",[],["43","44"],"D:\\fullstack-react\\proshop\\frontend\\src\\reportWebVitals.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\App.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Header.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Footer.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\screens\\HomeScreen.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\products.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Product.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Rating.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\screens\\ProductScreen.js",[],{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","replacedBy":"48"},"no-native-reassign",["49"],"no-negated-in-lhs",["50"],"no-global-assign","no-unsafe-negation"]
+[{"D:\\fullstack-react\\proshop\\frontend\\src\\index.js":"1","D:\\fullstack-react\\proshop\\frontend\\src\\reportWebVitals.js":"2","D:\\fullstack-react\\proshop\\frontend\\src\\App.js":"3","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Header.js":"4","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Footer.js":"5","D:\\fullstack-react\\proshop\\frontend\\src\\screens\\HomeScreen.js":"6","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Product.js":"7","D:\\fullstack-react\\proshop\\frontend\\src\\components\\Rating.js":"8","D:\\fullstack-react\\proshop\\frontend\\src\\screens\\ProductScreen.js":"9"},{"size":529,"mtime":1607255062853,"results":"10","hashOfConfig":"11"},{"size":362,"mtime":499162500000,"results":"12","hashOfConfig":"11"},{"size":644,"mtime":1609777555012,"results":"13","hashOfConfig":"11"},{"size":1072,"mtime":1609778091026,"results":"14","hashOfConfig":"11"},{"size":328,"mtime":1607255607209,"results":"15","hashOfConfig":"11"},{"size":737,"mtime":1610813399059,"results":"16","hashOfConfig":"11"},{"size":886,"mtime":1609777824480,"results":"17","hashOfConfig":"11"},{"size":1801,"mtime":1609776135148,"results":"18","hashOfConfig":"11"},{"size":2948,"mtime":1610814709204,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"146rpn5",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"37"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"D:\\fullstack-react\\proshop\\frontend\\src\\index.js",[],["40","41"],"D:\\fullstack-react\\proshop\\frontend\\src\\reportWebVitals.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\App.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Header.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Footer.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\screens\\HomeScreen.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Product.js",[],"D:\\fullstack-react\\proshop\\frontend\\src\\components\\Rating.js",[],["42","43"],"D:\\fullstack-react\\proshop\\frontend\\src\\screens\\ProductScreen.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"44","replacedBy":"48"},{"ruleId":"46","replacedBy":"49"},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],["50"],["51"],"no-global-assign","no-unsafe-negation"]

frontend/.eslintcache

@@ -1,11 +1,13 @@
 {
   "name": "frontend",
+  "proxy": "http://127.0.0.1:5000",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

frontend/package-lock.json

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Find the best product" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       rel="stylesheet"

frontend/package.json

@@ -1,9 +1,20 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Row, Col } from 'react-bootstrap'
-import products from '../products'
 import Product from '../components/Product'
+import axios from 'axios'
 
 const HomeScreen = () => {
+  const [products, setProducts] = useState([])
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      const { data } =  await axios.get('/api/products')
+      setProducts(data) 
+    }
+
+    fetchProducts()
+  }, [])
+
   return (
     <>
       <h1>Latest Products</h1>

frontend/public/index.html

@@ -1,12 +1,33 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
 import Rating from '../components/Rating'
-import products from '../products'
+import axios from 'axios'
 
 const ProductScreen = ({ match }) => {
-  const product = products.find((p) => p._id === match.params.id)
-  console.log(product)
+  // configure component state with the useState hook
+  // state contains the product object
+  // setProduct is setter for this object
+  const [product, setProduct] = useState({})
+
+  useEffect(() => {
+    // configure the fetchProduct method that calls the API
+    // and fetches the products with a GET request
+    const fetchProduct = async () => {
+      // use axios to make the GET request
+      // match.params is passed via the related react-router route
+      // with { data } we destructure the axios response's 'data'
+      const { data } = await axios.get(`/api/products/${match.params.id}`)
+
+      // call the setter to set the response data to the state
+      setProduct(data)
+    }
+
+    // call the method
+    fetchProduct()
+
+    // match has to be added to the dependencies as suggested by the React linter
+  }, [match])
 
   return (
     <>