This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.
- Part 1: Let’s start by installing Next.js
- Part 2: Build the list of houses
- Part 3: Build the house detail view
- Part 4: CSS and navigation bar
- Part 5: Start with the date picker
- Part 6: Add the sidebar
- Part 7: Add react-day-picker
- Part 8: Add the calendar to the page
- Part 9: Configure the DayPickerInput component
- Part 10: Sync the start and end dates
- Part 11: Show the price for the chosen dates
- Part 12: Login and signup forms
- Part 13: Activate the modal
- Part 14: Send registration data to the server
- Part 15: Add postgres
- Part 16: Implement model and DB connection
- Part 17: Create a session token
- Part 18: Implement login
- Part 19: Determine if we are logged in
- Part 20: Change state after we login
- Part 21: Log in after registration
- Part 22: Create the models and move data to the db
- Part 23: Use the database instead of the file
- Part 24: Handle bookings
- Part 25: Handle booked dates
Now there’s a problem if we try to book some dates that are already booked.
We need to make good use of our /houses/check endpoint to check if in the dates we want to book, some are already booked!
We do this by adding this canReserve() function to pages/houses/[id].js:
pages/houses/[id].js
const canReserve = async (houseId, startDate, endDate) => {
try {
const response = await axios.post(
'http://localhost:3000/api/houses/check',
{ houseId, startDate, endDate }
)
if (response.data.status === 'error') {
alert(response.data.message)
return
}
if (response.data.message === 'busy') return false
return true
} catch (error) {
console.error(error)
return
}
}This function is calling the server-side /api/houses/check endpoint we created previously, and if we get ‘busy’ as a message in the response, we return false.
We can use this boolean return value to disallow going on with the booking, in the “Reserve” button onClick callback function we already wrote.
That function now is:
pages/houses/[id].js
<button
className="reserve"
onClick={async () => {
try {
const response = await axios.post('/api/reserve', {
houseId: house.id,
startDate,
endDate
})
if (response.data.status === 'error') {
alert(response.data.message)
return
}
console.log(response.data)
} catch (error) {
console.log(error)
return
}
}}
>
Reserve
</button>We do it as the first thing:
pages/houses/[id].js
<button
className='reserve'
onClick={async () => {
if (!(await canReserve(house.id, startDate, endDate))) {
alert('The dates chosen are not valid')
return
}
try {...
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-26T05:00:00+00:00) Prevent booking if already booked. Retrieved from https://www.scien.cx/2021/12/26/prevent-booking-if-already-booked/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.