1
00:00:00,482 --> 00:00:03,254
‫And now to finish, let's update each of

2
00:00:03,254 --> 00:00:05,508
‫the settings value individually

3
00:00:05,508 --> 00:00:10,180
‫by using a very nice, clever trick.

4
00:00:10,180 --> 00:00:13,546
‫So, again, let's start by looking here,

5
00:00:13,546 --> 00:00:17,963
‫at the update setting function, that we already have.

6
00:00:17,963 --> 00:00:20,264
‫Now, first of all, notice how here,

7
00:00:20,264 --> 00:00:22,715
‫we don't need to pass in the id.

8
00:00:22,715 --> 00:00:25,431
‫And so the reason for that is, again,

9
00:00:25,431 --> 00:00:28,447
‫that we will only update row number one.

10
00:00:28,447 --> 00:00:31,923
‫And so that's exactly what we have right here.

11
00:00:31,923 --> 00:00:34,521
‫And then the object that we need to pass in here

12
00:00:34,521 --> 00:00:37,185
‫is simply an object with the column

13
00:00:37,185 --> 00:00:38,755
‫that needs to be updated.

14
00:00:38,755 --> 00:00:41,235
‫So with the field that needs to be updated.

15
00:00:41,235 --> 00:00:45,445
‫So it doesn't have to be the complete new settings object.

16
00:00:45,445 --> 00:00:49,963
‫Only the fields, or the columns, that we want to update.

17
00:00:49,963 --> 00:00:54,963
‫So, actually, exactly the same as here, in the Cabins.

18
00:00:55,365 --> 00:00:58,930
‫So yeah, right here.

19
00:00:58,930 --> 00:01:02,923
‫We also don't have to pass in the entire newCabin.

20
00:01:02,923 --> 00:01:05,228
‫All we need to pass in is the data

21
00:01:05,228 --> 00:01:07,177
‫that has actually changed.

22
00:01:07,177 --> 00:01:10,893
‫So here, it is the exact same thing.

23
00:01:12,248 --> 00:01:13,955
‫Now, just like before,

24
00:01:13,955 --> 00:01:17,273
‫we will again create a new Custom Hook

25
00:01:17,273 --> 00:01:19,204
‫for updating these settings.

26
00:01:19,204 --> 00:01:22,930
‫And since we already did a logic very similar to that,

27
00:01:22,930 --> 00:01:25,477
‫let's just copy this file here.

28
00:01:25,477 --> 00:01:30,015
‫So, yeah. This one right here, actually.

29
00:01:30,015 --> 00:01:32,113
‫So right here.

30
00:01:32,113 --> 00:01:36,527
‫And then let's rename this useEditSettings.

31
00:01:40,703 --> 00:01:44,078
‫Okay. And then here, we just rename all of this.

32
00:01:44,078 --> 00:01:46,547
‫So useEditSettings.

33
00:01:50,489 --> 00:01:55,489
‫Then here, the data that we get is called auto-function,

34
00:01:56,691 --> 00:02:00,013
‫actually is called editSetting.

35
00:02:01,277 --> 00:02:03,717
‫And well, let's actually call all of this,

36
00:02:03,717 --> 00:02:07,187
‫not settings, but just setting.

37
00:02:07,187 --> 00:02:08,399
‫So just like this.

38
00:02:08,399 --> 00:02:10,728
‫Because, here, what we're going to do

39
00:02:10,728 --> 00:02:15,472
‫is to actually only update one setting value.

40
00:02:15,472 --> 00:02:19,252
‫So change the file name there as well.

41
00:02:19,252 --> 00:02:21,160
‫And then here, what we pass in,

42
00:02:21,160 --> 00:02:25,529
‫is simply that updateSettings function

43
00:02:25,529 --> 00:02:28,187
‫that we already have in our services.

44
00:02:28,187 --> 00:02:33,187
‫So there, it's actually also called just updateSetting.

45
00:02:34,995 --> 00:02:39,497
‫And while since we are talking about file names here,

46
00:02:39,497 --> 00:02:44,497
‫or variable names, let's call this not edit, but update.

