part 2

src/pages/notification/Notification.tsx

@@ -5,25 +5,31 @@ import { useTranslation } from 'react-i18next';
 import { clx } from '../../helpers/utils';
 import StatusCircle from '../../components/StatusCircle';
 import { useOutsideClick } from '../../hooks/useOutSideClick';
-import { useGetNotification } from './hooks/useNotificationData';
+import { useGetNotification, useReadAll } from './hooks/useNotificationData';
 import { NotificationItemType } from './types/NotificationTypes';
 import { timeAgo } from '../../config/func';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import MoonLoader from "react-spinners/MoonLoader"
+import Button from '../../components/Button';
+import { toast } from 'react-toastify';
 
 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, isFetching, isLoading } = useGetNotification();
-
+    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification();
+    const readAll = useReadAll()
     const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
 
-    console.log('posts:', posts);
-    console.log('hasNextPage:', hasNextPage);
-    console.log('isFetching:', isFetching);
-    console.log('isLoading:', isLoading);
+    const handleAllRead = () => {
+        readAll.mutate(undefined, {
+            onSuccess: () => {
+                refetch()
+                toast.success(t('success'))
+            }
+        })
+    }
 
     return (
         <div ref={ref}>
@@ -38,6 +44,8 @@ const Notifications: FC = () => {
                         </div>
                     </div>
 
+
+
                     <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
                         <div
                             onClick={() => setActiveTab('all')}
@@ -68,6 +76,18 @@ const Notifications: FC = () => {
                         </div>
                     </div>
 
+                    <div className='flex mt-4 justify-end'>
+                        <Button
+                            isLoading={readAll.isPending}
+                            onClick={handleAllRead}
+                            className={clx(
+                                'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
+                            )}
+                        >
+                            {t('notif.all_read')}
+                        </Button>
+                    </div>
+
                     <div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
                         <InfiniteScroll
                             dataLength={posts.length}