Mark message as read

app/actions/markMessageAsRead.js

@@ -0,0 +1,36 @@
+'use server';
+import connectDB from '@/config/database';
+import Message from '@/models/Message';
+import { getSessionUser } from '@/utils/getSessionUser';
+import { revalidatePath } from 'next/cache';
+
+async function markMessageAsRead(messageId) {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  if (!sessionUser || !sessionUser.user) {
+    throw new Error('User ID is required');
+  }
+
+  const { userId } = sessionUser;
+
+  const message = await Message.findById(messageId);
+
+  if (!message) throw new Error('Message not found');
+
+  // Verify ownership
+  if (message.recipient.toString() !== userId) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  message.read = !message.read;
+
+  revalidatePath('/messages', 'page');
+
+  await message.save();
+
+  return message.read;
+}
+
+export default markMessageAsRead;

components/MessageCard.jsx

@@ -1,8 +1,25 @@
 'use client';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import markMessageAsRead from '@/app/actions/markMessageAsRead';
 
 const MessageCard = ({ message }) => {
+  const [isRead, setIsRead] = useState(message.read);
+
+  const handleReadClick = async () => {
+    const read = await markMessageAsRead(message._id);
+
+    setIsRead(read);
+    toast.success(`Marked as ${read ? 'read' : 'new'}`);
+  };
+
   return (
     <div className='relative bg-white p-4 rounded-md shadow-md border border-gray-200'>
+      {!isRead && (
+        <div className='absolute top-2 right-2 bg-yellow-500 text-white px-2 py-1 rounded-md'>
+          New
+        </div>
+      )}
       <h2 className='text-xl mb-4'>
         <span className='font-bold'>Property Inquiry:</span>{' '}
         {message.property.name}
@@ -27,8 +44,13 @@ const MessageCard = ({ message }) => {
           {new Date(message.createdAt).toLocaleString()}
         </li>
       </ul>
-      <button className='mt-4 mr-3 bg-blue-500 text-white py-1 px-3 rounded-md'>
+      <button
-        Mark As Read
+        onClick={handleReadClick}
+        className={`mt-4 mr-3 ${
+          isRead ? 'bg-gray-300' : 'bg-blue-500 text-white'
+        } py-1 px-3 rounded-md`}
+      >
+        {isRead ? 'Mark As New' : 'Mark As Read'}
       </button>
       <button className='mt-4 bg-red-500 text-white py-1 px-3 rounded-md'>
         Delete