Message count

app/actions/getUnreadMessageCount.js

@@ -0,0 +1,26 @@
+'use server';
+
+import connectDB from '@/config/database';
+import Message from '@/models/Message';
+import { getSessionUser } from '@/utils/getSessionUser';
+
+async function getUnreadMessageCount() {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  if (!sessionUser || !sessionUser.user) {
+    return { error: 'User ID is required' };
+  }
+
+  const { userId } = sessionUser;
+
+  const count = await Message.countDocuments({
+    recipient: userId,
+    read: false,
+  });
+
+  return { count };
+}
+
+export default getUnreadMessageCount;

app/layout.jsx

@@ -1,5 +1,6 @@
 import Navbar from '@/components/Navbar';
 import AuthProvider from '@/components/AuthProvider';
+import { GlobalProvider } from '@/context/GlobalContext';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import '@/assets/styles/globals.css';
@@ -13,13 +14,15 @@ export const metadata = {
 const MainLayout = ({ children }) => {
   return (
     <AuthProvider>
-      <html lang='en'>
-        <body>
-          <Navbar />
-          <main>{children}</main>
-          <ToastContainer />
-        </body>
-      </html>
+      <GlobalProvider>
+        <html lang='en'>
+          <body>
+            <Navbar />
+            <main>{children}</main>
+            <ToastContainer />
+          </body>
+        </html>
+      </GlobalProvider>
     </AuthProvider>
   );
 };

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;

context/GlobalContext.js

@@ -0,0 +1,38 @@
+'use client';
+import getUnreadMessageCount from '@/app/actions/getUnreadMessageCount';
+import { useSession } from 'next-auth/react';
+import { createContext, useContext, useState, useEffect } from 'react';
+
+// Create context
+const GlobalContext = createContext();
+
+// Create a provider
+export function GlobalProvider({ children }) {
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const { data: session } = useSession();
+
+  useEffect(() => {
+    if (session && session.user) {
+      getUnreadMessageCount().then((res) => {
+        if (res.count) setUnreadCount(res.count);
+      });
+    }
+  }, [getUnreadMessageCount, session]);
+
+  return (
+    <GlobalContext.Provider
+      value={{
+        unreadCount,
+        setUnreadCount,
+      }}
+    >
+      {children}
+    </GlobalContext.Provider>
+  );
+}
+
+// Create a custom hook to access context
+export function useGlobalContext() {
+  return useContext(GlobalContext);
+}