Fixed routing and data fetching

src/component/Main.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
 import ProductGrid from "./ProductGrid";
-import {getAllProducts} from "../actions/apiRequests.js"
-import PromotionNewFormComponent from './promotionforms/PromotionNewFormComponent'
+import { getAllProducts } from "../actions/apiRequests.js";
+import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
 
 export default function Main() {
   const [productData, setproductData] = useState([]);
@@ -16,21 +16,28 @@ export default function Main() {
   const loadProducts = async (event) => {
     const data = await getAllProducts();
     setproductData(data);
-  }
+  };
 
   return (
     <div>
       <Switch>
         <AuthRoute exact path="/products/new">
-          <ProductForm />
+          <ProductForm method="POST" />
         </AuthRoute>
-        <AuthRoute exact path="/promos/new" component={PromotionNewFormComponent}>NEW PROMO</AuthRoute>
-        <AuthRoute exact path="/products">PRODUCTS</AuthRoute>
+        <AuthRoute exact path="/products/edit/:sku">
+          <ProductForm method="PUT" />
+        </AuthRoute>
+        <AuthRoute
+          exact
+          path="/promos/new"
+          component={PromotionNewFormComponent}
+        ></AuthRoute>
+        <AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
         <AuthRoute path="/promos">PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />
         </AuthRoute>
-        <AuthRoute >404 PAGE</AuthRoute>
+        <AuthRoute>404 PAGE</AuthRoute>
       </Switch>
     </div>
   );

src/component/Product.jsx

@@ -56,7 +56,7 @@ export default function Product({ product }) {
             Delete product
           </Button>
 
-          <Button variant="primary" onClick={handleClose}>
+          <Button variant="primary" href={`/products/edit/${product.sku}`}>
             Edit Product
           </Button>
 

src/component/ProductForm.jsx

-import React, { useState } from "react";
-import { useHistory, useLocation } from "react-router";
+import React, { useEffect, useState } from "react";
+import { useHistory, useParams } from "react-router";
+import Config from "../config";
 
 const emptyForm = {
   sku: "",
@@ -11,7 +12,7 @@ const emptyForm = {
   availableStock: 0,
   productDescription: "",
   productImageUrl: "",
-  productImage: ""
+  productImage: "",
 };
 
 ProductForm.defaultProps = {
@@ -19,10 +20,23 @@ ProductForm.defaultProps = {
 };
 
 export default function ProductForm(props) {
-  const { product } = props;
-  const [form, setForm] = useState(product);
+  const { method } = props;
+  const [form, setForm] = useState(emptyForm);
   const [errors, setErrors] = useState([]);
   const history = useHistory();
+  const { sku } = useParams();
+
+  useEffect(() => {
+    fetch(`${Config.inventoryUrl}/${sku}`).then((res) => {
+      if (res.ok) {
+        res
+          .json()
+          .then((data) =>
+            setForm({ ...data, availableStock: data.stock, productImage: "" })
+          );
+      }
+    });
+  }, [sku]);
 
   const validate = () => {
     setErrors([]);
@@ -59,8 +73,12 @@ export default function ProductForm(props) {
 
     if (errors.length === 0) {
       // console.log(form);
-      fetch("http://localhost:8080/api/products", {
-        method: "POST",
+      const url =
+        method === "PUT"
+          ? `${Config.inventoryUrl}/${sku}`
+          : `${Config.inventoryUrl}`;
+      fetch(url, {
+        method,
         headers: {
           "Content-Type": "application/json",
         },
@@ -100,6 +118,7 @@ export default function ProductForm(props) {
               SKU
             </label>
             <input
+              disabled={method === "PUT" ? true : false}
               required
               name="sku"
               type="text"
@@ -137,7 +156,9 @@ export default function ProductForm(props) {
                 className="form-control"
                 id="productName"
                 value={form.productName}
-                onChange={(e) => setForm({ ...form, productName: e.target.value })}
+                onChange={(e) =>
+                  setForm({ ...form, productName: e.target.value })
+                }
               />
             </div>
             <div>
@@ -180,7 +201,9 @@ export default function ProductForm(props) {
               rows="7"
               className="form-control"
               value={form.productDescription}
-              onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, productDescription: e.target.value })
+              }
             ></textarea>
           </div>
         </div>
@@ -204,13 +227,16 @@ export default function ProductForm(props) {
               Stock
             </label>
             <input
+              disabled={method === "PUT" ? true : false}
               required
               name="stock"
               type="number"
               className="form-control"
               id="stock"
               value={form.availableStock}
-              onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, availableStock: e.target.value })
+              }
             />
           </div>
         </div>
@@ -225,7 +251,13 @@ export default function ProductForm(props) {
             type="url"
             placeholder="Enter image URL here or upload image below..."
             value={form.productImageUrl}
-            onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})}
+            onChange={(e) =>
+              setForm({
+                ...form,
+                productImageUrl: e.target.value,
+                productImage: "",
+              })
+            }
           ></input>
           <input
             id="productImage"
@@ -233,7 +265,13 @@ export default function ProductForm(props) {
             className="form-control form-control-lg"
             type="file"
             value={form.productImage}
-            onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
+            onChange={(e) =>
+              setForm({
+                ...form,
+                productImage: e.target.value,
+                productImageUrl: "",
+              })
+            }
           ></input>
         </div>
 

src/component/ProductGrid.jsx

-import React from "react";
+import React, { useEffect, useState } from "react";
 import Product from "./Product.jsx";
 import { Col, Container, Row } from "react-bootstrap";
 import "./../styles/ProductGrid.css";
+import Config from "../config.js";
+import { set } from "react-hook-form";
 export default function ProductGrid({ productData }) {
+  const [products, setProducts] = useState([]);
+
+  const fetchProducts = async () => {
+    const res = await fetch(`${Config.inventoryUrl}`);
+    if (res.ok) {
+      const data = await res.json();
+      setProducts([...data]);
+    }
+  };
+
+  useEffect(() => fetchProducts(), []);
+
   return (
     <div>
-      <h1 id="title" className="text-center" >Inventory</h1>
+      <h1 id="title" className="text-center">
+        Inventory
+      </h1>
       <Container id="prod-grid" className="mt-3">
         <Row xs={1} sm={2} md={3} lg={4}>
-          {productData.map((product) => {
+          {products.map((product) => {
             return (
               <Col key={product.sku}>
                 <Product product={product} />