Product Review Platform using MERN

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

const App = () => {
	const [products, setProducts] = useState([]);
	const [newProduct, setNewProduct] = useState({
		name: "",
		description: "",
		image: "",
	});

	useEffect(() => {
		// Fetch products from the server
		axios
			.get("http://localhost:5000/api/products")
			.then((response) => setProducts(response.data))
			.catch((error) => console.error(error));
	}, []);

	const handleReviewSubmit = (productId, review) => {
		// Submit a new review for a product
		axios
			.post(
`http://localhost:5000/api/products/${productId}/review`, review)
			.then((response) => {
				// Update the products in the state with the new review
				const updatedProducts = products.map((product) =>
					product._id === productId ? response.data : product
				);
				setProducts(updatedProducts);
			})
			.catch((error) => console.error(error));
	};

	const handleAddProduct = () => {
		// Submit a new product
		console.log("i am called");

		axios
			.post("http://localhost:5000/api/products", newProduct)
			.then((response) => {
				// Update the products in the state with the new product
				setProducts([...products, response.data]);

				// Clear the newProduct state for the next entry
				setNewProduct({ name: "", description: "", image: "" });
			})
			.catch((error) => console.error(error));
	};

	const handleProductDelete = (productId) => {
		// Send a DELETE request to the server
		axios
			.delete(`http://localhost:5000/api/products/${productId}`)
			.then((response) => {
				// Update the products in the state after successful deletion
				console.log(
					"The Producted deleted successfully was:",
					response.data.deletedProduct
				);
				const updatedProducts = products.filter(
					(product) => product._id !== productId
				);
				setProducts(updatedProducts);
			})
			.catch((error) =>
				console.error(
					`Error deleting product with ID 
					${productId}:`, error)
			);
	};
	return (
		<div className="outer-cont">
			<h1
				style={
					{
						marginTop: "10px",
						color: "white"
					}}>
				GFG
			</h1>
			<h2>Product Review Platform</h2>

			<div className="add-container">
				<h3>Add a New Product:</h3>
				<form
					onSubmit={(e) => {
						e.preventDefault();
						handleAddProduct();
					}}>
					<label>
						Name:{" "}
						<input
							type="text"
							name="name"
							value={newProduct.name}
							onChange={(e) =>
								setNewProduct(
									{
										...newProduct,
										name: e.target.value
									}
								)
							}
							required
						/>
					</label>

					<label>
						Description:{" "}
						<input
							type="text"
							name="description"
							value={newProduct.description}
							onChange={(e) =>
								setNewProduct(
									{
										...newProduct,
										description: e.target.value
									}
								)
							}
							required
						/>
					</label>

					<label>
						{" "}
						Image URL:{" "}
						<input
							type="text"
							name="image"
							value={newProduct.image}
							onChange={(e) =>
								setNewProduct(
									{
										...newProduct,
										image: e.target.value
									})
							}
							required
						/>
					</label>

					<button className="add-btn"
						type="submit">
						Add Product
					</button>
				</form>
			</div>

			<div className="cards">
				{products.map((product) => (
					<div key={product._id}
						className="product-card">
						<h2>{product.name}</h2>

						<button
							className="delete-btn"
							onClick={
								() =>
									handleProductDelete(product._id)
							}>
							Delete Product
						</button>

						<img src={product.image}
							style={{ width: "300px" }} alt="" />

						<p>{product.description}</p>
						<h3>Reviews:</h3>
						<ul>
							{product.reviews.map((review, index) => (
								<li key={index}>
									<strong>{review.user}</strong>
									-
									{review.rating}/5:{" "}
									{review.comment}
								</li>
							))}
						</ul>
						<h3>Add a Review:</h3>
						<form
							onSubmit={(e) => {
								e.preventDefault();
								const user = e.target.elements.user.value;
								const rating = e.target.elements.rating.value;
								const comment = e.target.elements.comment.value;
								handleReviewSubmit(product._id, 
								{ user, rating, comment });
							}}>
							<label>
								User: <input type="text" name="user" required />
							</label>
							<label>
								Rating:{" "}
								<input type="number"
									name="rating" min="1"
									max="5" required />
							</label>
							<label>
								Comment: <textarea name="comment" required>
								</textarea>
							</label>
							<button type="submit">
								Submit Review
							</button>
						</form>
					</div>
				))}
			</div>
		</div>
	);
};

export default App;

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
// Middleware for JSON parsing
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/product_review', {
	useNewUrlParser: true,
	useUnifiedTopology: true,
}).then(() => {
	console.log('Connected to MongoDB')
});

// Define the Product schema
const productSchema = new mongoose.Schema({
	name: String,
	description: String,
	image: String,
	reviews: [
		{
			user: String,
			rating: Number,

			comment: String,
		},
	],
});

const Product = mongoose.model('Product', productSchema);

// API endpoints
// Route to add a new product
app.post('/api/products', async (req, res) => {
	try {
		const { name, description, image } = req.body;


		// Validate request data
		if (!name || !description || !image) {
			return res.status(400).json(
				{
					message: 'Incomplete product data'
				}
			);
		}

		// Create a new product
		const newProduct = new Product({
			name,
			description,
			image,
			reviews: [],
		});

		// Save the new product to the database
		const savedProduct = await newProduct.save();

		// Respond with the newly added product
		res.status(201).json(savedProduct);
	} catch (error) {
		console.error('Error adding product:', error);
		res.status(500)
			.json(
				{
					message: 'Internal Server Error'
				}
			);
	}
});
app.get('/api/products', async (req, res) => {
	try {
		const products = await Product.find();
		res.json(products);
	} catch (error) {
		res.status(500).json({ message: error.message });
	}
});

app.post('/api/products/:id/review', async (req, res) => {
	const { user, rating, comment } = req.body;

	try {
		const product =
			await Product.findById(req.params.id);
		product.reviews
			.push(
				{
					user, rating,
					comment
				}
			);
		await product.save();
		res.status(201).json(product);
	} catch (error) {
		res.status(400).json({ message: error.message });
	}
});

// Delete a product by ID
app.delete('/api/products/:id', async (req, res) => {
	const productId = req.params.id;
	try {
		// Find the product by ID and delete it from the database
		const deletedProduct =
			await Product.findByIdAndDelete(productId);

		if (!deletedProduct) {
			return res.status(404)
				.json(
					{
						message: 'Product not found'
					}
				);
		}

		res.json(
			{
				message: 'Product deleted',
				deletedProduct
			}
		);
	} catch (error) {
		console.error('Error deleting product:', error);
		res.status(500)
			.json(
				{
					message: 'Internal Server Error'
				}
			);
	}
});

app.listen(PORT,
	() => {
		console.log(`Server is running on port ${PORT}`);
	});