fix notifications (#281)

Author: iChris-tian

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);

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<Notification[]>([]);
-
+    
     useEffect(() => {
         const handleNewNotification = (notification: Notification) => {
             setNotifications((prev) => [...prev, notification]);
+            toast.info(`New notification: ${notification.message}`, toastOptions);
         };
 
         const channel = initializeAdminPusher(handleNewNotification);

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<HTMLInputElement>) =>
     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() {
       <NotificationList
         notifications={sortedNotifications}
         onToggleRead={handleToggleRead}
+        onNotificationClick={handleNotificationClick}
         formatDate={formatDate}
       />
     </div>
@@ -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;
 }) => (
   <div className="flex-1 p-4 overflow-y-auto">
@@ -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)}
+
         >
           <div className="flex items-center space-x-4">
             <div className={notification.read ? "text-gray-400" : "text-white"}>
@@ -177,7 +208,10 @@ const NotificationList = ({
               {formatDate(notification.createdAt) || "Date not available"}
             </div>
             <button
-              onClick={() => onToggleRead(notification)}
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleRead(notification);
+              }}
               className="text-blue-500"
             >
               {notification.read ? (

src/pages/tickets/createTicketModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState} from "react";
 import { toast, ToastContainer } from "react-toastify";
 import * as icons from "react-icons/ai";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
     const [ticket, setTicket] = useState({
@@ -18,7 +19,7 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
       try {
         setIsSubmitting(true);
         await onSubmit(ticket);
-        // toast.success("Ticket submitted successfully");
+        toast.success("Ticket submitted successfully");
         handleClose();
       } catch (error: any) {
         const errorMessage =
@@ -93,7 +94,11 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
                       className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer"
                       disabled={isSubmitting}
                     >
-                      Submit
+                      {isSubmitting ? (
+                        <AiOutlineLoading3Quarters className="animate-spin text-xl" />
+                      ) : (
+                        "Submit"
+                      )}
                     </button>
                     <button
                       type="button"
@@ -112,4 +117,4 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
     );
   };
 
-  export default CreateTicketModal;
+  export default CreateTicketModal;

src/utils/applicantNotifications/NotificationService.ts

@@ -15,6 +15,8 @@ export const fetchNotifications = async (
                   message
                   read
                   createdAt
+                  eventType
+                  eventId
                 }
               }`,
             variables: { userId },

src/utils/applicantNotifications/types.ts

@@ -1,5 +1,7 @@
 export interface Notification {
     id: string;
+    eventType: string;
+    eventId: string;
     message: string;
     read: boolean;
     createdAt: string;