‫So, with our form all set up.
‫Let's now use it to actually create new cabins.
‫And just like before,
‫let's start by creating
‫that function right here in our services.
‫So to interact with our supabase API.
‫And so this one, let's call it create cabin.
‫And this one, what it needs as an input,
‫as always is a new cabin object.
‫Okay, now let's come here, again.
‫And since we are already here
‫on this policies page,
‫let's again create a new policy.
‫So that for now, all users can create new cabins.
‫So select again, this first one here.
‫And then let's do one for insert.
‫So enable.
‫Or let's call it create.
‫It's a bit of a more traditional name.
‫And here, we need to then write some expression.
‫Let's just write, true, here.
‫Let's save it.
‫And since we are already here.
‫Let's immediately also create one,
‫for the last action, which is to update.
‫So enable update access for all users.
‫And then here, just write, true.
‫All right.
‫And again, later we will make
‫all of them here only possible
‫for authenticated users.
‫But anyway, now let's come
‫to our API docs, again.
‫Select all cabins, so that we can now
‫grab the code to create new cabins.
‫So, we could of course always read.
‫Also the documentation
‫of the super base library.
‫But it's of course a bit easier
‫to just grab it from here.
‫So let's copy that.
‫And paste that here.
‫So then also grab the same thing as here before.
‫So cabin could not be created,
‫in case there was some error.
‫So, here what's happening this time
‫is again that the cabins are selected.
‫But this time instead of deleting
‫or of just selecting, we will insert.
‫So here we need to,
‫basically pass in an array.
‫And then an object where we have some value
‫for all of the columns.
‫And in our case,
‫that is simply going to be the new cabin.
‫So, new cabin.
‫And the reason why this is going to work,
‫is that the fields.
‫So the field names that we have here,
‫are exactly the ones that we have in the table.
‫So we have the regular price.
‫And so that's this one with this name.
‫We have the discount.
‫So, right here, we have the description.
‫We have the image later on.
‫And yeah, the name also.
‫So this one right here.
‫And so, that's the reason why
‫then here, this data has exactly the shape
‫of the data that we need to pass in,
‫here into supabase,
‫when we want to create a new cabin.
‫All right, and so that's the reason
‫why here, all we need to do is to pass
‫in this object into the array.
‫But don't forget that array right there.
‫Okay.
‫So, we already have our function.
‫We have the role level security policy enabled.
‫So that's very important.
‫And so now we are ready, to use again a mutation.
‫So a React Query mutation.
‫So let's do that.
‫Maybe here at the very top.
‫And so, we will call again
‫use mutation because here,
‫we are going to change
‫of course, the cabin data.
‫And so whenever we change something,
‫just like the leading in the previous lecture.
‫Or creating a new role
‫like we are going to do now.
‫So this will then return us an object,
‫with the mutate function
‫and also the loading state.
‫And then here, remember,
‫we need to pass in the mutate function.
‫So mutation function.
‫And so this is going to be,
‫create cabin.
‫And again, it could also be like this.
‫So like new cabin.
‫And then call it, with that.
‫Like this.
‫But this is also not really necessary.
‫So it's exactly the same thing.
‫But anyway, now let's also immediately
‫declare the onSuccess handler.
‫And so here what's going to happen
‫is that we will again create a new toast.
‫So that's toast.success.
‫And then new cabin successfully created.
‫And then we need to again,
‫also invalidate all queries.
‫And the reason for that,
‫again is that so right after submitting the form.
‫And so right when the new cabin has been created.
‫So that it appears then in the UI.
‫So basically whenever this mutation here happens.
‫We will then want to invalidate
‫the cabin's Query again.
‫So that this component here,
‫will then basically re-fetch the cabin's data.
‫So, then when this state here changes.
‫It will again re-render this table.
‫So just looking at that again,
‫this cabin state here, is nothing magical.
‫I mean it is behind the scenes
‫going to be just React state in the end.
‫And so whenever some new data
‫is fetched by React Query,
‫whenever that state updates.
‫Then as always,
‫like we have been learning
‫throughout the entire course.
‫The component will re-render.
‫So, just wanted to make that crystal clear.
‫So that what happens
‫is not something completely magical.
‫But anyway, for that
‫we need to again get our Query client.
‫So use queryClient.
‫And then here,
‫let's do queryClient.invalidateQueries
‫where the Query key is again,
‫that array and then cabins.
‫And then, it's always a good idea
‫to handle errors.
‫And React Query makes this just so easy.
‫So here, let's then say toast.error
‫And then error.message.
‫Now okay, and so with this,
‫let's now then use the mutate function
‫and the is loading state.
‫So here it's actually really, really simple.
‫All we have to do is, to call mutate
‫with all data.
‫And that's actually gonna be it.
‫So for now, we will just assume
‫that we don't have any errors in the form.
‫So that no fields are empty.
‫And that all the data actually makes sense.
‫Now, one other thing
‫that we can do here on success,
‫is to also close the form
‫or well.
‫Actually we don't have that state variable here.
‫And of course we could pass this down
‫into this component.
‫But let's not do that.
‫Because this is just temporary anyway.
‫But what we can do is to also here
‫manually reset the form.
‫So right after the form has been submitted.
‫Let's also reset it.
‫So to empty all the fields.
‫And we can do that,
‫by getting here the reset function
‫also from use form.
‫So, then,
‫we need to move this up here.
‫Because we now want to use this function later.
‫Which is right here.
‫So again, also after the success,
‫we want to then just call the reset function.
‫Now, you might be wondering
‫why we are not simply doing all that
‫right here in the on submit handler.
‫Well, the reason for that
‫is that first of all,
‫here we are really only doing this
‫if the mutation was successful.
‫So only if really a new cabin has been added.
‫And really only after the fact.
‫Not immediately.
‫Which is what would happen here.
‫Also, it's really nice to keep all this codes
‫here, outside of the event handler.
‫So just encapsulated right here
‫where the mutation is already happening anyway.
‫Because this stuff is in a way
‫really related to that mutation.
‫And so we want to keep it here, really close.
‫And so then the onSubmit handler
‫is just really nice and clean.
‫All right.
‫And now let's use that is loading state
‫maybe just to disable this button.
‫So disabled, and then.
‫And well let's actually change it again here.
‫So the name.
‫So before we changed it to, is deleting,
‫here let's just change it to, is creating.
‫So is creating like this.
‫And with this, we should be good to go.
‫So let's reload here.
‫And so let's test this.
‫And the photo, we will leave empty.
‫And beautiful.
‫So that worked.
‫And it feels a bit like magic, doesn't it?
‫So this is now actually adding a real cabin
‫to a real database, on our server using an API.
‫And all using the power of two libraries, really.
‫So of React hook form.
‫But even more importantly,
‫of course, React Query.
‫Great.
‫Now what happens if we just try to submit this
‫without any validation?
‫So we could just click here,
‫and then, well apparently we get some error.
‫So what do we get here?
‫Invalid input syntax for something.
‫So something is wrong here on the server.
‫But, of course we shouldn't even allow
‫to submit this form if everything is empty here.
‫So maybe we need something here.
‫Maybe then it will work.
‫So, I just want to demonstrate to you.
‫Well, but yeah.
‫Apparently not.
‫So there's already some validation
‫happening here on the API I level.
‫But as I was saying, we want to prevent
‫from a form like this to even be submitted.
‫And we also want to really validate.
‫For example, if these here are numbers.
‫And so let's move on to the next video,
‫where we will learn
‫how to do that with React Hook form.