From a9ea8b5d2bb64f05e35da658219e4f66698ca6f0 Mon Sep 17 00:00:00 2001 From: Sinan Date: Sun, 22 Sep 2024 15:45:47 +0530 Subject: [PATCH] notification model and utils added --- .../button/PatientNotificationButton.tsx | 44 ++++++++++++++ client/components/layout/NavBar.tsx | 53 ++--------------- .../components/models/NotificationModel.tsx | 58 +++++++++---------- client/lib/utils/getNotificationDetails.ts | 26 +++++++++ .../public/assets/icons/utils/alarm-plus.svg | 1 + .../assets/icons/utils/calendar-cancel.svg | 1 + client/types/index.ts | 2 +- server/src/domain/entities/INotification.ts | 2 +- 8 files changed, 107 insertions(+), 80 deletions(-) create mode 100644 client/components/button/PatientNotificationButton.tsx create mode 100644 client/lib/utils/getNotificationDetails.ts create mode 100644 client/public/assets/icons/utils/alarm-plus.svg create mode 100644 client/public/assets/icons/utils/calendar-cancel.svg diff --git a/client/components/button/PatientNotificationButton.tsx b/client/components/button/PatientNotificationButton.tsx new file mode 100644 index 00000000..1330b948 --- /dev/null +++ b/client/components/button/PatientNotificationButton.tsx @@ -0,0 +1,44 @@ +"use client"; + +import { Bell } from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { ButtonV2 } from "@/components/common/ButtonV2"; +import NotificationModal from "@/components/models/NotificationModel"; +import { useState } from "react"; +import { useGetAllPatientNotifications } from "@/lib/hooks/notification/useSlotPatient"; +import { INotification } from "@/types"; + +const NotificationButton = () => { + const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false); + const { data: notifications, isLoading } = useGetAllPatientNotifications(); + + const notificationCount = notifications?.length || 0; + + const handleNotificationClick = () => { + setIsNotificationModalOpen(true); + }; + + return ( + <> + + + {notificationCount > 0 && ( + + {notificationCount} + + )} + View notifications + + + + ); +}; + +export default NotificationButton; \ No newline at end of file diff --git a/client/components/layout/NavBar.tsx b/client/components/layout/NavBar.tsx index 3789d7dd..c364bf2d 100644 --- a/client/components/layout/NavBar.tsx +++ b/client/components/layout/NavBar.tsx @@ -1,9 +1,10 @@ +// NavBar.tsx "use client"; import Link from "next/link"; import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription } from "@/components/ui/sheet"; import { Button } from "@/components/ui/button"; -import { Package2, Bell } from "lucide-react"; +import { Package2 } from "lucide-react"; import { DropdownMenu, DropdownMenuTrigger, @@ -21,8 +22,7 @@ import { toast } from "../ui/use-toast"; import { useState } from "react"; import LogoutModel from "../models/LogoutModel"; import { ButtonV2 } from "../common/ButtonV2"; -import { Badge } from "@/components/ui/badge"; -import NotificationModal from "@/components/models/NotificationModel"; +import NotificationButton from "../button/PatientNotificationButton"; export const NavBar = () => { const path = usePathname(); @@ -31,29 +31,6 @@ export const NavBar = () => { const { patientToken, setCredentials, logout } = useAuth(); const [isLogoutModelOpen, setLogoutModelOpen] = useState(false); const [isSheetOpen, setIsSheetOpen] = useState(false); - const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false); - const [notificationCount, setNotificationCount] = useState(3); - - const notifications = [ - { - id: "1", - title: "New message", - description: "You have a new message from Dr. Smith", - icon: "/assets/icons/email.svg", - }, - { - id: "2", - title: "Appointment reminder", - description: "Your appointment is tomorrow at 2 PM", - icon: "/assets/icons/calendar.svg", - }, - { - id: "3", - title: "Lab results ready", - description: "Your recent lab results are now available", - icon: "/assets/icons/utils/droplet.svg", - }, - ]; if (path.includes("signup") || path.includes("admin") || path.includes("signin") || path.includes("doctor")) { return null; @@ -99,10 +76,6 @@ export const NavBar = () => { setIsSheetOpen(false); }; - const handleNotificationClick = () => { - setIsNotificationModalOpen(true); - }; - return (
); }; -export default NavBar; \ No newline at end of file +export default NavBar; diff --git a/client/components/models/NotificationModel.tsx b/client/components/models/NotificationModel.tsx index ff224e5c..5197b854 100644 --- a/client/components/models/NotificationModel.tsx +++ b/client/components/models/NotificationModel.tsx @@ -10,31 +10,26 @@ import { } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; - -type Notification = { - id: string; - title: string; - description: string; - icon: string; -}; +import { INotification, NotificationTypes } from "@/types"; +import getNotificationDetails from "@/lib/utils/getNotificationDetails"; type Props = { open: boolean; setOpen: Dispatch>; - notifications: Notification[]; + notifications: INotification[]; }; -const NotificationModal = ({ open, setOpen, notifications }: Props)=> { +const NotificationModal = ({ open, setOpen, notifications }: Props) => { const closeModal = () => { setOpen(false); }; return ( - + - -

Notifications

+ + Notifications @@ -74,4 +72,4 @@ const NotificationModal = ({ open, setOpen, notifications }: Props)=> { ); } -export default NotificationModal \ No newline at end of file +export default NotificationModal; \ No newline at end of file diff --git a/client/lib/utils/getNotificationDetails.ts b/client/lib/utils/getNotificationDetails.ts new file mode 100644 index 00000000..0e876169 --- /dev/null +++ b/client/lib/utils/getNotificationDetails.ts @@ -0,0 +1,26 @@ +import { NotificationTypes } from "@/types"; + +export default function getNotificationDetails(type: NotificationTypes) { + switch (type) { + case NotificationTypes.APPOINTMENT_CANCELED: + return { + icon: '/assets/icons/utils/calendar-cancel.svg', + title: 'Appointment Canceled' + }; + case NotificationTypes.APPOINTMENT_CONFIRMED: + return { + icon: '/assets/icons/utils/verified.svg', + title: 'Appointment Confirmed' + }; + case NotificationTypes.APPOINTMENT_REMINDER: + return { + icon: '/assets/icons/utils/alarm-plus.svg', + title: 'Appointment Reminder' + }; + default: + return { + icon: '/assets/icons/notification.svg', + title: 'Notification' + }; + } + } \ No newline at end of file diff --git a/client/public/assets/icons/utils/alarm-plus.svg b/client/public/assets/icons/utils/alarm-plus.svg new file mode 100644 index 00000000..12f8706a --- /dev/null +++ b/client/public/assets/icons/utils/alarm-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/assets/icons/utils/calendar-cancel.svg b/client/public/assets/icons/utils/calendar-cancel.svg new file mode 100644 index 00000000..46531fd4 --- /dev/null +++ b/client/public/assets/icons/utils/calendar-cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/types/index.ts b/client/types/index.ts index 8e26789a..085a8dc9 100644 --- a/client/types/index.ts +++ b/client/types/index.ts @@ -134,7 +134,7 @@ export interface INotification { readonly _id?: string; readonly patientId?: string; readonly doctorId?: string; - readonly type?: string; + readonly type?: NotificationTypes; readonly message?: string; readonly createdAt?: Date; readonly updatedAt?: Date; diff --git a/server/src/domain/entities/INotification.ts b/server/src/domain/entities/INotification.ts index 48857b0c..1e204fb7 100644 --- a/server/src/domain/entities/INotification.ts +++ b/server/src/domain/entities/INotification.ts @@ -8,7 +8,7 @@ export default interface INotification { readonly _id?: string; readonly patientId?: string; readonly doctorId?: string; - readonly type?: string; + readonly type?: NotificationTypes; readonly message?: string; readonly createdAt?: Date; readonly updatedAt?: Date;