Untitled
unknown
tsx
5 months ago
7.1 kB
11
Indexable
import { FormikValues, useFormik } from "formik"; import { FunctionComponent } from "react"; import { useNavigate } from "react-router-dom"; import { Product } from "../interface/Product"; import * as yup from "yup" import { addProduct } from "../services/productService"; interface UpdateProductProps { onHide: Function refresh: Function } const UpdateProduct: FunctionComponent<UpdateProductProps> = ({ onHide, refresh }) => { const formik: FormikValues = useFormik<Product>({ initialValues: { name: "", price: 0, category: "", description: "", image: "" }, validationSchema: yup.object({ name: yup.string().required().min(2), price: yup.number().required().moreThan(0), category: yup.string().required().min(2), description: yup.string().required().min(2), image: yup.string().required().url() }), onSubmit: (values) => { console.log(values); addProduct(values).then(() => { onHide() refresh() alert("Product was added successfully") }).catch((err) => console.log(err) ) } }) return ( <> <div className="container w-50"> <form onSubmit={formik.handleSubmit}> <div className="form-floating mb-3"> <input type="text" className="form-control" id="name" placeholder="Laptop" name="name" value={formik.values.name} onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="name">Name</label> {formik.touched.name && formik.errors.name && ( <p className="text-danger">{formik.errors.name}</p> )} </div> <div className="form-floating mb-3"> <input type="number" className="form-control" id="price" placeholder="100$" name="price" // value={formik.values.price} onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="price">Price</label> {formik.touched.price && formik.errors.price && ( <p className="text-danger">{formik.errors.price}</p> )} </div> <div className="form-floating mb-3"> <input type="text" className="form-control" id="category" placeholder="category" name="category" value={formik.values.category} onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="category">Category</label> {formik.touched.category && formik.errors.category && ( <p className="text-danger">{formik.errors.category}</p> )} </div> <div className="form-floating mb-3"> <input type="text" className="form-control" id="description" placeholder="description" name="description" value={formik.values.description} onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="description">Description</label> {formik.touched.description && formik.errors.description && ( <p className="text-danger">{formik.errors.description}</p> )} </div> <div className="form-floating mb-3"> <input type="text" className="form-control" id="image" placeholder="image" name="image" value={formik.values.image} onChange={formik.handleChange} onBlur={formik.handleBlur} /> <label htmlFor="image">Image</label> {formik.touched.image && formik.errors.image && ( <p className="text-danger">{formik.errors.image}</p> )} </div> <button className="btn btn-success mt-3 w-100" type="submit" disabled={!formik.dirty || !formik.isValid} > Add </button> </form> </div> </> ); } export default UpdateProduct; import { FunctionComponent } from "react"; import { Button, Modal } from "react-bootstrap"; import AddProduct from "./AddProduct"; interface UpdateProductModalProps { show: boolean; onHide: Function; refresh: Function; } const UpdateProductModal: FunctionComponent<UpdateProductModalProps> = ({ onHide, refresh, show }) => { return ( <> <Modal show={show} onHide={() => onHide()} refresh={refresh} size="lg" aria-labelledby="contained-modal-title-vcenter" centered > <Modal.Header closeButton> <Modal.Title id="contained-modal-title-vcenter"> Add Product </Modal.Title> </Modal.Header> <Modal.Body> <AddProduct onHide={onHide} refresh={refresh} /> </Modal.Body> <Modal.Footer> {/* <Button onClick={props.onHide}>Close</Button> */} </Modal.Footer> </Modal> </> ); } export default UpdateProductModal;
Editor is loading...
Leave a Comment