Message count

components/MessageCard.jsx

@@ -3,20 +3,25 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import markMessageAsRead from '@/app/actions/markMessageAsRead';
 import deleteMessage from '@/app/actions/deleteMessage';
+import { useGlobalContext } from '@/context/GlobalContext';
 
 const MessageCard = ({ message }) => {
   const [isRead, setIsRead] = useState(message.read);
   const [isDeleted, setIsDeleted] = useState(false);
 
+  const { setUnreadCount } = useGlobalContext();
+
   const handleReadClick = async () => {
     const read = await markMessageAsRead(message._id);
     setIsRead(read);
+    setUnreadCount((prevCount) => (read ? prevCount - 1 : prevCount + 1));
     toast.success(`Marked as ${read ? 'read' : 'new'}`);
   };
 
   const handleDeleteClick = async () => {
     await deleteMessage(message._id);
     setIsDeleted(true);
+    setUnreadCount((prevCount) => (isRead ? prevCount : prevCount - 1));
     toast.success('Message Deleted');
   };
 

components/Navbar.jsx

@@ -7,6 +7,7 @@ import { FaGoogle } from 'react-icons/fa';
 import logo from '@/assets/images/logo-white.png';
 import profileDefault from '@/assets/images/profile.png';
 import { signIn, signOut, useSession, getProviders } from 'next-auth/react';
+import UnreadMessageCount from './UnreadMessageCount';
 
 const Navbar = () => {
   const { data: session } = useSession();
@@ -151,10 +152,7 @@ const Navbar = () => {
                     />
                   </svg>
                 </button>
-                <span className='absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full'>
-                  2
-                  {/* <!-- Replace with the actual number of notifications --> */}
-                </span>
+                <UnreadMessageCount />
               </Link>
               {/* <!-- Profile dropdown button --> */}
               <div className='relative ml-3'>

components/UnreadMessageCount.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { useGlobalContext } from '@/context/GlobalContext';
+
+const UnreadMessageCount = () => {
+  const { unreadCount } = useGlobalContext();
+
+  return unreadCount > 0 ? (
+    <span className='absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full'>
+      {unreadCount}
+    </span>
+  ) : null;
+};
+export default UnreadMessageCount;