Merge branch 'AFP-14' into 'dev'

Afp 14: update product form (frontend)

See merge request !7

src/component/ProductForm.jsx

 import React, { useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router";
-import Config from "../config";
+import emptyProduct from "../emptProduct";
 
 const emptyForm = {
-  sku: "",
-  upc: "",
-  productName: "",
-  brand: "",
-  category: "",
-  price: 0.0,
-  availableStock: 0,
-  productDescription: "",
-  productImageUrl: "",
-  productImage: "",
+  ...emptyProduct,
+  imageFile: "",
 };
 
 ProductForm.defaultProps = {
@@ -21,27 +13,33 @@ ProductForm.defaultProps = {
 
 export default function ProductForm(props) {
   const { method } = props;
-  const [form, setForm] = useState(emptyForm);
+  const [form, setForm] = useState({ ...emptyForm });
+  const [imageMode, setImageMode] = useState("url");
   const [errors, setErrors] = useState([]);
   const history = useHistory();
-  const { sku } = useParams();
+  const { productId } = useParams("productId");
 
   useEffect(() => {
-    fetch(`${Config.inventoryUrl}/${sku}`).then((res) => {
+    fetch(`http://localhost:8080/api/products/${productId}/`).then((res) => {
       if (res.ok) {
-        res
-          .json()
-          .then((data) =>
-            setForm({ ...data, availableStock: data.stock, productImage: "" })
-          );
+        console.log(res);
+        res.json().then((data) => {
+          Object.keys(data).forEach((key) => {
+            if (data[key] === null) {
+              data[key] = "";
             }
           });
-  }, [sku]);
+          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");
     }
@@ -70,6 +68,11 @@ 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);
@@ -124,6 +127,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 })}
             />
@@ -191,12 +195,12 @@ export default function ProductForm(props) {
             </div>
           </div>
           <div className="col-6">
-            <label htmlFor="productDescription" className="form-label">
+            <label htmlFor="productDesc" className="form-label">
               Description
             </label>
             <textarea
-              name="productDescription"
-              id="productDescription"
+              name="productDesciption"
+              id="productDesc"
               cols="40"
               rows="7"
               className="form-control"
@@ -229,51 +233,70 @@ export default function ProductForm(props) {
             <input
               disabled={method === "PUT" ? true : false}
               required
-              name="stock"
+              name="availableStock"
               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>
+        {imageMode === "upload" ? (
           <div className="row mt-3">
+            <div>
               <label htmlFor="productImage" className="form-label">
-            Product Image
+                Image File
               </label>
               <input
-            id="productImageUrl"
-            name="productImageUrl"
+                id="productImage"
+                name="imageFile"
                 className="form-control form-control-lg"
-            type="url"
-            placeholder="Enter image URL here or upload image below..."
-            value={form.productImageUrl}
+                type="file"
+                value={form.imageFile}
                 onChange={(e) =>
-              setForm({
-                ...form,
-                productImageUrl: e.target.value,
-                productImage: "",
-              })
+                  setForm({ ...form, imageFile: e.target.value })
                 }
               ></input>
+              <button
+                type="button"
+                className="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
-            id="productImage"
-            name="productImage"
-            className="form-control form-control-lg"
-            type="file"
-            value={form.productImage}
+                name="productImageUrl"
+                type="text"
+                className="form-control"
+                id="prodImgUrl"
+                value={form.productImageUrl}
                 onChange={(e) =>
-              setForm({
-                ...form,
-                productImage: e.target.value,
-                productImageUrl: "",
-              })
+                  setForm({ ...form, productImageUrl: e.target.value })
                 }
-          ></input>
+              />
+              <button
+                type="button"
+                className="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/emptProduct.js

+const emptyProduct = {
+  sku: "",
+  upc: "",
+  productName: "",
+  brand: "",
+  category: "",
+  price: 0.0,
+  availableStock: 0,
+  productDesciption: "",
+  productImageUrl: "",
+};
+
+export default emptyProduct;