fix merge conflict

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 PromotionNewFormComponent from './promotionforms/PromotionNewFormComponent'
 import ProductGrid from "./ProductGrid";
-import {getAllProducts} from "../actions/apiRequests.js"
-
+import { getAllProducts } from "../actions/apiRequests.js";
+import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
 
 export default function Main() {
   const [productData, setproductData] = useState([]);
@@ -17,23 +16,30 @@ 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">
-          <ProductGrid productData={productData} />
+        <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>
+          <h1>404 Page Not Found</h1>
+        </AuthRoute>
       </Switch>
     </div>
   );

src/component/Product.jsx

-import React from 'react'
-import './../styles/Product.css'
+import React, { useState } from "react";
+import "./../styles/Product.css";
+import { Modal, Button, Alert } from "react-bootstrap";
 
-export default function Product({product}) {
+export default function Product({ product }) {
+  const [show, setShow] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleClose = () => {
+    setShow(false);
+    handleCloseConfirm();
+  };
+  const handleShow = () => setShow(true);
+  const handleShowConfirm = () => setShowConfirm(true);
+  const handleCloseConfirm = () => setShowConfirm(false);
 
   return (
     <div>
-        <div className="img-container">
-            <img src={product.productImageUrl} alt={product.productName}/>
+      <div className="img-container" onClick={handleShow}>
+        <img
+          className="grid-img"
+          src={product.productImageUrl}
+          alt={product.productName}
+        />
       </div>
       <div className="prod-info">
         <h5>{product.productName}</h5>
-            {product.sku}<br/>
-            ${product.price}<br/>
+        {product.sku}
+        <br />${product.price}
+        <br />
         In Stock: {product.stock}
       </div>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>{product.productName}</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <div className="modal-img">
+            <img src={product.productImageUrl} alt={product.productName} />
+          </div>
+          <h5>{product.sku}</h5>${product.price}
+          <br />
+          {product.productDescription}
+          <br />
+          In Stock: {product.stock}
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            className="float-left"
+            onClick={handleShowConfirm}
+          >
+            Delete product
+          </Button>
+
+          <Button variant="primary" href={`/products/edit/${product.sku}`}>
+            Edit Product
+          </Button>
+
+          <Alert show={showConfirm} variant="danger">
+            <h5> Are you sure?</h5>
+            <Button variant="secondary" onClick={handleCloseConfirm}>
+              Cancel
+            </Button>
+            &nbsp;&nbsp;
+            <Button variant="danger">Yes, delete</Button>
+          </Alert>
+        </Modal.Footer>
+      </Modal>
     </div>
-  )
+  );
 }

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 emptyProduct from "../emptProduct";
 
 const emptyForm = {
-  sku: "",
-  upc: "",
-  productName: "",
-  brand: "",
-  category: "",
-  price: 0.0,
-  availableStock: 0,
-  productDescription: "",
-  productImageUrl: "",
-  productImage: ""
+  ...emptyProduct,
+  imageFile: "",
 };
 
 ProductForm.defaultProps = {
@@ -19,15 +12,34 @@ ProductForm.defaultProps = {
 };
 
 export default function ProductForm(props) {
-  const { product } = 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");
     }
@@ -56,11 +68,20 @@ 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",
+      const url =
+        method === "PUT"
+          ? `${Config.inventoryUrl}/${sku}`
+          : `${Config.inventoryUrl}`;
+      fetch(url, {
+        method,
         headers: {
           "Content-Type": "application/json",
         },
@@ -100,11 +121,13 @@ export default function ProductForm(props) {
               SKU
             </label>
             <input
+              disabled={method === "PUT" ? true : false}
               required
               name="sku"
               type="text"
               className="form-control"
               id="productSku"
+              disabled={method === "PUT" ? true : false}
               value={form.sku}
               onChange={(e) => setForm({ ...form, sku: e.target.value })}
             />
@@ -137,7 +160,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>
@@ -170,17 +195,19 @@ 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"
               value={form.productDescription}
-              onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, productDescription: e.target.value })
+              }
             ></textarea>
           </div>
         </div>
@@ -204,8 +231,9 @@ export default function ProductForm(props) {
               Stock
             </label>
             <input
+              disabled={method === "PUT" ? true : false}
               required
-              name="stock"
+              name="availableStock"
               type="number"
               className="form-control"
               id="stock"
@@ -214,28 +242,61 @@ export default function ProductForm(props) {
             />
           </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"
-            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"
+                name="imageFile"
                 className="form-control form-control-lg"
                 type="file"
-            value={form.productImage}
-            onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
+                value={form.imageFile}
+                onChange={(e) =>
+                  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
+                name="productImageUrl"
+                type="text"
+                className="form-control"
+                id="prodImgUrl"
+                value={form.productImageUrl}
+                onChange={(e) =>
+                  setForm({ ...form, productImageUrl: e.target.value })
+                }
+              />
+              <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/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 { Link } from "react-router-dom";
+
 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>
-      <Container id="prod-grid" className="mt-3">
+    <div class="container flex-column d-flex justify-content-center">
+      <div className="container mt-3 d-flex justify-content-between align-items-center">
+        <h1 id="title" className="text-center">
+          Inventory
+        </h1>
+        <Link type="link" className="btn btn-success" to="/products/new">
+          + New Product
+        </Link>
+      </div>
+      <Container id="prod-grid" className="mt-3 mx-auto">
         <Row xs={1} sm={2} md={3} lg={4}>
-          {productData.map((product) => {
+          {products.map((product) => {
             return (
               <Col key={product.sku}>
                 <Product product={product} />

src/emptProduct.js

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

src/styles/Product.css

+img {
+    max-width: 100%;
+    max-height: 250px;
+}
+
 .img-container{
     position:relative;
     overflow:hidden;
     padding-bottom:100%;
 }
-img {
+.grid-img {
     position: absolute;
     max-width: 100%;
     max-height: 100%;
@@ -11,3 +16,12 @@ img {
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
 }
+
+.modal-img {
+    display: flex;
+    justify-content: center;
+}
+
+.alert{
+    width: 100%;
+}
\ No newline at end of file