Property page cleanup

_theme_files/property.html

@@ -452,23 +452,25 @@
                   <input
                     class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
                     id='name'
+                    name='name'
                     type='text'
                     placeholder='Enter your name'
                     required
                   />
                 </div>
-                <div class="mb-4">
+                <div class='mb-4'>
                   <label
-                    class="block text-gray-700 text-sm font-bold mb-2"
+                    class='block text-gray-700 text-sm font-bold mb-2'
-                    for="email"
+                    htmlFor='email'
                   >
                     Email:
                   </label>
                   <input
-                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                    class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
-                    id="email"
+                    id='email'
-                    type="email"
+                    name='email'
-                    placeholder="Enter your email"
+                    type='email'
+                    placeholder='Enter your email'
                     required
                   />
                 </div>
@@ -482,29 +484,31 @@
                   <input
                     class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
                     id='phone'
+                    name='phone'
                     type='text'
                     placeholder='Enter your phone number'
                   />
                 </div>
-                <div class="mb-4">
+                <div class='mb-4'>
                   <label
-                    class="block text-gray-700 text-sm font-bold mb-2"
+                    class='block text-gray-700 text-sm font-bold mb-2'
-                    for="message"
+                    htmlFor='message'
                   >
                     Message:
                   </label>
                   <textarea
-                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 h-44 focus:outline-none focus:shadow-outline"
+                    class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 h-44 focus:outline-none focus:shadow-outline'
-                    id="message"
+                    id='message'
-                    placeholder="Enter your message"
+                    name='message'
+                    placeholder='Enter your message'
                   ></textarea>
                 </div>
                 <div>
                   <button
-                    class="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"
+                    class='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"
+                    type='submit'
                   >
-                    <i class="fas fa-paper-plane mr-2"></i> Send Message
+                    <FaPaperPlane class='mr-2' /> Send Message
                   </button>
                 </div>
               </form>

app/properties/[id]/page.jsx

@@ -3,10 +3,23 @@ import PropertyDetails from '@/components/PropertyDetails';
 import connectDB from '@/config/database';
 import Property from '@/models/Property';
 import PropertyImages from '@/components/PropertyImages';
