diff --git a/backend/routes/rentals.js b/backend/routes/rentals.js index a463a91..c0b0f6f 100644 --- a/backend/routes/rentals.js +++ b/backend/routes/rentals.js @@ -109,6 +109,28 @@ router.get("/my-listings", authenticateToken, async (req, res) => { } }); +// Get count of pending rental requests for owner +router.get("/pending-requests-count", authenticateToken, async (req, res) => { + try { + const count = await Rental.count({ + where: { + ownerId: req.user.id, + status: "pending", + }, + }); + + res.json({ count }); + } catch (error) { + const reqLogger = logger.withRequestId(req.id); + reqLogger.error("Error getting pending rental count", { + error: error.message, + stack: error.stack, + userId: req.user.id, + }); + res.status(500).json({ error: "Failed to get pending rental count" }); + } +}); + // Get rental by ID router.get("/:id", authenticateToken, async (req, res) => { try { diff --git a/frontend/src/components/DeclineRentalModal.tsx b/frontend/src/components/DeclineRentalModal.tsx index 60570cd..a55a2ba 100644 --- a/frontend/src/components/DeclineRentalModal.tsx +++ b/frontend/src/components/DeclineRentalModal.tsx @@ -51,6 +51,9 @@ const DeclineRentalModal: React.FC = ({ // Call parent callback with updated rental data if we have it if (updatedRental) { onDeclineComplete(updatedRental); + + // Notify Navbar to update pending count + window.dispatchEvent(new CustomEvent("rentalStatusChanged")); } // Reset all states when closing diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 62f7693..9806609 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,6 +1,7 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; import { useAuth } from "../contexts/AuthContext"; +import { rentalAPI } from "../services/api"; const Navbar: React.FC = () => { const { user, logout, openAuthModal } = useAuth(); @@ -9,6 +10,36 @@ const Navbar: React.FC = () => { search: "", location: "", }); + const [pendingRequestsCount, setPendingRequestsCount] = 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]); const handleLogout = () => { logout(); @@ -123,8 +154,35 @@ const Navbar: React.FC = () => { data-bs-toggle="dropdown" aria-expanded="false" > - - {user.firstName} + + {pendingRequestsCount > 0 && ( + + {pendingRequestsCount} + + )} + + {user.firstName} +