Get session user and add property

_theme_files/add-property.html

@@ -225,23 +225,13 @@
               Add Property
             </h2>
 
-            <!-- Alerts -->
-            <div class="bg-green-200 font-semibold p-4 my-5">
-              This is a success message alert
-            </div>
-            <div class="bg-red-200 font-semibold p-4 my-5">
-              This is an error message alert
-            </div>
-
             <div class="mb-4">
-              <label
+              <label for="type" class="block text-gray-700 font-bold mb-2"
-                for="property_type"
-                class="block text-gray-700 font-bold mb-2"
                 >Property Type</label
               >
               <select
-                id="property_type"
+                id="type"
-                name="property_type"
+                name="type"
                 class="border rounded w-full py-2 px-3"
                 required
               >
@@ -368,7 +358,7 @@
                     id="amenity_wifi"
                     name="amenities"
                     value="Wifi"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_wifi">Wifi</label>
                 </div>
@@ -378,7 +368,7 @@
                     id="amenity_kitchen"
                     name="amenities"
                     value="Full kitchen"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_kitchen">Full kitchen</label>
                 </div>
@@ -388,7 +378,7 @@
                     id="amenity_washer_dryer"
                     name="amenities"
                     value="Washer & Dryer"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_washer_dryer">Washer & Dryer</label>
                 </div>
@@ -398,7 +388,7 @@
                     id="amenity_free_parking"
                     name="amenities"
                     value="Free Parking"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_free_parking">Free Parking</label>
                 </div>
@@ -408,7 +398,7 @@
                     id="amenity_pool"
                     name="amenities"
                     value="Swimming Pool"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_pool">Swimming Pool</label>
                 </div>
@@ -418,7 +408,7 @@
                     id="amenity_hot_tub"
                     name="amenities"
                     value="Hot Tub"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_hot_tub">Hot Tub</label>
                 </div>
@@ -428,7 +418,7 @@
                     id="amenity_24_7_security"
                     name="amenities"
                     value="24/7 Security"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_24_7_security">24/7 Security</label>
                 </div>
@@ -438,7 +428,7 @@
                     id="amenity_wheelchair_accessible"
                     name="amenities"
                     value="Wheelchair Accessible"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_wheelchair_accessible"
                     >Wheelchair Accessible</label
@@ -450,7 +440,7 @@
                     id="amenity_elevator_access"
                     name="amenities"
                     value="Elevator Access"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_elevator_access">Elevator Access</label>
                 </div>
@@ -460,7 +450,7 @@
                     id="amenity_dishwasher"
                     name="amenities"
                     value="Dishwasher"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_dishwasher">Dishwasher</label>
                 </div>
@@ -470,7 +460,7 @@
                     id="amenity_gym_fitness_center"
                     name="amenities"
                     value="Gym/Fitness Center"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_gym_fitness_center"
                     >Gym/Fitness Center</label
@@ -482,7 +472,7 @@
                     id="amenity_air_conditioning"
                     name="amenities"
                     value="Air Conditioning"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_air_conditioning">Air Conditioning</label>
                 </div>
@@ -492,7 +482,7 @@
                     id="amenity_balcony_patio"
                     name="amenities"
                     value="Balcony/Patio"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_balcony_patio">Balcony/Patio</label>
                 </div>
@@ -502,7 +492,7 @@
                     id="amenity_smart_tv"
                     name="amenities"
                     value="Smart TV"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_smart_tv">Smart TV</label>
                 </div>
@@ -512,7 +502,7 @@
                     id="amenity_coffee_maker"
                     name="amenities"
                     value="Coffee Maker"
-                    className="mr-2"
+                    class="mr-2"
                   />
                   <label for="amenity_coffee_maker">Coffee Maker</label>
                 </div>

_theme_files/property.html

@@ -442,15 +442,15 @@
             <div class="bg-white p-6 rounded-lg shadow-md">
               <h3 class="text-xl font-bold mb-6">Contact Property Manager</h3>
               <form>
