Some cleaning

Next/components/ProductForm.tsx

@@ -1,47 +1,72 @@
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { validateForm } from "../lib/product";
+import Errors from "./Errors";
 
 
-export default function ProductForm({ name, price, onNameChange, onPriceChange, onSubmit, busy }) {
+export default function ProductForm({ name, price, onFormChange, onSubmit, busy }) {
     let [form, setForm] = useState({
         name: "",
         value: "",
-    })
+    });
-    let [formBusy,setFormBusy] = useState(false);
+    let [errors, setErrors] = useState({
+        name: new Array<string>(),
+        price: new Array<string>(),
+    });
+
     let nameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
         name = e.target.value;
-        onNameChange(e.target.value);
+        setErrors(validateForm({name,price}));
+        onFormChange({ name, price });
     }
     let priceChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
         price = e.target.value;
-        onPriceChange(e.target.value);
+        setErrors(validateForm({name,price}));
+        onFormChange({ name, price });
     }
-    let submit = (e: React.MouseEvent<HTMLButtonElement>) => {
+    let isValid = (prop) => {
+        if(errors[prop].length > 0) {
+            return "form-control is-invalid";
+        } else {
+            return "form-control is-valid";
+        }
+    }
+    let submit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
+        let currentErrors = validateForm({ name, price});
+        if (currentErrors.name.length === 0 && currentErrors.price.length === 0) {
             onSubmit();
         }
-    formBusy = busy;
+    }
-    useEffect(() => {
+
-        setFormBusy(busy);
-    },[busy]);
     return (
-        <form>
+        <div>
-            <fieldset disabled={formBusy}>
+
-                <div className="mb-3">
+            <form onSubmit={submit}>
+                <fieldset disabled={busy}>
+                    <div>
                         <label htmlFor="name">Name</label>
-                    <input className="form-control" id="name" value={name} onChange={nameChanged}></input>
+                        <input className={isValid("name")} id="name" value={name} onChange={nameChanged}></input>
                     </div>
                     <div className="mb-3">
-                    <label htmlFor="email">Price</label>
+                        <Errors errors={errors.name} />
-                    <input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
+                    </div>
+
+                    <div>
+                        <label htmlFor="price">Price</label>
+                        <input type="number" className={isValid("price")} id="price" value={price} onChange={priceChanged}></input>
                     </div>
                     <div className="mb-3">
-                    <button type="submit" className="btn btn-primary" onClick={submit}>
+                        <Errors errors={errors.price} />
+                    </div>
+                    <div className="mb-3">
+                        <button type="submit" className="btn btn-primary">
                             <FontAwesomeIcon icon={faChevronUp} /> Submit
                     </button>
                     </div>
                 </fieldset>
             </form>
+        </div>
     );
 }

Next/lib/product.ts

