In this episode, we're tackling how to let users cancel an appointment in our app. First, we add a simple "Cancel Appointment" button to the UI and style it so it stands out. Then, we wire it up so when it's clicked, it triggers a function to send a DELETE
request using Inertia's router to our backend.
On the backend, we build a new destroy controller method that marks the appointment as canceled by setting a canceled_at
timestamp. After that, we make sure to register this new route, so everything's hooked up properly.
To keep things user-friendly (and to prevent accidental cancellations), we add a quick confirmation step using window.confirm
. If the user confirms, we proceed; if not, nothing happens.
Once an appointment has been canceled, we update the frontend to reflect its new state. This includes showing "canceled" text instead of the booking confirmation, and hiding the cancel button so users can't cancel it twice. We walk through the entire flow, from clicking cancel to seeing the UI update, showing how it all works together.
By the end, you'll have a clean and clear way for users to cancel appointments, complete with confirmation and real-time UI updates!