-              <div className='mb-4'>
+              <div class='mb-4'>
                 <label
-                  className='block text-gray-700 text-sm font-bold mb-2'
+                  class='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'
+                  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'
                   type='text'
                   placeholder='Enter your name'             
@@ -472,15 +472,15 @@
                     required
                   />
                 </div>
-                <div className='mb-4'>
+                <div class='mb-4'>
                   <label
-                    className='block text-gray-700 text-sm font-bold mb-2'
+                    class='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'
+                    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'
                     type='text'
                     placeholder='Enter your phone number'

app/actions/addProperty.js

@@ -0,0 +1,63 @@
+'use server';
+import connectDB from '@/config/database';
+import Property from '@/models/Property';
+import { getSessionUser } from '@/utils/getSessionUser';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+async function addProperty(formData) {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  if (!sessionUser || !sessionUser.userId) {
+    throw new Error('User ID is required');
+  }
+
+  const { userId } = sessionUser;
+
+  // Access all values for amenities and images
+  const amenities = formData.getAll('amenities');
+  const images = formData
+    .getAll('images')
+    .filter((image) => image.name !== '') // Filter out empty names
+    .map((image) => image.name); // Extract only the names
+
+  // Create the propertyData object with embedded seller_info
+  const propertyData = {
+    type: formData.get('type'),
+    name: formData.get('name'),
+    description: formData.get('description'),
+    location: {
+      street: formData.get('location.street'),
+      city: formData.get('location.city'),
+      state: formData.get('location.state'),
+      zipcode: formData.get('location.zipcode'),
+    },
+    beds: formData.get('beds'),
+    baths: formData.get('baths'),
+    square_feet: formData.get('square_feet'),
+    amenities,
+    rates: {
+      weekly: formData.get('rates.weekly'),
+      monthly: formData.get('rates.monthly'),
+      nightly: formData.get('rates.nightly.'),
+    },
+    seller_info: {
+      name: formData.get('seller_info.name'),
+      email: formData.get('seller_info.email'),
+      phone: formData.get('seller_info.phone'),
+    },
+    images,
+    owner: userId,
+  };
+
+  const newProperty = new Property(propertyData);
+  await newProperty.save();
+
+  revalidatePath('/', 'layout');
+
+  redirect(`/properties/${newProperty._id}`);
+}
+
+export default addProperty;

app/properties/add/page.jsx

