‫So now that we finished
‫the part about our cabins
‫let's focus our attention
‫on fetching or application settings using React Query.
‫And this time around
‫I actually already wrote the services for the Settings API.
‫So here we already have get settings.
‫So basically exactly the same code as before
‫where the only thing that changes
‫is that here we are reading from the settings table
‫and then we also have a function
‫for updating the settings
‫that will be necessary in the next lecture.
‫All right?
‫The only thing that we need to do
‫is to again,
‫and never forget this,
‫is to create some new RLS security policies.
‫So right down here in the settings
‫let's create a new policy.
‫Well actually we already have the one for selecting
‫but since we are here,
‫let's create a one for editing
‫that will be necessary in the next lecture.
‫So enable update access for all users.
‫Then here we need to fill in true
‫and review safety policy.
‫And here we go.
‫Now, let's also come to the actual table here.
‫And so remember how I mentioned earlier
‫that for the settings,
‫we will actually not create any more rows.
‫So we will only have this one row with the ID number one.
‫And so this is where the four settings are stored.
‫All right.
‫And so basically reading the settings
‫is just reading this one row from this table.
‫And so that's actually the reason
‫why here there is something different.
‫Cause here we then attach in the end single.
‫And what this does, as it says down here
‫is to take one single object instead of an entire array.
‫So that's what this one here does.
‫And if that didn't exist, that would also not be a problem.
‫We could just simply return data zero here.
‫So that would I think be exactly the same thing.
‫But anyway, now let's come to our settings features folder.
‫And once again, I already created actually the form here
‫and I'm using the form row that we created a bit earlier
‫and also the input field.
‫Because what we're going to do now
‫is to actually fetch that data
‫and then immediately place it here
‫in each of these input fields
‫so that then in the next lecture
‫we can basically very simply update them one by one.
‫So again, in this component, we now want to fetch that data.
‫So this one row right here.
‫And for that, we will again use React Query.
‫Now, we will not use it directly right here
‫but instead we will again create our custom hook.
‫So use settings dot js
‫and then export function, use settings.
‫And so this here
‫is where we will then actually use React Query.
‫So remember how we get back the is loading flag,
‫we get back an error.
‫And also the data itself,
‫which here let's rename it to settings.
‫And so that's going to be the result of calling use query.
‫And then here, remember,
‫we need to pass in one object
‫with the Query key and the Query function.
‫So Query key
‫and then it needs to be an array with some string in there.
‫So again, to uniquely identify this Query in our cache then.
‫And then also the Query function
‫which is just going to be get settings.
‫So again, this needs to be a function that returns a promise
‫or in other words, an asynchronous function.
‫And so all we need to do now is to return all of this stuff.
‫So is loading, error and settings.
‫And with this, we should already be finished.
‫So let's come here and then let's import that.
‫So is loading the error
‫which we're not really going to use here.
‫Let's just ignore that.
‫And then the data itself.
‫So settings from use settings
‫And then let's grab that here,
‫just like this.
‫Now of course, we now also need to actually
‫include this component here in our page.
‫So right here in the settings page
‫let's simply place that inside a row.
‫So let's use that row component
‫that we have created earlier
‫and then here the update settings form, just like this.
‫And there we go.
‫And now all we have to do is to place that data
‫that we just received
‫here as the default value of these four inputs.
‫So nothing easier than that.
‫Let's actually do multiple selections here.
‫So default value can be settings
‫or let's actually destructure the value out of the settings.
‫But then here, let's already write min booking length.
‫So now it's complaining that this doesn't exist.
‫And so let's destructure it here.
‫So let's do it all in one go.
‫So we have the min booking length
‫I believe we also have max booking length.
‫Let's check that.
‫Yeah, then we have max guests per booking
‫and the breakfast price.
‫So I like to just copy paste.
‫Well, that doesn't really work, so let's write it anyway
‫per booking and the breakfast price.
‫So here, then that's max booking length.
‫Here we have max guest per booking.
‫And finally the breakfast price.
‫And so let's reload this.
‫And we have a bug.
‫And the reason for that is I believe, yeah,
‫cannot read properties of undefined.
‫So right here in the beginning
‫this data does actually not exist.
‫So it is still undefined.
‫So we can then not really do this
‫because settings, as I just said, is undefined.
‫But we can do a hack around this
‫by basically setting the settings here
‫to an empty array or an empty object here initially.
‫And so then we will try to get these four
‫from the empty object.
‫And so then they're undefined, which is no problem.
‫So notice how in the beginning they were actually empty
‫and then these values got populated in there.
‫And so let's actually also display a loading spinner there.
‫So in case that the values haven't arrived yet.
‫So if is loading, then return or front the spinner.
‫All right, reload.
‫There it is.
‫And there are our settings.
‫And so in the next lecture
‫let's then add the feature
‫where we can edit each of these values here
‫one by one in a very convenient way.