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