add pagination for mobile devices

mfrosi · Jul 10, 2024 · 2abe648 · 2abe648
1 parent e2234d9
commit 2abe648
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 37 deletions.
diff --git a/rair-front/src/App.tsx b/rair-front/src/App.tsx
@@ -198,10 +198,9 @@ function App() {
 
   const getNotificationsCount = useCallback( async () => {
     if (currentUserAddress) {
-      const result = await rFetch(`/api/notifications?read=false`);
-      if (result.success && result.notifications.length > 0) {
-        const readNotifications = result.notifications.filter(el => el.read === false);
-        setNotificationCount(readNotifications.length);
+      const result = await rFetch(`/api/notifications?onlyUnread=true`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
       }
     }
   }, [currentUserAddress]);

diff --git a/rair-front/src/components/Header/MainHeader.tsx b/rair-front/src/components/Header/MainHeader.tsx
@@ -125,9 +125,11 @@ const MainHeader: React.FC<IMainHeader> = ({
     setTextSearch('');
   };
 
-  const getNotifications = useCallback(async (itemsPerPage?: number, pageNum?: number) => {
+  const getNotifications = useCallback(async (pageNum?: number) => {
     if(currentUserAddress) {
-      const result = await rFetch(`/api/notifications${itemsPerPage && pageNum ? `?itemsPerPage=${itemsPerPage}&pageNum=${pageNum}` : ''}`);
+      // const result = await rFetch(`/api/notifications${itemsPerPage && pageNum ? `?itemsPerPage=${itemsPerPage}&pageNum=${pageNum}` : ''}`);
+      const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);
+
       if (result.success) {
         setRealDataNotification(result.notifications);
       }
@@ -136,10 +138,9 @@ const MainHeader: React.FC<IMainHeader> = ({
 
   const getNotificationsCount = useCallback( async () => {
     if(currentUserAddress) {
-      const result = await rFetch(`/api/notifications?read=false`);
-      if (result.success && result.notifications.length > 0) {
-        const readNotifications = result.notifications.filter(el => el.read === false);
-        setNotificationCount(readNotifications.length);
+      const result = await rFetch(`/api/notifications?onlyUnread=true`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
       }
     }
   }, [currentUserAddress])
@@ -150,7 +151,7 @@ const MainHeader: React.FC<IMainHeader> = ({
 
 
   useEffect(() => {
-    getNotifications(4, 1);
+    getNotifications(0);
   }, [currentUserAddress])
 
   const Highlight = (props) => {

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx
@@ -41,10 +41,9 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({
 
   const getNotificationsCount = useCallback( async () => {
     if (currentUserAddress) {
-      const result = await rFetch(`/api/notifications?read=false`);
-      if (result.success && result.notifications.length > 0) {
-        const readNotifications = result.notifications.filter(el => el.read === false);
-        setNotificationCount(readNotifications.length);
+      const result = await rFetch(`/api/notifications?onlyUnread=true`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
       }
     }
   }, [currentUserAddress, messageAlert])

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
@@ -17,11 +17,13 @@ import { TooltipBox } from '../../common/Tooltip/TooltipBox';
 import { NavFooter, NavFooterBox } from '../../Footer/FooterItems/FooterItems';
 import NotificationBox from '../../UserProfileSettings/PopUpNotification/NotificationBox/NotificationBox';
 import { BackBtnMobileNav } from '../NavigationItems/NavigationItems';
+import PaginationBox from '../../MockUpPage/PaginationBox/PaginationBox';
+import { ColorStoreType } from '../../../ducks/colors/colorStore.types';
 
 interface IMobileNavigationList {
   messageAlert: string | null;
   setMessageAlert: (arg: string | null) => void;
-  primaryColor: string;
+  primaryColor?: string;
   currentUserAddress: string | undefined;
   toggleMenu: (otherPage?: string) => void;
   setTabIndexItems: (arg: number) => void;
@@ -32,7 +34,6 @@ interface IMobileNavigationList {
 const MobileNavigationList: React.FC<IMobileNavigationList> = ({
   messageAlert,
   setMessageAlert,
-  primaryColor,
   toggleMenu,
   currentUserAddress,
   click
@@ -47,6 +48,11 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
     (store) => store.userStore
   );
 
+  const { primaryColor } = useSelector<
+  RootState,
+  ColorStoreType
+>((store) => store.colorStore);
+
   const { web3TxHandler } = useWeb3Tx();
 
   const { erc777Instance, currentChain } = useSelector<
@@ -85,13 +91,14 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
   const [notificationArray, setNotificationArray] = useState<any>();
   const [notificationCount, setNotificationCount] = useState<number>(0);
   const [flagLoading, setFlagLoading] = useState(false);
+  const [currentPageNotification, setCurrentPageNotification] = useState<number>(1);
 
   const { logoutUser } = useConnectUser();
 
-  const getNotifications = useCallback(async () => {
+  const getNotifications = useCallback(async (pageNum: number) => {
     if (messageAlert && currentUserAddress) {
       setFlagLoading(true);
-      const result = await rFetch(`/api/notifications`);
+      const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);
       if (result.success) {
         setNotificationArray(result.notifications);
         setFlagLoading(false);
@@ -100,23 +107,28 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
   }, [messageAlert, currentUserAddress]);
 
   const getNotificationsCount = useCallback( async () => {
-    if (messageAlert && currentUserAddress) {
+    if (currentUserAddress) {
       setFlagLoading(true);
-      const result = await rFetch(`/api/notifications?read=false`);
-      if (result.success && result.notifications.length > 0) {
-        const readNotifications = result.notifications.filter(el => el.read === false);
-        setNotificationCount(readNotifications.length);
+      const result = await rFetch(`/api/notifications`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
         setFlagLoading(true);
       }
     }
   }, [currentUserAddress])
 
+  const changePageForVideo = (currentPage: number) => {
+    setCurrentPageNotification(currentPage);
+    const currentPageNumber = currentPage === 0 ? currentPage : currentPage - 1;
+    getNotifications(Number(currentPageNumber));
+  };
+
   useEffect(() => {
     getNotificationsCount();
   }, [getNotificationsCount])
 
   useEffect(() => {
-    getNotifications();
+    getNotifications(0);
   }, [getNotifications]);
 
   useEffect(() => {
@@ -147,7 +159,7 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
           <div
             style={{
               width: '90vw',
-              height: '80vh',
+              height: '65vh',
               overflowY: 'auto',
               marginTop: '20px',
               padding: '20px 0'
@@ -177,6 +189,13 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
               </div>
             )}
           </div>
+          {notificationCount && <PaginationBox
+            totalPageForPagination={notificationCount}
+            changePage={changePageForVideo}
+            currentPage={currentPageNotification}
+            itemsPerPageNotifications={10}
+            whatPage={"notifications"}
+          />}
         </NavFooterBox>
       ) : messageAlert === 'profile' ? (
         <NavFooterBox

diff --git a/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx b/rair-front/src/components/UserProfileSettings/PopUpNotification/PopUpNotification.tsx
@@ -40,22 +40,22 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
 
     const changePageForVideo = (currentPage: number) => {
       setCurrentPageNotification(currentPage);
-      getNotifications(4, Number(currentPage));
+      const currentPageNumber = currentPage === 0 ? currentPage : currentPage - 1;
+      getNotifications(Number(currentPageNumber));
     };
 
     const getNotificationsCountPagitation = useCallback( async () => {
       if(currentUserAddress) {
-        const result = await rFetch(`/api/notifications?read=false`);
-        console.info(result, 'resultresult')
-        if (result.success && result.notifications.length > 0) {
-          setTotalPageForPagination(result.notifications.length);
+        const result = await rFetch(`/api/notifications`);
+        if (result.success && result.totalCount > 0) {
+          setTotalPageForPagination(result.totalCount);
         }
       }
     }, [currentUserAddress])
 
     useEffect(() => {
       if(openModal) {
-        getNotifications(4, 1);
+        getNotifications(0);
         getNotificationsCount();
       }
     }, [openModal]);
@@ -82,7 +82,6 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
       }
     }, [uploadVideo]);
 
-    console.info(notificationCount, 'notificationCount')
 
     return (
       <>
@@ -122,8 +121,7 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
                 }`,
                 border: '1px solid #fff',
                 color: `${primaryColor === 'rhyno' && '#000'}`,
-                maxHeight: '400px',
-                overflowY: 'auto'
+                maxHeight: '500px',
               }}>
                 <div className="btn-clear-nofitications">
                  <div className="notification-title">Notifications</div>
@@ -143,6 +141,11 @@ const PopUpNotification = ({getNotifications, realDataNotification, notification
             }`
           }}>Clear all</button>
                 </div>
+              <div className="notification-wrapper-block" style={{
+                overflowY: 'auto',
+                maxHeight: "400px",
+                // marginTop: "20px"
+              }}>
               {realDataNotification && realDataNotification.length > 0 ? (
                 realDataNotification.map((el) => {
                   return (
@@ -173,11 +176,12 @@ totalPageForPagination && notificationCount > 0 && <PaginationBox
             primaryColor={primaryColor}
             changePage={changePageForVideo}
             currentPage={currentPageForNotification}
-            itemsPerPageNotifications={4}
+            itemsPerPageNotifications={10}
             whatPage={"notifications"}
           />
               }
               </div>
+              </div>
             </div>
           )}
         </Popup>

diff --git a/rair-front/src/components/UserProfileSettings/UserProfileSettings.css b/rair-front/src/components/UserProfileSettings/UserProfileSettings.css
@@ -64,7 +64,8 @@
 .btn-clear-nofitications {
   display: flex;
   justify-content: space-between;
-  padding: 20px 25px 0px 25px;
+  padding: 20px 25px 20px 25px;
+  border-bottom: 1px solid #fff;
 }
 
 .user-block {
@@ -568,4 +569,12 @@ span.profile-input-edit:hover {
   .notification-from-factory {
     padding: 10px;
   }
+
+  .box-notification .dot-notification {
+    left: 0px;
+  }
+
+  .notification-img {
+    padding-left: 25px;
+  }
 }