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">