notification + change call back and ...

src/pages/notification/Notification.tsx

@@ -12,19 +12,22 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 import MoonLoader from "react-spinners/MoonLoader"
 import Button from '../../components/Button';
 import { toast } from 'react-toastify';
+import { useGetDashboardSummary } from '../home/hooks/useHomeData';
 
 const Notifications: FC = () => {
     const { t } = useTranslation('global');
     const ref = useOutsideClick(() => setShowModal(false));
     const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all');
     const [showModal, setShowModal] = useState<boolean>(false);
-    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification();
+    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
     const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
+    const getDashboard = useGetDashboardSummary()
 
     const handleAllRead = () => {
         readAll.mutate(undefined, {
             onSuccess: () => {
+                getDashboard.refetch()
                 refetch()
                 toast.success(t('success'))
             }
@@ -33,7 +36,12 @@ const Notifications: FC = () => {
 
     return (
         <div ref={ref}>
-            <Notification onClick={() => setShowModal(!showModal)} size={18} color="black" />
+            <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 justify-center items-center">
+                    {getDashboard.data?.data?.notificationCount}
+                </div>
+            </div>
 
             {showModal && (
                 <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">

src/pages/notification/hooks/useNotificationData.ts

@@ -1,15 +1,14 @@
 import * as api from "../service/NotificationService";
 import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
 
-export const useGetNotification = () => {
+export const useGetNotification = (status: "all" | "read" | "unread") => {
   return useInfiniteQuery({
-    queryKey: ["notifications"],
-    queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam), // فراخوانی API برای گرفتن داده‌ها
+    queryKey: ["notifications", status],
+    queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
     initialPageParam: 1, // صفحه اول به طور پیشفرض
     getNextPageParam: (lastPage) => {
       const currentPage = lastPage.data?.pager.page;
       const totalPages = lastPage.data?.pager.totalPages;
-      console.log("hasNextPage check: ", currentPage, totalPages); // بررسی وضعیت صفحات
 
       return currentPage < totalPages ? currentPage + 1 : undefined;
     },

src/pages/notification/service/NotificationService.ts

@@ -1,7 +1,14 @@
 import axios from "../../../config/axios";
 
-export const getNotifications = async (page: number) => {
-  const { data } = await axios.get(`/notifications?page=${page}`);
+export const getNotifications = async (
+  page: number,
+  status: "all" | "read" | "unread"
+) => {
+  let query = ``;
+  if (status !== "all") {
+    query = `&isRead=${status === "read" ? 1 : 0}`;
+  }
+  const { data } = await axios.get(`/notifications?page=${page}${query}`);
   return data;
 };