notification count

src/app/[name]/(Main)/hooks/useMenuData.ts

@@ -19,3 +19,10 @@ export const useGetCategories = () => {
     enabled: !!name,
   });
 };
+
+export const useGetNotificationsCount = () => {
+  return useQuery({
+    queryKey: ["notifications-count"],
+    queryFn: api.getNotificationsCount,
+  });
+};

src/app/[name]/(Main)/service/MenuService.ts

@@ -1,5 +1,9 @@
 import { api } from "@/config/axios";
-import { CategoriesResponse, FoodsResponse } from "../types/Types";
+import {
+  CategoriesResponse,
+  FoodsResponse,
+  NotificationsCountResponse,
+} from "../types/Types";
 
 export const getFoods = async (slug: string): Promise<FoodsResponse> => {
   const response = await api.get<FoodsResponse>(
@@ -16,3 +20,12 @@ export const getCategories = async (
   );
   return response.data;
 };
+
+export const getNotificationsCount = async (): Promise<
+  NotificationsCountResponse
+> => {
+  const response = await api.get<NotificationsCountResponse>(
+    `/public/notifications/unseen-count`
+  );
+  return response.data;
+};

src/app/[name]/(Main)/types/Types.ts

@@ -76,3 +76,9 @@ export interface Food {
 
 export type FoodsResponse = BaseResponse<Food[]>;
 export type FoodResponse = BaseResponse<Food>;
+
+export interface NotificationsCountData {
+  count: number;
+}
+
+export type NotificationsCountResponse = BaseResponse<NotificationsCountData>;

src/components/topbar/TopBar.tsx

@@ -11,6 +11,7 @@ import { useParams } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import LogoutPrompt from '@/features/general/LogoutPrompt'
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData'
+import { useGetNotificationsCount } from '@/app/[name]/(Main)/hooks/useMenuData'
 
 type Props = {
     profileDropState: boolean,
@@ -29,6 +30,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
     const { name } = params;
     const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
     const { data: profile, isSuccess } = useGetProfile();
+    const { data: notificationsCount } = useGetNotificationsCount();
     const profileData = profile?.data;
     const isLoggedIn = isSuccess && profileData;
     const fullName = profileData ? `${profileData.firstName} ${profileData.lastName}`.trim() : 'کاربر داناک';
@@ -70,7 +72,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                         className='relative'>
                         <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
                         <span className='absolute -right-1 -top-1 flex items-center justify-center bg-primary size-3 rounded-full text-[8px] text-container'>
-                            <div className='mt-0.25 place-self-center'>2</div>
+                            <div className='mt-0.25 place-self-center'>{notificationsCount?.data?.count}</div>
                         </span>
                     </Link>
                     {isLoggedIn ? (