Adds imgUrl upload+changes field names to match DB

src/component/ProductForm.jsx

@@ -4,13 +4,14 @@ import { useHistory, useLocation } from "react-router";
 const emptyForm = {
   sku: "",
   upc: "",
-  prodName: "",
+  productName: "",
   brand: "",
   category: "",
   price: 0.0,
-  stock: 0,
-  prodDesc: "",
-  productImage: "",
+  availableStock: 0,
+  productDescription: "",
+  productImageUrl: "",
+  productImage: ""
 };
 
 ProductForm.defaultProps = {
@@ -33,7 +34,7 @@ export default function ProductForm(props) {
     if (form.upc.length < 3) {
       errs.push("UPC must be at least 3 characters");
     }
-    if (form.prodName.length === 0) {
+    if (form.productName.length === 0) {
       errs.push("Please enter a product name");
     }
     if (form.brand.length === 0) {
@@ -45,7 +46,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");
     }
 
@@ -126,17 +127,17 @@ export default function ProductForm(props) {
         <div className="row mt-3">
           <div className="col-6">
             <div>
-              <label htmlFor="prodName" className="form-label">
+              <label htmlFor="productName" className="form-label">
                 Name
               </label>
               <input
                 required
-                name="prodName"
+                name="productName"
                 type="text"
                 className="form-control"
-                id="prodName"
-                value={form.prodName}
-                onChange={(e) => setForm({ ...form, prodName: e.target.value })}
+                id="productName"
+                value={form.productName}
+                onChange={(e) => setForm({ ...form, productName: e.target.value })}
               />
             </div>
             <div>
@@ -169,17 +170,17 @@ export default function ProductForm(props) {
             </div>
           </div>
           <div className="col-6">
-            <label htmlFor="prodDesc" className="form-label">
+            <label htmlFor="productDescription" className="form-label">
               Description
             </label>
             <textarea
-              name="prodDesc"
-              id="prodDesc"
+              name="productDescription"
+              id="productDescription"
               cols="40"
               rows="7"
               className="form-control"
-              value={form.prodDesc}
-              onChange={(e) => setForm({ ...form, prodDesc: e.target.value })}
+              value={form.productDescription}
+              onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
             ></textarea>
           </div>
         </div>
@@ -208,8 +209,8 @@ export default function ProductForm(props) {
               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>
@@ -217,13 +218,22 @@ export default function ProductForm(props) {
           <label htmlFor="productImage" className="form-label">
             Product Image
           </label>
+          <input
+            id="productImageUrl"
+            name="productImageUrl"
+            className="form-control form-control-lg"
+            type="url"
+            placeholder="Enter image URL here or upload image below..."
+            value={form.productImageUrl}
+            onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})}
+          ></input>
           <input
             id="productImage"
             name="productImage"
             className="form-control form-control-lg"
             type="file"
             value={form.productImage}
-            onChange={(e) => setForm({ ...form, productImage: e.target.value })}
+            onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
           ></input>
         </div>