notification infiti scroll

src/pages/notification/Notification.tsx

@@ -17,11 +17,11 @@ const Notifications: FC = () => {
     // const navigate = useNavigate()
     const { t } = useTranslation('global');
     const ref = useOutsideClick(() => setShowModal(false));
-    const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
+    const [activeTab, setActiveTab] = useState<'seen' | 'unseen'>('unseen');
     const [showModal, setShowModal] = useState<boolean>(false);
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
-    const posts = data?.pages.flatMap((page) => page.data?.notifications || []) || [];
+    const posts = data?.pages.flatMap((page: { data: NotificationItemType[] }) => page.data || []) || [];
     // const getDashboard = useGetDashboard()
 
     const handleAllRead = () => {
@@ -99,19 +99,19 @@ const Notifications: FC = () => {
 
                     <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
                         <div
-                            onClick={() => setActiveTab('unread')}
+                            onClick={() => setActiveTab('unseen')}
                             className={clx(
                                 'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
-                                activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
+                                activeTab === 'unseen' ? 'bg-white bg-opacity-70 text-black' : ''
                             )}
                         >
                             خوانده نشده
                         </div>
                         <div
-                            onClick={() => setActiveTab('read')}
+                            onClick={() => setActiveTab('seen')}
                             className={clx(
                                 'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
-                                activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
+                                activeTab === 'seen' ? 'bg-white bg-opacity-70 text-black' : ''
                             )}
                         >
                             خوانده شده
@@ -142,13 +142,13 @@ const Notifications: FC = () => {
                                 posts.map((item: NotificationItemType) => (
                                     <div onClick={() => handleRedirect()} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
                                         {
-                                            !item.isRead &&
+                                            !item.seenAt &&
                                             <div className="mt-1">
                                                 <StatusCircle color="#00BA4B" />
                                             </div>
                                         }
                                         <div>
-                                            <div className="truncate max-w-[200px]">{item.message}</div>
+                                            <div className="truncate max-w-[200px]">{item.content}</div>
                                             <div className="mt-2 flex gap-2 text-[10px] text-description">
                                                 <div>{timeAgo(item.createdAt)}</div>
                                                 <div className="flex gap-1 items-center">

src/pages/notification/hooks/useNotificationData.ts

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

src/pages/notification/service/NotificationService.ts

@@ -2,15 +2,16 @@ import axios from "../../../config/axios";
 import type { GetNotificationsResponse } from "../types/NotificationTypes";
 
 export const getNotifications = async (
-  page: number,
-  status: "all" | "read" | "unread"
+  cursor: string | undefined,
+  status: "all" | "seen" | "unseen"
 ): Promise<GetNotificationsResponse> => {
   let query = ``;
   if (status !== "all") {
-    query = `&isRead=${status === "read" ? 1 : 0}`;
+    query = `&status=${status}`;
   }
+  const cursorParam = cursor ? `&cursor=${cursor}` : ``;
   const { data } = await axios.get<GetNotificationsResponse>(
-    `/admin/notifications?page=${page}${query}`
+    `/admin/notifications?limit=10${cursorParam}${query}`
   );
   return data;
 };

src/pages/notification/types/NotificationTypes.ts

@@ -1,12 +1,32 @@
 import type { IResponse } from "@/types/response.types";
 
+export type NotificationUser = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  marriageDate: string;
+  referrer: string | null;
+  isActive: boolean;
+  gender: boolean;
+  avatarUrl: string | null;
+  phone: string;
+};
+
 export type NotificationItemType = {
   id: string;
-  title: string;
-  message: string;
   createdAt: string;
-  isRead: boolean;
-  type: NotificationTypeEnum;
+  updatedAt: string;
+  deletedAt: string | null;
+  restaurant: string;
+  user: NotificationUser;
+  admin: string | null;
+  title: string;
+  content: string;
+  seenAt: string | null;
 };
 
 export type NotificationPager = {
@@ -19,7 +39,9 @@ export type NotificationData = {
   pager: NotificationPager;
 };
 
-export type GetNotificationsResponse = IResponse<NotificationData>;
+export type GetNotificationsResponse = IResponse<NotificationItemType[]> & {
+  nextCursor?: string;
+};
 
 export enum NotificationTypeEnum {
   USER_LOGIN = "USER_LOGIN",