rairprotocol · sarora180673 · Jul 1, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/rair-front/src/App.tsx b/rair-front/src/App.tsx
@@ -97,6 +97,7 @@ import ErrorFallback from './views/ErrorFallback/ErrorFallback';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
+import { rFetch } from './utils/rFetch';
 /* Track a page view */
 // const analytics = getInformationGoogleAnalytics();
 // analytics.page();
@@ -133,6 +134,7 @@ 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 { primaryColor, textColor, backgroundImage, backgroundImageEffect } =
@@ -194,6 +196,20 @@ function App() {
     }
   }, [dispatch, logoutUser]);
 
+  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);
+      }
+    }
+  }, [currentUserAddress]);
+
+  useEffect(() => {
+    getNotificationsCount();
+  }, [getNotificationsCount])
+
   // gtag
 
   useEffect(() => {
@@ -367,6 +383,8 @@ function App() {
                 selectedChain={correctBlockchain(realChain)}
                 setTabIndexItems={setTabIndexItems}
                 isAboutPage={isAboutPage}
+                notificationCount={notificationCount}
+                getNotificationsCount={getNotificationsCount}
               />
             )
           )}

diff --git a/rair-front/src/components/Header/MainHeader.tsx b/rair-front/src/components/Header/MainHeader.tsx
@@ -37,6 +37,7 @@ import TalkSalesComponent from './HeaderItems/TalkToSalesComponent/TalkSalesComp
 
 //styles
 import './Header.css';
