‫And now to finish this part
‫about the modal windows,
‫let's reuse it two more times.
‫So to edit and to confirm a cabin deletion.
‫So first off, let's clean up this file a little bit,
‫and then here as well.
‫And also we actually don't want this other window here
‫where we display a table.
‫Also, let's place this modal into a div
‫so that the button doesn't occupy all that space.
‫And so now, as I was saying initially,
‫let's actually reuse this modal window
‫both for the deleting and for editing.
‫So let's come to our CabinRow right here,
‫and then let's use that modal window.
‫So basically around these buttons right here.
‫Now this one doesn't belong into the modal window.
‫Let's start, or let's open it right here.
‫Alright.
‫And for now this will, of course, not do anything.
‫But now let's then start using our child components.
‫So Modal.Open, and then here is where
‫we will place that button.
‫And then what should happen whenever the window is opened?
‫Well, inside that window is where actually
‫we want to now render this create cabin form.
‫So let's remove this, place that here,
‫and then we can tremendously clean up this file
‫so we can get rid of this state, which we no longer need.
‫The same here for the import.
‫And we also no longer then need to
‫return this fragment.
‫And while here
‫we also have this onClick handler that we no longer need.
‫And this.
‫And, there we go.
‫Alright, and so now all we need to do, I believe,
‫is to connect this open with this window.
‫So let's call this one here Edit.
‫And so then this button opens Edit.
‫Now that should be it.
‫So, let's see.
‫Nice.
‫So that's the edit form for Cabin 001.
‫Let's try with the test, or actually with the 008.
‫And, there we go.
‫Great, so see how easy it is to now include
‫a new modal window like this.
‫So really, really easy with this really nice API
‫that we created ourselves earlier.
‫And, of course, everything works as before.
‫So this component here basically still gets injected
‫with that onClose modal function,
‫which allows this to also
‫close this here as we edit.
‫And now let's actually test that.
‫So 007, let's change the price to $700.
‫Let's see.
‫And yeah, as soon as that was done, our modal was closed.
‫Great, so that was one part.
‫And now the second part is
‫that whenever we click here on this button,
‫we actually don't want the cabin to be deleted immediately.
‫But instead, as is usual in normal web applications,
‫first we should get asked
‫whether we are sure if that cabin should be deleted.
‫So for that we actually already have a component here
‫called ConfirmDelete.
‫So this is a reusable component that can be used
‫for different resources.
‫So basically now we're going to use it for the cabins.
‫So this receives the resource name
‫then the onConfirm function,
‫which will eventually get called if we are really sure,
‫so if we confirm.
‫And then also the disabled state.
‫And so let's now use this here inside our modal window.
‫So this one also should be rendered inside a modal.
‫So, like you have seen many, many times before.
‫So let's create ourselves a new Modal.Open,
‫which is where we will place this button,
‫and then our Modal.Window.
‫And so here we now want that ConfirmDelete component.
‫So that receives the resource name.
‫And so that's gonna be cabins,
‫also the disabled state.
‫And so that's gonna be isDeleting.
‫And then, finally, onConfirm.
‫But for now, let's not do that,
‫and let's just test if this actually works.
‫Say we want to delete this and, great,
‫so now we get this nice window here.
‫But for now, nothing is going to happen.
‫So we cannot cancel and we cannot delete.
‫But we can, of course, close it.
‫Now, okay, and so now we need to pass in the function
‫that should actually be called when we confirm.
‫And so that function is actually this one.
‫So before we just called this function
‫directly on the click,
‫but now it should only be called after we confirm.
‫So onConfirm and, of course, needs to be here.
‫So here we want that function,
‫and here we can get rid of this and of all of this as well.
‫And now let's go back here
‫and let's then make these buttons actually work.
‫So, first of all, we have the cancel button,
‫which should essentially just close the modal.
‫So, how do we make this one work?
‫Well, since this is a child component now
‫of the modal window,
‫it'll automatically receive the onClose modal prompt, right?
‫So that's what we have been talking about
‫all this time where, remember,
‫we clone this element and inject that function in there.
‫So, giving it this onClose modal prompt.
‫And so now that will be created inside confirmDelete.
‫So here we have now access to that.
‫And so we can say
‫onClick onCloseModal.
‫And then we also already have onconfirm.
‫And so let's place that here as well.
‫So, onConfirm.
‫And with this, this functionality should now be working.
‫At least most of it.
‫So, the modal opens.
‫When we click cancel, then it closes.
‫Great, but now watch what happens here.
‫So delete, and, indeed, the cabin gets successfully deleted.
‫Now, actually, I thought that after this deletion
‫the modal window would stay open
‫because nowhere we actually told it to close afterwards.
‫But thinking about this, it actually makes sense because
‫after we delete the cabin, the row does no longer exist.
‫And so, therefore, the modal component inside the row
‫also no longer exists.
‫And so, therefore,
‫then the modal window can no longer be shown.
‫So that's why it does, indeed, disappear.