Property contact form

app/actions/addMessage.js

@@ -0,0 +1,39 @@
+'use server';
+import connectDB from '@/config/database';
+import Message from '@/models/Message';
+import { getSessionUser } from '@/utils/getSessionUser';
+import { revalidatePath } from 'next/cache';
+
+async function addMessage(previousState, formData) {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  if (!sessionUser || !sessionUser.user) {
+    return { error: 'You must be logged in to send a message' };
+  }
+
+  const { user } = sessionUser;
+
+  const recipient = formData.get('recipient');
+
+  if (user.id === recipient) {
+    return { error: 'You can not send a message to yourself' };
+  }
+
+  const newMessage = new Message({
+    sender: user.id,
+    recipient,
+    property: formData.get('property'),
+    name: formData.get('name'),
+    email: formData.get('email'),
+    phone: formData.get('phone'),
+    body: formData.get('message'),
+  });
+
+  await newMessage.save();
+
+  return { submitted: true };
+}
+
+export default addMessage;

components/PropertyContactForm.jsx

@@ -1,10 +1,59 @@
+'use client';
+import { useEffect } from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
+import { useSession } from 'next-auth/react';
+import { toast } from 'react-toastify';
+import addMessage from '@/app/actions/addMessage';
 import { FaPaperPlane } from 'react-icons/fa';
 
-const PropertyContactForm = ({ property }) => {
+const SubmitMessageButton = () => {
+  const status = useFormStatus();
   return (
+    <button
+      className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
+      type='submit'
+    >
+      <FaPaperPlane className='mr-2' />{' '}
+      {status.pending ? 'Sending...' : 'Send Message'}
+    </button>
+  );
+};
+
+const PropertyContactForm = ({ property }) => {
+  const { data: session } = useSession();
+
+  const [state, formAction] = useFormState(addMessage, {});
+
+  useEffect(() => {
+    if (state.error) toast.error(state.error);
+    if (state.submitted) toast.success('Message sent successfully');
+  }, [state]);
+
+  if (state.submitted) {
+    return (
+      <p className='text-green-500 mb-4'>
+        Your message has been sent successfully
+      </p>
+    );
+  }
+
+  return (
+    session && (
       <div className='bg-white p-6 rounded-lg shadow-md'>
         <h3 className='text-xl font-bold mb-6'>Contact Property Manager</h3>
-      <form>
+        <form action={formAction}>
+          <input
+            type='hidden'
+            id='property'
+            name='property'
+            defaultValue={property._id}
+          />
+          <input
+            type='hidden'
+            id='recipient'
+            name='recipient'
+            defaultValue={property.owner}
+          />
           <div className='mb-4'>
             <label
               className='block text-gray-700 text-sm font-bold mb-2'
@@ -67,15 +116,11 @@ const PropertyContactForm = ({ property }) => {
             ></textarea>
           </div>
           <div>
-          <button
+            <SubmitMessageButton />
-            className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
-            type='submit'
-          >
-            <FaPaperPlane className='mr-2' /> Send Message
-          </button>
           </div>
         </form>
       </div>
+    )
   );
 };
 export default PropertyContactForm;

models/Message.js

@@ -0,0 +1,46 @@
+import { Schema, model, models } from 'mongoose';
+
+const MessageSchema = new Schema(
+  {
+    sender: {
+      type: Schema.Types.ObjectId,
+      ref: 'User',
+      required: true,
+    },
+    recipient: {
+      type: Schema.Types.ObjectId,
+      ref: 'User',
+      required: true,
+    },
+    property: {
+      type: Schema.Types.ObjectId,
+      ref: 'Property',
+      required: true,
+    },
+    name: {
+      type: String,
+      required: [true, 'Name is required'],
+    },
+    email: {
+      type: String,
+      required: [true, 'Email is required'],
+    },
+    phone: {
+      type: String,
+    },
+    body: {
+      type: String,
+    },
+    read: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  {
+    timestamps: true,
+  }
+);
+
+const Message = models.Message || model('Message', MessageSchema);
+
+export default Message;