+import BookmarkButton from '@/components/BookmarkButton';
+import ShareButtons from '@/components/ShareButtons';
+import PropertyContactForm from '@/components/PropertyContactForm';
+import { convertToSerializeableObject } from '@/utils/convertToObject';
 
 const PropertyPage = async ({ params }) => {
   await connectDB();
-  const property = await Property.findById(params.id).lean();
+  const propertyDoc = await Property.findById(params.id).lean();
+  const property = convertToSerializeableObject(propertyDoc);
+
+  if (!property) {
+    return (
+      <h1 className='text-center text-2xl font-bold mt-10'>
+        Property Not Found
+      </h1>
+    );
+  }
 
   return (
     <>
@@ -18,86 +31,9 @@ const PropertyPage = async ({ params }) => {
 
             {/* <!-- Sidebar --> */}
             <aside className='space-y-4'>
-              <button className='bg-blue-500 hover:bg-blue-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'>
+              <BookmarkButton property={property} />
-                <i className='fas fa-bookmark mr-2'></i> Bookmark Property
+              <ShareButtons property={property} />
-              </button>
+              <PropertyContactForm property={property} />
-              <button className='bg-orange-500 hover:bg-orange-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'>
-                <i className='fas fa-share mr-2'></i> Share Property
-              </button>
-
-              {/* <!-- Contact Form --> */}
-              <div className='bg-white p-6 rounded-lg shadow-md'>
-                <h3 className='text-xl font-bold mb-6'>
-                  Contact Property Manager
-                </h3>
-                <form>
-                  <div className='mb-4'>
-                    <label
-                      className='block text-gray-700 text-sm font-bold mb-2'
-                      htmlFor='name'
-                    >
-                      Name:
-                    </label>
-                    <input
-                      className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
-                      id='name'
-                      type='text'
-                      placeholder='Enter your name'
-                      required
-                    />
-                  </div>
-                  <div className='mb-4'>
-                    <label
-                      className='block text-gray-700 text-sm font-bold mb-2'
-                      htmlFor='email'
-                    >
-                      Email:
-                    </label>
-                    <input
-                      className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
-                      id='email'
-                      type='email'
-                      placeholder='Enter your email'
-                      required
-                    />
-                  </div>
-                  <div className='mb-4'>
-                    <label
-                      className='block text-gray-700 text-sm font-bold mb-2'
-                      htmlFor='phone'
-                    >
-                      Phone:
-                    </label>
-                    <input
-                      className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
-                      id='phone'
-                      type='text'
-                      placeholder='Enter your phone number'
-                    />
-                  </div>
-                  <div className='mb-4'>
-                    <label
-                      className='block text-gray-700 text-sm font-bold mb-2'
-                      htmlFor='message'
-                    >
-                      Message:
-                    </label>
-                    <textarea
-                      className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 h-44 focus:outline-none focus:shadow-outline'
-                      id='message'
-                      placeholder='Enter your message'
-                    ></textarea>
-                  </div>
-                  <div>
-                    <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'
-                    >
-                      <i className='fas fa-paper-plane mr-2'></i> Send Message
-                    </button>
-                  </div>
-                </form>
-              </div>
             </aside>
           </div>
         </div>

components/BookmarkButton.jsx

@@ -0,0 +1,11 @@
+import { FaBookmark } from 'react-icons/fa';
+
+const BookmarkButton = ({ property }) => {
+  return (
+    <button className='bg-blue-500 hover:bg-blue-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'>
+      <FaBookmark className='mr-2' />
+      Bookmark Property
+    </button>
+  );
+};
+export default BookmarkButton;

components/PropertyContactForm.jsx

@@ -0,0 +1,81 @@
+import { FaPaperPlane } from 'react-icons/fa';
+
+const PropertyContactForm = ({ property }) => {
+  return (
+    <div className='bg-white p-6 rounded-lg shadow-md'>
+      <h3 className='text-xl font-bold mb-6'>Contact Property Manager</h3>
+      <form>
+        <div className='mb-4'>
+          <label
+            className='block text-gray-700 text-sm font-bold mb-2'
+            htmlFor='name'
+          >
+            Name:
+          </label>
+          <input
+            className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
+            id='name'
+            name='name'
+            type='text'
+            placeholder='Enter your name'
+            required
+          />
+        </div>
+        <div className='mb-4'>
+          <label
+            className='block text-gray-700 text-sm font-bold mb-2'
+            htmlFor='email'
+          >
+            Email:
+          </label>
+          <input
+            className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
+            id='email'
+            name='email'
+            type='email'
+            placeholder='Enter your email'
+            required
+          />
+        </div>
+        <div className='mb-4'>
+          <label
+            className='block text-gray-700 text-sm font-bold mb-2'
+            htmlFor='phone'
+          >
+            Phone:
+          </label>
+          <input
+            className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
+            id='phone'
+            name='phone'
+            type='text'
+            placeholder='Enter your phone number'
+          />
+        </div>
+        <div className='mb-4'>
+          <label
+            className='block text-gray-700 text-sm font-bold mb-2'
+            htmlFor='message'
+          >
+            Message:
+          </label>
+          <textarea
+            className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 h-44 focus:outline-none focus:shadow-outline'
+            id='message'
+            name='message'
+            placeholder='Enter your message'
+          ></textarea>
+        </div>
+        <div>
+          <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' /> Send Message
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default PropertyContactForm;

components/ShareButtons.jsx

@@ -0,0 +1,10 @@
+import { FaShare } from 'react-icons/fa';
+
+const ShareButtons = ({ property }) => {
+  return (
+    <button className='bg-orange-500 hover:bg-orange-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'>
+      <FaShare className='mr-2' /> Share Property
+    </button>
+  );
+};
+export default ShareButtons;