Merge pull request #632 from us3r-network/F-notificationCount-bufan

add notification count

apps/u3/src/components/layout/LoginButtonV2.tsx

@@ -32,6 +32,7 @@ import {
   LensAccount,
 } from '../profile/info/PlatformAccounts';
 import LoginIcon from './nav-icons/LoginIcon';
+import useUnreadNotificationsCount from '@/hooks/social/useUnreadNotificationsCount';
 
 const CONTACT_LINKS = [
   {
@@ -66,7 +67,7 @@ export default function LoginButtonV2() {
   const [openMenu, setOpenMenu] = useState(false);
   const [openLogoutConfirm, setOpenLogoutConfirm] = useState(false);
   const navigate = useNavigate();
-
+  const { unreadCount, clearUnread } = useUnreadNotificationsCount();
   if (!isLogin) {
     return (
       <ButtonWrapper onClick={login}>
@@ -99,7 +100,12 @@ export default function LoginButtonV2() {
               setOpenMenu((pre) => !pre);
             }}
           >
-            <UserAvatar style={{ width: '40px', height: '40px' }} />
+            <div className="relative">
+              <UserAvatar style={{ width: '40px', height: '40px' }} />
+              {unreadCount > 0 && (
+                <div className="absolute top-0 right-0 size-2 rounded-full bg-[#F81775] " />
+              )}
+            </div>
           </ButtonWrapper>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -124,10 +130,22 @@ export default function LoginButtonV2() {
 
           <DropdownMenuItemWarper
             className="max-sm:hidden"
-            onClick={() => navigate('/notification/activity')}
+            onClick={() => {
+              clearUnread();
+              navigate('/notification/activity');
+            }}
           >
-            <NotificationIcon />
-            Notifications
+            <div className="w-full flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <NotificationIcon />
+                Notifications
+              </div>
+              {unreadCount > 0 && (
+                <div className="flex items-center justify-center size-4 rounded-full bg-[#F81775] text-[12px] p-0 text-white">
+                  {unreadCount}
+                </div>
+              )}
+            </div>
           </DropdownMenuItemWarper>
 
           <DropdownMenuItemWarper

apps/u3/src/components/layout/mobile/MobileMainNav.tsx

@@ -16,6 +16,7 @@ import NotificationIcon from '../nav-icons/NotificationIcon';
 import MessageIcon from '../nav-icons/MessageIcon';
 import ExploreIcon from '../nav-icons/ExploreIcon';
 import FavIcon from '../nav-icons/FavIcon';
+import useUnreadNotificationsCount from '@/hooks/social/useUnreadNotificationsCount';
 
 export default function MobileMainNav({
   className,
@@ -41,6 +42,8 @@ export default function MobileMainNav({
   const isMessageRoute = firstRouteKey === RouteKey.message;
   const isNotificationRoute = firstRouteKey === RouteKey.notification;
   const isFavRoute = firstRouteKey === RouteKey.fav;
+
+  const { unreadCount, clearUnread } = useUnreadNotificationsCount();
   return (
     <div
       className={cn(
@@ -58,8 +61,15 @@ export default function MobileMainNav({
         <CommunityIcon active={isCommunityRoute} />
         Communities
       </MobileNavItem>
-      <MobileNavItem href="/notification" active={isNotificationRoute}>
-        <NotificationIcon active={isNotificationRoute} />
+      <MobileNavItem
+        href="/notification"
+        active={isNotificationRoute}
+        onClick={() => clearUnread()}
+      >
+        <NotificationIcon
+          active={isNotificationRoute}
+          unread={unreadCount > 0}
+        />
         Notification
       </MobileNavItem>
       <MobileNavItem active={isMessageRoute} href="/message">

apps/u3/src/contexts/notification/NotificationStoreCtx.tsx

@@ -1,30 +1,23 @@
 /* eslint-disable no-plusplus */
 import {
+  Notification as LensNotification,
+  LimitType,
+  useNotifications as useLensNotifications,
+} from '@lens-protocol/react-web';
+import {
+  ReactNode,
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
-  useState,
-  ReactNode,
 } from 'react';
-
-import {
-  useNotifications as useLensNotifications,
-  Notification as LensNotification,
-  LimitType,
-} from '@lens-protocol/react-web';
-
+import { NotificationType } from '@/services/notification/types/notifications';
 import useFarcasterNotifications from '../../hooks/social/farcaster/useFarcasterNotifications';
-import useUnreadFarcasterNotificationsCount from '../../hooks/social/farcaster/useUnreadFarcasterNotificationsCount';
 import { FarcasterNotification } from '../../services/social/api/farcaster';
-import { NotificationType } from '@/services/notification/types/notifications';
 
 interface NotificationStoreCtxValue {
   notifications: (LensNotification | FarcasterNotification)[] | undefined;
   farcasterUserData: { [key: string]: { type: number; value: string }[] };
-  unreadCount: number;
-  clearUnread: () => void;
   loading: boolean;
   hasMore: boolean;
   loadMore: () => void;
@@ -33,8 +26,6 @@ interface NotificationStoreCtxValue {
 const defaultContextValue: NotificationStoreCtxValue = {
   notifications: [],
   farcasterUserData: {},
-  unreadCount: 0,
-  clearUnread: () => {},
   loading: false,
   hasMore: false,
   loadMore: () => {},
@@ -152,10 +143,6 @@ export function NotificationStoreProvider({
   children,
   config,
 }: NotificationStoreProviderProps) {
-  const [unreadCount, setUnreadCount] = useState(
-    defaultContextValue.unreadCount
-  );
-
   let lensPageSize: LimitType;
   if (config.pageSize > 50) {
     lensPageSize = LimitType.Fifty;
@@ -192,11 +179,6 @@ export function NotificationStoreProvider({
     [lensNotifications, farcasterNotifications]
   );
 
-  const {
-    unreadNotificationCount: unreadFarcasterCount,
-    clear: clearFarcasterUnread,
-  } = useUnreadFarcasterNotificationsCount(config.fid);
-
   const loadMore = useCallback(async () => {
     if (lensNotificationsHasMore && !lensNotificationsLoading) {
       await loadMoreLensNotifications();
@@ -217,15 +199,6 @@ export function NotificationStoreProvider({
     farcasterNotificationsLoading,
   ]);
 
-  const clearUnread = useCallback(async () => {
-    await clearFarcasterUnread();
-    setUnreadCount(0);
-  }, [clearFarcasterUnread]);
-
-  useEffect(() => {
-    setUnreadCount(unreadFarcasterCount);
-  }, [unreadFarcasterCount, config]);
-
   return (
     <NotificationStoreCtx.Provider
       value={useMemo(
@@ -235,10 +208,16 @@ export function NotificationStoreProvider({
           loadMore,
           notifications,
           farcasterUserData,
-          unreadCount,
-          clearUnread,
         }),
-        [loadMore, notifications, unreadCount, clearUnread]
+        [
+          loadMore,
+          notifications,
+          lensNotificationsLoading,
+          farcasterNotificationsLoading,
+          farcasterUserData,
+          lensNotificationsHasMore,
+          farcasterNotificationsHasMore,
+        ]
       )}
     >
       {children}

apps/u3/src/hooks/social/useUnreadNotificationsCount.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from 'react';
+import useUnreadFarcasterNotificationsCount from './farcaster/useUnreadFarcasterNotificationsCount';
+import useFarcasterCurrFid from './farcaster/useFarcasterCurrFid';
+// todo: add lens notification count
+export default function useUnreadNotificationsCount() {
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const fid = Number(useFarcasterCurrFid());
+  const {
+    unreadNotificationCount: unreadFarcasterCount,
+    clear: clearFarcasterUnread,
+  } = useUnreadFarcasterNotificationsCount(fid);
+
+  const clearUnread = useCallback(async () => {
+    await clearFarcasterUnread();
+    setUnreadCount(0);
+  }, [clearFarcasterUnread]);
+
+  useEffect(() => {
+    setUnreadCount(unreadFarcasterCount);
+  }, [unreadFarcasterCount]);
+
+  return {
+    unreadCount,
+    clearUnread,
+  };
+}