Show count in bubble tag whenever a new notification is received

src/common/hooks/useInAppNotifications.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import { CONSTANTS, NotificationEvent } from '@pushprotocol/restapi';
@@ -7,6 +7,7 @@ import { deviceSizes, notification } from 'blocks';
 import { InAppChannelNotifications, InAppChatNotifications } from 'common';
 
 import { useDeviceWidthCheck } from 'hooks';
+import { AppContext } from 'contexts/AppContext';
 
 export const useInAppNotifications = () => {
   const [isStreamConnected, setIsStreamConnected] = useState<boolean>(false);
@@ -15,6 +16,8 @@ export const useInAppNotifications = () => {
   const { userPushSDKInstance } = useSelector((state: any) => {
     return state.user;
   });
+  const { setNewChatsCount, setNewNotifsCount } = useContext(AppContext);
+
   const attachListeners = async () => {
     userPushSDKInstance?.stream?.on(CONSTANTS.STREAM.CONNECT, (err: Error) => {
       console.debug(
@@ -43,7 +46,8 @@ export const useInAppNotifications = () => {
         userPushSDKInstance?.stream?.uid,
         userPushSDKInstance?.stream
       );
-      if (data.source != 'PUSH_CHAT')
+      if (data.source != 'PUSH_CHAT') {
+        setNewNotifsCount((prev: any) => prev + 1);
         notification.show({
           overlay: <InAppChannelNotifications notificationDetails={data} />,
           position: isMobile ? 'top-center' : 'bottom-right',
@@ -52,6 +56,7 @@ export const useInAppNotifications = () => {
             notification.hide();
           },
         });
+      }
     });
     userPushSDKInstance?.stream?.on(CONSTANTS.STREAM.CHAT, (data: any) => {
       console.debug(
@@ -75,6 +80,7 @@ export const useInAppNotifications = () => {
           updatedMessages[data.chatId].push(data);
         }
         setNewMessages(updatedMessages);
+        setNewChatsCount((prev: any) => prev + 1);
         notification.show(
           {
             overlay: (

src/components/MobileNavButton.jsx

@@ -153,6 +153,8 @@ function MobileNavButton({ item, data, sectionID, active, bg = 'none', showNavBa
                 {data.name}
               </Span>
 
+              {!!data?.count && <NewTag2>{data?.count}</NewTag2>}
+
               {data?.showNewTag && <NewTag>New</NewTag>}
 
               {item.hasItems && !item.opened && <BiChevronDown color={theme.nav.color} />}
@@ -226,5 +228,22 @@ const NewTag = styled(SpanV2)`
   width: fit-content;
 `;
 
+const NewTag2 = styled(SpanV2)`
+  display: flex;
+  max-width: 20px;
+  height: 16px;
+  padding: 0px 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 7.778px;
+  flex-shrink: 0;
+  border-radius: 22px;
+  background: #E20880;
+  font-weight: 500;
+  line-height: 16px;
+  font-size: 12px;
+`;
+
 // Export Default
 export default MobileNavButton;

src/components/NavigationButton.jsx

@@ -158,6 +158,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
                   {data.name}
                 </Span>
               )}
+              {!!data?.count && <NewTag2>{data?.count}</NewTag2>}
 
               {data?.showNewTag && !sidebarCollapsed && <NewTag>New</NewTag>}
             </ItemH>
@@ -252,6 +253,23 @@ const NewTag = styled(SpanV2)`
   width: fit-content;
 `;
 
+const NewTag2 = styled(SpanV2)`
+  display: flex;
+  max-width: 20px;
+  height: 16px;
+  padding: 0px 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 7.778px;
+  flex-shrink: 0;
+  border-radius: 22px;
+  background: #E20880;
+  font-weight: 500;
+  line-height: 16px;
+  font-size: 12px;
+`;
+
 const ProtectedRoute = styled(SpanV2)``;
 
 // Export Default

src/config/NavigationList.js

@@ -49,6 +49,7 @@ const NavigationList = {
         hasMenuLogic: true,
         loading: false,
         hidden: false,
+        count: 0,
         headerTag: {
           title: 'Inbox',
           light: {
@@ -103,6 +104,7 @@ const NavigationList = {
         hasMenuLogic: true,
         hidden: false,
         // allowReadOnly: false,
+        count: 0,
         headerTag: {
           title: 'Chat',
           light: {

src/contexts/AppContext.tsx

@@ -56,6 +56,8 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
     title: null,
   });
   const [displayQR, setDisplayQR] = useState<boolean>(false);
+  const [newChatsCount, setNewChatsCount] = useState<number>(0);
+  const [newNotifsCount, setNewNotifsCount] = useState<number>(0);
 
   const { userPushSDKInstance } = useSelector((state: any) => {
     return state.user;
@@ -554,6 +556,10 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
         storePGPKeyForUser,
         isUserProfileUnlocked,
         setUserProfileUnlocked,
+        newChatsCount,
+        setNewChatsCount,
+        newNotifsCount,
+        setNewNotifsCount,
       }}
     >
       {children}

src/modules/inbox/InboxModule.tsx

@@ -1,6 +1,6 @@
 // React + Web3 Essentials
 import { ethers } from 'ethers';
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 
 // External Packages
 import ReactGA from 'react-ga';
@@ -22,6 +22,7 @@ import UsersDataStore from 'singletons/UsersDataStore';
 import APP_PATHS from 'config/AppPaths';
 import GLOBALS, { device, globalsMargin } from 'config/Globals';
 import { CHAIN_DETAILS, abis, addresses, appConfig } from 'config/index.js';
+import { AppContext } from 'contexts/AppContext';
 
 // Constants
 export const ALLOWED_CORE_NETWORK = appConfig.coreContractChain;
@@ -34,6 +35,7 @@ const InboxModule = ({ isSpam }) => {
   const dispatch = useDispatch();
   const { account, chainId, provider } = useAccount();
   const { epnsReadProvider, epnsCommReadProvider } = useSelector((state) => state.contracts);
+  const { setNewNotifsCount, newNotifsCount } = useContext(AppContext);
 
   // toast related section
   const [toast, showToast] = React.useState(null);
@@ -44,6 +46,10 @@ const InboxModule = ({ isSpam }) => {
   const themes = useTheme();
   const onCoreNetwork = ALLOWED_CORE_NETWORK === chainId;
 
+  useEffect(() => {
+    setNewNotifsCount(0);
+  }, [newNotifsCount]);
+
   //clear toast variable after it is shown
   React.useEffect(() => {
     if (toast) {

src/sections/chat/ChatSection.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 // External Packages
@@ -20,6 +20,7 @@ import { device } from 'config/Globals';
 import Back from 'assets/chat/backchat.svg?react';
 import UnlockProfileWrapper from 'components/chat/unlockProfile/UnlockProfileWrapper';
 import { MODAL_POSITION } from 'hooks/useModalBlur';
+import { AppContext } from 'contexts/AppContext';
 
 // Interface
 interface IntroContainerProps {
@@ -38,6 +39,7 @@ const ChatSection = ({ chatId, setChatId, loggedIn }) => {
   const { userPushSDKInstance } = useSelector((state: any) => {
     return state.user;
   });
+  const { setNewChatsCount, newChatsCount } = useContext(AppContext);
 
   // Get Theme
   const theme = useTheme();
@@ -48,6 +50,10 @@ const ChatSection = ({ chatId, setChatId, loggedIn }) => {
   // State to control the visibility of the unlock profile modal
   const [visible, setVisible] = useState(true);
 
+  useEffect(() => {
+    setNewChatsCount(0);
+  }, [newChatsCount]);
+
   // RENDER
   return (
     // If user is not logged in then show chat and unlock profile
@@ -138,7 +144,7 @@ const ChatViewContainer = styled(ItemVV2)`
   overflow: hidden;
 `;
 
-const IntroContainer = styled(ItemVV2) <IntroContainerProps>`
+const IntroContainer = styled(ItemVV2)<IntroContainerProps>`
   flex: 1;
   height: inherit;
   background: ${(props) => props.bg || 'transparent'};

src/structure/MobileNavigation.tsx

@@ -24,6 +24,7 @@ import { appConfig } from 'config/index.js';
 import useFetchChannelDetails from 'common/hooks/useFetchUsersChannelDetails';
 import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
 import APP_PATHS from 'config/AppPaths';
+import { AppContext } from 'contexts/AppContext';
 
 // Create Header
 function MobileNavigation({ showNavBar, setShowNavBar }) {
@@ -35,6 +36,7 @@ function MobileNavigation({ showNavBar, setShowNavBar }) {
   const { processingState } = useSelector((state: any) => state.channelCreation);
   const { run, stepIndex, isCommunicateOpen, isDeveloperOpen } = useSelector((state: any) => state.userJourney);
   const { navigationSetup, setNavigationSetup } = useContext(NavigationContext);
+  const { newChatsCount, newNotifsCount } = useContext(AppContext);
 
   const CORE_CHAIN_ID = appConfig.coreContractChain;
   const { account, chainId } = useAccount();
@@ -640,6 +642,28 @@ function MobileNavigation({ showNavBar, setShowNavBar }) {
     return rendered;
   };
 
+  useEffect(() => {
+    if (navigationSetup) {
+      setNavigationSetup((prev: any) => ({
+        ...prev,
+        notificationList: prev.notificationList.map((item: any) =>
+          item.id === '2_inbox' ? { ...item, data: { ...item.data, count: newNotifsCount } } : item
+        ),
+      }));
+    }
+  }, [newNotifsCount]);
+
+  useEffect(() => {
+    if (navigationSetup) {
+      setNavigationSetup((prev: any) => ({
+        ...prev,
+        messagingList: prev.messagingList.map((item: any) =>
+          item.id === '3_chat' ? { ...item, data: { ...item.data, count: newChatsCount } } : item
+        ),
+      }));
+    }
+  }, [newChatsCount]);
+
   return (
     <Item
       direction="column"

src/structure/Navigation.tsx

@@ -29,6 +29,7 @@ import APP_PATHS from 'config/AppPaths';
 import { ChannelDetails } from 'queries';
 import useFetchChannelDetails from 'common/hooks/useFetchUsersChannelDetails';
 import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
+import { AppContext } from 'contexts/AppContext';
 
 type AddNewChainNavigationProps = {
   channelDetails: ChannelDetails;
@@ -124,9 +125,10 @@ function Navigation() {
   const { delegatees } = useSelector((state: any) => state.admin);
   const [refresh, setRefresh] = useState(false);
   const { processingState } = useSelector((state: any) => state.channelCreation);
-  const { run, stepIndex, isCommunicateOpen, isDeveloperOpen } = useSelector((state: any) => state.userJourney);
+  const { run, stepIndex } = useSelector((state: any) => state.userJourney);
   const { navigationSetup, setNavigationSetup } = useContext(NavigationContext);
   const { sidebarCollapsed, setSidebarCollapsed } = useContext(GlobalContext);
+  const { newChatsCount, newNotifsCount } = useContext(AppContext);
 
   const CORE_CHAIN_ID = appConfig.coreContractChain;
   const { account, chainId } = useAccount();
@@ -677,7 +679,6 @@ function Navigation() {
                   />
                 )}
               </SectionInnerGroupContainer>
-
               {/* { 
                       section.hasItems 
                         ? renderChildItems(
@@ -770,6 +771,28 @@ function Navigation() {
     return rendered;
   };
 
+  useEffect(() => {
+    if (navigationSetup) {
+      setNavigationSetup((prev: any) => ({
+        ...prev,
+        notificationList: prev.notificationList.map((item: any) =>
+          item.id === '2_inbox' ? { ...item, data: { ...item.data, count: newNotifsCount } } : item
+        ),
+      }));
+    }
+  }, [newNotifsCount]);
+
+  useEffect(() => {
+    if (navigationSetup) {
+      setNavigationSetup((prev: any) => ({
+        ...prev,
+        messagingList: prev.messagingList.map((item: any) =>
+          item.id === '3_chat' ? { ...item, data: { ...item.data, count: newChatsCount } } : item
+        ),
+      }));
+    }
+  }, [newChatsCount]);
+
   return (
     <Container
       direction="column"

src/types/context.ts

@@ -70,4 +70,8 @@ export interface AppContextType {
   initializePushSdkReadMode: () => Promise<void>;
   isUserProfileUnlocked: boolean;
   setUserProfileUnlocked: (isUserProfileUnlocked: boolean) => void;
+  newChatsCount: number;
+  setNewChatsCount: React.Dispatch<React.SetStateAction<number>>;
+  newNotifsCount: number;
+  setNewNotifsCount: React.Dispatch<React.SetStateAction<number>>;
 }