added dropdown menu in promotion forms for products

package.json

@@ -15,6 +15,8 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

public/index.html

@@ -8,9 +8,8 @@
       integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
       crossorigin="anonymous"
     />
-    <link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css" />
-    <script async src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"></script>
-
+<link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css" />
+<script async src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"></script>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

src/App.js

@@ -4,6 +4,7 @@ import Main from "./component/Main";
 import AuthRoute from "./component/AuthRoute";
 import { Switch } from "react-router";
 import Login from "./component/Login";
+import 'semantic-ui-css/semantic.min.css'
 
 function App() {
   return (

src/component/promotionforms/PromotionNewFormComponent.jsx

-import { useState } from "react";
+import { useState, useEffect } 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'
+import { Dropdown } from 'semantic-ui-react'
+import {getAllProducts} from '../../actions/apiRequests'
+
 
 export default function PromotionNewFormComponent (props) {
-    const { register, handleSubmit, formState: { errors } } = useForm();
+    const { register, handleSubmit, setValue, formState: { errors } } = useForm();
     const history = useHistory();
     const [serverErrors, setErrors] = useState([]);
+    const [productData, setproductData] = useState([]);
+
 
     const onSubmit = (data) => {
         console.log(data)
@@ -24,6 +29,27 @@ export default function PromotionNewFormComponent (props) {
             .catch(err => setErrors([err.message]))
     };
 
+
+    useEffect(async () => {
+        await loadProducts();
+    }, [])
+
+    const loadProducts = async (event) => {
+        const data = await getAllProducts();
+        
+        setproductData(data);
+       
+    }
+
+    const onChange = (e, data) => {
+        console.log(data)
+        setValue('productSku', data.value)
+        console.log(productSku)
+    }
+
+
+    const productSku = register('productSku', { required: true })
+    
     return (
         <div>
             <div className="promo-container">
@@ -46,9 +72,10 @@ export default function PromotionNewFormComponent (props) {
                         {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
                             
                 </div>
+                    
                 <div className="form-group">
                     <label>Product Sku</label>
-                    <input
+                    {/* <input
                         {...register("productSku", {
                             required: "product sku required",
                             maxLength: { value: 10, message: "You exceeded the maximum value" }
@@ -56,7 +83,22 @@ export default function PromotionNewFormComponent (props) {
                         id="productSku"
                         className="form-control"
                                 placeholder="eg. SKU-39SD"
-                    />
+                    /> */}
+                            <Dropdown
+                                placeholder='Select Product'
+                                fluid
+                                search
+                                selection
+                                onChange={onChange}
+                                onSearchChange={onChange}
+                                options={productData.map(prod => {
+                                    return {
+                                        key: prod.sku,
+                                        text: prod.sku,
+                                        value: prod.sku,
+                                    }
+                                })}
+                                    />
                             {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
                     <br></br>
                 </div>

src/component/promotionforms/UpdatePromotionForm.jsx

-import { useState } from "react";
+import { useState, useEffect } 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'
+import { Dropdown } from 'semantic-ui-react'
+import { getAllProducts } from '../../actions/apiRequests'
+
+
 
 export default function PromotionUpdateFormComponent(props) {
-    const { register, handleSubmit, formState: { errors } } = useForm();
+    const { register, handleSubmit, setValue, formState: { errors } } = useForm();
     const history = useHistory();
     const [serverErrors, setErrors] = useState([]);
+    const [productData, setproductData] = useState([]);
 
     const onSubmit = (data) => {
         console.log(data)
@@ -23,7 +28,26 @@ export default function PromotionUpdateFormComponent(props) {
             .then(res => res.ok ? history.push("/promos") : setErrors(["error"]))
             .catch(err => setErrors([err.message]))
     };
-    console.log(props.location.state.promo.promotionId)
+
+    useEffect(async () => {
+        await loadProducts();
+    }, [])
+
+    const loadProducts = async (event) => {
+        const data = await getAllProducts();
+
+        setproductData(data);
+
+    }
+
+    const onChange = (e, data) => {
+        console.log(data)
+        setValue('productSku', data.value)
+        console.log(productSku)
+    }
+    const productSku = register('productSku', { required: true })
+
+
     return (
         <div>
             <div className="promo-container">
@@ -52,7 +76,7 @@ export default function PromotionUpdateFormComponent(props) {
                         </div>
                         <div className="form-group">
                             <label>Product Sku</label>
-                            <input
+                            {/* <input
                                 {...register("productSku", {
                                     value: props.location.state.promo.productSku,
                                     required: "product sku required",
@@ -60,7 +84,21 @@ export default function PromotionUpdateFormComponent(props) {
                                 })}
                                 id="productSku"
                                 className="form-control"
-                            />
+                            /> */}
+                            <Dropdown
+                                placeholder='Select Product'
+                                fluid
+                                search
+                                selection
+                                onChange={onChange}
+                                onSearchChange={onChange}
+                                options={productData.map(prod => {
+                                    return {
+                                        key: prod.sku,
+                                        text: prod.sku,
+                                        value: prod.sku,
+                                    }
+                                })} />
                             {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
                             <br></br>
                         </div>