add css, error validation to promotion form

package-lock.json

@@ -14,6 +14,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-hook-form": "^7.4.1",
+        "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
         "web-vitals": "^1.0.1"

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.4.1",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/component/promotionforms/PromotionNewFormComponent.jsx

-import React from "react";
+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 PromotionNewFormComponent () {
-    const { register, watch, handleSubmit, formState: { errors } } = useForm();
-    
+    const { register, handleSubmit, formState: { errors } } = useForm();
+    const history = useHistory();
+    const [serverErrors, setErrors] = useState([]);
+
     const onSubmit = (data) => {
         console.log(data)
-        alert(JSON.stringify(data));
-        fetch("http://localhost:8081/api/promos", {
+
+        fetch(`${Config.promotionsUrl}`, {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
             },
             body: JSON.stringify(data),
             })
-            .then(res => res.json())
-            .catch(err => console.log(err.data))
+            .then(res => res.ok ? history.push("/promos") : setErrors(["There is already an existing Promotion Id"]))
+            .catch(err => setErrors([err.message]))
     };
 
-    console.log(errors);
-    console.log(watch);
+
     return (
         <div>
-            <div>
-                <h1>Create New Promotion</h1>
-            </div>
-            <form onSubmit={handleSubmit(onSubmit)}>
-                <label>Promotion Id</label>
-                <input 
-                    {...register("promotionId", {
-                        required: "promotion id is required",
-                        maxLength: { value: 10, message: "You exceeded the maximum value" }
-                    })}
-                    id="promotionId"
-                />
-                {errors.promotionId === 'required'  && <p>{errors.promotionId.message}</p>}
-                        <br></br>
-                <label>Promotion Sku</label>
-                <input
-                    {...register("productSku", {
-                        required: true,
-                    })}
-                    id="productSku"
-                />
-                {errors?.promotionSku?.type === "required" && <p>This field is required</p>}
-                <br></br>
-
-                <label>Discount Percentage</label>
-                <input
-                    {...register("discountPercentage", {
-                        valueAsNumber: true,
-                        required: true,
-                    })}
-                    id="discountPercentage"
-                />
-                <br></br>
-                {errors?.discountPercentage?.type === "required" && <p>This field is required</p>}
+            <div className="promo-container">
+                <div className="promo-form-container">
+                    <h1 className="promo-form-title">Add Promotion</h1>
                 
-                <label>minimumQuanitity</label>
-                <input
-                    {...register("minimumQuantity", {
-                        valueAsNumber: true,
-                        required: "this field is required",
-                    })}
-                    id="minimumQuantity"
-                />
-                {errors.minimumQuantity && <p>{errors.minimumQuantity}</p>}
+                <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", {
+                            required: "promotion id is required",
+                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                        })}
+                        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", {
+                            required: "product sku required",
+                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                        })}
+                        id="productSku"
+                        className="form-control"
+                                placeholder="eg. SKU-39SD"
+                    />
+                            {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,
+                            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="20"
+                                type="number"
+                    />
+                            </div>
+                        {errors.discountPercentage && <p className="form-error">{errors.discountPercentage.message}</p>}
 
-                <input type="submit" />
+                </div>
+
+                <div className="form-group">
+                    <label>Applies at Minimum Quantity</label>
+                    <input 
+                        {...register("minimumQuantity", {
+                            valueAsNumber: true,
+                            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="1"
+                    />
+                            {errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
+                    </div>
+                        <input className="promo-submit" type="submit" value="Save Promotion" />
+                        <NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
             </form>
+                </div>
+            </div>
         </div>
     );
 }

src/component/promotionforms/promoStyle.css

+.promo-container {
+    
+    margin: 0px auto;
+    padding: 50px;
+    border-radius: 3px;
+    
+    
+}
+
+.promo-form-title {
+    text-align: center;
+    background-color: #212529;
+    color: white;
+    padding: 8px;
+}
+
+.promo-form-container {
+       border: 1px solid #212529;
+}
+
+.promo-form {
+    padding: 50px;
+    
+}
+
+.form-group {
+    padding: 5px;
+}
+
+.promo-submit {
+    background-color: #212529;
+    border: 1px solid black;
+    border-radius: 4px;
+    color: white;
+    min-width: 180px;
+    height: 45px;
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 15px;
+}
+
+.promo-submit:hover {
+    background-color: #212529;
+    filter: brightness(90%);
+}
+
+.promo-cancel {
+    margin-left: 15px;
+}
+
+.form-error {
+    color: red;
+}
\ No newline at end of file

src/config.js

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

yarn.lock

@@ -9153,7 +9153,7 @@
     "tiny-invariant" "^1.0.2"
     "tiny-warning" "^1.0.0"
 
-"react-router@5.2.0":
+"react-router@^5.2.0", "react-router@5.2.0":
   "integrity" "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw=="
   "resolved" "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz"
   "version" "5.2.0"