Some cleaning

This commit is contained in:
Damillora 2021-03-29 16:53:55 +07:00
parent 297a732676
commit 539e531272
8 changed files with 115 additions and 115 deletions

View File

@ -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>
<fieldset disabled={formBusy}>
<div className="mb-3">
<div>
<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>
<input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
<Errors errors={errors.name} />
</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>
);
}

View File

@ -13,22 +13,29 @@ export interface ProductListRowsProps {
export interface ProductState {
product: ProductListItem[]
}
export interface ProductFormState {
form: {
export interface ProductFormEntry {
name: string,
price: number,
},
}
export interface ProductFormState {
form: ProductFormEntry,
errors: string[],
busy: boolean,
}
export function validateForm(form): string[] {
let errors: string[] = [];
export function validateForm(form: ProductFormEntry) {
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;
}

View File

@ -20,27 +20,10 @@ function CreateProduct() {
let [busy, setBusy] = useState(false);
let [errors, setErrors] = useState([""]);
const onNameChanged = (newName: string) => {
setForm(
{
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 onFormChanged = (form) => {
setForm(form);
}
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}
onPriceChange={onPriceChanged}
onFormChange={onFormChanged}
onSubmit={onSubmit} />
<ul>
<Errors errors={errors}></Errors>

View File

@ -45,20 +45,10 @@ function EditProduct({ productID }) {
}
}, [productID]);
const onNameChanged = (newName: string) => {
setForm(
{
name: newName,
price: form.price,
}
);
}
const onPriceChanged = (newPrice: number) => {
setForm({
name: form.name,
price: newPrice,
});
const onFormChanged = (form) => {
setForm(form);
}
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}
onPriceChange={onPriceChanged}
onFormChange={onFormChanged}
onSubmit={onSubmit} />
<ul>
<Errors errors={errors}></Errors>

View File

@ -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
let product = this.state.product.filter(x => x.productID != productId);
this.setState({
product
})
this.getProducts();
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>
);
}

View File

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

View File

@ -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)

Binary file not shown.