Added edit functionality to product form

src/component/Main.jsx

@@ -2,7 +2,6 @@ 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 (
@@ -12,7 +11,7 @@ export default function Main() {
           <ProductForm method="POST" />
         </AuthRoute>
         <AuthRoute path="/products/edit/:productId">
-          <ProductLoader component={() => <ProductForm method="PUT" />} />
+          <ProductForm method="PUT" />
         </AuthRoute>
         <AuthRoute exact path="/promos/new">
           NEW PROMO

src/component/ProductForm.jsx

-import React, { useState } from "react";
-import { useHistory } from "react-router";
+import React, { useEffect, useState } from "react";
+import { useHistory, useParams } from "react-router";
 import emptyProduct from "../emptProduct";
 
 const emptyForm = {
@@ -12,16 +12,34 @@ ProductForm.defaultProps = {
 };
 
 export default function ProductForm(props) {
-  const { product, method } = props;
-  const [form, setForm] = useState(product);
+  const { method } = props;
+  const [form, setForm] = useState({ ...emptyForm });
   const [imageMode, setImageMode] = useState("url");
   const [errors, setErrors] = useState([]);
   const history = useHistory();
+  const { productId } = useParams("productId");
+
+  useEffect(() => {
+    fetch(`http://localhost:8080/api/products/${productId}/`).then((res) => {
+      if (res.ok) {
+        console.log(res);
+        res.json().then((data) => {
+          Object.keys(data).forEach((key) => {
+            if (data[key] === null) {
+              data[key] = "";
+            }
+          });
+          console.log(data);
+          setForm({ ...data, availableStock: data.stock });
+        });
+      }
+    });
+  }, [productId]);
 
   const validate = () => {
     setErrors([]);
     const errs = [];
-
+    console.log(form)
     if (form.sku.length < 3) {
       errs.push("SKU must be at least 3 characters");
     }
@@ -40,7 +58,7 @@ export default function ProductForm(props) {
     if (Number(form.price) <= 0) {
       errs.push("Price must be greater than 0");
     }
-    if (Number(form.stock) <= 0) {
+    if (Number(form.availableStock) <= 0) {
       errs.push("Stock must be greater than 0");
     }
 
@@ -58,7 +76,11 @@ export default function ProductForm(props) {
 
     if (errors.length === 0) {
       // console.log(form);
-      fetch("http://localhost:8080/api/products", {
+      const url =
+        method === "PUT"
+          ? `http://localhost:8080/api/products/${productId}`
+          : "http://localhost:8080/api/products";
+      fetch(url, {
         method,
         headers: {
           "Content-Type": "application/json",
@@ -137,7 +159,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>
@@ -174,13 +198,15 @@ export default function ProductForm(props) {
               Description
             </label>
             <textarea
-              name="productDesc"
+              name="productDesciption"
               id="productDesc"
               cols="40"
               rows="7"
               className="form-control"
-              value={form.productDesc}
-              onChange={(e) => setForm({ ...form, productDesc: e.target.value })}
+              value={form.productDescription}
+              onChange={(e) =>
+                setForm({ ...form, productDescription: e.target.value })
+              }
             ></textarea>
           </div>
         </div>
@@ -205,12 +231,12 @@ export default function ProductForm(props) {
             </label>
             <input
               required
-              name="stock"
+              name="availableStock"
               type="number"
               className="form-control"
               id="stock"
-              value={form.stock}
-              onChange={(e) => setForm({ ...form, stock: e.target.value })}
+              value={form.availableStock}
+              onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
             />
           </div>
         </div>
@@ -232,7 +258,7 @@ export default function ProductForm(props) {
               ></input>
               <button
                 type="button"
-                class="btn btn-outline-primary mt-3"
+                className="btn btn-outline-primary mt-3"
                 onClick={() => {
                   setForm({ ...form, imageFile: "" });
                   setImageMode("url");
@@ -250,18 +276,18 @@ export default function ProductForm(props) {
                 Image URL
               </label>
               <input
-                name="prodImgUrl"
+                name="productImageUrl"
                 type="text"
                 className="form-control"
                 id="prodImgUrl"
-                value={form.prodImgUrl}
+                value={form.productImageUrl}
                 onChange={(e) =>
-                  setForm({ ...form, prodImgUrl: e.target.value })
+                  setForm({ ...form, productImageUrl: e.target.value })
                 }
               />
               <button
                 type="button"
-                class="btn btn-outline-primary mt-3"
+                className="btn btn-outline-primary mt-3"
                 onClick={() => setImageMode("upload")}
               >
                 Upload Image

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

@@ -5,9 +5,9 @@ const emptyProduct = {
   brand: "",
   category: "",
   price: 0.0,
-  stock: 0,
-  productDesc: "",
-  prodImgUrl: ""
+  availableStock: 0,
+  productDesciption: "",
+  productImageUrl: "",
 };
 
 export default emptyProduct;