‫[Jonas} So the last feature that we need to implement
‫about a single booking is the ability to delete it.
‫So basically here to this list.
‫So to this menu
‫we want to add a button to delete the booking
‫and also here onto the details page.
‫We want basically
‫like a red button here to also delete a booking from here.
‫And we actually already did something pretty similar earlier
‫with the cabins.
‫And so I think
‫that it's a good idea to leave this for you as a challenge.
‫So I want you to pause the video now
‫and then implement this feature on your own.
‫So take maybe 15 or 30 minutes
‫and then I see you back here once you are done.
‫Now so okay, so hopefully
‫you had some success with that.
‫And so let's now get started building this feature.
‫And first here in these menus.
‫So in the booking row itself.
‫Now remember how we do not immediately delete a booking
‫as we click on the delete button
‫but instead we first want to show a model window
‫with the confirm delete component inside of it.
‫And so to start, we need to bring back
‫or model window component that we built earlier.
‫So model
‫and then let's wrap the entire thing into that model.
‫So basically all the way down here
‫then we need to of course bring that in.
‫There we go.
‫And now remember that a model has an open child component
‫and a window child component.
‫So let's add that open button here to the list.
‫And so here we will have model.open
‫and this then needs the opens prop
‫for the name of the model that it will actually open.
‫So let's call this one delete.
‫And then here is where we need to pass in the button.
‫And so in this case, that button will be menus.button.
‫And so this is again quite confusing here, but
‫while this is just the structure that we have built
‫or the API that we have built
‫in these two compound components that are now
‫playing together here.
‫So here delete booking
‫and then we also need to pass in the icon prop.
‫So here we use that one again.
‫And then next up we also need the model.window.
‫And this should be outside here
‫off the list or maybe even off the menu itself.
‫So really let's just place this here.
‫So model.window
‫and then this needs to have the name corresponding
‫to the opens prop up there like this.
‫And then in here we pass the component that we
‫actually want to render inside the model.
‫So that's gonna be confirm delete, like this.
‫And again we need to manually bring this in sometimes.
‫All right, and then we need to specify a few props here.
‫So first of all, the resource name
‫which is bookings or just booking.
‫And then the unconfirm prop, which is basically
‫the callback function that will be called whenever we click
‫on the confirm button.
‫So here is where we will want to
‫call some delete booking function.
‫Now we don't have that yet
‫so let's just place this here so we don't create an error.
‫And then let's go ahead
‫and create ourselves yet another custom hook.
‫So we have used booking used bookings
‫and now we will create use delete bookings.
‫But since we already have something very similar here
‫let's just copy and paste that to save some time.
‫But please feel totally free to also write this code here
‫on your own.
‫So use delete booking
‫and then here changing all of the names.
‫Then here, let's change this to delete booking everywhere.
‫So we actually already have that delete booking
‫function here in our API bookings file.
‫So here we even need to only change this.
‫And then finally here the Query key
‫that we want to invalidate is bookings.
‫And so this will then invalidate all the queries
‫that have bookings in the array itself.
‫So for example, it will also invalidate this Query
‫even though it has a lot of other stuff here.
‫Now, right?
‫So this I think should be done.
‫And so coming back here, let's then bring all of that in.
‫So delete booking and is deleting, I believe.
‫And once again, we need to somehow
‫for some reason bring that in manually.
‫Let's do use delete booking
‫from use delete booking.
‫Now, okay, let's just clean up our imports
‫here a little bit.
‫And there we go.
‫Okay, so where were we?
‫Yeah, right here.
‫So now all we need to do is to pass
‫in delete booking with the current booking ID.
‫And this should already be enough to make this work.
‫So let's reload.
‫No bugs here.
‫And then let's try to delete this booking here.
‫So indeed, we get our model window just like we wanted.
‫Let's click delete and beautiful.
‫So that booking is gone and our Query has
‫successfully reevaluated and fetched this data again.
‫And so this time without that booking that we just deleted
‫let's try another one just to be sure.
‫So the one with Emma Watson and now
‫that one is gone as well.
‫And down here we also get now the new number
‫of just 22 results.
‫And of course
‫don't worry about deleting these bookings because
‫we can always get them back simply by clicking here.
‫Alright, and so now all that we have to do is
‫to implement the same functionality with a button here.
‫So we will still want a model window.
‫And so let's actually grab this part here
‫with the confirm delete
‫and place that right here close to this final button.
‫So first of all, let's bring in the model window again.
‫And so then here we will have model window
‫and then we just need
‫The model.open here as well.
‫So then again, the opens prop set to delete.
‫And here we're just going to use a regular button
‫but with the variation set to danger.
‫And so this will then make the button red
‫and then here, delete booking.
‫Alright, then we need to bring in this component.
‫And let's also grab then this part right here
‫place that somewhere like here.
‫And nice, there is the button
‫and it should actually already be working.
‫So let's click.
‫And it was successfully deleted
‫but now this isn't really what we want.
‫So basically this should now close and we kind
‫of want to go back to the table where we were before, right?
‫So this doesn't really make a lot of sense
‫also because this page actually no longer exists.
‫So if we were trying to load this now, then
‫it wouldn't work again because this doesn't exist anymore.
‫And so here in this case
‫right after the booking has been deleted
‫we actually want to go back to the previous page.
‫Now, before we do that, let's actually also pass
‫in the disabled prop with the is deleting state.
‫And the same thing here.
‫So we are still not using that variable
‫and so let's do that here indeed.
‫All right.
‫But anyway, now here we want that functionality that as soon
‫as the booking has been deleted, we want to move back.
‫So how can we do that?
‫Well, remember how we learned in an earlier lecture
‫that we can also add these, for example, on success
‫or on error handlers, not only into the on mutation hook
‫but only right into the individual mutate function.
‫So again, we do not need to specify these handlers
‫for all of the mutations, but we can also do it
‫for individual mutations, which is what we want to do now.
‫So we want to have a different behavior
‫in this mutation here.
‫So in this deletion, then we want here.
‫So here we want nothing to happen once it was successful
‫but here in this one, we want to move back.
‫And so we do not add that handler right here
‫into the unsuccess, but really only in this one.
‫So as a second part here, we pass
‫in an object with all the options that we want to specify.
‫And so here we could now do unsuccess
‫or we could also do really unsettled.
‫So unsettled means that this will always happen no matter
‫if it's an error or a success.
‫So let's use that one.
‫And then here, all we will want to do is to navigate
‫back by one step, give this a safe.
‫And so now if we delete this, then nothing will happen.
‫So just the deletion itself.
‫But if we now come here to this details page
‫of Jonathan Williams and delete this, then as soon
‫as that happens, we move back to the bookings page.
‫Great. And with this
‫we finished working on the individual booking level.
‫Now one thing that we could also do would be to
‫edit a booking, but that would really be a lot
‫of work because we have all these moving parts
‫with the different guests, and the different cabins.
‫And so that would become kind of a mess.
‫So of course it would be doable, but it would take a lot
‫of time to do that here in this video.
‫And so instead, let's now move
‫on to one of the most important
‫and most exciting parts of this project
‫which is to finally implement a real authentication system.