From 539e5312721e3aad254ce6e38c64f8fd3ae8f1bf Mon Sep 17 00:00:00 2001 From: Damillora Date: Mon, 29 Mar 2021 16:53:55 +0700 Subject: [PATCH] Some cleaning --- Next/components/ProductForm.tsx | 85 +++++++++++++++++--------- Next/lib/product.ts | 23 ++++--- Next/pages/product/create.tsx | 55 ++++++----------- Next/pages/product/edit/[id].tsx | 19 ++---- Next/pages/product/index.tsx | 32 +++++----- TestAppRuna/API/CustomerController.cs | 2 +- TestAppRuna/API/ProductController.cs | 14 ++--- TestAppRuna/Shop.sqlite.db | Bin 36864 -> 36864 bytes 8 files changed, 115 insertions(+), 115 deletions(-) diff --git a/Next/components/ProductForm.tsx b/Next/components/ProductForm.tsx index 767f8e7..0a74da5 100644 --- a/Next/components/ProductForm.tsx +++ b/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 }) { - let [form,setForm] = useState({ +export default function ProductForm({ name, price, onFormChange, onSubmit, busy }) { + let [form, setForm] = useState({ name: "", value: "", - }) - let [formBusy,setFormBusy] = useState(false); - let nameChanged = (e: React.ChangeEvent) => { + }); + let [errors, setErrors] = useState({ + name: new Array(), + price: new Array(), + }); + + let nameChanged = (e: React.ChangeEvent) => { name = e.target.value; - onNameChange(e.target.value); + setErrors(validateForm({name,price})); + onFormChange({ name, price }); } let priceChanged = (e: React.ChangeEvent) => { price = e.target.value; - onPriceChange(e.target.value); + setErrors(validateForm({name,price})); + onFormChange({ name, price }); } - let submit = (e: React.MouseEvent) => { + let isValid = (prop) => { + if(errors[prop].length > 0) { + return "form-control is-invalid"; + } else { + return "form-control is-valid"; + } + } + let submit = (e: React.FormEvent) => { e.preventDefault() - onSubmit(); + let currentErrors = validateForm({ name, price}); + if (currentErrors.name.length === 0 && currentErrors.price.length === 0) { + onSubmit(); + } } - formBusy = busy; - useEffect(() => { - setFormBusy(busy); - },[busy]); + return ( -
-
-
- - -
-
- - -
-
- -
-
-
+ + + + ); } \ No newline at end of file diff --git a/Next/lib/product.ts b/Next/lib/product.ts index 934a5ff..7bd369f 100644 --- a/Next/lib/product.ts +++ b/Next/lib/product.ts @@ -13,22 +13,29 @@ export interface ProductListRowsProps { export interface ProductState { product: ProductListItem[] } +export interface ProductFormEntry { + name: string, + price: number, +} export interface ProductFormState { - form: { - name: string, - price: number, - }, + 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; } \ No newline at end of file diff --git a/Next/pages/product/create.tsx b/Next/pages/product/create.tsx index c09f22c..99aaa22 100644 --- a/Next/pages/product/create.tsx +++ b/Next/pages/product/create.tsx @@ -18,45 +18,27 @@ function Errors({ errors }) { function CreateProduct() { let [form, setForm] = useState({ name: "", price: 0 }); let [busy, setBusy] = useState(false); - let [errors,setErrors] = useState([""]); + 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(); - await client.post({ - name: form.name, - price: form.price, - }) - Swal.fire({ - title: "Submitted!", - text: "Product is added in database", - }) - } catch (error) { + setBusy(true); + try { + const client = new ProductClient(); + await client.post({ + name: form.name, + price: form.price, + }) + Swal.fire({ + title: "Submitted!", + text: "Product is added in database", + }) + } catch (error) { - } finally { - setBusy(false); - } + } finally { + setBusy(false); } } @@ -72,8 +54,7 @@ function CreateProduct() { name={form.name} price={form.price} busy={busy} - onNameChange={onNameChanged} - onPriceChange={onPriceChanged} + onFormChange={onFormChanged} onSubmit={onSubmit} />
    diff --git a/Next/pages/product/edit/[id].tsx b/Next/pages/product/edit/[id].tsx index 3c21ebe..b0642a0 100644 --- a/Next/pages/product/edit/[id].tsx +++ b/Next/pages/product/edit/[id].tsx @@ -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} />
      diff --git a/Next/pages/product/index.tsx b/Next/pages/product/index.tsx index 6d7f239..a8e8c81 100644 --- a/Next/pages/product/index.tsx +++ b/Next/pages/product/index.tsx @@ -55,7 +55,7 @@ const ProductListItemRows: React.FunctionComponent = ({ pr ) } -class Product extends React.Component<{},ProductState> { +class Product extends React.Component<{}, ProductState> { constructor(props) { super(props); this.state = { @@ -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,22 +96,24 @@ class Product extends React.Component<{},ProductState> { return (

      Products

      - - - - - - - - - - -
      IDNamePriceEditDelete
      Create + + + + + + + + + + + + +
      IDNamePriceEditDelete
      ); } diff --git a/TestAppRuna/API/CustomerController.cs b/TestAppRuna/API/CustomerController.cs index 46fe4bb..37d0a71 100644 --- a/TestAppRuna/API/CustomerController.cs +++ b/TestAppRuna/API/CustomerController.cs @@ -65,7 +65,7 @@ namespace TestAppRuna.API { if(ModelState.IsValid == false) { - return BadRequest(); + return BadRequest(ModelState); } var customer = new Customer() { diff --git a/TestAppRuna/API/ProductController.cs b/TestAppRuna/API/ProductController.cs index 8187b92..2d0abda 100644 --- a/TestAppRuna/API/ProductController.cs +++ b/TestAppRuna/API/ProductController.cs @@ -63,9 +63,9 @@ namespace TestAppRuna.API [HttpPost] public async Task> Post([FromBody] ProductCreateUpdateModel model) { - if(ModelState.IsValid == false) + if (ModelState.IsValid == false) { - return BadRequest(); + return BadRequest(ModelState); } Product product = new Product { @@ -82,14 +82,14 @@ namespace TestAppRuna.API [HttpPut("{id}")] public async Task> Put(Guid id, [FromBody] ProductCreateUpdateModel model) { - if(ModelState.IsValid == false) + if (ModelState.IsValid == false) { - return BadRequest(); + return BadRequest(ModelState); } var data = await DB.Products .Where(Q => Q.ProductID == id) .FirstOrDefaultAsync(); - if(data == null) + if (data == null) { return NotFound(); } @@ -106,7 +106,7 @@ namespace TestAppRuna.API var data = await DB.Products .Where(Q => Q.ProductID == id) .FirstOrDefaultAsync(); - if(data == null) + if (data == null) { return NotFound(); } @@ -128,7 +128,7 @@ namespace TestAppRuna.API [StringLength(255)] public string Name { get; set; } [Required] - [Range(double.Epsilon,double.MaxValue)] + [Range(double.Epsilon, double.MaxValue)] public decimal Price { get; set; } } } diff --git a/TestAppRuna/Shop.sqlite.db b/TestAppRuna/Shop.sqlite.db index cccb0388dd5afc97bdefecf69a0a1af5af537333..7d82e6d17d045b07d35cdc371cfab1571849310c 100644 GIT binary patch delta 72 zcmZozz|^pSX#icank@V`7&IsM+N*3{=O5$%0NXPZ;{X5v delta 72 zcmZozz|^pSX#