220 notifications not displayed on mobile

rair-front/src/App.tsx

@@ -105,7 +105,6 @@ function App() {
   const [tabIndexItems, setTabIndexItems] = useState(0);
   const [tokenNumber, setTokenNumber] = useState<number | undefined>(undefined);
   const navigate = useNavigate();
-  const [notificationCount, setNotificationCount] = useState<number>(0);
 
   // Redux
   const {
@@ -171,21 +170,6 @@ function App() {
     }
   }, [dispatch, logoutUser, blockchainSettings]);
 
-  const getNotificationsCount = useCallback(async () => {
-    if (isLoggedIn && currentUserAddress) {
-      const result = await rFetch(`/api/notifications?onlyUnread=true`);
-      if (result.success && result.totalCount >= 0) {
-        setNotificationCount(result.totalCount);
-      }
-    } else {
-      setNotificationCount(0);
-    }
-  }, [isLoggedIn, currentUserAddress]);
-
-  useEffect(() => {
-    getNotificationsCount();
-  }, [getNotificationsCount]);
-
   // gtag
 
   useEffect(() => {
@@ -306,8 +290,6 @@ function App() {
                 showAlert={showAlert}
                 setTabIndexItems={setTabIndexItems}
                 isAboutPage={isAboutPage}
-                notificationCount={notificationCount}
-                getNotificationsCount={getNotificationsCount}
               />
             )
           )}

rair-front/src/components/DemoMediaUpload/MediaItemChange/MediaItemChange.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import React, { useCallback, useState } from 'react';
 import {
   faCheck,

rair-front/src/components/DemoMediaUpload/PopUpChangeVideo/PopUpChangeVideo.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import React, { useCallback, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 
@@ -22,9 +23,8 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
   mediaList,
   index
 }) => {
-  const { primaryColor, textColor, primaryButtonColor } = useAppSelector(
-    (store) => store.colors
-  );
+  const { primaryColor, textColor, primaryButtonColor, isDarkMode } =
+    useAppSelector((store) => store.colors);
   const { categories } = useAppSelector((store) => store.settings);
   const rSwal = useSwal();
 
@@ -122,7 +122,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
       color: textColor
     },
     labelCSS: {
-      color: `${primaryColor === 'rhyno' ? 'rgb(41, 41, 41)' : '#fff'}`,
+      color: textColor,
       marginTop: 5,
       marginBottom: 5
     }
