notification count

src/pages/notification/Notification.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { clx } from '../../helpers/utils';
 import StatusCircle from '../../components/StatusCircle';
 import { useOutsideClick } from '../../hooks/useOutSideClick';
-import { useGetNotification, useReadAll } from './hooks/useNotificationData';
+import { useGetNotification, useGetUnseenCount, useReadAll } from './hooks/useNotificationData';
 import { type NotificationItemType } from './types/NotificationTypes';
 import { timeAgo } from '../../config/func';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -19,6 +19,7 @@ const Notifications: FC = () => {
     const ref = useOutsideClick(() => setShowModal(false));
     const [activeTab, setActiveTab] = useState<'seen' | 'unseen'>('unseen');
     const [showModal, setShowModal] = useState<boolean>(false);
+    const { data: unseenCount } = useGetUnseenCount();
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
     const posts = data?.pages.flatMap((page: { data: NotificationItemType[] }) => page.data || []) || [];
@@ -82,7 +83,7 @@ const Notifications: FC = () => {
             <div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
                 <Notification size={18} color="black" />
                 <div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
-                    {/* {getDashboard.data?.data?.notificationCount} */}
+                    {unseenCount?.data?.count}
                 </div>
             </div>
 

src/pages/notification/hooks/useNotificationData.ts

@@ -1,5 +1,5 @@
 import * as api from "../service/NotificationService";
-import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query";
 
 export const useGetNotification = (status: "all" | "seen" | "unseen") => {
   return useInfiniteQuery({
@@ -18,3 +18,10 @@ export const useReadAll = () => {
     mutationFn: () => api.readAll(),
   });
 };
+
+export const useGetUnseenCount = () => {
+  return useQuery({
+    queryKey: ["unseen-count"],
+    queryFn: () => api.getUnseenCount(),
+  });
+};

src/pages/notification/service/NotificationService.ts

@@ -1,5 +1,8 @@
 import axios from "../../../config/axios";
-import type { GetNotificationsResponse } from "../types/NotificationTypes";
+import type {
+  GetNotificationsResponse,
+  GetUnseenCountResponse,
+} from "../types/NotificationTypes";
 
 export const getNotifications = async (
   cursor: string | undefined,
@@ -20,3 +23,10 @@ export const readAll = async () => {
   const { data } = await axios.patch(`/admin/notifications/read-all`);
   return data;
 };
+
+export const getUnseenCount = async (): Promise<GetUnseenCountResponse> => {
+  const { data } = await axios.get<GetUnseenCountResponse>(
+    `/admin/notifications/unseen-count`
+  );
+  return data;
+};

src/pages/notification/types/NotificationTypes.ts

@@ -43,6 +43,12 @@ export type GetNotificationsResponse = IResponse<NotificationItemType[]> & {
   nextCursor?: string;
 };
 
+export type UnseenCountData = {
+  count: number;
+};
+
+export type GetUnseenCountResponse = IResponse<UnseenCountData>;
+
 export enum NotificationTypeEnum {
   USER_LOGIN = "USER_LOGIN",
   ANNOUNCEMENT = "ANNOUNCEMENT",