47
00:02:45,235 --> 00:02:50,235
‫So update is actually the more correct name, I would say.

48
00:02:51,281 --> 00:02:53,721
‫And now here, again, we run into that problem

49
00:02:53,721 --> 00:02:55,933
‫where this has the same name as

50
00:02:55,933 --> 00:03:00,557
‫the mutate function that we are renaming here.

51
00:03:00,557 --> 00:03:05,557
‫So let's rename this here, again, as updateSettingApi.

52
00:03:07,522 --> 00:03:10,552
‫So similar to what we did earlier.

53
00:03:10,552 --> 00:03:13,258
‫And then here as well, of course.

54
00:03:13,258 --> 00:03:16,297
‫And then useUpdateSetting here.

55
00:03:18,687 --> 00:03:20,648
‫And also right here.

56
00:03:20,648 --> 00:03:24,283
‫So I'm not sure why I called this edit earlier,

57
00:03:24,283 --> 00:03:26,989
‫'cause this should, actually all of it,

58
00:03:26,989 --> 00:03:31,033
‫be called update, and not edit.

59
00:03:31,033 --> 00:03:34,863
‫So I guess we should do the same thing right here.

60
00:03:35,972 --> 00:03:38,689
‫But, well, let's leave that for a minute.

61
00:03:38,689 --> 00:03:40,903
‫So now we are working on this.

62
00:03:40,903 --> 00:03:45,903
‫And so here, let's say "Setting successfully edited."

63
00:03:46,108 --> 00:03:50,217
‫And then here, the query that we need to invalidate,

64
00:03:50,217 --> 00:03:52,890
‫is, again, called settings.

65
00:03:52,890 --> 00:03:55,852
‫Let's see if that is actually true.

66
00:03:55,852 --> 00:04:00,450
‫And yeah. So the queryKey is "settings", not just setting.

67
00:04:00,450 --> 00:04:04,580
‫And finally, here, let's then also call it isUpdating.

68
00:04:08,977 --> 00:04:12,455
‫So updating, really, sounds a lot better than editing.

69
00:04:12,455 --> 00:04:14,863
‫So it's the more official term

70
00:04:14,863 --> 00:04:18,991
‫that is used in web development all the time.

71
00:04:18,991 --> 00:04:20,984
‫So I think we can close this.

72
00:04:20,984 --> 00:04:25,018
‫And now it's time to use that function right here.

73
00:04:25,018 --> 00:04:30,018
‫So let's get all the values, isUpdating,

74
00:04:32,937 --> 00:04:37,937
‫and updateSettings from useUpdateSettings.

75
00:04:49,388 --> 00:04:51,966
‫So here, let's import this.

76
00:04:51,966 --> 00:04:56,966
‫useUpdateSettings, like this.

77
00:04:57,191 --> 00:05:01,295
‫And looks like this doesn't exist.

78
00:05:01,295 --> 00:05:06,295
‫And, of course, it doesn't. It's just called setting.

79
00:05:10,026 --> 00:05:13,863
‫At the same then, down here.

80
00:05:15,218 --> 00:05:17,909
‫All right. So that is fixed.

81
00:05:17,909 --> 00:05:22,803
‫And so, let's do the actual updating right now.

82
00:05:24,035 --> 00:05:26,212
‫Getting a bit more space here.

83
00:05:26,212 --> 00:05:28,490
‫And so, the way that we want to do this

84
00:05:28,490 --> 00:05:30,481
‫is that whenever we click here,

85
00:05:30,481 --> 00:05:32,463
‫then we write some new value.

86
00:05:32,463 --> 00:05:34,945
‫And then as soon as we leave the field,

87
00:05:34,945 --> 00:05:37,442
‫we want the updating to happen.

88
00:05:37,442 --> 00:05:42,442
‫And so, we can do that with the onBlur event handler.

89
00:05:43,178 --> 00:05:44,763
‫So we can do onBlur.

90
00:05:46,467 --> 00:05:50,913
‫And then as always, we define our event handler function.

91
00:05:52,048 --> 00:05:55,650
‫So let's actually create a function out here.

92
00:05:55,650 --> 00:06:00,650
‫handleUpdate, which gets that event, and which also gets

