From 73d6e32bf15b69bc96e2c16ecfcb64ee79a0f323 Mon Sep 17 00:00:00 2001 From: Tiago Brito <69848652+britotiago03@users.noreply.github.com> Date: Fri, 10 May 2024 05:13:57 +0200 Subject: [PATCH] Implemented SearchResults.js --- frontend/src/components/SearchResults.js | 60 ++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 frontend/src/components/SearchResults.js diff --git a/frontend/src/components/SearchResults.js b/frontend/src/components/SearchResults.js new file mode 100644 index 0000000..57f99c4 --- /dev/null +++ b/frontend/src/components/SearchResults.js @@ -0,0 +1,60 @@ +import React, { useState, useEffect } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { useCart } from '../contexts/CartContext'; +import '../css/SearchResults.css'; // Assuming the CSS file is in the same directory + +function useQuery() { + return new URLSearchParams(useLocation().search); +} + +function SearchResults() { + const query = useQuery(); + const searchTerm = query.get('query'); + const selectedBrand = query.get('brand'); + const { addToCart } = useCart(); + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (!searchTerm) { + setLoading(false); + return; + } + + setLoading(true); + fetch(`http://localhost:5000/products/search?query=${searchTerm}&brand=${selectedBrand}`) + .then(response => response.json()) + .then(data => { + setProducts(data); + setLoading(false); + }) + .catch(err => { + console.error('Error fetching search results:', err); + setLoading(false); + }); + }, [searchTerm, selectedBrand]); // Ensure that selectedBrand is part of the dependency array + + if (loading) return <div>Loading...</div>; + if (!products.length) return <div>No products found.</div>; + + return ( + <div className="search-results"> + <h2>Search Results for "{searchTerm}" under "{selectedBrand}"</h2> + <div className="search-results-list"> + {products.map(product => ( + <div key={product.ProductID} className="search-result-item"> + <img src={product.ImageURL} alt={product.Name} + style={{width: '200px', height: '200px', objectFit: 'contain'}}/> + <h3>{product.Name}</h3> + <p>{product.Description}</p> + <p>Price: ${product.Price}</p> + <button onClick={() => addToCart({...product, id: product.ProductID})}>Add to Cart</button> + <Link to={`/product/${product.ProductID}`}>View Details</Link> + </div> + ))} + </div> + </div> + ); +} + +export default SearchResults; -- GitLab