Added component to fetch product details, refactored image options

src/component/Main.jsx

@@ -2,21 +2,29 @@ import React from "react";
 import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
+import ProductLoader from "./ProductLoader";
 
 export default function Main() {
   return (
     <div>
       <Switch>
         <AuthRoute exact path="/products/new">
-          <ProductForm />
+          <ProductForm method="POST" />
+        </AuthRoute>
+        <AuthRoute path="/products/edit/:productId">
+          <ProductLoader component={() => <ProductForm method="PUT" />} />
+        </AuthRoute>
+        <AuthRoute exact path="/promos/new">
+          NEW PROMO
+        </AuthRoute>
+        <AuthRoute exact path="/products">
+          PRODUCTS
         </AuthRoute>
-        <AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute>
-        <AuthRoute exact  path="/products">PRODUCTS</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/ProductForm.jsx

 import React, { useState } from "react";
-import { useHistory, useLocation } from "react-router";
+import { useHistory } from "react-router";
+import emptyProduct from "../emptProduct";
 
 const emptyForm = {
-  sku: "",
-  upc: "",
-  prodName: "",
-  brand: "",
-  category: "",
-  price: 0.0,
-  stock: 0,
-  prodDesc: "",
-  productImage: "",
+  ...emptyProduct,
+  imageFile: "",
 };
 
 ProductForm.defaultProps = {
@@ -18,8 +12,9 @@ ProductForm.defaultProps = {
 };
 
 export default function ProductForm(props) {
-  const { product } = props;
+  const { product, method } = props;
   const [form, setForm] = useState(product);
+  const [imageMode, setImageMode] = useState("url");
   const [errors, setErrors] = useState([]);
   const history = useHistory();
 
@@ -55,11 +50,16 @@ export default function ProductForm(props) {
   const onSubmit = (e) => {
     e.preventDefault();
     validate();
+    if (imageMode === "url") {
+      delete form.imageFile;
+    } else {
+      delete form.prodImgUrl;
+    }
 
     if (errors.length === 0) {
       // console.log(form);
       fetch("http://localhost:8080/api/products", {
-        method: "POST",
+        method,
         headers: {
           "Content-Type": "application/json",
         },
@@ -104,6 +104,7 @@ export default function ProductForm(props) {
               type="text"
               className="form-control"
               id="productSku"
+              disabled={method === "PUT" ? true : false}
               value={form.sku}
               onChange={(e) => setForm({ ...form, sku: e.target.value })}
             />
@@ -213,19 +214,61 @@ export default function ProductForm(props) {
             />
           </div>
         </div>
-        <div className="row mt-3">
-          <label htmlFor="productImage" className="form-label">
-            Product Image
-          </label>
-          <input
-            id="productImage"
-            name="productImage"
-            className="form-control form-control-lg"
-            type="file"
-            value={form.productImage}
-            onChange={(e) => setForm({ ...form, productImage: e.target.value })}
-          ></input>
-        </div>
+        {imageMode === "upload" ? (
+          <div className="row mt-3">
+            <div>
+              <label htmlFor="productImage" className="form-label">
+                Image File
+              </label>
+              <input
+                id="productImage"
+                name="imageFile"
+                className="form-control form-control-lg"
+                type="file"
+                value={form.imageFile}
+                onChange={(e) =>
+                  setForm({ ...form, imageFile: e.target.value })
+                }
+              ></input>
+              <button
+                type="button"
+                class="btn btn-outline-primary mt-3"
+                onClick={() => {
+                  setForm({ ...form, imageFile: "" });
+                  setImageMode("url");
+                }}
+              >
+                Specify Image URL
+              </button>
+            </div>
+          </div>
+        ) : null}
+        {imageMode === "url" ? (
+          <div className="row mt-3">
+            <div>
+              <label htmlFor="prodImgUrl" className="form-label">
+                Image URL
+              </label>
+              <input
+                name="prodImgUrl"
+                type="text"
+                className="form-control"
+                id="prodImgUrl"
+                value={form.prodImgUrl}
+                onChange={(e) =>
+                  setForm({ ...form, prodImgUrl: e.target.value })
+                }
+              />
+              <button
+                type="button"
+                class="btn btn-outline-primary mt-3"
+                onClick={() => setImageMode("upload")}
+              >
+                Upload Image
+              </button>
+            </div>
+          </div>
+        ) : null}
 
         <div className="row mt-3">
           <div className="col-12">

src/component/ProductLoader.jsx

+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import emptyProduct from "../emptProduct";
+
+export default function ProductLoader(props) {
+  const { component: Component } = props;
+  const { productId } = useParams("productId");
+  const [product, setProduct] = useState(emptyProduct)
+
+  useEffect(() => {
+    fetch(`http://localhost:8080/api/products/${productId}`)
+      .then(res => {
+        if (res.ok) {
+          res.json.then(data => setProduct({...data}))
+        }
+      })
+  }, [productId]);
+
+  return <Component product={product} />;
+}

src/emptProduct.js

+const emptyProduct = {
+  sku: "",
+  upc: "",
+  prodName: "",
+  brand: "",
+  category: "",
+  price: 0.0,
+  stock: 0,
+  prodDesc: "",
+  prodImgUrl: ""
+};
+
+export default emptyProduct;