@@ -13,22 +13,29 @@ export interface ProductListRowsProps {
 export interface ProductState {
     product: ProductListItem[]
 }
-export interface ProductFormState {
+export interface ProductFormEntry {
-    form: {
     name: string,
     price: number,
-    },
+}
+export interface ProductFormState {
+    form: ProductFormEntry,
     errors: string[],
     busy: boolean,
 }
 
-export function validateForm(form): string[] {
+export function validateForm(form: ProductFormEntry) {
-    let errors: string[] = [];
+    let errors: {name: string[],price: string[]} = {
+        name: [],
+        price: [],
+    };
     if (!form.name) {
-        errors.push("Name required");
+        errors.name.push("Name required");
     }
     if (!form.price) {
-        errors.push("Price required");
+        errors.price.push("Price required");
+    }
+    if (form.price < 0) {
+        errors.price.push("Price must be positive");
     }
     return errors;
 }

Next/pages/product/create.tsx

@@ -20,27 +20,10 @@ function CreateProduct() {
     let [busy, setBusy] = useState(false);
     let [errors, setErrors] = useState([""]);
 
-    const onNameChanged = (newName: string) => {
+    const onFormChanged = (form) => {
-        setForm(
+        setForm(form);
-            {
-                name: newName,
-                price: form.price,
-            }
-        );
-    }
-    const onPriceChanged = (newPrice: number) => {
-        setForm({
-            name: form.name,
-            price: newPrice,
-        });
-    }
-    const validate = () => {
-        let errors: string[] = validateForm(form);
-        setErrors(errors);
-        return errors.length == 0;
     }
     const onSubmit = async () => {
-        if (validate()) {
         setBusy(true);
         try {
             const client = new ProductClient();
@@ -58,7 +41,6 @@ function CreateProduct() {
             setBusy(false);
         }
     }
-    }
 
     return (
         <div className="container mx-auto">
@@ -72,8 +54,7 @@ function CreateProduct() {
                 name={form.name}
                 price={form.price}
                 busy={busy}
-                onNameChange={onNameChanged}
+                onFormChange={onFormChanged}
-                onPriceChange={onPriceChanged}
                 onSubmit={onSubmit} />
             <ul>
                 <Errors errors={errors}></Errors>

Next/pages/product/edit/[id].tsx

@@ -45,20 +45,10 @@ function EditProduct({ productID }) {
         }
     }, [productID]);
 
-    const onNameChanged = (newName: string) => {
+    const onFormChanged = (form) => {
-        setForm(
+        setForm(form);
-            {
-                name: newName,
-                price: form.price,
-            }
-        );
-    }
-    const onPriceChanged = (newPrice: number) => {
-        setForm({
-            name: form.name,
-            price: newPrice,
-        });
     }
+    
     const validate = () => {
         let errors: string[] = validateForm(form);
         setErrors(errors);
@@ -97,8 +87,7 @@ function EditProduct({ productID }) {
                 name={form.name}
                 price={form.price}
                 busy={busy}
-                onNameChange={onNameChanged}
+                onFormChange={onFormChanged}
-                onPriceChange={onPriceChanged}
                 onSubmit={onSubmit} />
             <ul>
                 <Errors errors={errors}></Errors>

Next/pages/product/index.tsx

@@ -83,11 +83,7 @@ class Product extends React.Component<{},ProductState> {
         try {
             const client = new ProductClient();
             await client.delete(productId);
-            // Remove the product in the state by filter()ing it
+            this.getProducts();
-            let product = this.state.product.filter(x => x.productID != productId);
-            this.setState({
-                product
-            })
             Swal.fire({
                 title: "Deleted!",
                 text: "Product is deleted in database",
@@ -100,7 +96,13 @@ class Product extends React.Component<{},ProductState> {
         return (
             <div className="container px-4 mx-auto">
                 <h1>Products</h1>
+                <Link href="/product/create">
+                    <a className="btn btn-primary btn-large">
+                        Create
+                    </a>
+                </Link>
                 <table className="table table-hover table-striped table-sm">
+                    <thead>
                         <tr>
                             <th>ID</th>
                             <th>Name</th>
@@ -108,14 +110,10 @@ class Product extends React.Component<{},ProductState> {
                             <th>Edit</th>
                             <th>Delete</th>
                         </tr>
+                    </thead>
                     <ProductListItemRows products={this.state.product} onDelete={this.deleteProduct.bind(this)}>
                     </ProductListItemRows>
                 </table>
-                <Link href="/product/create">
-                    <a className="btn btn-primary btn-large">
-                        Create
-                    </a>
-                </Link>
             </div>
         );
     }

TestAppRuna/API/CustomerController.cs

@@ -65,7 +65,7 @@ namespace TestAppRuna.API
         {
             if(ModelState.IsValid == false)
             {
-                return BadRequest();
+                return BadRequest(ModelState);
             }
             var customer = new Customer()
             {

TestAppRuna/API/ProductController.cs

@@ -65,7 +65,7 @@ namespace TestAppRuna.API
         {
             if (ModelState.IsValid == false)
             {
-                return BadRequest();
+                return BadRequest(ModelState);
             }
             Product product = new Product
             {
@@ -84,7 +84,7 @@ namespace TestAppRuna.API
         {
             if (ModelState.IsValid == false)
             {
-                return BadRequest();
+                return BadRequest(ModelState);
             }
             var data = await DB.Products
                 .Where(Q => Q.ProductID == id)