1 00:00:00,021 --> 00:00:02,880 ‫So now that we finished 2 00:00:02,880 --> 00:00:05,340 ‫the part about our cabins 3 00:00:05,340 --> 00:00:07,140 ‫let's focus our attention 4 00:00:07,140 --> 00:00:11,763 ‫on fetching or application settings using React Query. 5 00:00:13,290 --> 00:00:14,790 ‫And this time around 6 00:00:14,790 --> 00:00:19,790 ‫I actually already wrote the services for the Settings API. 7 00:00:20,250 --> 00:00:22,920 ‫So here we already have get settings. 8 00:00:22,920 --> 00:00:25,860 ‫So basically exactly the same code as before 9 00:00:25,860 --> 00:00:27,660 ‫where the only thing that changes 10 00:00:27,660 --> 00:00:30,960 ‫is that here we are reading from the settings table 11 00:00:30,960 --> 00:00:32,520 ‫and then we also have a function 12 00:00:32,520 --> 00:00:34,350 ‫for updating the settings 13 00:00:34,350 --> 00:00:37,173 ‫that will be necessary in the next lecture. 14 00:00:38,250 --> 00:00:39,360 ‫All right? 15 00:00:39,360 --> 00:00:41,160 ‫The only thing that we need to do 16 00:00:41,160 --> 00:00:42,570 ‫is to again, 17 00:00:42,570 --> 00:00:44,070 ‫and never forget this, 18 00:00:44,070 --> 00:00:49,070 ‫is to create some new RLS security policies. 19 00:00:50,250 --> 00:00:53,730 ‫So right down here in the settings 20 00:00:53,730 --> 00:00:56,520 ‫let's create a new policy. 21 00:00:56,520 --> 00:01:00,000 ‫Well actually we already have the one for selecting 22 00:01:00,000 --> 00:01:01,590 ‫but since we are here, 23 00:01:01,590 --> 00:01:03,990 ‫let's create a one for editing 24 00:01:03,990 --> 00:01:07,380 ‫that will be necessary in the next lecture. 25 00:01:07,380 --> 00:01:12,270 ‫So enable update access for all users. 26 00:01:12,270 --> 00:01:13,920 ‫Then here we need to fill in true 27 00:01:15,450 --> 00:01:18,603 ‫and review safety policy. 28 00:01:21,960 --> 00:01:23,343 ‫And here we go. 29 00:01:24,690 --> 00:01:28,020 ‫Now, let's also come to the actual table here. 30 00:01:28,020 --> 00:01:30,390 ‫And so remember how I mentioned earlier 31 00:01:30,390 --> 00:01:31,590 ‫that for the settings, 32 00:01:31,590 --> 00:01:34,800 ‫we will actually not create any more rows. 33 00:01:34,800 --> 00:01:39,270 ‫So we will only have this one row with the ID number one. 34 00:01:39,270 --> 00:01:42,273 ‫And so this is where the four settings are stored. 35 00:01:43,800 --> 00:01:44,633 ‫All right. 36 00:01:44,633 --> 00:01:46,440 ‫And so basically reading the settings 37 00:01:46,440 --> 00:01:50,880 ‫is just reading this one row from this table. 38 00:01:50,880 --> 00:01:52,290 ‫And so that's actually the reason 39 00:01:52,290 --> 00:01:55,140 ‫why here there is something different. 40 00:01:55,140 --> 00:01:58,260 ‫Cause here we then attach in the end single. 41 00:01:58,260 --> 00:02:00,990 ‫And what this does, as it says down here 42 00:02:00,990 --> 00:02:05,430 ‫is to take one single object instead of an entire array. 43 00:02:05,430 --> 00:02:07,890 ‫So that's what this one here does. 44 00:02:07,890 --> 00:02:11,970 ‫And if that didn't exist, that would also not be a problem. 45 00:02:11,970 --> 00:02:16,920 ‫We could just simply return data zero here. 46 00:02:16,920 --> 00:02:21,270 ‫So that would I think be exactly the same thing. 47 00:02:21,270 --> 00:02:25,683 ‫But anyway, now let's come to our settings features folder. 48 00:02:26,790 --> 00:02:31,170 ‫And once again, I already created actually the form here 49 00:02:31,170 --> 00:02:34,410 ‫and I'm using the form row that we created a bit earlier 50 00:02:34,410 --> 00:02:36,570 ‫and also the input field. 51 00:02:36,570 --> 00:02:38,460 ‫Because what we're going to do now 52 00:02:38,460 --> 00:02:40,980 ‫is to actually fetch that data 53 00:02:40,980 --> 00:02:43,290 ‫and then immediately place it here 54 00:02:43,290 --> 00:02:45,570 ‫in each of these input fields 55 00:02:45,570 --> 00:02:47,340 ‫so that then in the next lecture 56 00:02:47,340 --> 00:02:51,063 ‫we can basically very simply update them one by one. 57 00:02:52,350 --> 00:02:56,790 ‫So again, in this component, we now want to fetch that data. 58 00:02:56,790 --> 00:02:58,800 ‫So this one row right here. 59 00:02:58,800 --> 00:03:02,310 ‫And for that, we will again use React Query. 60 00:03:02,310 --> 00:03:05,340 ‫Now, we will not use it directly right here 61 00:03:05,340 --> 00:03:09,360 ‫but instead we will again create our custom hook. 62 00:03:09,360 --> 00:03:13,770 ‫So use settings dot js 63 00:03:13,770 --> 00:03:18,770 ‫and then export function, use settings. 64 00:03:18,930 --> 00:03:20,040 ‫And so this here 65 00:03:20,040 --> 00:03:23,433 ‫is where we will then actually use React Query. 66 00:03:24,600 --> 00:03:29,600 ‫So remember how we get back the is loading flag, 67 00:03:29,820 --> 00:03:32,010 ‫we get back an error. 68 00:03:32,010 --> 00:03:34,080 ‫And also the data itself, 69 00:03:34,080 --> 00:03:37,380 ‫which here let's rename it to settings. 70 00:03:37,380 --> 00:03:42,303 ‫And so that's going to be the result of calling use query. 71 00:03:43,320 --> 00:03:45,180 ‫And then here, remember, 72 00:03:45,180 --> 00:03:47,220 ‫we need to pass in one object 73 00:03:47,220 --> 00:03:50,013 ‫with the Query key and the Query function. 74 00:03:51,090 --> 00:03:53,790 ‫So Query key 75 00:03:53,790 --> 00:03:57,513 ‫and then it needs to be an array with some string in there. 76 00:03:59,070 --> 00:04:04,070 ‫So again, to uniquely identify this Query in our cache then. 77 00:04:04,110 --> 00:04:06,960 ‫And then also the Query function 78 00:04:06,960 --> 00:04:11,960 ‫which is just going to be get settings. 79 00:04:12,060 --> 00:04:16,830 ‫So again, this needs to be a function that returns a promise 80 00:04:16,830 --> 00:04:20,160 ‫or in other words, an asynchronous function. 81 00:04:20,160 --> 00:04:24,780 ‫And so all we need to do now is to return all of this stuff. 82 00:04:24,780 --> 00:04:28,983 ‫So is loading, error and settings. 83 00:04:30,840 --> 00:04:33,633 ‫And with this, we should already be finished. 84 00:04:34,620 --> 00:04:39,420 ‫So let's come here and then let's import that. 85 00:04:39,420 --> 00:04:43,980 ‫So is loading the error 86 00:04:43,980 --> 00:04:46,500 ‫which we're not really going to use here. 87 00:04:46,500 --> 00:04:47,970 ‫Let's just ignore that. 88 00:04:47,970 --> 00:04:49,773 ‫And then the data itself. 89 00:04:50,790 --> 00:04:54,610 ‫So settings from use settings 90 00:05:00,510 --> 00:05:04,623 ‫And then let's grab that here, 91 00:05:08,940 --> 00:05:10,083 ‫just like this. 92 00:05:12,780 --> 00:05:15,240 ‫Now of course, we now also need to actually 93 00:05:15,240 --> 00:05:18,573 ‫include this component here in our page. 94 00:05:19,800 --> 00:05:22,290 ‫So right here in the settings page 95 00:05:22,290 --> 00:05:25,533 ‫let's simply place that inside a row. 96 00:05:27,090 --> 00:05:30,663 ‫So let's use that row component 97 00:05:30,663 --> 00:05:32,890 ‫that we have created earlier 98 00:05:36,389 --> 00:05:40,827 ‫and then here the update settings form, just like this. 99 00:05:44,430 --> 00:05:46,290 ‫And there we go. 100 00:05:46,290 --> 00:05:48,960 ‫And now all we have to do is to place that data 101 00:05:48,960 --> 00:05:50,490 ‫that we just received 102 00:05:50,490 --> 00:05:54,063 ‫here as the default value of these four inputs. 103 00:05:56,040 --> 00:05:58,860 ‫So nothing easier than that. 104 00:05:58,860 --> 00:06:01,833 ‫Let's actually do multiple selections here. 105 00:06:04,290 --> 00:06:07,890 ‫So default value can be settings 106 00:06:07,890 --> 00:06:12,180 ‫or let's actually destructure the value out of the settings. 107 00:06:12,180 --> 00:06:17,180 ‫But then here, let's already write min booking length. 108 00:06:19,740 --> 00:06:22,680 ‫So now it's complaining that this doesn't exist. 109 00:06:22,680 --> 00:06:24,930 ‫And so let's destructure it here. 110 00:06:24,930 --> 00:06:26,733 ‫So let's do it all in one go. 111 00:06:27,720 --> 00:06:30,280 ‫So we have the min booking length 112 00:06:31,680 --> 00:06:34,773 ‫I believe we also have max booking length. 113 00:06:35,820 --> 00:06:37,353 ‫Let's check that. 114 00:06:39,060 --> 00:06:41,940 ‫Yeah, then we have max guests per booking 115 00:06:41,940 --> 00:06:44,163 ‫and the breakfast price. 116 00:06:46,320 --> 00:06:48,213 ‫So I like to just copy paste. 117 00:06:49,590 --> 00:06:53,890 ‫Well, that doesn't really work, so let's write it anyway 118 00:06:54,900 --> 00:06:59,537 ‫per booking and the breakfast price. 119 00:07:02,400 --> 00:07:06,203 ‫So here, then that's max booking length. 120 00:07:08,580 --> 00:07:12,900 ‫Here we have max guest per booking. 121 00:07:12,900 --> 00:07:17,663 ‫And finally the breakfast price. 122 00:07:18,690 --> 00:07:22,833 ‫And so let's reload this. 123 00:07:24,150 --> 00:07:26,760 ‫And we have a bug. 124 00:07:26,760 --> 00:07:30,000 ‫And the reason for that is I believe, yeah, 125 00:07:30,000 --> 00:07:32,523 ‫cannot read properties of undefined. 126 00:07:33,420 --> 00:07:35,130 ‫So right here in the beginning 127 00:07:35,130 --> 00:07:37,590 ‫this data does actually not exist. 128 00:07:37,590 --> 00:07:39,540 ‫So it is still undefined. 129 00:07:39,540 --> 00:07:41,640 ‫So we can then not really do this 130 00:07:41,640 --> 00:07:45,570 ‫because settings, as I just said, is undefined. 131 00:07:45,570 --> 00:07:48,480 ‫But we can do a hack around this 132 00:07:48,480 --> 00:07:50,880 ‫by basically setting the settings here 133 00:07:50,880 --> 00:07:54,843 ‫to an empty array or an empty object here initially. 134 00:07:55,680 --> 00:07:58,350 ‫And so then we will try to get these four 135 00:07:58,350 --> 00:08:00,030 ‫from the empty object. 136 00:08:00,030 --> 00:08:03,390 ‫And so then they're undefined, which is no problem. 137 00:08:03,390 --> 00:08:07,590 ‫So notice how in the beginning they were actually empty 138 00:08:07,590 --> 00:08:10,293 ‫and then these values got populated in there. 139 00:08:12,660 --> 00:08:17,660 ‫And so let's actually also display a loading spinner there. 140 00:08:17,970 --> 00:08:21,180 ‫So in case that the values haven't arrived yet. 141 00:08:21,180 --> 00:08:26,180 ‫So if is loading, then return or front the spinner. 142 00:08:30,000 --> 00:08:31,680 ‫All right, reload. 143 00:08:31,680 --> 00:08:32,790 ‫There it is. 144 00:08:32,790 --> 00:08:35,190 ‫And there are our settings. 145 00:08:35,190 --> 00:08:37,110 ‫And so in the next lecture 146 00:08:37,110 --> 00:08:38,760 ‫let's then add the feature 147 00:08:38,760 --> 00:08:41,430 ‫where we can edit each of these values here 148 00:08:41,430 --> 00:08:44,613 ‫one by one in a very convenient way.