import React, { useState, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; import { useAuth } from "../contexts/AuthContext"; import { useSocket } from "../contexts/SocketContext"; import { rentalAPI, messageAPI } from "../services/api"; const Navbar: React.FC = () => { const { user, logout, openAuthModal } = useAuth(); const { onNewMessage, onMessageRead } = useSocket(); const navigate = useNavigate(); const [searchFilters, setSearchFilters] = useState({ search: "", location: "", }); const [pendingRequestsCount, setPendingRequestsCount] = useState(0); const [unreadMessagesCount, setUnreadMessagesCount] = useState(0); // Fetch pending rental requests count when user logs in useEffect(() => { const fetchPendingCount = async () => { if (user) { try { const response = await rentalAPI.getPendingRequestsCount(); setPendingRequestsCount(response.data.count); } catch (error) { console.error("Failed to fetch pending requests count:", error); } } else { setPendingRequestsCount(0); } }; fetchPendingCount(); // Listen for rental status changes to refresh count const handleRentalStatusChange = () => { fetchPendingCount(); }; window.addEventListener("rentalStatusChanged", handleRentalStatusChange); return () => { window.removeEventListener("rentalStatusChanged", handleRentalStatusChange); }; }, [user]); // Fetch unread messages count when user logs in useEffect(() => { const fetchUnreadCount = async () => { if (user) { try { const response = await messageAPI.getUnreadCount(); setUnreadMessagesCount(response.data.count); } catch (error) { console.error("Failed to fetch unread message count:", error); } } else { setUnreadMessagesCount(0); } }; fetchUnreadCount(); }, [user]); // Listen for real-time message updates via socket useEffect(() => { if (!user) return; // Listen for new messages const cleanupNewMessage = onNewMessage((message: any) => { if (message.receiverId === user.id) { setUnreadMessagesCount((prev) => prev + 1); } }); // Listen for messages being read const cleanupMessageRead = onMessageRead(() => { setUnreadMessagesCount((prev) => Math.max(0, prev - 1)); }); return () => { cleanupNewMessage(); cleanupMessageRead(); }; }, [user, onNewMessage, onMessageRead]); const handleLogout = () => { logout(); navigate("/"); }; const handleSearch = (e?: React.FormEvent | React.MouseEvent) => { e?.preventDefault(); const params = new URLSearchParams(); if (searchFilters.search.trim()) { params.append("search", searchFilters.search.trim()); } if (searchFilters.location.trim()) { // Check if location looks like a zip code (5 digits) or city name const location = searchFilters.location.trim(); if (/^\d{5}(-\d{4})?$/.test(location)) { params.append("zipCode", location); } else { params.append("city", location); } } const queryString = params.toString(); navigate(`/items${queryString ? `?${queryString}` : ""}`); // Clear search after navigating setSearchFilters({ search: "", location: "" }); }; const handleSearchInputChange = ( field: "search" | "location", value: string ) => { setSearchFilters((prev) => ({ ...prev, [field]: value })); }; return ( <> ); }; export default Navbar;