Scribd
Upload
11 views4 pages

UpdateProduct JSX

dit is upload product for react code

Uploaded by

sivasubramanianj2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views4 pages

UpdateProduct JSX

dit is upload product for react code

Uploaded by

sivasubramanianj2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

import React, { useState, useEffect } from "react";

import "./UpdateProduct.css";
import upload_area from "../Assets/upload_area.svg";

const UpdateProduct = () => {


const [products, setProducts] = useState([]);
const [selectedProduct, setSelectedProduct] = useState("");
const [image, setImage] = useState(null);
const [productDetails, setProductDetails] = useState({
name: "",
image: "",
category: "kitchenessentials",
new_price: "",
old_price: "",
});

// Fetch products from the backend


useEffect(() => {
fetch("http://localhost:4000/products")
.then((resp) => resp.json())
.then((data) => setProducts(data.products));
}, []);

// Fetch details of the selected product


useEffect(() => {
if (selectedProduct) {
const product = products.find((p) => p._id === selectedProduct);
setProductDetails({
name: product.name,
image: product.image,
category: product.category,
new_price: product.new_price,
old_price: product.old_price,
});
}
}, [selectedProduct]);

// Update product details


const updateProduct = async () => {
let dataObj;
let product = productDetails;

// Handle image upload if changed


if (image) {
let formData = new FormData();
formData.append("product", image);
await fetch("http://localhost:4000/upload", {
method: "POST",
headers: {
Accept: "application/json",
},
body: formData,
})
.then((resp) => resp.json())
.then((data) => {
dataObj = data;
});

if (dataObj.success) {
product.image = dataObj.image_url;
}
}

await fetch(`http://localhost:4000/updateproduct/${selectedProduct}`, {
method: "PUT",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(product),
})
.then((resp) => resp.json())
.then((data) =>
data.success ? alert("Product Updated") : alert("Failed to update product")
);
};

const changeHandler = (e) => {


setProductDetails({ ...productDetails, [e.target.name]: e.target.value });
};

const imageHandler = (e) => {


setImage(e.target.files[0]);
};

return (
<div className="updateproduct">
<div className="updateproduct-itemfield">
<p>Select Product to Update</p>
<select
value={selectedProduct}
onChange={(e) => setSelectedProduct(e.target.value)}
className="update-product-selector"
>
<option value="">Select a product</option>
{products.map((product) => (
<option key={product._id} value={product._id}>
{product.name}
</option>
))}
</select>
</div>

{selectedProduct && (
<>
<div className="updateproduct-itemfield">
<p>Product Title</p>
<input
type="text"
name="name"
value={productDetails.name}
onChange={(e) => changeHandler(e)}
placeholder="Type here"
/>
</div>

<div className="updateproduct-price">
<div className="updateproduct-itemfield">
<p>Price</p>
<input
type="text"
name="old_price"
value={productDetails.old_price}
onChange={(e) => changeHandler(e)}
placeholder="Type here"
/>
</div>
<div className="updateproduct-itemfield">
<p>Offer Price</p>
<input
type="text"
name="new_price"
value={productDetails.new_price}
onChange={(e) => changeHandler(e)}
placeholder="Type here"
/>
</div>
</div>

<div className="updateproduct-itemfield">
<p>Product Category</p>
<select
value={productDetails.category}
name="category"
className="update-product-selector"
onChange={changeHandler}
>
<option value="kitchenessentials">Kitchen Essentials</option>
<option value="breakfastandsnacks">Breakfast & Snacks</option>
<option value="combo">Combo</option>
</select>
</div>

<div className="updateproduct-itemfield">
<p>Product Image</p>
<label htmlFor="file-input">
<img
className="updateproduct-thumbnail-img"
src={!image ? productDetails.image || upload_area :
URL.createObjectURL(image)}
alt=""
/>
</label>
<input
onChange={(e) => imageHandler(e)}
type="file"
name="image"
id="file-input"
hidden
/>
</div>

<button className="updateproduct-btn" onClick={updateProduct}>


UPDATE
</button>
</>
)}
</div>
);
};

export default UpdateProduct;

You might also like