‫Next up, let's now abstract
‫all the React query logic that we have written
‫so far into a few custom hooks which is the best practice
‫in a large application like this one.
‫Now first I noticed that here we have this line
‫of code in this text area which doesn't do anything
‫so let's delete it and then also here
‫in the cabin row, whenever there's no discount,
‫then let's actually not display this discount component.
‫So if there is a discount, then display this
‫and otherwise just a span with a medium dash
‫so that looks a bit nicer, but now let's actually do
‫what I said which is to extract these functions here
‫so basically this logic here into its own custom hook.
‫So this right here is for the leading a cabin
‫and so let's copy all of this and refactor it
‫into a use delete cabin hook and let's actually create it
‫right here in this cabin's feature folder.
‫So use delete cabin and now this is a JS file
‫and not JSX which actually makes it quite easy
‫for us to then distinguish visually,
‫the components from the hooks and we didn't place
‫this hook into this hooks folder because this one
‫is really only for hooks that are reusable
‫across multiple features, but this one here
‫really is related to the cabin's feature
‫and therefore we keep it right here in this folder.
‫But anyway, now let's create that function
‫so export function use delete cabin,
‫and then let's place all of that in there
‫so here that's function like this and then of course
‫we need to bring in all of these hooks right here,
‫the same with use mutation and of course
‫with the toast library and also this delete cabin function,
‫so just like this, all right and then maybe let's also
‫rename this mutate function around here so just like we did
‫in the form earlier so delete cabin
‫but down here we create a conflict because this function
‫name then is exactly the same as this one.
‫So let's just rename this one so let's import it
‫as delete cabin API and so down here we use exactly that one
‫and so in the end all we do is to return an object
‫with is deleting and delete cabin.
‫So here we did exactly what we learned earlier
‫about how to extract some logic that contains hook
‫into a custom hook and so this clearly
‫was a good use case of that because we have two hooks here
‫and so then it's a great idea to create our custom hook
‫and so let's now actually use it here.
‫So let's get rid of all of this.
‫Now let's bring it is deleting and delete cabin
‫from use delete cabin like this
‫and here now it's no longer called mutate
‫but delete cabin and so with this
‫everything should work exactly the same way as before.
‫Let's just place this here close to the other hooks
‫and there we go so then we can get rid of all of this
‫and so this really makes our component so much cleaner.
‫Let's of course test this, let's just reload here
‫and wait for the data to arrive and then let's just delete
‫this test one but here for some reason
‫we still get some problem so maybe let's just try again
‫but I believe that this one is actually not going to work
‫so maybe this is actually the one,
‫well let's see here and so this is the one
‫and now I see what the problem is
‫so this one is the one that has the ID of one
‫which means that it's the one that's being referenced here
‫in a foreign key in the bookings
‫so remember how here we have the cabin ID somewhere,
‫yeah, right here we have a cabin ID
‫which has the number one and so therefore
‫we are now not allowed to delete this one
‫which has the ID of number one so this one we can
‫no longer safely delete right now
‫so that's why we keep getting that error for some reason
‫but only on that one so if I delete this one
‫then that's going to work just fine.
‫All right, so that was interesting
‫and I'm glad we found out why that didn't work as expected.
‫But anyway, now here we have some more
‫React query logic that we can extract
‫so let's grab this piece right here
‫and then let's just do use create cabin.js,
‫paste all of that here and then again export
‫function use create cabin and of course later on
‫we will not have to go through all this work
‫of refactoring our code and extracting all of this
‫because we will do that of course immediately
‫so we will just right away create our custom hook
‫without even writing it ever in the component
‫so then here we also need to import this function,
‫there we go, then we have a problem there
‫with the reset function but for now let's return
‫is creating and to create cabin function,
‫and here we didn't have to change the import
‫because the name this time is already different
‫from the create cabin, so as I was saying
‫here we have a problem because we do not have
‫this reset function available right here
‫so remember that this is actually coming
‫from the React hook form library
‫so it's coming right from here
‫and so of course we will not be able
‫to have that inside our custom hook
‫so let's remove that from here
‫but that doesn't mean that we cannot still call that
‫reset function on success so let me show you how.
‫So let's delete that then we can remove this code
‫as well and then I just need to of course import
‫that hook, so let's do that here
‫so is creating and create cabin
‫from use create cabin and this time
‫for some reason we have to import this manually,
‫let's do that here but first move that up
‫so use create cabin from use create cabin of course
‫and so now creating a cabin should work the same
‫except again that as soon as we are finished here
‫it will then not reset the form
‫but luckily for us React query has thought of situations
‫like this so we can not only use the on success handler
‫here on use mutation but also right where the mutation
‫actually happens, or in other words
‫we can also pass a similar thing right here
‫into the mutation function which in this case
‫we renamed to create cabin but that's the same thing
‫so this is just simply the mutate function
‫that is coming from React query so basically
‫that is coming from right here
‫so it's the result of use mutation and so again we can
‫place this on success handler function
‫not only right here but also right in the function
‫where the mutation actually happens
‫so all we need to do is to pass in an object of options
‫and so then there we can do on success
‫and then here we can very simply call the reset function
‫and also this call back right here
‫actually gets access to the data
‫that the mutation function returns
‫or in other words we can here get access
‫to this new cabin data that we return right here
‫and so this data again is going to be the newly created
‫cabin or the edited one so just to see that here
‫let's log it to the console and so then let's try this out.
‫So let's call this one zero zero eight for eight people
‫for 800 euros, 80 discount, and something
‫and so let's see if this resets the field
‫and if we then get the newly created object down here
‫and indeed both of them happened
‫and we know that this is the new object
‫because it contains the created at and also the new ID.
‫Great, so let's also, since we are already here
‫do the same thing in the other one
‫so right here because now we will also abstract
‫this one here into its own custom hook
‫so taking all of this and then let's call that one
‫use edit cabin.js, paste all of that,
‫export function use edit cabin
‫and as always importing all of this stuff here
‫and we also need this function and the toast.
‫Let's get rid of this one and finally return
‫is editing and edit cabin so that looks great,
‫come back into form, now we can delete all of this stuff
‫and then is editing and edit cabin
‫from use edit cabin, let's import that
‫and then we are done with this function right here.
‫Now here this should be called is editing
‫and yeah, this one should have been placed actually,
‫well actually nowhere, actually we want to import
‫a new file with this and then it is this one
‫that we no longer need so the same thing
‫then here and here and with this,
‫actually the component is looking a bit cleaner
‫even though there's still some confusion going on here
‫but well that's just because we're doing
‫also a lot of different things in this one component.
‫All right so I think we can close this one
‫for now, this one let's leave open
‫and now finally let's turn our attention back
‫to the cabin table itself which is where
‫we get this data here in the beginning
‫and so let's also grab this one and maybe you want to
‫keep it as a reference so let's just duplicate
‫this file here, call it V1 and now let's cut this
‫and create one final custom hook
‫and so this one where we just fetched the data
‫I like to call it then use cabins just like this
‫so export, use cabins, of course,
‫the function keyword and then we need use query
‫and down in the end we just return all of this
‫so is loading error and the cabins.
‫All right and so here all we have to do
‫is to grab is loading and the cabins
‫from use cabins and then also import that
‫then we no longer need this stuff and there we go.
‫So it looks like it's working exactly in the same way
‫but of course this is a lot cleaner
‫so very straightforward what this one here is doing
‫and so now if for some reason we need this data
‫somewhere else, it's as easy as just grabbing this
‫and then for example, well let's say for some reason
‫we need this in the sidebar, so why not,
‫let's come to the sidebar and in there
‫we can just do this, so importing that
‫and then we can just log the cabins
‫to the console here for example
‫so let's say that we are on the homepage
‫and down here we have our data
‫so right away it gets into the cache
‫and so then whenever we come to the cabins page next
‫as we already know the data is then already there
‫so that's one of the huge, maybe even the biggest advantage
‫of React query, so really really great
‫and useful feature right there
‫and so with this custom hook we now made it
‫even easier to reuse the data in multiple places
‫but of course we don't need this here,
‫this was just to experiment around a bit more
‫and so let's close this and wrap up this lecture.