merge with AFP-110 dev and fix conflicts

src/actions/apiRequests.js

@@ -3,6 +3,27 @@ import axios from 'axios';
 
 export const getAllProducts = async data => {
     const res = await axios.get(`${Config.inventoryUrl}`);
-    // console.log(res.data);
     return res.data;
+}
+
+export const deleteProduct = async (sku) => {
+     await axios.delete(`${Config.inventoryUrl}/${sku}`)
+        .then(() => {
+             getAllProducts();
+        });
+}
+
+export const getFilteredProducts = async (searchTerm, searchBy) => {
+    const res = await axios.get(`${Config.inventoryUrl}`);
+    return res.data.filter(product => {
+        let productFiltered;
+
+        if(searchBy === "name"){
+            productFiltered = product.productName.toLowerCase();
+        }else if(searchBy === "sku"){
+            productFiltered = product.sku.toLowerCase();
+        }
+
+        return productFiltered.includes(searchTerm.toLowerCase());
+    });
 }
\ No newline at end of file

src/component/Header.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import Search from "./Search";
 
 const Header = () => {
   const [show, setShow] = useState(false);
@@ -38,16 +39,7 @@ const Header = () => {
               </Link>
             </li>
           </ul>
-          <form className="d-flex">
-            <input
-              type="search"
-              className="form-control me-2"
-              placeholder="search"
-            />
-            <button className="btn btn-light" type="submit">
-              GO
-            </button>
-          </form>
+        <Search />
         </div>
       </div>
     </nav>

src/component/Main.jsx

-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 PromotionIndexComponent from './promo_index/PromotionsIndexComponent';
-import PromotionUpdateFormComponent from './promotionforms/UpdatePromotionForm';
-
+import ProductIndex from "./ProductIndex";
+import SearchResults from "./SearchResults";
+import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
+import PromotionIndexComponent from "./promo_index/PromotionsIndexComponent";
 
 export default function Main() {
-  const [productData, setproductData] = useState([]);
-
-  useEffect(() => {
-    loadProducts();
-  }, []);
-
-  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/:productId">
+          <ProductForm method="PUT" />
+        </AuthRoute>
+        <AuthRoute
+          exact
+          path="/promos/new"
+          component={PromotionNewFormComponent}
+        ></AuthRoute>
+        <AuthRoute exact path="/products" component={ProductIndex}></AuthRoute>
+        <AuthRoute path="/promos">
+          <PromotionIndexComponent />
         </AuthRoute>
-        <AuthRoute exact path="/promos/:promotionId/update" component={PromotionUpdateFormComponent}></AuthRoute>
-        <AuthRoute path="/promos" component={PromotionIndexComponent}>PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />
         </AuthRoute>
-        <AuthRoute >404 PAGE</AuthRoute>
+        <AuthRoute path="/searchResults" component={SearchResults} />
+        <AuthRoute>
+          <h1>404 Page Not Found</h1>
+        </AuthRoute>
       </Switch>
     </div>
   );

src/component/Product.jsx

-import React from 'react'
-import './../styles/Product.css'
-
-export default function Product({product}) {
-
-  return (
-    <div>
-        <div className="img-container">
-            <img src={product.productImageUrl} alt={product.productName}/>
-        </div>
-        <div className="prod-info">
-            <h5>{product.productName}</h5>
-            {product.sku}<br/>
-            ${product.price}<br/>
-            In Stock: {product.stock}
-        </div>		
-    </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";
+import Config from '../config';
 
 const emptyForm = {
-  sku: "",
-  upc: "",
-  productName: "",
-  brand: "",
-  category: "",
-  price: 0.0,
-  availableStock: 0,
-  productDescription: "",
-  productImageUrl: "",
-  productImage: ""
+  ...emptyProduct,
+  imageFile: "",
 };
 
 ProductForm.defaultProps = {
@@ -19,15 +13,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 });
+        });
+      }
+    });
+  }, [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 +69,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}/${productId}`
+          : `${Config.inventoryUrl}`;
+      fetch(url, {
+        method,
         headers: {
           "Content-Type": "application/json",
         },
@@ -100,6 +122,7 @@ export default function ProductForm(props) {
               SKU
             </label>
             <input
+              disabled={method === "PUT" ? true : false}
               required
               name="sku"
               type="text"
@@ -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>
-        <div className="row mt-3">
-          <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, productImageUrl:"" })}
-          ></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"
+                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 Product from "./Product.jsx";
-import { Col, Container, Row } from "react-bootstrap";
-import "./../styles/ProductGrid.css";
-export default function ProductGrid({ productData }) {
-  return (
-    <div>
-      <h1 id="title" className="text-center" >Inventory</h1>
-      <Container id="prod-grid" className="mt-3">
-        <Row xs={1} sm={2} md={3} lg={4}>
-          {productData.map((product) => {
-            return (
-              <Col key={product.sku}>
-                <Product product={product} />
-              </Col>
-            );
-          })}
-        </Row>
-      </Container>
-    </div>
-
-    //uses vanilla bootstrap
-    // <div>
-    //   	<h1 id="title">Inventory</h1>
-    // 	<div className="container" id="prod-grid"  >
-    // 	<div className="row row-cols-4">
-    // 		{productData.map((product) => {
-    // 			return (
-    // 					<div className="col" key={product.sku}>
-    // 						<Product product={product}/>
-    // 					</div>
-
-    // 			)
-    // 		})}
-    // 		</div>
-    // 	</div>
-    // </div>
-  );
-}

src/component/ProductIndex.jsx

+import React, { useEffect, useState } from "react";
+import ProductTable from "./ProductTable.jsx";
+import Config from "../config.js";
+import { Link } from "react-router-dom";
+
+export default function ProductIndex() {
+  const [products, setProducts] = useState([]);
+  const [displayProducts, setDisplayProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [activeCategory, setActiveCategory] = useState("");
+
+  console.log(displayProducts);
+  const fetchProducts = async () => {
+    const res = await fetch(`${Config.inventoryUrl}`);
+    if (res.ok) {
+      const data = await res.json();
+      setProducts([...data]);
+      setDisplayProducts([...data]);
+      setCategories([
+        ...data.reduce((acc, prod) => {
+          if (!acc.includes(prod.category)) {
+            acc.push(prod.category);
+          }
+          return acc;
+        }, []),
+      ]);
+    }
+  };
+
+  useEffect(() => fetchProducts(), []);
+
+  return (
+    <div className="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>
+      {products.length > 0 ? (
+        <>
+            <select
+              className="form-select w-25 mt-1"
+              id="category-select"
+              onChange={(e) => {
+                if (e.target.value === "") {
+                  setDisplayProducts([...products]);
+                  return;
+                }
+                const filtered = products.filter(
+                  (prod) => prod.category === e.target.value
+                );
+                setDisplayProducts([...filtered]);
+              }}
+            >
+              <option value="">Select Category</option>
+              {categories.map((category, i) => (
+                <option key={i + 679}>{category}</option>
+              ))}
+            </select>
+          <ProductTable
+            productData={displayProducts}
+            fetchProducts={fetchProducts}
+            products={displayProducts}
+          />
+        </>
+      ) : (
+        <p>No products found.</p>
+      )}
+    </div>
+  );
+}

src/component/ProductRow.jsx

+import React, { useState } from "react";
+import "./../styles/ProductRow.css";
+import { Modal, Button, Alert } from "react-bootstrap";
+
+export default function ProductRow({ product, handleDelete }) {
+  const [show, setShow] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleClose = () => {
+    setShow(false);
+    console.log({ show });
+    handleCloseConfirm();
+  };
+
+  const handleCloseDelete = (sku) => {
+    handleDelete(sku);
+    handleClose();
+  };
+
+  const handleShow = () => setShow(true);
+  const handleShowConfirm = () => setShowConfirm(true);
+  const handleCloseConfirm = () => setShowConfirm(false);
+
+  return (
+    <tr>
+      <td onClick={handleShow}>{product.sku}</td>
+      <td onClick={handleShow}>{product.upc}</td>
+      <td onClick={handleShow}>{product.productName}</td>
+      <td onClick={handleShow}>${product.price}</td>
+      <td onClick={handleShow}>{product.category}</td>
+      <td onClick={handleShow}>{product.availableStock}</td>
+      <td onClick={handleShow}>{product.blockedStock}</td>
+      <td onClick={handleShow}>{product.fulfilledStock}</td>
+
+      <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.availableStock}
+          <br />
+          Blocked Stock: {product.blockedStock}
+          <br />
+          Fulfilled Stock: {product.fulfilledStock}
+        </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"
+              onClick={() => handleCloseDelete(product.sku)}
+            >
+              Yes, delete
+            </Button>
+          </Alert>
+        </Modal.Footer>
+      </Modal>
+    </tr>
+  );
+}

src/component/ProductTable.jsx

+import React, { useState, useEffect } from "react";
+import ProductRow from "./ProductRow.jsx";
+import { Container, Table } from "react-bootstrap";
+import Config from "../config.js";
+import { deleteProduct } from "../actions/apiRequests";
+
+export default function ProductTable({ fetchProducts, products }) {
+  // const [products, setProducts] = useState([...productData]);
+
+  // const fetchProducts = async () => {
+  //   const res = await fetch(`${Config.inventoryUrl}`);
+  //   if (res.ok) {
+  //     const data = await res.json();
+  //     setProducts([...data]);
+  //   }
+  // };
+
+  const handleDelete = (sku) => {
+    deleteProduct(sku)
+      .then(() => {
+        fetchProducts();
+      });
+  }
+
+  useEffect(() => fetchProducts(), []);
+
+  return (
+    <Container id="prod-table" className="mt-3 mx-auto">
+      <Table>
+        <thead>
+          <tr>
+            <th>SKU</th>
+            <th>UPC</th>
+            <th>Product Name</th>
+            <th>Price</th>
+            <th>Category</th>
+            <th>Available Stock</th>
+            <th>Blocked Stock</th>
+            <th>Fulfilled Stock</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((product) => {
+            return (
+              <ProductRow key={product.sku} product={product} handleDelete={() => handleDelete(product.sku)} />
+            );
+          })}
+        </tbody>
+      </Table>
+    </Container>
+  );
+}

src/component/Search.jsx

+import React from 'react';
+import { withRouter, Link } from "react-router-dom";
+import { getFilteredProducts } from '../actions/apiRequests';
+import "./../styles/Search.css";
+
+class Search extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            searchTerm: '',
+            searchBy: 'name',
+            results: [],
+        };
+
+        this.submit = this.submit.bind(this);
+        this.changeTerm = this.changeTerm.bind(this);
+        this.handleRadioButton = this.handleRadioButton.bind(this);
+    }
+
+    changeTerm(event) {
+        this.setState({searchTerm: event.target.value});
+    }
+
+    handleRadioButton(value) {
+        this.setState({
+            searchBy: value
+        });
+      }
+
+    async submit(event){
+        event.preventDefault();
+        const data = await getFilteredProducts(this.state.searchTerm, this.state.searchBy)
+            .then(res => {
+                this.setState({results: res});
+            })
+            .catch(err => console.log(err));
+
+        if(this.props.location.pathname === "/searchResults"){
+            this.props.history.push("/products", this.state);
+        }
+        
+        this.props.history.push("/searchResults", this.state);
+    }
+
+    //Need to search by name or SKU
+    render(){
+        return (
+            <div>
+                <form className="d-flex" onSubmit={this.submit}>
+                    <input
+                    type="search"
+                    className="form-control me-2"
+                    placeholder="Search for item..."
+                    onChange={event => this.changeTerm(event)}
+                    />
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input" type="radio" name="inlineRadioOptions" checked={this.state.searchBy === "name"} onChange={() => this.handleRadioButton("name")} id="searchByName" value="name" />
+                        <label className="form-check-label" htmlFor="searchByName">Name</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input" type="radio" name="inlineRadioOptions" checked={this.state.searchBy === "sku"} onChange={() => this.handleRadioButton("sku")} id="searchBySku" value="sku" />
+                        <label className="form-check-label" htmlFor="searchBySKU">Sku</label>
+                    </div>
+                    <button className="btn btn-light" type="submit">
+                        GO
+                    </button>
+                </form>
+                    <Link to={{
+                    pathname: '/searchResults',
+                    state: {results: this.state.results}
+                }} />
+            </div>
+          );
+    }
+}
+
+export default withRouter(Search);
\ No newline at end of file

src/component/SearchResults.jsx

+import React from "react";
+import ProductRow from "./ProductRow.jsx";
+import { Table } from "react-bootstrap";
+import { deleteProduct } from "../actions/apiRequests";
+import { withRouter } from "react-router";
+
+class SearchResults extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      results: this.props.history.location.state.results
+    }
+    this.handleDelete = this.handleDelete.bind(this);
+  }
+
+   handleDelete(sku){
+     deleteProduct(sku)
+      .then(() => {
+        const newResults = this.state.results.filter(product => product.sku !== sku);
+        this.setState({results: newResults});
+        this.props.history.push("/searchResults", this.state);
+      });
+  }
+
+  render() {
+    return (
+      <div className="container flex-column d-flex justify-content-center">
+        <h1 id="title" className="text-center" >Search Results</h1>
+        {this.state.results.length > 0 ?
+          <Table>
+            <thead>
+              <tr>
+                <th>SKU</th>
+                <th>Product Name</th>
+                <th>Price</th>
+                <th>Category</th>
+                <th>Available Stock</th>
+                <th>Blocked Stock</th>
+                <th>Fulfilled Stock</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.results.map((product) => {
+                return (
+                  <ProductRow key={product.sku} product={product} handleDelete={() => this.handleDelete(product.sku)} />
+                );
+              })}
+            </tbody>
+          </Table>
+          :
+          <p>Unable to find any matching products.</p>
+        }
+      </div>
+    );
+  }
+
+}
+
+export default withRouter(SearchResults);
\ No newline at end of file

src/component/promo_index/PromotionsIndexComponent.jsx

@@ -3,11 +3,11 @@ import Config from '../../config';
 import "./promolistStyle.css";
 import { NavLink } from 'react-router-dom';
 
-export default function PromotionIndexComponent ({}) {
+export default function PromotionIndexComponent () {
 
-    const [promoData, setPromoData] = useState([]);    
-    
-    useEffect(async () => {
+    const [promoData, setPromoData] = useState([]);
+
+    useEffect( () => {
         loadPromotions();
     }, [])
 
@@ -15,6 +15,7 @@ export default function PromotionIndexComponent ({}) {
         const response = await fetch(`${Config.promotionsUrl}`);
         const data = await response.json();
         setPromoData(data);
+        console.log(data);
     }
 
     const deletePromotion = (promoId) => {
@@ -28,7 +29,6 @@ export default function PromotionIndexComponent ({}) {
     return (
         <div>
             <div className="promo-container">
-
                 <div className="promo-list-container">
                     <div className="promo-header">
                         <h1 className="promo-title"> Promotions</h1>
@@ -58,7 +58,7 @@ export default function PromotionIndexComponent ({}) {
                             </tr>
                         </thead>
                         <tbody>
-                        {promoData.map((promo, key) => {
+                        {promoData.length > 0 && promoData.map((promo, key) => {
                             return (
                             <tr key={key}>
                             <td>
@@ -76,7 +76,7 @@ export default function PromotionIndexComponent ({}) {
                             <td>
                                 <NavLink className="edit-navLink"  to={{
                                     pathname: `/promos/${promo.promotionId}/update`,
-                                    state: {promo} 
+                                    state: {promo}
                                     }}>
                                     <button className="btn-primary">Update</button>
                                 </NavLink>
@@ -86,12 +86,12 @@ export default function PromotionIndexComponent ({}) {
                             </td>
                             </tr>
                             )
-                        }).reverse()
-                        }
+                        }).reverse() }
+                        
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
     )
-}
+}
\ No newline at end of file

src/component/promo_index/promolistStyle.css

 .promo-container {
-    margin: 30px auto;
-    padding: 0 16px;
+  margin: 30px auto;
+  padding: 0 16px;
 }
 .promo-header {
-    background-color: #212529;
-    display: flex;
-    justify-content: space-between;
-    padding-left: 10px;
-    padding-right: 10px;
+  background-color: #212529;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .promo-title {
-
-    color: white;
-    padding: 8px;
-} 
+  color: white;
+  padding: 8px;
+}
 
 .add-navLink {
-    align-self: center;
+  align-self: center;
 }
 
 table {
@@ -25,17 +24,18 @@ table {
   width: 100%;
 }
 
-td, th {
+td,
+th {
   text-align: left;
   padding: 8px;
 }
 
 tr td {
-    height: 40px;
+  height: 40px;
 }
 
 tr {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 tr:nth-child(even) {
@@ -43,10 +43,10 @@ tr:nth-child(even) {
 }
 
 thead th {
-    background-color: #dddddd;
-    height: 35px;
+  background-color: #dddddd;
+  height: 35px;
 }
 
 tr:hover {
-    background-color: lightblue;
-}
+  background-color: lightblue;
+}
\ No newline at end of file

src/component/promotionforms/PromotionNewFormComponent.jsx

@@ -30,15 +30,15 @@ export default function PromotionNewFormComponent (props) {
     };
 
 
-    useEffect(async () => {
-        await loadProducts();
+    useEffect(() => {
+        loadProducts();
     }, [])
 
     const loadProducts = async (event) => {
         const data = await getAllProducts();
-        
+
         setproductData(data);
-       
+
     }
 
     const onChange = (e, data) => {
@@ -49,18 +49,19 @@ export default function PromotionNewFormComponent (props) {
 
 
     const productSku = register('productSku', { required: true })
-    
+
     return (
         <div>
             <div className="promo-container">
                 <div className="promo-form-container">
                     <h1 className="promo-form-title">Add Promotion</h1>
+
                 <form className="promo-form" onSubmit={handleSubmit(onSubmit)}>
                         {serverErrors.length ? <p className="form-error">{serverErrors}</p> : ""}
 
                 <div className="form-group">
                     <label>Promotion Id</label>
-                    <input 
+                    <input
                         {...register("promotionId", {
                             required: "promotion id is required",
                             maxLength: { value: 10, message: "You exceeded the maximum value" }
@@ -69,10 +70,11 @@ export default function PromotionNewFormComponent (props) {
                         className="form-control"
                                 placeholder="eg. PROMO-403"
                     />
-                        {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
-                            
+
+                            {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
+
                 </div>
-                    
+
                 <div className="form-group">
                     <label>Product Sku</label>
                     {/* <input
@@ -108,7 +110,7 @@ export default function PromotionNewFormComponent (props) {
                 <div className="form-group">
                     <label>Enter % off</label>
                     <div className="input-group">
-                    
+
                             <div className="input-group-prepend">
                     <span className="input-group-text">%</span></div>
                     <input
@@ -130,7 +132,7 @@ export default function PromotionNewFormComponent (props) {
 
                 <div className="form-group">
                     <label>Applies at Minimum Quantity</label>
-                    <input 
+                    <input
                         {...register("minimumQuantity", {
                             valueAsNumber: true,
                             required: "minimum quantity is required",
@@ -153,4 +155,3 @@ export default function PromotionNewFormComponent (props) {
         </div>
     );
 }
-

src/component/promotionforms/UpdatePromotionForm.jsx

@@ -29,8 +29,8 @@ export default function PromotionUpdateFormComponent(props) {
             .catch(err => setErrors([err.message]))
     };
 
-    useEffect(async () => {
-        await loadProducts();
+    useEffect( () => {
+         loadProducts();
     }, [])
 
     const loadProducts = async (event) => {
@@ -59,13 +59,13 @@ export default function PromotionUpdateFormComponent(props) {
                                     value: props.location.state.promo.promotionId,
                                     required: "promotion id is required",
                                     maxLength: { value: 20, message: "You exceeded the maximum value" },
-                                    
+
                                 })}
                                 readOnly
                                 id="promotionId"
                                 className="form-control"
                                 placeholder="eg. PROMO-403"
-                                
+
                             />
                             {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
 
@@ -142,4 +142,3 @@ export default function PromotionUpdateFormComponent(props) {
         </div>
     );
 }
-

src/component/promotionforms/promoStyle.css

@@ -6,6 +6,7 @@
     
     
 }
+
 .promo-form-title {
     text-align: center;
     background-color: #212529;
@@ -17,11 +18,6 @@
        border: 1px solid #212529;
 }
 
-label {
-    font-weight: bold;
-    padding-bottom: 7px;
-}
-
 .promo-form {
     padding: 50px;
     

src/config.js

@@ -3,4 +3,4 @@ class Config {
     static promotionsUrl = "http://localhost:8081/api/promos";
 }
 
-export default Config;
+export default Config;
\ No newline at end of file

src/emptProduct.js

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

src/styles/ProductGrid.css → src/styles/ProductIndex.css

@@ -2,6 +2,6 @@
     margin-left: 1em;
 }
 
-#prod-grid {
-    margin-left: 2em;
+#prod-table {
+    margin-left: 5em;
 }
\ No newline at end of file

src/styles/Product.css → src/styles/ProductRow.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%;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
+}
+
+.modal-img {
+    display: flex;
+    justify-content: center;
+}
+
+.alert{
+    width: 100%;
 }
\ No newline at end of file

src/styles/Search.css

+.form-check-label{
+    color: rgba(255, 255, 255, 0.55)
+}
+
+.form-check.form-check-inline{
+    margin-top: 0.35rem;
+}
\ No newline at end of file