diff --git a/src/components/sidebar/navHeader.tsx b/src/components/sidebar/navHeader.tsx index 73b974a4f..7709e2e7d 100644 --- a/src/components/sidebar/navHeader.tsx +++ b/src/components/sidebar/navHeader.tsx @@ -99,7 +99,7 @@ function NavBar() { const handleShowNotification = () => { const notificationPath = roleName === "superAdmin" || roleName === "admin" ? "/admin/notifications" : "/applicant/notifications"; navigate(notificationPath); - window.location.reload(); + // window.location.reload(); }; const handleShowProfileDropdown = () => setShowProfileDropdown(!showProfileDropdown); diff --git a/src/hooks/useAdminNotifications.ts b/src/hooks/useAdminNotifications.ts index f12aa061f..95be3687a 100644 --- a/src/hooks/useAdminNotifications.ts +++ b/src/hooks/useAdminNotifications.ts @@ -1,5 +1,7 @@ import { useEffect, useState } from "react"; import { initializeAdminPusher, unsubscribeAdminPusher } from "../utils/adminNotifications/pusher"; +import { toastOptions } from "../utils/toast"; +import { toast } from "react-toastify"; interface Notification { _id: string; @@ -9,10 +11,11 @@ interface Notification { } export const useAdminNotifications = () => { const [notifications, setNotifications] = useState([]); - + useEffect(() => { const handleNewNotification = (notification: Notification) => { setNotifications((prev) => [...prev, notification]); + toast.info(`New notification: ${notification.message}`, toastOptions); }; const channel = initializeAdminPusher(handleNewNotification); diff --git a/src/pages/ApplicantNotifications/AppNotification.tsx b/src/pages/ApplicantNotifications/AppNotification.tsx index 60ed249c8..0142f3ff5 100644 --- a/src/pages/ApplicantNotifications/AppNotification.tsx +++ b/src/pages/ApplicantNotifications/AppNotification.tsx @@ -1,18 +1,30 @@ import React, { useState } from "react"; import { IoMdMailOpen, IoMdMailUnread } from "react-icons/io"; import { useNotifications } from "../../utils/Notifications"; +import { useNavigate } from "react-router"; interface Notification { id: string; message: string; + eventType: string; + eventId: string; read: boolean; createdAt: string; } +interface ModalProps { + title: string; + children: React.ReactNode; + onClose: () => void; +} + function ApplicantNotifications() { const [activeTab, setActiveTab] = useState("All"); const [sortOrder, setSortOrder] = useState<"new" | "old">("new"); const [searchQuery, setSearchQuery] = useState(""); + const navigate = useNavigate(); + + const { notifications, markAsRead, markAsUnread, unreadCount } = useNotifications(); @@ -25,6 +37,19 @@ function ApplicantNotifications() { const handleSearchChange = (e: React.ChangeEvent) => setSearchQuery(e.target.value); + const handleNotificationClick = async (notification: Notification, ) => { + + if (!notification.read) { + await markAsRead(notification.id); + } + + if (notification.eventType === "ticket") { + navigate(`/applicant/ticket/${notification.eventId}`); + } else if (notification.eventType === "applicationUpdate"){ + navigate(`/applicant/myapplication`); + } + }; + const filteredNotifications = filterNotifications( notifications, activeTab, @@ -49,6 +74,7 @@ function ApplicantNotifications() { @@ -150,10 +176,12 @@ const Header = ({ const NotificationList = ({ notifications, onToggleRead, + onNotificationClick, formatDate, }: { notifications: Notification[]; - onToggleRead: (notification: Notification) => void; + onToggleRead: (notification: Notification) => void; + onNotificationClick: (notification: Notification) => void; formatDate: (dateString: string) => string; }) => (
@@ -165,7 +193,10 @@ const NotificationList = ({ notification.read ? "bg-gray-800" : "bg-gray-800 border border-white text-white" - }`} + }`} + style={{ cursor: "pointer" }} + onClick={() => onNotificationClick(notification)} + >
@@ -177,7 +208,10 @@ const NotificationList = ({ {formatDate(notification.createdAt) || "Date not available"}