From 92ff4de6a44c18e487c2ce9d5918e83a69753c74 Mon Sep 17 00:00:00 2001
From: chris <iradukundachristian202@gmail.com>
Date: Sun, 1 Dec 2024 22:52:48 +0200
Subject: [PATCH 1/3] work on notifications

---
 src/components/sidebar/navHeader.tsx    | 2 +-
 src/hooks/useAdminNotifications.ts      | 5 ++++-
 src/pages/tickets/createTicketModal.tsx | 9 +++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

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<Notification[]>([]);
-
+    
     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/tickets/createTicketModal.tsx b/src/pages/tickets/createTicketModal.tsx
index 055369467..6d35f2597 100644
--- a/src/pages/tickets/createTicketModal.tsx
+++ b/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({
@@ -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;
\ No newline at end of file
+  export default CreateTicketModal;

From a4efe6fcc1bea952b5c2d218b05696b7a4069fd5 Mon Sep 17 00:00:00 2001
From: chris <iradukundachristian202@gmail.com>
Date: Mon, 2 Dec 2024 21:56:13 +0200
Subject: [PATCH 2/3] fix: improve on notifications

---
 .../AppNotification.tsx                       | 40 +++++++++++++++++--
 src/pages/tickets/createTicketModal.tsx       |  2 +-
 src/utils/applicantNotifications/types.ts     |  2 +
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/pages/ApplicantNotifications/AppNotification.tsx b/src/pages/ApplicantNotifications/AppNotification.tsx
index 60ed249c8..df4c8cd90 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<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 ? (
diff --git a/src/pages/tickets/createTicketModal.tsx b/src/pages/tickets/createTicketModal.tsx
index 6d35f2597..584f07c89 100644
--- a/src/pages/tickets/createTicketModal.tsx
+++ b/src/pages/tickets/createTicketModal.tsx
@@ -19,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 =
diff --git a/src/utils/applicantNotifications/types.ts b/src/utils/applicantNotifications/types.ts
index f9184864f..2bc404732 100644
--- a/src/utils/applicantNotifications/types.ts
+++ b/src/utils/applicantNotifications/types.ts
@@ -1,5 +1,7 @@
 export interface Notification {
     id: string;
+    eventType: string;
+    eventId: string;
     message: string;
     read: boolean;
     createdAt: string;

From 28a0f0e50002800887947c778cfe4057b896f36b Mon Sep 17 00:00:00 2001
From: chris <iradukundachristian202@gmail.com>
Date: Mon, 2 Dec 2024 23:04:24 +0200
Subject: [PATCH 3/3] fix: improve on notifications

---
 src/pages/ApplicantNotifications/AppNotification.tsx    | 2 +-
 src/utils/applicantNotifications/NotificationService.ts | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/ApplicantNotifications/AppNotification.tsx b/src/pages/ApplicantNotifications/AppNotification.tsx
index df4c8cd90..0142f3ff5 100644
--- a/src/pages/ApplicantNotifications/AppNotification.tsx
+++ b/src/pages/ApplicantNotifications/AppNotification.tsx
@@ -42,7 +42,7 @@ function ApplicantNotifications() {
     if (!notification.read) {
       await markAsRead(notification.id);
     }
-
+    
     if (notification.eventType === "ticket") {
       navigate(`/applicant/ticket/${notification.eventId}`);
     } else if (notification.eventType === "applicationUpdate"){
diff --git a/src/utils/applicantNotifications/NotificationService.ts b/src/utils/applicantNotifications/NotificationService.ts
index 2e3e57905..aa007a69a 100644
--- a/src/utils/applicantNotifications/NotificationService.ts
+++ b/src/utils/applicantNotifications/NotificationService.ts
@@ -15,6 +15,8 @@ export const fetchNotifications = async (
                   message
                   read
                   createdAt
+                  eventType
+                  eventId
                 }
               }`,
             variables: { userId },