add update promo, list, and delete

src/component/Main.jsx

@@ -6,6 +6,7 @@ import PromotionNewFormComponent from './promotionforms/PromotionNewFormComponen
 import ProductGrid from "./ProductGrid";
 import {getAllProducts} from "../actions/apiRequests.js"
 import PromotionIndexComponent from './promo_index/PromotionsIndexComponent';
+import PromotionUpdateFormComponent from './promotionforms/UpdatePromotionForm';
 
 
 export default function Main() {
@@ -30,6 +31,7 @@ export default function Main() {
         <AuthRoute exact path="/products">
           <ProductGrid productData={productData} />
         </AuthRoute>
+        <AuthRoute exact path="/promos/:promotionId/update" component={PromotionUpdateFormComponent}></AuthRoute>
         <AuthRoute path="/promos" component={PromotionIndexComponent}>PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />

src/component/promo_index/PromotionsIndexComponent.jsx

@@ -15,18 +15,16 @@ export default function PromotionIndexComponent ({}) {
         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"))
+        .then(res => loadPromotions())
         .catch(err => console.log("error"))
     }
+
     return (
         <div>
             <div className="promo-container">
@@ -53,6 +51,9 @@ export default function PromotionIndexComponent ({}) {
                             </th>
                             <th>
 
+                            </th>
+                            <th>
+
                             </th>
                             </tr>
                         </thead>
@@ -67,11 +68,19 @@ export default function PromotionIndexComponent ({}) {
                                 {promo.productSku}
                             </td>
                             <td>
-                                {promo.discountPercentage * 100}%
+                                {promo.discountPercentage}%
                             </td>
                             <td>
                                 {promo.minimumQuantity}
                             </td>
+                            <td>
+                                <NavLink className="edit-navLink"  to={{
+                                    pathname: `/promos/${promo.promotionId}/update`,
+                                    state: {promo} 
+                                    }}>
+                                    <button className="btn-primary">Update</button>
+                                </NavLink>
+                            </td>
                             <td>
                                 <button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
                             </td>

src/component/promo_index/promolistStyle.css

@@ -20,7 +20,6 @@
     align-self: center;
 }
 
-
 table {
   border-collapse: collapse;
   width: 100%;

src/component/promotionforms/PromotionNewFormComponent.jsx

@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
 import Config from '../../config';
 import { useHistory } from 'react-router'
 
-export default function PromotionNewFormComponent () {
+export default function PromotionNewFormComponent (props) {
     const { register, handleSubmit, formState: { errors } } = useForm();
     const history = useHistory();
     const [serverErrors, setErrors] = useState([]);
@@ -29,7 +29,6 @@ export default function PromotionNewFormComponent () {
             <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> : ""}
 
@@ -44,8 +43,7 @@ export default function PromotionNewFormComponent () {
                         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">

src/component/promotionforms/UpdatePromotionForm.jsx

+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import "./promoStyle.css";
+import { NavLink } from 'react-router-dom';
+import Config from '../../config';
+import { useHistory } from 'react-router'
+
+export default function PromotionUpdateFormComponent(props) {
+    const { register, handleSubmit, formState: { errors } } = useForm();
+    const history = useHistory();
+    const [serverErrors, setErrors] = useState([]);
+
+    const onSubmit = (data) => {
+        console.log(data)
+
+        fetch(`${Config.promotionsUrl}/${data.promotionId}`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+        })
+            .then(res => res.ok ? history.push("/promos") : setErrors(["error"]))
+            .catch(err => setErrors([err.message]))
+    };
+    console.log(props.location.state.promo.promotionId)
+    return (
+        <div>
+            <div className="promo-container">
+                <div className="promo-form-container">
+                    <h1 className="promo-form-title">Update 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
+                                {...register("promotionId", {
+                                    value: props.location.state.promo.promotionId,
+                                    required: "promotion id is required",
+                                    maxLength: { value: 10, 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>}
+
+                        </div>
+                        <div className="form-group">
+                            <label>Product Sku</label>
+                            <input
+                                {...register("productSku", {
+                                    value: props.location.state.promo.productSku,
+                                    required: "product sku required",
+                                    maxLength: { value: 10, message: "You exceeded the maximum value" }
+                                })}
+                                id="productSku"
+                                className="form-control"
+                            />
+                            {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
+                            <br></br>
+                        </div>
+
+                        <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
+                                    {...register("discountPercentage", {
+                                        valueAsNumber: true,
+                                        value: props.location.state.promo.discountPercentage,
+                                        required: "% off required",
+                                        min: { value: 0, message: "% must be greater than or equal to 0" },
+                                        max: { value: 100, message: "% must be less than or equal to 100" },
+                                    })}
+                                    id="discountPercentage"
+                                    className="form-control"
+                                    placeholder={props.location.state.promo.discountPercentage }
+                                    type="number"
+                                />
+                            </div>
+                            {errors.discountPercentage && <p className="form-error">{errors.discountPercentage.message}</p>}
+
+                        </div>
+
+                        <div className="form-group">
+                            <label>Applies at Minimum Quantity</label>
+                            <input
+                                {...register("minimumQuantity", {
+                                    valueAsNumber: true,
+                                    value: props.location.state.promo.minimumQuantity,
+                                    required: "minimum quantity is required",
+                                    min: { value: 1, message: "discount percentage must be greater than 0" },
+                                })}
+                                id="minimumQuantity"
+                                className="form-control"
+                                type="number"
+                                min="1"
+                                placeholder={props.location.state.promo.minimumQuantity}
+                            />
+                            {errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
+                        </div>
+                        <input className="promo-submit" type="submit" value="Update Promotion" />
+                        <NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}
+