Edit property
This commit is contained in:
Brad Traversy
@@ -0,0 +1,60 @@
|
||||
'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 updateProperty(propertyId, formData) {
|
||||
await connectDB();
|
||||
|
||||
const sessionUser = await getSessionUser();
|
||||
|
||||
const { userId } = sessionUser;
|
||||
|
||||
const existingProperty = await Property.findById(propertyId);
|
||||
|
||||
// Verify ownership
|
||||
if (existingProperty.owner.toString() !== userId) {
|
||||
throw new Error('Current user does not own this property.');
|
||||
}
|
||||
|
||||
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: formData.getAll('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'),
|
||||
},
|
||||
owner: userId,
|
||||
};
|
||||
|
||||
const updatedProperty = await Property.findByIdAndUpdate(
|
||||
propertyId,
|
||||
propertyData
|
||||
);
|
||||
|
||||
revalidatePath('/', 'layout');
|
||||
|
||||
redirect(`/properties/${updatedProperty._id}`);
|
||||
}
|
||||
|
||||
export default updateProperty;
|
||||
@@ -0,0 +1,31 @@
|
||||
import PropertyEditForm from '@/components/PropertyEditForm';
|
||||
import connectDB from '@/config/database';
|
||||
import Property from '@/models/Property';
|
||||
import { convertToSerializeableObject } from '@/utils/convertToObject';
|
||||
|
||||
const PropertyEditPage = async ({ params }) => {
|
||||
await connectDB();
|
||||
|
||||
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 (
|
||||
<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'>
|
||||
<PropertyEditForm property={property} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default PropertyEditPage;
|
||||
@@ -0,0 +1,425 @@
|
||||
import updateProperty from '@/app/actions/updateProperty';
|
||||
|
||||
const PropertyEditForm = ({ property }) => {
|
||||
const updatePropertyById = updateProperty.bind(null, property._id);
|
||||
|
||||
return (
|
||||
<form action={updatePropertyById}>
|
||||
<h2 className='text-3xl text-center font-semibold mb-6'>Edit 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
|
||||
defaultValue={property.type}
|
||||
>
|
||||
<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
|
||||
defaultValue={property.name}
|
||||
/>
|
||||
</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'
|
||||
defaultValue={property.description}
|
||||
></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'
|
||||
defaultValue={property.location.street}
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='city'
|
||||
name='location.city'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='City'
|
||||
required
|
||||
defaultValue={property.location.city}
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='state'
|
||||
name='location.state'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='State'
|
||||
required
|
||||
defaultValue={property.location.state}
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='zipcode'
|
||||
name='location.zipcode'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='Zipcode'
|
||||
defaultValue={property.location.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
|
||||
defaultValue={property.beds}
|
||||
/>
|
||||
</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
|
||||
defaultValue={property.baths}
|
||||
/>
|
||||
</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
|
||||
defaultValue={property.square_feet}
|
||||
/>
|
||||
</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'
|
||||
defaultChecked={property.amenities.includes('Wifi')}
|
||||
/>
|
||||
<label htmlFor='amenity_wifi'>Wifi</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_kitchen'
|
||||
name='amenities'
|
||||
value='Full kitchen'
|
||||
className='mr-2'
|
||||
defaultChecked={property.amenities.includes('Full kitchen')}
|
||||
/>
|
||||
<label htmlFor='amenity_kitchen'>Full kitchen</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_washer_dryer'
|
||||
name='amenities'
|
||||
value='Washer & Dryer'
|
||||
className='mr-2'
|
||||
defaultChecked={property.amenities.includes('Washer & Dryer')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Free Parking')}
|
||||
/>
|
||||
<label htmlFor='amenity_free_parking'>Free Parking</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_pool'
|
||||
name='amenities'
|
||||
value='Swimming Pool'
|
||||
className='mr-2'
|
||||
defaultChecked={property.amenities.includes('Swimming Pool')}
|
||||
/>
|
||||
<label htmlFor='amenity_pool'>Swimming Pool</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_hot_tub'
|
||||
name='amenities'
|
||||
value='Hot Tub'
|
||||
className='mr-2'
|
||||
defaultChecked={property.amenities.includes('Hot Tub')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('24/7 Security')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes(
|
||||
'Wheelchair Accessible'
|
||||
)}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Elevator Access')}
|
||||
/>
|
||||
<label htmlFor='amenity_elevator_access'>Elevator Access</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_dishwasher'
|
||||
name='amenities'
|
||||
value='Dishwasher'
|
||||
className='mr-2'
|
||||
defaultChecked={property.amenities.includes('Dishwasher')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Gym/Fitness Center')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Air Conditioning')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Balcony/Patio')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Smart TV')}
|
||||
/>
|
||||
<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'
|
||||
defaultChecked={property.amenities.includes('Coffee Maker')}
|
||||
/>
|
||||
<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'
|
||||
defaultValue={property.rates.weekly}
|
||||
/>
|
||||
</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'
|
||||
defaultValue={property.rates.monthly}
|
||||
/>
|
||||
</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'
|
||||
defaultValue={property.rates.nightly}
|
||||
/>
|
||||
</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'
|
||||
defaultValue={property.seller_info.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
|
||||
defaultValue={property.seller_info.email}
|
||||
/>
|
||||
</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'
|
||||
defaultValue={property.seller_info.phone}
|
||||
/>
|
||||
</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'
|
||||
>
|
||||
Update Property
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
export default PropertyEditForm;
|
||||
Reference in New Issue
Block a user