@@ -1,4 +1,14 @@
-const AddPropertyPage = () => {
+import PropertyAddForm from '@/components/PropertyAddForm';
-  return <div>AddPropertyPage</div>;
+
+const PropertyAddPage = () => {
+  return (
+    <section className='bg-blue-50'>
+      <div className='container m-auto max-w-2xl py-24'>
+        <div className='bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0'>
+          <PropertyAddForm />
+        </div>
+      </div>
+    </section>
+  );
 };
-export default AddPropertyPage;
+export default PropertyAddPage;

components/PropertyAddForm.jsx

@@ -0,0 +1,407 @@
+'use client';
+import addProperty from '@/app/actions/addProperty';
+
+const PropertyAddForm = () => {
+  return (
+    <form action={addProperty}>
+      <h2 className='text-3xl text-center font-semibold mb-6'>Add Property</h2>
+
+      <div className='mb-4'>
+        <label htmlFor='type' className='block text-gray-700 font-bold mb-2'>
+          Property Type
+        </label>
+        <select
+          id='type'
+          name='type'
+          className='border rounded w-full py-2 px-3'
+          required
+        >
+          <option value='Apartment'>Apartment</option>
+          <option value='Condo'>Condo</option>
+          <option value='House'>House</option>
+          <option value='CabinOrCottage'>Cabin or Cottage</option>
+          <option value='Room'>Room</option>
+          <option value='Studio'>Studio</option>
+          <option value='Other'>Other</option>
+        </select>
+      </div>
+      <div className='mb-4'>
+        <label className='block text-gray-700 font-bold mb-2'>
+          Listing Name
+        </label>
+        <input
+          type='text'
+          id='name'
+          name='name'
+          className='border rounded w-full py-2 px-3 mb-2'
+          placeholder='eg. Beautiful Apartment In Miami'
+          required
+        />
+      </div>
+      <div className='mb-4'>
+        <label
+          htmlFor='description'
+          className='block text-gray-700 font-bold mb-2'
+        >
+          Description
+        </label>
+        <textarea
+          id='description'
+          name='description'
+          className='border rounded w-full py-2 px-3'
+          rows='4'
+          placeholder='Add an optional description of your property'
+        ></textarea>
+      </div>
+
+      <div className='mb-4 bg-blue-50 p-4'>
+        <label className='block text-gray-700 font-bold mb-2'>Location</label>
+        <input
+          type='text'
+          id='street'
+          name='location.street'
+          className='border rounded w-full py-2 px-3 mb-2'
+          placeholder='Street'
+        />
+        <input
+          type='text'
+          id='city'
+          name='location.city'
+          className='border rounded w-full py-2 px-3 mb-2'
+          placeholder='City'
+          required
+        />
+        <input
+          type='text'
+          id='state'
+          name='location.state'
+          className='border rounded w-full py-2 px-3 mb-2'
+          placeholder='State'
+          required
+        />
+        <input
+          type='text'
+          id='zipcode'
+          name='location.zipcode'
+          className='border rounded w-full py-2 px-3 mb-2'
+          placeholder='Zipcode'
+        />
+      </div>
+
+      <div className='mb-4 flex flex-wrap'>
+        <div className='w-full sm:w-1/3 pr-2'>
+          <label htmlFor='beds' className='block text-gray-700 font-bold mb-2'>
+            Beds
+          </label>
+          <input
+            type='number'
+            id='beds'
+            name='beds'
+            className='border rounded w-full py-2 px-3'
+            required
+          />
+        </div>
+        <div className='w-full sm:w-1/3 px-2'>
+          <label htmlFor='baths' className='block text-gray-700 font-bold mb-2'>
+            Baths
+          </label>
+          <input
+            type='number'
+            id='baths'
+            name='baths'
+            className='border rounded w-full py-2 px-3'
+            required
+          />
+        </div>
+        <div className='w-full sm:w-1/3 pl-2'>
+          <label
+            htmlFor='square_feet'
+            className='block text-gray-700 font-bold mb-2'
+          >
+            Square Feet
+          </label>
+          <input
+            type='number'
+            id='square_feet'
+            name='square_feet'
+            className='border rounded w-full py-2 px-3'
+            required
+          />
+        </div>
+      </div>
+
+      <div className='mb-4'>
+        <label className='block text-gray-700 font-bold mb-2'>Amenities</label>
+        <div className='grid grid-cols-2 md:grid-cols-3 gap-2'>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_wifi'
+              name='amenities'
+              value='Wifi'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_wifi'>Wifi</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_kitchen'
+              name='amenities'
+              value='Full kitchen'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_kitchen'>Full kitchen</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_washer_dryer'
+              name='amenities'
+              value='Washer & Dryer'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_washer_dryer'>Washer & Dryer</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_free_parking'
+              name='amenities'
+              value='Free Parking'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_free_parking'>Free Parking</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_pool'
+              name='amenities'
+              value='Swimming Pool'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_pool'>Swimming Pool</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_hot_tub'
+              name='amenities'
+              value='Hot Tub'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_hot_tub'>Hot Tub</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_24_7_security'
+              name='amenities'
+              value='24/7 Security'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_24_7_security'>24/7 Security</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_wheelchair_accessible'
+              name='amenities'
+              value='Wheelchair Accessible'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_wheelchair_accessible'>
+              Wheelchair Accessible
+            </label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_elevator_access'
+              name='amenities'
+              value='Elevator Access'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_elevator_access'>Elevator Access</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_dishwasher'
+              name='amenities'
+              value='Dishwasher'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_dishwasher'>Dishwasher</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_gym_fitness_center'
+              name='amenities'
+              value='Gym/Fitness Center'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_gym_fitness_center'>
+              Gym/Fitness Center
+            </label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_air_conditioning'
+              name='amenities'
+              value='Air Conditioning'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_air_conditioning'>Air Conditioning</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_balcony_patio'
+              name='amenities'
+              value='Balcony/Patio'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_balcony_patio'>Balcony/Patio</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_smart_tv'
+              name='amenities'
+              value='Smart TV'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_smart_tv'>Smart TV</label>
+          </div>
+          <div>
+            <input
+              type='checkbox'
+              id='amenity_coffee_maker'
+              name='amenities'
+              value='Coffee Maker'
+              className='mr-2'
+            />
+            <label htmlFor='amenity_coffee_maker'>Coffee Maker</label>
+          </div>
+        </div>
+      </div>
+
+      <div className='mb-4 bg-blue-50 p-4'>
+        <label className='block text-gray-700 font-bold mb-2'>
+          Rates (Leave blank if not applicable)
+        </label>
+        <div className='flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4'>
+          <div className='flex items-center'>
+            <label htmlFor='weekly_rate' className='mr-2'>
+              Weekly
+            </label>
+            <input
+              type='number'
+              id='weekly_rate'
+              name='rates.weekly'
+              className='border rounded w-full py-2 px-3'
+            />
+          </div>
+          <div className='flex items-center'>
+            <label htmlFor='monthly_rate' className='mr-2'>
+              Monthly
+            </label>
+            <input
+              type='number'
+              id='monthly_rate'
+              name='rates.monthly'
+              className='border rounded w-full py-2 px-3'
+            />
+          </div>
+          <div className='flex items-center'>
+            <label htmlFor='nightly_rate' className='mr-2'>
+              Nightly
+            </label>
+            <input
+              type='number'
+              id='nightly_rate'
+              name='rates.nightly'
+              className='border rounded w-full py-2 px-3'
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className='mb-4'>
+        <label
+          htmlFor='seller_name'
+          className='block text-gray-700 font-bold mb-2'
+        >
+          Seller Name
+        </label>
+        <input
+          type='text'
+          id='seller_name'
+          name='seller_info.name.'
+          className='border rounded w-full py-2 px-3'
+          placeholder='Name'
+        />
+      </div>
+      <div className='mb-4'>
+        <label
+          htmlFor='seller_email'
+          className='block text-gray-700 font-bold mb-2'
+        >
+          Seller Email
+        </label>
+        <input
+          type='email'
+          id='seller_email'
+          name='seller_info.email'
+          className='border rounded w-full py-2 px-3'
+          placeholder='Email address'
+          required
+        />
+      </div>
+      <div className='mb-4'>
+        <label
+          htmlFor='seller_phone'
+          className='block text-gray-700 font-bold mb-2'
+        >
+          Seller Phone
+        </label>
+        <input
+          type='tel'
+          id='seller_phone'
+          name='seller_info.phone'
+          className='border rounded w-full py-2 px-3'
+          placeholder='Phone'
+        />
+      </div>
+
+      <div className='mb-4'>
+        <label htmlFor='images' className='block text-gray-700 font-bold mb-2'>
+          Images (Select up to 4 images)
+        </label>
+        <input
+          type='file'
+          id='images'
+          name='images'
+          className='border rounded w-full py-2 px-3'
+          accept='image/*'
+          multiple
+        />
+      </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'
+          type='submit'
+        >
+          Add Property
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default PropertyAddForm;

utils/getSessionUser.js

@@ -0,0 +1,20 @@
+import { getServerSession } from 'next-auth/next';
+import { authOptions } from '@/utils/authOptions';
+
+export const getSessionUser = async () => {
+  try {
+    const session = await getServerSession(authOptions);
+
+    if (!session || !session.user) {
+      return null;
+    }
+
+    return {
+      user: session.user,
+      userId: session.user.id,
+    };
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};