‫Let's now use all the code
‫that we have already written to quickly implement a feature
‫where we can duplicate a cabin.
‫So right here, in each cabin row,
‫we want to add a third action here.
‫So, let's say a button for duplicating.
‫Now this doesn't really fit here anymore.
‫And so maybe let's actually use some icons here.
‫So instead of using text, let's use, again,
‫from our icon library, the Hi
‫and then Square2Stack icon here,
‫and then the same for Edit.
‫So here, let's say HiPencil.
‫Just make sure that you correctly import them.
‫And then here, HiTrash.
‫So, for deleting.
‫And again, we will style this later,
‫because we will later actually make like a context menu,
‫where we then click on some dots
‫and then a list of these things here will open up.
‫So that's going to look a lot better than what we have here.
‫But for now, this is more than enough.
‫So, whenever we click on this button here,
‫we will now want to duplicate, basically, this cabin.
‫Or in other words, we just want to create a new cabin
‫with identical data than this one.
‫And so using the custom hook that we created earlier,
‫that's going to be very easy.
‫So, we can just use here that hook.
‫So, useCreateCabin.
‫And so from there, we can grab isCreating and createCabin.
‫So here, let's create a function to handle that action.
‫So, handleDuplicate,
‫and then we just do createCabin,
‫and pass in an object with all the things that we want.
‫So, that's the name.
‫And here, let's create a new name,
‫let's say "Copy of" and then the original name,
‫and that actually needs to be after this part.
‫'Cause now we need this here, of course,
‫to create our new cabin object,
‫and then we also want, basically, all the rest.
‫So maxCapacity, regularPrice, the discount, the image,
‫and the description as well.
‫So I guess I didn't get that here.
‫But of course now, here, we are going to need that.
‫And so, then all we need to do is to hook that up
‫to this button.
‫So onClick, and then handleDuplicate.
‫But before we test this out,
‫let's actually go back to our apiCabins,
‫and to this function where we actually create a new cabin.
‫Because here, there's something that we still need to fix.
‫So if the image already has a path,
‫so in the case that an image has already been uploaded
‫for this cabin, then that means that,
‫actually, we shouldn't upload anything else here,
‫and so we should fix that right here.
‫So in case, again, the hasImagePath exists,
‫then let's immediately return the data here.
‫So, exactly what we have here,
‫but then we do it early
‫so that the image is then never uploaded.
‫All right. So, let's check this.
‫And so...
‫Well, we get an error.
‫So, createCabin is not a function.
‫So, let's come here to row 65.
‫Ah, because here, we didn't actually call the hook.
‫So, let's try that again,
‫and let's wait for it.
‫So, yeah.
‫Beautiful.
‫So we have copy of one,
‫and it looks exactly the same as this one.
‫And notice how, of course,
‫we got that nice notification up there.
‫And so that's the great thing
‫about centralizing all the success logic
‫in this one place here.
‫So wherever in our application,
‫we use this createCabin function now.
‫Whenever there is a success,
‫all this code here will be executed.
‫We have that all in one nice central place.
‫And so maybe with this, you can start to see
‫why this useMutation hook is also very useful.
‫Right.
‫Now here, let's just disable the button
‫while that is happening.
‫So, disable and then isCreating,
‫so that the user actually has some feedback.
‫So, let's maybe duplicate this one as well.
‫And, nice.
‫Here, maybe let's delete this one.
‫But here, now that we have a duplicate,
‫that then makes it very easy to just edit this.
‫For example, to create a 007,
‫where everything is the same
‫except for the name and the image.
‫So, let's upload this one.
‫And there we go.
‫And again, the form here is not closing
‫because, later on, this will be a pop-up.
‫Great.
‫So for now, I think that we are finally ready
‫to leave this domain of cabins behind.
‫So, we really did all the CRUD operations.
‫So create, read, update, and delete
‫using React Query on the cabins.
‫And so next up, it is time to finally move on
‫to something else,
‫which is going to be working with these settings here.