Skip to content

Commit

Permalink
fix notifications (#281)
Browse files Browse the repository at this point in the history
  • Loading branch information
iChris-tian authored and bahati10 committed Dec 3, 2024
1 parent e2f2ff6 commit e2f04fd
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 8 deletions.
2 changes: 1 addition & 1 deletion src/components/sidebar/navHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
5 changes: 4 additions & 1 deletion src/hooks/useAdminNotifications.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
Expand Down
40 changes: 37 additions & 3 deletions src/pages/ApplicantNotifications/AppNotification.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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,
Expand All @@ -49,6 +74,7 @@ function ApplicantNotifications() {
<NotificationList
notifications={sortedNotifications}
onToggleRead={handleToggleRead}
onNotificationClick={handleNotificationClick}
formatDate={formatDate}
/>
</div>
Expand Down Expand Up @@ -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">
Expand All @@ -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"}>
Expand All @@ -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 ? (
Expand Down
11 changes: 8 additions & 3 deletions src/pages/tickets/createTicketModal.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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 =
Expand Down Expand Up @@ -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"
Expand All @@ -112,4 +117,4 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
);
};

export default CreateTicketModal;
export default CreateTicketModal;
2 changes: 2 additions & 0 deletions src/utils/applicantNotifications/NotificationService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export const fetchNotifications = async (
message
read
createdAt
eventType
eventId
}
}`,
variables: { userId },
Expand Down
2 changes: 2 additions & 0 deletions src/utils/applicantNotifications/types.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export interface Notification {
id: string;
eventType: string;
eventId: string;
message: string;
read: boolean;
createdAt: string;
Expand Down

0 comments on commit e2f04fd

Please sign in to comment.