@@ -133,7 +133,9 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
       zIndex: '1'
     },
     content: {
-      background: primaryColor === 'rhyno' ? '#F2F2F2' : '#383637',
+      background: isDarkMode
+        ? `color-mix(in srgb, ${primaryColor}, #2D2D2D)`
+        : 'var(--rhyno)',
       top: '50%',
       left: '50%',
       right: 'auto',
@@ -191,15 +193,15 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
             label="Title"
             customClass="form-control input-select-custom-style"
             placeholder="Select a description"
-            //   {...selectCommonInfoNFT}
+            {...selectCommonInfoNFT}
           />
           <InputField
             getter={desc}
             setter={setDesc}
             label="Description"
             customClass="form-control input-select-custom-style"
             placeholder="Select a description"
-            //   {...selectCommonInfoNFT}
+            {...selectCommonInfoNFT}
           />
           <InputSelect
             //   customClass="form-control input-select-custom-style"

rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx

@@ -137,7 +137,7 @@ const UploadedListBox: React.FC<IUploadedListBox> = ({
       className="medialist-box"
       key={index}
       style={{
-        backgroundColor: `color-mix(in srgb, ${primaryColor}, #888888)`,
+        backgroundColor: isDarkMode ? `color-mix(in srgb, ${primaryColor}, #888888)` : 'var(--rhyno)',
         color: textColor,
         borderRadius: '15px',
         marginTop: '20px'

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

@@ -16,7 +16,7 @@ import useConnectUser from '../../hooks/useConnectUser';
 import { useAppDispatch, useAppSelector } from '../../hooks/useReduxHooks';
 import { dataStatuses } from '../../redux/commonTypes';
 import { clearResults, startSearch } from '../../redux/searchbarSlice';
-import { rFetch } from '../../utils/rFetch';
+import { fetchNotifications } from '../../redux/notificationsSlice';
 import InputField from '../common/InputField';
 import { TooltipBox } from '../common/Tooltip/TooltipBox';
 import MainLogo from '../GroupLogos/MainLogo';
@@ -63,11 +63,11 @@ const MainHeader: FC<IMainHeader> = ({
     (store) => store.user
   );
 
+  const { totalCount: notificationCount, notifications } = useAppSelector(store => store.notifications);
+
   const { currentUserAddress } = useAppSelector((store) => store.web3);
 
   const hotdropsVar = import.meta.env.VITE_TESTNET;
-  const [realDataNotification, setRealDataNotification] = useState([]);
-  const [notificationCount, setNotificationCount] = useState<number>(0);
 
   const [textSearch, setTextSearch] = useState<string>('');
   const [adminPanel, setAdminPanel] = useState<boolean>(false);
@@ -120,51 +120,12 @@ const MainHeader: FC<IMainHeader> = ({
     setTextSearch('');
   };
 
-  const getNotifications = useCallback(
-    async (pageNum?: number) => {
-      if (currentUserAddress && isLoggedIn) {
-        const result = await rFetch(
-          `/api/notifications${pageNum ? `?pageNum=${Number(pageNum)}` : ''}`
-        );
-
-        if (result.success) {
-          const sortedNotifications = result.notifications.sort((a, b) => {
-            if (!a.read && b.read) return -1;
-            if (a.read && !b.read) return 1;
-
-            const dateA = new Date(a.createdAt).getTime();
-            const dateB = new Date(b.createdAt).getTime();
-
-            return dateB - dateA;
-          });
-          setRealDataNotification(sortedNotifications);
-        }
-      } else {
-        setRealDataNotification([]);
-      }
-    },
-    [currentUserAddress, isLoggedIn]
-  );
-
-  const getNotificationsCount = useCallback(async () => {
-    if (currentUserAddress && isLoggedIn) {
-      const result = await rFetch(`/api/notifications?onlyUnread=true`);
-      if (result.success && result.totalCount >= 0) {
-        setNotificationCount(result.totalCount);
-      }
-    } else {
-      setNotificationCount(0);
+  useEffect(() => {
+    if(currentUserAddress && isLoggedIn) {
+      dispatch(fetchNotifications(0));
     }
   }, [currentUserAddress, isLoggedIn]);
 
-  useEffect(() => {
-    getNotificationsCount();
-  }, [getNotificationsCount]);
-
-  useEffect(() => {
-    getNotifications(0);
-  }, [getNotifications]);
-
   const Highlight = (props) => {
     const { filter, str } = props;
     if (!filter) return str;
@@ -203,6 +164,10 @@ const MainHeader: FC<IMainHeader> = ({
     }
   }, [dispatch, textSearch]);
 
+  useEffect(() => {
+    dispatch(fetchNotifications());
+  }, [])
+
   return (
     <HeaderContainer
       hotdrops={hotdropsVar}
@@ -421,9 +386,7 @@ const MainHeader: FC<IMainHeader> = ({
             {currentUserAddress && (
               <PopUpNotification
                 notificationCount={notificationCount}
-                getNotificationsCount={getNotificationsCount}
-                getNotifications={getNotifications}
-                realDataNotification={realDataNotification}
+                realDataNotification={notifications}
               />
             )}
 

rair-front/src/components/MockUpPage/FilteringBlock/FilteringBlockItems/FilteringBlockItems.tsx

@@ -82,15 +82,14 @@ export const SelectSortPopUp = styled.div.withConfig({
 })<TSelectSortPopUpStyled>`
   background-color: ${({ isDarkMode, primaryColor }) =>
     isDarkMode
-      ? 'var(--rhyno)'
-      : `color-mix(in srgb, ${primaryColor}, #2d2d2d)`};
+      ? `color-mix(in srgb, ${primaryColor}, #2d2d2d)` : 'var(--rhyno)'};
   color: ${({ textColor }) => textColor};
   &:after {
     content: '';
     width: 20px;
     height: 20px;
     background-color: ${({ primaryColor, isDarkMode }) =>
-      isDarkMode
+      !isDarkMode
         ? 'var(--rhyno)'
         : `color-mix(in srgb, ${primaryColor}, #2d2d2d)`};
     position: absolute;

rair-front/src/components/MockUpPage/PaginationBox/PaginationBox.tsx

@@ -7,20 +7,34 @@ import { IPaginationBox } from '../mockupPage.types';
 
 const PaginationBox: React.FC<IPaginationBox> = ({
   changePage,
+  currentPage,
   totalPageForPagination,
   whatPage,
   itemsPerPageNotifications
 }) => {
-  const { itemsPerPage, currentPage } = useAppSelector((store) => store.tokens);
-
+  const { itemsPerPage } = useAppSelector((store) => store.tokens);
   const { isDarkMode, primaryButtonColor } = useAppSelector(
     (store) => store.colors
   );
 
   const [page, setPage] = useState<number>(currentPage);
-  const [pagesArray, setPagesArray] = useState<Array<number>>([]);
+  const [totalPage, setTotalPages] = useState<number>();
+  const [totalPageVideo, setTotalPagesVideo] = useState<number>();
 
-  // const hotdropsVar = import.meta.env.VITE_TESTNET;
+  const pagesArray: number[] = [];
+  if (whatPage && whatPage === 'nft' && totalPage) {
+    for (let i = 0; i < totalPage; i++) {
+      pagesArray.push(i + 1);
+    }
+  } else if (whatPage && whatPage === 'video' && totalPageVideo) {
+    for (let i = 0; i < totalPageVideo; i++) {
+      pagesArray.push(i + 1);
+    }
+  } else if (whatPage && whatPage === 'notifications' && totalPage) {
+    for (let i = 0; i < totalPage; i++) {
+      pagesArray.push(i + 1);
+    }
+  }
 
   const getPagesCount = (totalCount: number, itemsPerPage: number) => {
     return Math.ceil(totalCount / itemsPerPage);
@@ -34,30 +48,21 @@ const PaginationBox: React.FC<IPaginationBox> = ({
   };
 
   useEffect(() => {
-    if (!totalPageForPagination) {
-      return;
-    }
-    let totalPages = 0;
-    switch (whatPage) {
-      case 'nft':
-        totalPages = getPagesCount(totalPageForPagination, itemsPerPage);
-        break;
-      case 'video':
-        totalPages = getPagesCount(totalPageForPagination, itemsPerPage);
-        break;
-      case 'notifications':
-        totalPages = getPagesCount(
-          totalPageForPagination,
-          itemsPerPageNotifications || 0
-        );
-        break;
-    }
-    const pageArray: Array<number> = [];
-    for (let i = 0; i < totalPages; i++) {
-      pageArray.push(i + 1);
+    if (totalPageForPagination && whatPage === 'nft') {
+      setTotalPages(getPagesCount(totalPageForPagination, itemsPerPage));
+    } else if (totalPageForPagination && whatPage === 'video') {
+      setTotalPagesVideo(getPagesCount(totalPageForPagination, itemsPerPage));
+    } else if (
+      totalPageForPagination &&
+      whatPage === 'notifications' &&
+      itemsPerPageNotifications
+    ) {
+      setTotalPages(
+        getPagesCount(totalPageForPagination, itemsPerPageNotifications)
+      );
     }
-    setPagesArray(pageArray);
   }, [
+    setTotalPages,
     totalPageForPagination,
     itemsPerPage,
     whatPage,
@@ -79,8 +84,9 @@ const PaginationBox: React.FC<IPaginationBox> = ({
             primaryButtonColor={primaryButtonColor}
             count={pagesArray.length}
             page={page}
-            showFirstButton={false}
             onChange={handlePage}
+            // hideNextButton={true}
+            // hidePrevButton={true}
             shape="rounded"
           />
         )}

rair-front/src/components/MockUpPage/PaginationBox/PaginationBoxStyled.tsx

@@ -6,9 +6,7 @@ interface IPaginationBoxStyled {
   isDarkMode?: boolean;
 }
 
-export const PaginationBoxStyled = styled(Pagination).withConfig({
-  shouldForwardProp: () => true
-})<IPaginationBoxStyled>`
+export const PaginationBoxStyled = styled(Pagination)<IPaginationBoxStyled>`
   ul {
     li {
       button {
@@ -20,25 +18,15 @@ export const PaginationBoxStyled = styled(Pagination).withConfig({
           ${({ isDarkMode }) => (!isDarkMode ? '#2d2d2d' : '#fff')};
 
         &.Mui-selected {
-          background: ${({ primaryButtonColor }) =>
-            `${
-              import.meta.env.VITE_TESTNET
-                ? 'var(--hot-drops)'
-                : primaryButtonColor
-            }`};
+          background: ${({ primaryButtonColor }) => `${primaryButtonColor}`};
           color: #fff;
           border: none;
           -webkit-box-shadow: 0px 0px 7px 0.4px #b278a7;
           -moz-box-shadow: 0px 0px 7px 0.4px #b278a7;
           box-shadow: 0px 0px 7px 0.4px #b278a7;
         }
         &:hover {
-          background: ${({ primaryButtonColor }) =>
-            `${
-              import.meta.env.VITE_TESTNET === 'true'
-                ? 'var(--hot-drops)'
-                : primaryButtonColor
-            }`};
+          background: ${({ primaryButtonColor }) => `${primaryButtonColor}`};
           color: #fff;
         }
       }