import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import imglogo from '../assets/logo.png';
import SearchResults from './SearchResults';
import axios from 'axios';
import { useAuth } from './AuthContext';
import '@fortawesome/fontawesome-free/css/all.css';
function Header() {
const [cartItemCount, setCartItemCount] = useState(0);
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [isDropdownOpen, setDropdownOpen] = useState(false);
const [loading, setLoading] = useState(true);
const { user, logout } = useAuth();
const [currentPage, setCurrentPage] = useState(1);
const navigate = useNavigate();
useEffect(() => {
console.log('User data:', user);
const fetchData = async () => {
try {
// Fetch cart items
const storedCartItems = localStorage.getItem('cartItems');
const parsedCartItems = storedCartItems ?
JSON.parse(storedCartItems) : [];
const totalQuantity = new Set(parsedCartItems.map(item =>
item.id)).size;
setCartItemCount(totalQuantity);
// Fetch user details if authenticated
if (user) {
const response = await
axios.get('http://localhost:8080/api/users', {
headers: {
Authorization: `Bearer ${user.token}`,
},
});
console.log('API Response:', response.data);
// Assuming the API response contains the `fullname`
property
const { fullname } = response.data;
// Set additional user details if needed
setLoading(false);
}
} catch (error) {
console.error('Error fetching user details:', error);
setLoading(false);
}
};
fetchData();
}, [user]);
const handleSearchChange = async (event) => {
try {
setSearchQuery(event.target.value);
if (!event.target.value.trim()) {
setSearchResults([]);
setDropdownOpen(false);
} else {
const nextPage = 1;
const productResponse = await
axios.get('http://localhost:8080/api/products', {
params: {
page: nextPage - 1,
size: 10,
title: event.target.value,
},
});
const products = productResponse.data;
setSearchResults(products.filter((item) =>
item.title?.toLowerCase().includes(event.target.value.toLowerCase())));
setDropdownOpen(true);
// Use the useNavigate hook to navigate to the ListingGrid page
with the search query
navigate(`/listinggrid?page=1&categoryId=null&search=$
{event.target.value}`);
}
} catch (error) {
console.error('Error during search:', error);
}
};
const handleProductClick = () => {
// Close the dropdown when a product is clicked
setDropdownOpen(false);
};
const handleLoadMore = async () => {
try {
const nextPage = currentPage + 1;
const productResponse = await
axios.get('http://localhost:8080/api/products', {
params: {
page: nextPage-1,
size: 10,
title: searchQuery,
},
});
const newProducts = productResponse.data;
setSearchResults((prevResults) => [...prevResults, ...newProducts]);
setCurrentPage(nextPage);
} catch (error) {
console.error('Error loading more:', error);
}
};
return (
<header class="section-header">
<section class="header-main ">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-2 col-lg-3 col-md-12">
<a href="http://localhost:3000/"
class="brand-wrap">
<img class="logo" src={imglogo} />
</a>
</div>
<div class="col-xl-6 col-lg-5 col-md-6">
<form className="search-header" >
<div className="input-group w-100">
<input
type="text"
className="form-control"
placeholder="Search"
value={searchQuery}
onChange={handleSearchChange}
/>
<div className="input-group-
append">
<button className="btn
btn-dark" type="submit">
<i className="fa
fa-search"></i> Search
</button>
</div>
</div>
</form>
{isDropdownOpen && (
<div
style={{
position: 'absolute',
top: '100%',
left: 0,
zIndex: 100,
backgroundColor:
'white',
border: '1px solid
#ccc',
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0 2px 4px
rgba(0, 0, 0, 0.1)',
}}
>
<SearchResults
results={searchResults} onLoadMore={handleLoadMore}
onProductClick={handleProductClick} />
</div>
)}
</div>
<div class="col-xl-4 col-lg-4 col-md-6">
<div class="widgets-wrap float-md-right">
<div className="widget-header mr-
3">
{loading ? (
<Link to="/register"
className="widget-view">
<div
className="icon-area">
<i
className="fa fa-user"></i>
<span
className="notify">3</span>
</div>
<small
className="text">My profile</small>
</Link>
) : (
<>
{user ? (
<>
{/* <i
class="fa-solid fa-right-from-bracket" style={{color: '#969696'}}></i>
<button className="btn btn-link" onClick={() => logout()}>
Logout
</button> */}
<Link
to="" className="btn btn-link" onClick={() => logout()}>
<div className="icon-area">
<i className="fa-solid fa-right-from-bracket" style={{ color:
'#969696' }}></i>
<span className="notify">3</span>
</div>
<small className="text">Logout</small>
</Link>
<Link
to="/" className="btn btn-link">
<div className="icon-area">
<i className="fa fa-user"></i>
<span className="notify">3</span>
</div>
<small className="text">{user.fullname}</small>
</Link>
</>
) : (
<Link
to="/register" className="widget-view">
<div
className="icon-area">
<i className="fa fa-user"></i>
<span className="notify">3</span>
</div>
<small
className="text">My profile</small>
</Link>
)}
</>
)}
</div>
<div class="widget-header mr-3">
<a
href="http://localhost:3000/sign-in" class="widget-view">
<div class="icon-area">
<i class="fa fa-
comment-dots"></i>
<span
class="notify">1</span>
</div>
<small class="text">
Message </small>
</a>
</div>
<div class="widget-header mr-3">
<Link to={`/orders`}
class="widget-view">
<div class="icon-area">
<i class="fa fa-
store"></i>
</div>
<small class="text">
Orders </small>
</Link>
</div>
<div class="widget-header">
<Link to={`/shopping-cart`}
class="widget-view">
<div class="icon-area">
<span
class="notify">{cartItemCount}</span>
<i class="fa fa-
shopping-cart"></i>
</div>
<small class="text">
Cart </small>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-main navbar-expand-lg d-flex justify-
content-center">
<div class=" ">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#main_nav" aria-controls="main_nav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" href="#"> <i class="fa fa-bars text-muted mr-2"></i> Demo
pages </a>
<div class="dropdown-menu dropdown-
large">
<nav class="row">
<div class="col-6">
<a href="page-
index-1.html">Home page 1</a>
<a href="page-
index-2.html">Home page 2</a>
<a href="page-
category.html">All category</a>
<a href="page-
listing-large.html">Listing list</a>
<a href="page-
listing-grid.html">Listing grid</a>
<a href="page-
shopping-cart.html">Shopping cart</a>
<a href="page-
detail-product.html">Product detail</a>
<a href="page-
content.html">Page content</a>
<a href="page-
user-login.html">Page login</a>
<a href="page-
user-register.html">Page register</a>
</div>
<div class="col-6">
<a href="page-
profile-main.html">Profile main</a>
<a href="page-
profile-orders.html">Profile orders</a>
<a href="page-
profile-seller.html">Profile seller</a>
<a href="page-
profile-wishlist.html">Profile wishlist</a>
<a href="page-
profile-setting.html">Profile setting</a>
<a href="page-
profile-address.html">Profile address</a>
<a href="rtl-page-
index-1.html">RTL home page</a>
<a href="page-
components.html" target="_blank">More components</a>
</div>
</nav>
</div>
</li>
<li class="nav-item">
<Link class="nav-link"
to={`/category`}>Danh mục</Link>
</li>
<li class="nav-item">
<Link class="nav-link"
to={`/listinggrid`}>Sản phẩm</Link>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tin
tức</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sell
with us</a>
</li><li class="nav-item">
<a class="nav-link" href="#">Giới
thiệu</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
}
// Connect the component to Redux
export default Header;
