From 4d60ee225a9a2cd116094a296e9172ce6c82d1f8 Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:11:04 +0200
Subject: [PATCH] Implemented Header.js
---
frontend/src/components/Header.js | 67 ++++++++++++++++++++++++++-----
1 file changed, 57 insertions(+), 10 deletions(-)
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 28337c8..bc080fd 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,18 +1,65 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useCart } from '../contexts/CartContext'; // Import useCart
+import '../css/Header.css';
function Header() {
+ const { cart } = useCart(); // Access the cart context
+ const [searchTerm, setSearchTerm] = useState('');
+ const [brands, setBrands] = useState([]);
+ const [selectedBrand, setSelectedBrand] = useState('All Brands');
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ fetch('http://localhost:5000/brand')
+ .then(response => response.json())
+ .then(data => setBrands(data))
+ .catch(console.error);
+ }, []);
+
+ const handleSearchChange = (e) => {
+ setSearchTerm(e.target.value);
+ };
+
+ const handleSearchSubmit = (e) => {
+ e.preventDefault();
+ navigate(`/search?query=${searchTerm}&brand=${selectedBrand}`);
+ };
+
+ const handleBrandChange = (e) => {
+ setSelectedBrand(e.target.value);
+ };
+
+ // Calculate total items in the cart
+ const totalItems = cart.items.reduce((total, item) => total + item.quantity, 0);
+
return (
<header>
- <nav>
- <ul>
- <li><Link to="/">Home</Link></li>
- <li><Link to="/products">Products</Link></li>
- <li><Link to="/orders">Orders</Link></li>
- </ul>
- </nav>
+ <div className="logo">
+ <Link to="/">ElectroMart</Link>
+ </div>
+ <form className="search-bar" onSubmit={handleSearchSubmit}>
+ <select value={selectedBrand} onChange={handleBrandChange} className="brand-select">
+ <option value="All Brands">All Brands</option>
+ {brands.map(brand => (
+ <option key={brand.BrandID} value={brand.Name}>{brand.Name}</option>
+ ))}
+ </select>
+ <input type="text" placeholder="Search ElectroMart" value={searchTerm} onChange={handleSearchChange} />
+ <button type="submit"><i className="fa-solid fa-magnifying-glass"></i></button>
+ </form>
+ <div className="user-controls">
+ <Link to="" className="signin-button">
+ <i className="fa-solid fa-user"></i>
+ <span>Sign In</span>
+ </Link>
+ <Link to="/cart" className="cart-button">
+ <i className="fa-solid fa-cart-shopping"></i>
+ <span>Cart{totalItems > 0 ? ": " + totalItems : ''}</span>
+ </Link>
+ </div>
</header>
);
}
-export default Header;
\ No newline at end of file
+export default Header;
--
GitLab