93
00:06:02,500 --> 00:06:06,725
‫the name of the field that should be updated.

94
00:06:06,725 --> 00:06:09,215
‫So this one right here.

95
00:06:09,215 --> 00:06:12,205
‫And so, in this way, we can basically just create

96
00:06:12,205 --> 00:06:15,483
‫this one function, and then reuse it.

97
00:06:17,222 --> 00:06:19,443
‫So let's define that here.

98
00:06:20,690 --> 00:06:24,707
‫So handleUpdate. So it receives this.

99
00:06:27,693 --> 00:06:32,313
‫And then we can start by getting the value from there.

100
00:06:33,710 --> 00:06:38,207
‫So e.target.value, basically.

101
00:06:38,207 --> 00:06:41,166
‫So let's log that to the console,

102
00:06:41,166 --> 00:06:45,190
‫and see that this is actually working.

103
00:06:45,190 --> 00:06:47,189
‫So let's say that we want to update

104
00:06:47,189 --> 00:06:51,976
‫the breakfast price to, let's say 25.

105
00:06:51,976 --> 00:06:54,950
‫And then as soon as we leave this,

106
00:06:54,950 --> 00:06:57,459
‫well, then this should be logged.

107
00:06:57,459 --> 00:06:59,170
‫Or actually, it doesn't,

108
00:06:59,170 --> 00:07:03,210
‫because we only use the function here on the first one.

109
00:07:03,210 --> 00:07:05,167
‫So let's set this one to 5.

110
00:07:05,167 --> 00:07:08,008
‫And yeah, as we leave the field,

111
00:07:08,008 --> 00:07:11,215
‫then the 5 gets logged there.

112
00:07:11,215 --> 00:07:13,135
‫But now, of course, instead of logging,

113
00:07:13,135 --> 00:07:15,358
‫we want to do the updating.

114
00:07:15,358 --> 00:07:20,358
‫But first, if there is no value, then just return.

115
00:07:21,183 --> 00:07:25,977
‫But otherwise, update the setting.

116
00:07:25,977 --> 00:07:27,184
‫So only this.

117
00:07:27,184 --> 00:07:32,067
‫And here, it's also then, only called updateSetting.

118
00:07:32,067 --> 00:07:36,227
‫And so, here is where we need to pass in that object.

119
00:07:36,227 --> 00:07:39,166
‫So the object should have the field name.

120
00:07:39,166 --> 00:07:44,166
‫For example, minBookingLength, and the value.

121
00:07:44,276 --> 00:07:47,322
‫So we already passed the name of the fields here.

122
00:07:47,322 --> 00:07:49,560
‫And so let's accept that.

123
00:07:49,560 --> 00:07:53,283
‫And then we can dynamically generate an object,

124
00:07:53,283 --> 00:07:56,507
‫simply by passing that field name here.

125
00:07:56,507 --> 00:08:01,507
‫And so then, that will be replaced with whatever we pass in.

126
00:08:01,976 --> 00:08:05,763
‫And so here, then we get the value.

127
00:08:06,665 --> 00:08:11,247
‫All right. And this should already be it.

128
00:08:11,247 --> 00:08:14,219
‫So let's reload again.

129
00:08:14,219 --> 00:08:19,219
‫And maybe, just to show it, let's do disabled=isUpdating.

130
00:08:24,813 --> 00:08:29,201
‫All right. So let's set this to 5, then Blur.

131
00:08:29,201 --> 00:08:32,228
‫And that seems to be working.

132
00:08:32,228 --> 00:08:34,974
‫And so there we got our confirmation.

133
00:08:34,974 --> 00:08:38,144
‫And then, after the update was successful,

134
00:08:38,144 --> 00:08:40,483
‫the query here was invalidated,

135
00:08:40,483 --> 00:08:43,501
‫meaning that the data was fetched again.

136
00:08:43,501 --> 00:08:47,148
‫So that's why we still have this 5 right here.

137
00:08:47,148 --> 00:08:49,719
‫So even if we go somewhere else and come back,

138
00:08:49,719 --> 00:08:51,482
‫then the 5 is there.

