add func for Clear all

rair-front/src/components/Header/MainHeader.tsx

@@ -143,7 +143,7 @@ const MainHeader: React.FC<IMainHeader> = ({
       if (currentUserAddress) {
         // const result = await rFetch(`/api/notifications${itemsPerPage && pageNum ? `?itemsPerPage=${itemsPerPage}&pageNum=${pageNum}` : ''}`);
         const result = await rFetch(
-          `/api/notifications${`?pageNum=${Number(pageNum)}`}`
+          `/api/notifications${pageNum ? `?pageNum=${Number(pageNum)}` : ''}`
         );
 
         if (result.success) {
@@ -157,7 +157,7 @@ const MainHeader: React.FC<IMainHeader> = ({
   const getNotificationsCount = useCallback(async () => {
     if (currentUserAddress) {
       const result = await rFetch(`/api/notifications?onlyUnread=true`);
-      if (result.success && result.totalCount > 0) {
+      if (result.success && result.totalCount >= 0) {
         setNotificationCount(result.totalCount);
       }
     }

rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx

@@ -42,7 +42,7 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({
   const getNotificationsCount = useCallback( async () => {
     if (currentUserAddress) {
       const result = await rFetch(`/api/notifications?onlyUnread=true`);
-      if (result.success && result.totalCount > 0) {
+      if (result.success && result.totalCount >= 0) {
         setNotificationCount(result.totalCount);
       }
     }

rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx

@@ -21,6 +21,7 @@ import NotificationBox from '../../UserProfileSettings/PopUpNotification/Notific
 import { BackBtnMobileNav } from '../NavigationItems/NavigationItems';
 import PaginationBox from '../../MockUpPage/PaginationBox/PaginationBox';
 import { ColorStoreType } from '../../../ducks/colors/colorStore.types';
+import useSwal from '../../../hooks/useSwal';
 
 interface IMobileNavigationList {
   messageAlert: string | null;
@@ -48,7 +49,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
     (store) => store.userStore
   );
 
-  const { primaryColor } = useSelector<
+  const { primaryColor, primaryButtonColor, textColor } = useSelector<
   RootState,
   ColorStoreType
 >((store) => store.colorStore);
@@ -92,28 +93,32 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
   const [notificationCount, setNotificationCount] = useState<number>(0);
   const [flagLoading, setFlagLoading] = useState(false);
   const [currentPageNotification, setCurrentPageNotification] = useState<number>(1);
+  const reactSwal = useSwal();
 
   const { logoutUser } = useConnectUser();
 
-  const getNotifications = useCallback(async (pageNum: number) => {
+  const getNotifications = useCallback(async (pageNum?: number) => {
     if (messageAlert && currentUserAddress) {
       setFlagLoading(true);
-      const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);
+      const result = await rFetch(`/api/notifications${ pageNum ? `?pageNum=${Number(pageNum)}` : ''}`);
       if (result.success) {
         setNotificationArray(result.notifications);
-        setFlagLoading(false);
       }
+
+      setFlagLoading(false);
     }
   }, [messageAlert, currentUserAddress]);
+
 
   const getNotificationsCount = useCallback( async () => {
     if (currentUserAddress) {
       setFlagLoading(true);
       const result = await rFetch(`/api/notifications`);
-      if (result.success && result.totalCount > 0) {
+      if (result.success && result.totalCount >= 0) {
         setNotificationCount(result.totalCount);
-        setFlagLoading(true);
       }
+
+      setFlagLoading(false);
     }
   }, [currentUserAddress])
 
@@ -123,6 +128,27 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
     getNotifications(Number(currentPageNumber));
   };
 
+  const deleteAllNotificaiton = useCallback( async() => {
+    if(currentUserAddress) {
+      setFlagLoading(true);
+      const result = await rFetch(`/api/notifications`, {
+        method: "DELETE",
+        body: JSON.stringify([])
+      });
+
+      if(result.success) {
+        getNotifications();
+        getNotificationsCount();
+        reactSwal.fire({
+          title : "Success",
+          icon: 'success'
+        });
+        setFlagLoading(false);
+      }
+      setFlagLoading(false);
+    }
+  }, [currentUserAddress])
+
   useEffect(() => {
     getNotificationsCount();
   }, [getNotificationsCount])
@@ -164,6 +190,23 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
               marginTop: '20px',
               padding: '20px 0'
             }}>
+              <div className="btn-clear-nofitications">
+                 <button className="btn-clear-nofitications" onClick={() => deleteAllNotificaiton()} style={{
+            color: textColor,
+            background: `${
+              primaryColor === '#dedede'
+                ? import.meta.env.VITE_TESTNET === 'true'
+                  ? 'var(--hot-drops)'
+                  : 'linear-gradient(to right, #e882d5, #725bdb)'
+                : import.meta.env.VITE_TESTNET === 'true'
+                  ? primaryButtonColor ===
+                    'linear-gradient(to right, #e882d5, #725bdb)'
+                    ? 'var(--hot-drops)'
+                    : primaryButtonColor
+                  : primaryButtonColor
+            }`
+          }}>Clear all</button>
+                </div>
             {flagLoading ? (
               <LoadingComponent />
             ) : notificationArray && notificationArray.length > 0 ? (
@@ -189,7 +232,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
               </div>
             )}
           </div>
-          {notificationCount && <PaginationBox
+          {notificationCount > 0 && <PaginationBox
             totalPageForPagination={notificationCount}
             changePage={changePageForVideo}
             currentPage={currentPageNotification}

rair-front/src/components/UserProfileSettings/PopUpNotification/NotificationBox/NotificationBox.tsx

@@ -28,8 +28,14 @@ const NotificationBox = ({
 
   const removeItem = useCallback(async () => {
     if (currentUserAddress) {
-      const result = await rFetch(`/api/notifications/${el._id}`, {
-        method: 'DELETE'
+      const result = await rFetch(`/api/notifications`, {
+        method: 'DELETE',
+        body: JSON.stringify({
+          ids: [el._id]
+        }),
+        headers: {
+          'Content-Type': 'application/json'
+        }
       });
 
       if (result.success) {
@@ -41,12 +47,14 @@ const NotificationBox = ({
 
   const readNotification = useCallback(async () => {
     if (currentUserAddress) {
-      const result = await rFetch(`/api/notifications/${el._id}`, {
+      const result = await rFetch(`/api/notifications`, {
         method: 'PUT',
         body: JSON.stringify({
-          ...el,
-          read: true
-        })
+          ids: [el._id]
+        }),
+        headers: {
+          'Content-Type': 'application/json'
+        }
       });
 
       if (result.success) {

rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx

@@ -7,6 +7,7 @@ import { RootState } from '../../../ducks';
 import { ColorStoreType } from '../../../ducks/colors/colorStore.types';
 import { ContractsInitialType } from '../../../ducks/contracts/contracts.types';
 import { TUsersInitialState } from '../../../ducks/users/users.types';
+import useSwal from '../../../hooks/useSwal';
 import { BellIcon } from '../../../images';
 import { SocialBox } from '../../../styled-components/SocialLinkIcons/SocialLinkIcons';
 import { rFetch } from '../../../utils/rFetch';
@@ -21,6 +22,7 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
       import.meta.env.VITE_TESTNET === 'true' ? 'HotDrops' : 'Rair.tech';
     const [openModal, setOpenModal] = useState(false);
     const store = useStore();
+    const reactSwal = useSwal();
     const { currentUserAddress } = useSelector<
     RootState,
     ContractsInitialType
@@ -51,6 +53,24 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
           setTotalPageForPagination(result.totalCount);
         }
       }
+    }, [currentUserAddress]);
+
+    const deleteAllNotificaiton = useCallback( async() => {
+      if(currentUserAddress) {
+        const result = await rFetch(`/api/notifications`, {
+          method: "DELETE",
+          body: JSON.stringify([])
+        });
+
+        if(result.success) {
+          getNotifications();
+          getNotificationsCount();
+          reactSwal.fire({
+            title : "Success",
+            icon: 'success'
+          });
+        }
+      }
     }, [currentUserAddress])
 
     useEffect(() => {
@@ -60,6 +80,10 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
       }
     }, [openModal]);
 
+    useEffect(() => {
+      getNotificationsCount();
+    }, [getNotificationsCount])
+
     useEffect(() => {
       getNotificationsCountPagitation();
     }, [getNotificationsCountPagitation])
@@ -125,7 +149,7 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
               }}>
                 <div className="btn-clear-nofitications">
                  <div className="notification-title">Notifications</div>
-                 <button onClick={() => setRealDataNotification([])} style={{
+                 <button onClick={() => deleteAllNotificaiton()} style={{
             color: textColor,
             background: `${
               primaryColor === '#dedede'
@@ -171,7 +195,7 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
               <div style={{paddingBottom: "15px"}}>
               {
 
-totalPageForPagination && notificationCount > 0 && <PaginationBox
+          notificationCount > 0 && totalPageForPagination && <PaginationBox
             totalPageForPagination={totalPageForPagination}
             primaryColor={primaryColor}
             changePage={changePageForVideo}

rair-front/src/components/UserProfileSettings/UserProfileSettings.css

@@ -565,6 +565,15 @@ span.profile-input-edit:hover {
   border: solid 1px #fff;
 }
 
+@media screen and (max-width: 1024px) {
+  .btn-clear-nofitications {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0;
+    border-bottom: none;
+  }
+}
+
 @media screen and (max-width: 500px) {
   .notification-from-factory {
     padding: 10px;