Skip to content

I
inventory-promotion-react
Commit cb411b58 authored by John Lam's avatar John Lam
Browse files
Options

Merge branch 'AFP-7' into 'dev' 

Afp 7

See merge request !1
parents 3c7004ab d3245d94
Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 5 deletions
src/component/ProductForm.jsx
View file @ cb411b58
import React from 'react'
import React, { useState } from "react";
import { useHistory, useLocation } from "react-router";
const emptyForm = {
sku: "",
upc: "",
productName: "",
brand: "",
category: "",
price: 0.0,
availableStock: 0,
productDescription: "",
productImageUrl: "",
productImage: ""
};
ProductForm.defaultProps = {
product: { ...emptyForm },
};
export default function ProductForm(props) {
const { product } = props;
const [form, setForm] = useState(product);
const [errors, setErrors] = useState([]);
const history = useHistory();
const validate = () => {
setErrors([]);
const errs = [];
if (form.sku.length < 3) {
errs.push("SKU must be at least 3 characters");
}
if (form.upc.length < 3) {
errs.push("UPC must be at least 3 characters");
}
if (form.productName.length === 0) {
errs.push("Please enter a product name");
}
if (form.brand.length === 0) {
errs.push("Please enter a brand");
}
if (form.category.length === 0) {
errs.push("Please specify a category");
}
if (Number(form.price) <= 0) {
errs.push("Price must be greater than 0");
}
if (Number(form.availableStock) <= 0) {
errs.push("Stock must be greater than 0");
}
setErrors([...errs]);
};
const onSubmit = (e) => {
e.preventDefault();
validate();
if (errors.length === 0) {
// console.log(form);
fetch("http://localhost:8080/api/products", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(form),
})
.then((res) => {
if (res.ok) {
res.json().then((data) => console.log(data));
history.push("/products");
} else {
setErrors([
"The provided SKU was found on an existing object, please try another",
]);
}
})
.catch((err) => {
setErrors([err.message]);
});
}
};
export default function ProductForm({ product }) {
return (
<div>
PRODUCT FORM
<div className="container mt-3">
{errors.length ? (
<ul className="list-group">
{errors.map((error, i) => (
<li key={i} className="list-group-item list-group-item-danger">
{error}
</li>
))}
</ul>
) : null}
<form onSubmit={onSubmit}>
<div className="row mt-3">
<div className="col">
<label htmlFor="productSku" className="form-label">
SKU
</label>
<input
required
name="sku"
type="text"
className="form-control"
id="productSku"
value={form.sku}
onChange={(e) => setForm({ ...form, sku: e.target.value })}
/>
</div>
<div className="col">
<label htmlFor="productUpc" className="form-label">
UPC
</label>
<input
required
name="upc"
type="text"
className="form-control"
id="productUpc"
value={form.upc}
onChange={(e) => setForm({ ...form, upc: e.target.value })}
/>
</div>
</div>
<div className="row mt-3">
<div className="col-6">
<div>
<label htmlFor="productName" className="form-label">
Name
</label>
<input
required
name="productName"
type="text"
className="form-control"
id="productName"
value={form.productName}
onChange={(e) => setForm({ ...form, productName: e.target.value })}
/>
</div>
<div>
<label htmlFor="brand" className="form-label">
Brand
</label>
<input
required
name="brand"
type="text"
className="form-control"
id="brand"
value={form.brand}
onChange={(e) => setForm({ ...form, brand: e.target.value })}
/>
</div>
<div>
<label htmlFor="category" className="form-label">
Category
</label>
<input
required
name="category"
type="text"
className="form-control"
id="category"
value={form.category}
onChange={(e) => setForm({ ...form, category: e.target.value })}
/>
</div>
</div>
<div className="col-6">
<label htmlFor="productDescription" className="form-label">
Description
</label>
<textarea
name="productDescription"
id="productDescription"
cols="40"
rows="7"
className="form-control"
value={form.productDescription}
onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
></textarea>
</div>
</div>
<div className="row mt-3">
<div>
<label htmlFor="price" className="form-label">
Price
</label>
<input
required
name="price"
type="number"
className="form-control"
id="price"
value={form.price}
onChange={(e) => setForm({ ...form, price: e.target.value })}
/>
</div>
<div>
<label htmlFor="stock" className="form-label">
Stock
</label>
<input
required
name="stock"
type="number"
className="form-control"
id="stock"
value={form.availableStock}
onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
/>
</div>
</div>
<div className="row mt-3">
<label htmlFor="productImage" className="form-label">
Product Image
</label>
<input
id="productImageUrl"
name="productImageUrl"
className="form-control form-control-lg"
type="url"
placeholder="Enter image URL here or upload image below..."
value={form.productImageUrl}
onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})}
></input>
<input
id="productImage"
name="productImage"
className="form-control form-control-lg"
type="file"
value={form.productImage}
onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
></input>
</div>
<div className="row mt-3">
<div className="col-12">
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</div>
</div>
</form>
</div>
)
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment