Untitled

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;