‫And now to finish, let's update each of
‫the settings value individually
‫by using a very nice, clever trick.
‫So, again, let's start by looking here,
‫at the update setting function, that we already have.
‫Now, first of all, notice how here,
‫we don't need to pass in the id.
‫And so the reason for that is, again,
‫that we will only update row number one.
‫And so that's exactly what we have right here.
‫And then the object that we need to pass in here
‫is simply an object with the column
‫that needs to be updated.
‫So with the field that needs to be updated.
‫So it doesn't have to be the complete new settings object.
‫Only the fields, or the columns, that we want to update.
‫So, actually, exactly the same as here, in the Cabins.
‫So yeah, right here.
‫We also don't have to pass in the entire newCabin.
‫All we need to pass in is the data
‫that has actually changed.
‫So here, it is the exact same thing.
‫Now, just like before,
‫we will again create a new Custom Hook
‫for updating these settings.
‫And since we already did a logic very similar to that,
‫let's just copy this file here.
‫So, yeah. This one right here, actually.
‫So right here.
‫And then let's rename this useEditSettings.
‫Okay. And then here, we just rename all of this.
‫So useEditSettings.
‫Then here, the data that we get is called auto-function,
‫actually is called editSetting.
‫And well, let's actually call all of this,
‫not settings, but just setting.
‫So just like this.
‫Because, here, what we're going to do
‫is to actually only update one setting value.
‫So change the file name there as well.
‫And then here, what we pass in,
‫is simply that updateSettings function
‫that we already have in our services.
‫So there, it's actually also called just updateSetting.
‫And while since we are talking about file names here,
‫or variable names, let's call this not edit, but update.
‫So update is actually the more correct name, I would say.
‫And now here, again, we run into that problem
‫where this has the same name as
‫the mutate function that we are renaming here.
‫So let's rename this here, again, as updateSettingApi.
‫So similar to what we did earlier.
‫And then here as well, of course.
‫And then useUpdateSetting here.
‫And also right here.
‫So I'm not sure why I called this edit earlier,
‫'cause this should, actually all of it,
‫be called update, and not edit.
‫So I guess we should do the same thing right here.
‫But, well, let's leave that for a minute.
‫So now we are working on this.
‫And so here, let's say "Setting successfully edited."
‫And then here, the query that we need to invalidate,
‫is, again, called settings.
‫Let's see if that is actually true.
‫And yeah. So the queryKey is "settings", not just setting.
‫And finally, here, let's then also call it isUpdating.
‫So updating, really, sounds a lot better than editing.
‫So it's the more official term
‫that is used in web development all the time.
‫So I think we can close this.
‫And now it's time to use that function right here.
‫So let's get all the values, isUpdating,
‫and updateSettings from useUpdateSettings.
‫So here, let's import this.
‫useUpdateSettings, like this.
‫And looks like this doesn't exist.
‫And, of course, it doesn't. It's just called setting.
‫At the same then, down here.
‫All right. So that is fixed.
‫And so, let's do the actual updating right now.
‫Getting a bit more space here.
‫And so, the way that we want to do this
‫is that whenever we click here,
‫then we write some new value.
‫And then as soon as we leave the field,
‫we want the updating to happen.
‫And so, we can do that with the onBlur event handler.
‫So we can do onBlur.
‫And then as always, we define our event handler function.
‫So let's actually create a function out here.
‫handleUpdate, which gets that event, and which also gets
‫the name of the field that should be updated.
‫So this one right here.
‫And so, in this way, we can basically just create
‫this one function, and then reuse it.
‫So let's define that here.
‫So handleUpdate. So it receives this.
‫And then we can start by getting the value from there.
‫So e.target.value, basically.
‫So let's log that to the console,
‫and see that this is actually working.
‫So let's say that we want to update
‫the breakfast price to, let's say 25.
‫And then as soon as we leave this,
‫well, then this should be logged.
‫Or actually, it doesn't,
‫because we only use the function here on the first one.
‫So let's set this one to 5.
‫And yeah, as we leave the field,
‫then the 5 gets logged there.
‫But now, of course, instead of logging,
‫we want to do the updating.
‫But first, if there is no value, then just return.
‫But otherwise, update the setting.
‫So only this.
‫And here, it's also then, only called updateSetting.
‫And so, here is where we need to pass in that object.
‫So the object should have the field name.
‫For example, minBookingLength, and the value.
‫So we already passed the name of the fields here.
‫And so let's accept that.
‫And then we can dynamically generate an object,
‫simply by passing that field name here.
‫And so then, that will be replaced with whatever we pass in.
‫And so here, then we get the value.
‫All right. And this should already be it.
‫So let's reload again.
‫And maybe, just to show it, let's do disabled=isUpdating.
‫All right. So let's set this to 5, then Blur.
‫And that seems to be working.
‫And so there we got our confirmation.
‫And then, after the update was successful,
‫the query here was invalidated,
‫meaning that the data was fetched again.
‫So that's why we still have this 5 right here.
‫So even if we go somewhere else and come back,
‫then the 5 is there.
‫And also right here, we should be able to,
‫now, see that updated value.
‫So that's still refreshing. But there it is.
‫And so, I think that this makes
‫for a really, really nice user interface.
‫So modern users now expect for things to work like this,
‫at least when we're just updating small values.
‫So instead of updating them here,
‫and then, in the end, clicking on some button.
‫So that works nicely on the Cabins.
‫But here, for small values like that,
‫again, users at this point
‫are basically expecting things to work
‫in that comfortable way.
‫All right. And now let's paste that here. Everywhere.
‫And then, all we need to do is to change, here,
‫the name of the field that we pass in.
‫So that's the beauty of this function right here.
‫So it's nicely reusable like this.
‫All right. So, now, our breakfast price
‫should be able to change.
‫That's beautiful.
‫So our job here is actually done.
‫Now if you want, you can go ahead
‫and change this here to useUpdateCabin.
‫And then change everything here from edit to update.
‫And also, in all the places where this custom hook is used.
‫But I'm not gonna waste some 5 or 10 minutes doing that.
‫And so I will just leave it like this.
‫But if you want, you can go ahead doing that,
‫and maybe that will help you also revisiting that code.
‫And by doing so, understanding it even better.
‫Okay. But anyway, with this,
‫we finished this section about React Query,
‫which, of course, doesn't mean that we won't use it again.
‫So basically, we will use
‫this really, really helpful library
‫throughout the rest of this project
‫to keep managing all this remote state.
‫And we will also explore even more advanced features of it
‫in one of the future sections.
‫But now, next up in the next section,
‫we will look at some really advanced React patterns
‫that will take you to the level of senior React developers.
‫So that's gonna be really, really exciting once again.
‫And so I hope to see you there very soon.