139
00:08:51,482 --> 00:08:54,139
‫And also right here, we should be able to,

140
00:08:54,139 --> 00:08:56,911
‫now, see that updated value.

141
00:08:56,911 --> 00:09:01,911
‫So that's still refreshing. But there it is.

142
00:09:02,234 --> 00:09:04,202
‫And so, I think that this makes

143
00:09:04,202 --> 00:09:06,999
‫for a really, really nice user interface.

144
00:09:06,999 --> 00:09:11,224
‫So modern users now expect for things to work like this,

145
00:09:11,224 --> 00:09:15,084
‫at least when we're just updating small values.

146
00:09:15,084 --> 00:09:16,740
‫So instead of updating them here,

147
00:09:16,740 --> 00:09:19,738
‫and then, in the end, clicking on some button.

148
00:09:19,738 --> 00:09:21,740
‫So that works nicely on the Cabins.

149
00:09:21,740 --> 00:09:24,960
‫But here, for small values like that,

150
00:09:24,960 --> 00:09:27,472
‫again, users at this point

151
00:09:27,472 --> 00:09:30,401
‫are basically expecting things to work

152
00:09:30,401 --> 00:09:33,003
‫in that comfortable way.

153
00:09:34,185 --> 00:09:39,185
‫All right. And now let's paste that here. Everywhere.

154
00:09:41,426 --> 00:09:46,426
‫And then, all we need to do is to change, here,

155
00:09:47,637 --> 00:09:51,018
‫the name of the field that we pass in.

156
00:09:51,018 --> 00:09:53,722
‫So that's the beauty of this function right here.

157
00:09:53,722 --> 00:09:57,393
‫So it's nicely reusable like this.

158
00:10:00,138 --> 00:10:03,338
‫All right. So, now, our breakfast price

159
00:10:03,338 --> 00:10:05,403
‫should be able to change.

160
00:10:06,474 --> 00:10:09,548
‫That's beautiful.

161
00:10:09,548 --> 00:10:13,077
‫So our job here is actually done.

162
00:10:13,077 --> 00:10:15,300
‫Now if you want, you can go ahead

163
00:10:15,300 --> 00:10:19,002
‫and change this here to useUpdateCabin.

164
00:10:19,002 --> 00:10:22,428
‫And then change everything here from edit to update.

165
00:10:22,428 --> 00:10:26,467
‫And also, in all the places where this custom hook is used.

166
00:10:26,467 --> 00:10:30,246
‫But I'm not gonna waste some 5 or 10 minutes doing that.

167
00:10:30,246 --> 00:10:32,688
‫And so I will just leave it like this.

168
00:10:32,688 --> 00:10:35,217
‫But if you want, you can go ahead doing that,

169
00:10:35,217 --> 00:10:38,467
‫and maybe that will help you also revisiting that code.

170
00:10:38,467 --> 00:10:42,748
‫And by doing so, understanding it even better.

171
00:10:42,748 --> 00:10:45,479
‫Okay. But anyway, with this,

172
00:10:45,479 --> 00:10:48,420
‫we finished this section about React Query,

173
00:10:48,420 --> 00:10:52,407
‫which, of course, doesn't mean that we won't use it again.

174
00:10:52,407 --> 00:10:54,364
‫So basically, we will use

175
00:10:54,364 --> 00:10:56,470
‫this really, really helpful library

176
00:10:56,470 --> 00:10:58,526
‫throughout the rest of this project

177
00:10:58,526 --> 00:11:01,230
‫to keep managing all this remote state.

178
00:11:01,230 --> 00:11:05,283
‫And we will also explore even more advanced features of it

179
00:11:05,283 --> 00:11:07,260
‫in one of the future sections.

180
00:11:07,260 --> 00:11:10,062
‫But now, next up in the next section,

181
00:11:10,062 --> 00:11:13,779
‫we will look at some really advanced React patterns

182
00:11:13,779 --> 00:11:18,266
‫that will take you to the level of senior React developers.

183
00:11:18,266 --> 00:11:21,952
‫So that's gonna be really, really exciting once again.

184
00:11:21,952 --> 00:11:25,023
‫And so I hope to see you there very soon.