add promotion form component

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.4.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/component/Main.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
+import PromotionNewFormComponent from './promotionforms/PromotionNewFormComponent'
 
 export default function Main() {
   return (
@@ -10,8 +11,8 @@ export default function Main() {
         <AuthRoute exact path="/products/new">
           <ProductForm />
         </AuthRoute>
-        <AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute>
-        <AuthRoute exact  path="/products">PRODUCTS</AuthRoute>
+        <AuthRoute exact path="/promos/new" component={PromotionNewFormComponent}>NEW PROMO</AuthRoute>
+        <AuthRoute exact path="/products">PRODUCTS</AuthRoute>
         <AuthRoute path="/promos">PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />

src/component/promotionforms/PromotionNewFormComponent.jsx

+import React from "react";
+import { useForm } from "react-hook-form";
+
+
+
+export default function PromotionNewFormComponent () {
+    const { register, watch, handleSubmit, formState: { errors } } = useForm();
+    
+    const onSubmit = (data) => {
+        
+        console.log(data)
+        alert(JSON.stringify(data));
+        // fetch("localhost:8081/api/promotion", {
+        //     method: "POST",
+        //     headers: {
+        //         'Content-Type': 'application/json',
+        //     },
+        //     body: JSON.stringify(data),
+        //     })
+        //     .then(res => res.json())
+        //     .then(json => console.log(json))
+        //     .catch(err => console.log(err.data))
+    };
+
+    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>}
+                
+                <label>minimumQuanitity</label>
+                <input
+                    {...register("minimumQuantity", {
+                        valueAsNumber: true,
+                        required: "this field is required",
+                    })}
+                    id="minimumQuantity"
+                />
+                {errors.minimumQuantity && <p>{errors.minimumQuantity}</p>}
+
+                <input type="submit" />
+            </form>
+        </div>
+    );
+}
+