promotions list, add, delete buttons

src/component/Main.jsx

@@ -5,6 +5,7 @@ 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';
 
 
 export default function Main() {
@@ -29,7 +30,7 @@ export default function Main() {
         <AuthRoute exact path="/products">
           <ProductGrid productData={productData} />
         </AuthRoute>
-        <AuthRoute path="/promos">PROMOS</AuthRoute>
+        <AuthRoute path="/promos" component={PromotionIndexComponent}>PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />
         </AuthRoute>

src/component/promo_index/PromotionsIndexComponent.jsx

+import {useState, useEffect} from 'react';
+import Config from '../../config';
+import "./promolistStyle.css";
+import { NavLink } from 'react-router-dom';
+
+export default function PromotionIndexComponent ({}) {
+
+    const [promoData, setPromoData] = useState([]);    
+    
+    useEffect(async () => {
+        loadPromotions();
+    }, [])
+
+    const loadPromotions = async () => {
+        const response = await fetch(`${Config.promotionsUrl}`);
+        const data = await response.json();
+        setPromoData(data);
+        console.log(data);
+        console.log(promoData);
+    }
+
+    const deletePromotion = (promoId) => {
+        console.log(promoId)
+        fetch(`${Config.promotionsUrl}/${promoId}`, {
+            method: "DELETE",
+        })
+        .then(res => console.log("item deleted"))
+        .catch(err => console.log("error"))
+    }
+    return (
+        <div>
+            <div className="promo-container">
+
+                <div className="promo-list-container">
+                    <div className="promo-header">
+                        <h1 className="promo-title"> Promotions</h1>
+                        <NavLink className="add-navLink" to='/promos/new'><button className="btn-primary">+ New Promotion</button></NavLink>
+                    </div>
+                    <table className="promo-index-list">
+                        <thead className="promo-table-title">
+                            <tr>
+                            <th>
+                                Promotion Id
+                            </th>
+                            <th>
+                                Product SKU
+                            </th>
+                            <th>
+                                Discount
+                            </th>
+                            <th>
+                                Minimum Quanitity
+                            </th>
+                            <th>
+
+                            </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        {promoData.reverse().map((promo, key) => {
+                            return (
+                            <tr key={key}>
+                            <td>
+                                {promo.promotionId}
+                            </td>
+                            <td>
+                                {promo.productSku}
+                            </td>
+                            <td>
+                                {promo.discountPercentage * 100}%
+                            </td>
+                            <td>
+                                {promo.minimumQuantity}
+                            </td>
+                            <td>
+                                <button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
+                            </td>
+                            </tr>
+                            )
+                        })}
+                        </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;
+}
+.promo-header {
+    background-color: #212529;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.promo-title {
+
+    color: white;
+    padding: 8px;
+} 
+
+.add-navLink {
+    align-self: center;
+}
+
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td, th {
+  text-align: left;
+  padding: 8px;
+}
+
+tr td {
+    height: 40px;
+}
+
+tr {
+    box-sizing: border-box;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
+
+thead th {
+    background-color: #dddddd;
+    height: 35px;
+}
+
+tr:hover {
+    background-color: lightblue;
+}
\ No newline at end of file

src/component/promotionforms/promoStyle.css

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