+import { rFetch } from '../../utils/rFetch';
 
 const MainHeader: React.FC<IMainHeader> = ({
   goHome,
@@ -70,6 +71,8 @@ const MainHeader: React.FC<IMainHeader> = ({
   );
 
   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);
@@ -122,6 +125,34 @@ const MainHeader: React.FC<IMainHeader> = ({
     setTextSearch('');
   };
 
+  const getNotifications = useCallback(async () => {
+    if(currentUserAddress) {
+      const result = await rFetch(`/api/notifications`);
+      if (result.success) {
+        setRealDataNotification(result.notifications);
+      }
+    }
+  }, [currentUserAddress]);
+
+  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);
+      }
+    }
+  }, [currentUserAddress])
+
+  useEffect(() => {
+    getNotificationsCount();
+  }, [getNotificationsCount])
+
+
+  useEffect(() => {
+    getNotifications();
+  }, [currentUserAddress])
+
   const Highlight = (props) => {
     const { filter, str } = props;
     if (!filter) return str;
@@ -414,7 +445,7 @@ const MainHeader: React.FC<IMainHeader> = ({
             isSplashPage={isSplashPage}
           />
           <div className="social-media">
-            {currentUserAddress && <PopUpNotification />}
+            {currentUserAddress && <PopUpNotification notificationCount={notificationCount} getNotificationsCount={getNotificationsCount} getNotifications={getNotifications} realDataNotification={realDataNotification} />}
 
             <AdminPanel
               creatorViewsDisabled={creatorViewsDisabled}

diff --git a/rair-front/src/components/MockUpPage/FilteringBlock/modal/index.tsx b/rair-front/src/components/MockUpPage/FilteringBlock/modal/index.tsx
@@ -55,7 +55,9 @@ const Content = styled.div`
   min-width: 50px;
   max-height: 80%;
   max-width: 80%;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow:
+    0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
   background-color: white;
   border-radius: 2px;
 `;

diff --git a/.../src/components/MockUpPage/NftList/LikeButton/favoritesReducer/actions/actionFavorites.ts b/.../src/components/MockUpPage/NftList/LikeButton/favoritesReducer/actions/actionFavorites.ts
@@ -5,33 +5,33 @@ import * as types from './../actionTypes/types';
 const addItemFavoriteStart = () =>
   ({
     type: types.ADD_ITEM_FAVORITES_START
-  } as const);
+  }) as const;
 
 const addItemFavoriteEnd = () =>
   ({
     type: types.ADD_ITEM_FAVORITES_END
-  } as const);
+  }) as const;
 
 const removeItemFavoriteEnd = () =>
   ({
     type: types.REMOVE_ITEM_FAVORITES_END
-  } as const);
+  }) as const;
 
 const getCurrentItemSuccess = (item: TTokenData | null) =>
   ({
     type: types.GET_CURRENT_ITEM_SUCCESS,
     item
-  } as const);
+  }) as const;
 
 const getCurrentItemFalse = () =>
   ({
     type: types.GET_CURRENT_ITEM_FALSE
-  } as const);
+  }) as const;
 
 const errorFavorites = () =>
   ({
     type: types.ERROR_FAVORITES
-  } as const);
+  }) as const;
 
 export {
   addItemFavoriteEnd,

diff --git a/rair-front/src/components/Navigation/Menu.tsx b/rair-front/src/components/Navigation/Menu.tsx
@@ -38,6 +38,7 @@ import {
 } from './NavigationItems/NavigationItems';
 
 import './Menu.css';
+import { rFetch } from '../../utils/rFetch';
 
 interface IMenuNavigation {
   connectUserData: () => void;
@@ -53,6 +54,8 @@ interface IMenuNavigation {
   isSplashPage: boolean;
   isAboutPage: boolean;
   realChainId: string | undefined;
+  notificationCount?: number;
+  getNotificationsCount?: any;
 }
 
 const MenuNavigation: React.FC<IMenuNavigation> = ({
@@ -61,7 +64,9 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
   setTabIndexItems,
   isSplashPage,
   isAboutPage,
-  realChainId
+  realChainId,
+  notificationCount,
+  getNotificationsCount
 }) => {
   const [click, setClick] = useState<boolean>(false);
   const [userData, setUserData] = useState<UserType | null>(null);
@@ -78,6 +83,7 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
   const { loggedIn, loginProcess } = useSelector<RootState, TUsersInitialState>(
     (store) => store.userStore
   );
+  const [realDataNotification, setRealDataNotification] = useState([]);
   const { erc777Instance, currentUserAddress, currentChain } = useSelector<
     RootState,
     ContractsInitialType
@@ -97,6 +103,24 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
     setActiveSearch((prev) => !prev);
   };
 
+  const getNotifications = useCallback(async () => {
+    if(currentUserAddress) {
+      const result = await rFetch(`/api/notifications`);
+    if (result.success) {
+      setRealDataNotification(result.notifications);
+    }
+    }
+}, [currentUserAddress]);
+
+useEffect(() => {
+  getNotificationsCount();
+}, [click])
+
+
+useEffect(() => {
+  getNotifications();
+}, [])
+
   const toggleMenu = (otherPage?: string | undefined) => {
     if (otherPage === 'nav') {
       setClick(true);
@@ -179,6 +203,7 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
     getBalance();
   }, [getBalance]);
 
+
   return (
     <MenuMobileWrapper
       className="col-1 rounded burder-menu"
@@ -252,7 +277,7 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                             <i className="fas fa-search" aria-hidden="true"></i>
                           </SocialBoxSearch>
                           {/* this is where the aikon widget should go: */}
-                          {currentUserAddress && userBalance.length < 7 && (
+                          {/* {currentUserAddress && userBalance.length < 7 && (
                             <>
                               <SocialBox
                                 onClick={() => {
@@ -267,10 +292,38 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                                 <BellIcon primaryColor={primaryColor} />
                               </SocialBox>
                             </>
-                          )}
+                          )} */}
                         </>
                       )}
                     </>
+                    <div
+                      style={{
+                        marginRight: '10px'
+                      }}
+                      onClick={() => {
+                        handleMessageAlert('notification');
+                        toggleMenu('nav');
+                      }}
+                      className="social-media-profile">
+                      {currentUserAddress && (
+                        <SocialBox
+                          className="social-bell-icon notifications"
+                          width="40px"
+                          height="40px"
+                          marginLeft={'17px'}>
+                          <BellIcon primaryColor={primaryColor} />
+                          {notificationCount && notificationCount > 0 ? (
+            <div className="red-circle-notifications" style={{
+              fontSize: "10px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontWeight: "bold"
+            }}>{notificationCount  > 9 ? "9+" : notificationCount}</div>
+          ) : ''}
+                        </SocialBox>
+                      )}
+                    </div>
                     <div
                       onClick={() => {
                         handleMessageAlert('profileEdit');
@@ -287,9 +340,17 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                         className={`profile-user-balance ${
                           primaryColor === 'rhyno' ? 'rhyno' : ''
                         }`}>
-                         <img style={{
-              marginRight: "5px"
-            }} src={primaryColor === '#dedede' ?  RairFavicon : RairTokenLogo} alt="logo" />
+                        <img
+                          style={{
+                            marginRight: '5px'
+                          }}
+                          src={
+                            primaryColor === '#dedede'
+                              ? RairFavicon
+                              : RairTokenLogo
+                          }
+                          alt="logo"
+                        />
                         {currentChain && chainData[currentChain] && (
                           <img
                             src={chainData[currentChain]?.image}

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileChoiseNav.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ import {
   SocialBox,
   UserIconMobile
 } from '../../../styled-components/SocialLinkIcons/SocialLinkIcons';
+import { rFetch } from '../../../utils/rFetch';
 import { SvgUserIcon } from '../../UserProfileSettings/SettingsIcons/SettingsIcons';
 
 interface IMobileChoiseNav {
@@ -36,6 +37,21 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({
   const { userRd } = useSelector<RootState, TUsersInitialState>(
     (state) => state.userStore
   );
+  const [notificationCount, setNotificationCount] = useState<number>(0);
+
+  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);
+      }
+    }
+  }, [currentUserAddress, messageAlert])
+
+  useEffect(() => {
+    getNotificationsCount();
+  }, [getNotificationsCount])
 
   return (
     <div className="burder-menu-logo">
@@ -70,11 +86,20 @@ const MobileChoiseNav: React.FC<IMobileChoiseNav> = ({
             <div className="social-media-profile">
               {currentUserAddress && (
                 <SocialBox
-                  className="social-bell-icon"
+                  className="social-bell-icon notifications"
                   width="40px"
                   height="40px"
                   marginLeft={'17px'}>
                   <BellIcon primaryColor={primaryColor} />
+                  {notificationCount > 0 && (
+            <div style={{
+              fontSize: "10px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontWeight: "bold"
+            }} className="red-circle-notifications">{notificationCount  > 9 ? "9+" : notificationCount}</div>
+          )}
                 </SocialBox>
               )}
               <div className="social-media-user-icon">Notifications</div>