1
00:00:01,110 --> 00:00:03,570
‫So, with our form all set up.

2
00:00:03,570 --> 00:00:07,383
‫Let's now use it to actually create new cabins.

3
00:00:08,730 --> 00:00:10,260
‫And just like before,

4
00:00:10,260 --> 00:00:12,220
‫let's start by creating

5
00:00:13,110 --> 00:00:15,693
‫that function right here in our services.

6
00:00:17,820 --> 00:00:22,230
‫So to interact with our supabase API.

7
00:00:22,230 --> 00:00:26,730
‫And so this one, let's call it create cabin.

8
00:00:26,730 --> 00:00:28,920
‫And this one, what it needs as an input,

9
00:00:28,920 --> 00:00:33,033
‫as always is a new cabin object.

10
00:00:34,470 --> 00:00:38,313
‫Okay, now let's come here, again.

11
00:00:39,210 --> 00:00:40,710
‫And since we are already here

12
00:00:40,710 --> 00:00:42,420
‫on this policies page,

13
00:00:42,420 --> 00:00:44,820
‫let's again create a new policy.

14
00:00:44,820 --> 00:00:49,293
‫So that for now, all users can create new cabins.

15
00:00:50,340 --> 00:00:52,713
‫So select again, this first one here.

16
00:00:54,420 --> 00:00:58,320
‫And then let's do one for insert.

17
00:00:58,320 --> 00:00:59,343
‫So enable.

18
00:01:01,097 --> 00:01:02,520
‫Or let's call it create.

19
00:01:02,520 --> 00:01:04,443
‫It's a bit of a more traditional name.

20
00:01:05,970 --> 00:01:09,870
‫And here, we need to then write some expression.

21
00:01:09,870 --> 00:01:11,913
‫Let's just write, true, here.

22
00:01:14,220 --> 00:01:15,330
‫Let's save it.

23
00:01:15,330 --> 00:01:17,040
‫And since we are already here.

24
00:01:17,040 --> 00:01:19,443
‫Let's immediately also create one,

25
00:01:20,310 --> 00:01:24,123
‫for the last action, which is to update.

26
00:01:26,160 --> 00:01:30,150
‫So enable update access for all users.

27
00:01:30,150 --> 00:01:32,313
‫And then here, just write, true.

28
00:01:35,100 --> 00:01:35,943
‫All right.

29
00:01:37,140 --> 00:01:39,840
‫And again, later we will make

30
00:01:39,840 --> 00:01:41,610
‫all of them here only possible

31
00:01:41,610 --> 00:01:44,280
‫for authenticated users.

32
00:01:44,280 --> 00:01:45,720
‫But anyway, now let's come

33
00:01:45,720 --> 00:01:47,670
‫to our API docs, again.

34
00:01:47,670 --> 00:01:50,310
‫Select all cabins, so that we can now

35
00:01:50,310 --> 00:01:54,510
‫grab the code to create new cabins.

36
00:01:54,510 --> 00:01:56,640
‫So, we could of course always read.

37
00:01:56,640 --> 00:01:58,150
‫Also the documentation

38
00:02:00,308 --> 00:02:02,400
‫of the super base library.

39
00:02:02,400 --> 00:02:04,380
‫But it's of course a bit easier

40
00:02:04,380 --> 00:02:06,003
‫to just grab it from here.

41
00:02:07,230 --> 00:02:08,763
‫So let's copy that.

42
00:02:11,610 --> 00:02:14,043
‫And paste that here.

43
00:02:15,210 --> 00:02:18,903
‫So then also grab the same thing as here before.

44
00:02:22,530 --> 00:02:25,920
‫So cabin could not be created,

45
00:02:25,920 --> 00:02:27,813
‫in case there was some error.

46
00:02:29,880 --> 00:02:32,340
‫So, here what's happening this time

47
00:02:32,340 --> 00:02:35,040
‫is again that the cabins are selected.

48
00:02:35,040 --> 00:02:37,590
‫But this time instead of deleting

49
00:02:37,590 --> 00:02:41,520
‫or of just selecting, we will insert.

50
00:02:41,520 --> 00:02:43,260
‫So here we need to,

51
00:02:43,260 --> 00:02:45,000
‫basically pass in an array.

52
00:02:45,000 --> 00:02:47,400
‫And then an object where we have some value

53
00:02:47,400 --> 00:02:49,110
‫for all of the columns.

54
00:02:49,110 --> 00:02:50,340
‫And in our case,

55
00:02:50,340 --> 00:02:52,953
‫that is simply going to be the new cabin.

56
00:02:55,020 --> 00:02:57,060
‫So, new cabin.

57
00:02:57,060 --> 00:02:59,730
‫And the reason why this is going to work,

58
00:02:59,730 --> 00:03:02,400
‫is that the fields.

59
00:03:02,400 --> 00:03:04,320
‫So the field names that we have here,

60
00:03:04,320 --> 00:03:08,220
‫are exactly the ones that we have in the table.

61
00:03:08,220 --> 00:03:09,873
‫So we have the regular price.

62
00:03:11,640 --> 00:03:14,070
‫And so that's this one with this name.

63
00:03:14,070 --> 00:03:15,780
‫We have the discount.

64
00:03:15,780 --> 00:03:18,363
‫So, right here, we have the description.

65
00:03:20,220 --> 00:03:22,713
‫We have the image later on.

66
00:03:23,640 --> 00:03:26,193
‫And yeah, the name also.

67
00:03:27,480 --> 00:03:29,130
‫So this one right here.

68
00:03:29,130 --> 00:03:30,690
‫And so, that's the reason why

69
00:03:30,690 --> 00:03:33,900
‫then here, this data has exactly the shape

70
00:03:33,900 --> 00:03:36,270
‫of the data that we need to pass in,

71
00:03:36,270 --> 00:03:38,010
‫here into supabase,

72
00:03:38,010 --> 00:03:40,233
‫when we want to create a new cabin.

73
00:03:41,730 --> 00:03:43,350
‫All right, and so that's the reason

74
00:03:43,350 --> 00:03:45,540
‫why here, all we need to do is to pass

75
00:03:45,540 --> 00:03:47,910
‫in this object into the array.

76
00:03:47,910 --> 00:03:50,703
‫But don't forget that array right there.

77
00:03:52,290 --> 00:03:53,430
‫Okay.

78
00:03:53,430 --> 00:03:55,590
‫So, we already have our function.

79
00:03:55,590 --> 00:04:00,240
‫We have the role level security policy enabled.

80
00:04:00,240 --> 00:04:01,920
‫So that's very important.

81
00:04:01,920 --> 00:04:05,850
‫And so now we are ready, to use again a mutation.

82
00:04:05,850 --> 00:04:08,373
‫So a React Query mutation.

83
00:04:09,540 --> 00:04:11,280
‫So let's do that.

84
00:04:11,280 --> 00:04:12,723
‫Maybe here at the very top.

85
00:04:15,660 --> 00:04:18,670
‫And so, we will call again

86
00:04:19,800 --> 00:04:23,010
‫use mutation because here,

87
00:04:23,010 --> 00:04:24,450
‫we are going to change

88
00:04:24,450 --> 00:04:26,220
‫of course, the cabin data.

89
00:04:26,220 --> 00:04:28,080
‫And so whenever we change something,

90
00:04:28,080 --> 00:04:30,900
‫just like the leading in the previous lecture.

91
00:04:30,900 --> 00:04:32,550
‫Or creating a new role

92
00:04:32,550 --> 00:04:34,950
‫like we are going to do now.

93
00:04:34,950 --> 00:04:37,050
‫So this will then return us an object,

94
00:04:37,050 --> 00:04:39,270
‫with the mutate function

95
00:04:39,270 --> 00:04:42,033
‫and also the loading state.

96
00:04:43,200 --> 00:04:44,490
‫And then here, remember,

97
00:04:44,490 --> 00:04:47,613
‫we need to pass in the mutate function.

98
00:04:48,810 --> 00:04:51,360
‫So mutation function.

99
00:04:51,360 --> 00:04:53,370
‫And so this is going to be,

100
00:04:53,370 --> 00:04:56,043
‫create cabin.

101
00:04:57,660 --> 00:05:00,240
‫And again, it could also be like this.

102
00:05:00,240 --> 00:05:01,743
‫So like new cabin.

103
00:05:02,580 --> 00:05:05,193
‫And then call it, with that.

104
00:05:06,330 --> 00:05:07,680
‫Like this.

105
00:05:07,680 --> 00:05:09,750
‫But this is also not really necessary.

106
00:05:09,750 --> 00:05:11,403
‫So it's exactly the same thing.

107
00:05:12,840 --> 00:05:15,540
‫But anyway, now let's also immediately

108
00:05:15,540 --> 00:05:18,063
‫declare the onSuccess handler.

109
00:05:19,410 --> 00:05:21,660
‫And so here what's going to happen

110
00:05:21,660 --> 00:05:24,723
‫is that we will again create a new toast.

111
00:05:26,940 --> 00:05:30,573
‫So that's toast.success.

112
00:05:31,800 --> 00:05:36,460
‫And then new cabin successfully created.

113
00:05:38,700 --> 00:05:40,200
‫And then we need to again,

114
00:05:40,200 --> 00:05:42,657
‫also invalidate all queries.

115
00:05:42,657 --> 00:05:44,130
‫And the reason for that,

116
00:05:44,130 --> 00:05:47,610
‫again is that so right after submitting the form.

117
00:05:47,610 --> 00:05:51,840
‫And so right when the new cabin has been created.

118
00:05:51,840 --> 00:05:53,943
‫So that it appears then in the UI.

119
00:05:55,980 --> 00:05:58,950
‫So basically whenever this mutation here happens.

120
00:05:58,950 --> 00:06:00,840
‫We will then want to invalidate

121
00:06:00,840 --> 00:06:02,610
‫the cabin's Query again.

122
00:06:02,610 --> 00:06:05,460
‫So that this component here,

123
00:06:05,460 --> 00:06:09,900
‫will then basically re-fetch the cabin's data.

124
00:06:09,900 --> 00:06:11,850
‫So, then when this state here changes.

125
00:06:11,850 --> 00:06:14,523
‫It will again re-render this table.

126
00:06:15,930 --> 00:06:17,880
‫So just looking at that again,

127
00:06:17,880 --> 00:06:21,480
‫this cabin state here, is nothing magical.

128
00:06:21,480 --> 00:06:23,370
‫I mean it is behind the scenes

129
00:06:23,370 --> 00:06:26,610
‫going to be just React state in the end.

130
00:06:26,610 --> 00:06:28,620
‫And so whenever some new data

131
00:06:28,620 --> 00:06:30,660
‫is fetched by React Query,

132
00:06:30,660 --> 00:06:32,760
‫whenever that state updates.

133
00:06:32,760 --> 00:06:33,990
‫Then as always,

134
00:06:33,990 --> 00:06:35,400
‫like we have been learning

135
00:06:35,400 --> 00:06:36,990
‫throughout the entire course.

136
00:06:36,990 --> 00:06:39,870
‫The component will re-render.

137
00:06:39,870 --> 00:06:42,420
‫So, just wanted to make that crystal clear.

138
00:06:42,420 --> 00:06:44,370
‫So that what happens

139
00:06:44,370 --> 00:06:47,790
‫is not something completely magical.

140
00:06:47,790 --> 00:06:49,230
‫But anyway, for that

141
00:06:49,230 --> 00:06:51,813
‫we need to again get our Query client.

142
00:06:56,580 --> 00:06:58,443
‫So use queryClient.

143
00:06:59,730 --> 00:07:00,840
‫And then here,

144
00:07:00,840 --> 00:07:04,690
‫let's do queryClient.invalidateQueries

145
00:07:05,760 --> 00:07:08,610
‫where the Query key is again,

146
00:07:08,610 --> 00:07:13,263
‫that array and then cabins.

147
00:07:14,190 --> 00:07:17,070
‫And then, it's always a good idea

148
00:07:17,070 --> 00:07:18,540
‫to handle errors.

149
00:07:18,540 --> 00:07:22,173
‫And React Query makes this just so easy.

150
00:07:26,520 --> 00:07:31,450
‫So here, let's then say toast.error

151
00:07:32,460 --> 00:07:35,343
‫And then error.message.

152
00:07:36,750 --> 00:07:39,600
‫Now okay, and so with this,

153
00:07:39,600 --> 00:07:42,420
‫let's now then use the mutate function

154
00:07:42,420 --> 00:07:44,493
‫and the is loading state.

155
00:07:45,540 --> 00:07:48,780
‫So here it's actually really, really simple.

156
00:07:48,780 --> 00:07:52,080
‫All we have to do is, to call mutate

157
00:07:52,080 --> 00:07:53,490
‫with all data.

158
00:07:53,490 --> 00:07:56,130
‫And that's actually gonna be it.

159
00:07:56,130 --> 00:07:58,440
‫So for now, we will just assume

160
00:07:58,440 --> 00:08:01,200
‫that we don't have any errors in the form.

161
00:08:01,200 --> 00:08:03,210
‫So that no fields are empty.

162
00:08:03,210 --> 00:08:06,003
‫And that all the data actually makes sense.

163
00:08:07,050 --> 00:08:07,920
‫Now, one other thing

164
00:08:07,920 --> 00:08:10,080
‫that we can do here on success,

165
00:08:10,080 --> 00:08:12,550
‫is to also close the form

166
00:08:13,590 --> 00:08:14,423
‫or well.

167
00:08:14,423 --> 00:08:16,950
‫Actually we don't have that state variable here.

168
00:08:16,950 --> 00:08:18,960
‫And of course we could pass this down

169
00:08:18,960 --> 00:08:20,310
‫into this component.

170
00:08:20,310 --> 00:08:21,510
‫But let's not do that.

171
00:08:21,510 --> 00:08:24,330
‫Because this is just temporary anyway.

172
00:08:24,330 --> 00:08:27,330
‫But what we can do is to also here

173
00:08:27,330 --> 00:08:29,610
‫manually reset the form.

174
00:08:29,610 --> 00:08:31,890
‫So right after the form has been submitted.

175
00:08:31,890 --> 00:08:33,660
‫Let's also reset it.

176
00:08:33,660 --> 00:08:35,610
‫So to empty all the fields.

177
00:08:35,610 --> 00:08:36,810
‫And we can do that,

178
00:08:36,810 --> 00:08:39,930
‫by getting here the reset function

179
00:08:39,930 --> 00:08:41,373
‫also from use form.

180
00:08:44,070 --> 00:08:46,383
‫So, then,

181
00:08:47,580 --> 00:08:49,590
‫we need to move this up here.

182
00:08:49,590 --> 00:08:53,370
‫Because we now want to use this function later.

183
00:08:53,370 --> 00:08:55,320
‫Which is right here.

184
00:08:55,320 --> 00:08:58,890
‫So again, also after the success,

185
00:08:58,890 --> 00:09:01,623
‫we want to then just call the reset function.

186
00:09:02,790 --> 00:09:04,080
‫Now, you might be wondering

187
00:09:04,080 --> 00:09:06,390
‫why we are not simply doing all that

188
00:09:06,390 --> 00:09:09,570
‫right here in the on submit handler.

189
00:09:09,570 --> 00:09:11,340
‫Well, the reason for that

190
00:09:11,340 --> 00:09:13,200
‫is that first of all,

191
00:09:13,200 --> 00:09:15,480
‫here we are really only doing this

192
00:09:15,480 --> 00:09:18,180
‫if the mutation was successful.

193
00:09:18,180 --> 00:09:21,480
‫So only if really a new cabin has been added.

194
00:09:21,480 --> 00:09:23,940
‫And really only after the fact.

195
00:09:23,940 --> 00:09:25,410
‫Not immediately.

196
00:09:25,410 --> 00:09:27,660
‫Which is what would happen here.

197
00:09:27,660 --> 00:09:30,540
‫Also, it's really nice to keep all this codes

198
00:09:30,540 --> 00:09:33,210
‫here, outside of the event handler.

199
00:09:33,210 --> 00:09:35,670
‫So just encapsulated right here

200
00:09:35,670 --> 00:09:38,670
‫where the mutation is already happening anyway.

201
00:09:38,670 --> 00:09:40,980
‫Because this stuff is in a way

202
00:09:40,980 --> 00:09:43,137
‫really related to that mutation.

203
00:09:43,137 --> 00:09:46,860
‫And so we want to keep it here, really close.

204
00:09:46,860 --> 00:09:48,810
‫And so then the onSubmit handler

205
00:09:48,810 --> 00:09:50,973
‫is just really nice and clean.

206
00:09:52,590 --> 00:09:53,670
‫All right.

207
00:09:53,670 --> 00:09:55,920
‫And now let's use that is loading state

208
00:09:55,920 --> 00:09:58,323
‫maybe just to disable this button.

209
00:10:00,570 --> 00:10:03,480
‫So disabled, and then.

210
00:10:03,480 --> 00:10:05,880
‫And well let's actually change it again here.

211
00:10:05,880 --> 00:10:07,470
‫So the name.

212
00:10:07,470 --> 00:10:10,410
‫So before we changed it to, is deleting,

213
00:10:10,410 --> 00:10:14,913
‫here let's just change it to, is creating.

214
00:10:19,170 --> 00:10:23,160
‫So is creating like this.

215
00:10:23,160 --> 00:10:26,520
‫And with this, we should be good to go.

216
00:10:26,520 --> 00:10:27,963
‫So let's reload here.

217
00:10:30,840 --> 00:10:32,493
‫And so let's test this.

218
00:10:39,150 --> 00:10:41,583
‫And the photo, we will leave empty.

219
00:10:42,930 --> 00:10:44,703
‫And beautiful.

220
00:10:45,600 --> 00:10:46,680
‫So that worked.

221
00:10:46,680 --> 00:10:50,280
‫And it feels a bit like magic, doesn't it?

222
00:10:50,280 --> 00:10:53,370
‫So this is now actually adding a real cabin

223
00:10:53,370 --> 00:10:57,210
‫to a real database, on our server using an API.

224
00:10:57,210 --> 00:11:01,650
‫And all using the power of two libraries, really.

225
00:11:01,650 --> 00:11:03,360
‫So of React hook form.

226
00:11:03,360 --> 00:11:05,010
‫But even more importantly,

227
00:11:05,010 --> 00:11:06,903
‫of course, React Query.

228
00:11:08,670 --> 00:11:09,930
‫Great.

229
00:11:09,930 --> 00:11:13,320
‫Now what happens if we just try to submit this

230
00:11:13,320 --> 00:11:15,390
‫without any validation?

231
00:11:15,390 --> 00:11:18,600
‫So we could just click here,

232
00:11:18,600 --> 00:11:21,780
‫and then, well apparently we get some error.

233
00:11:21,780 --> 00:11:23,283
‫So what do we get here?

234
00:11:25,080 --> 00:11:28,440
‫Invalid input syntax for something.

235
00:11:28,440 --> 00:11:30,660
‫So something is wrong here on the server.

236
00:11:30,660 --> 00:11:32,640
‫But, of course we shouldn't even allow

237
00:11:32,640 --> 00:11:36,630
‫to submit this form if everything is empty here.

238
00:11:36,630 --> 00:11:38,673
‫So maybe we need something here.

239
00:11:40,500 --> 00:11:42,063
‫Maybe then it will work.

240
00:11:43,320 --> 00:11:45,423
‫So, I just want to demonstrate to you.

241
00:11:46,830 --> 00:11:48,240
‫Well, but yeah.

242
00:11:48,240 --> 00:11:49,800
‫Apparently not.

243
00:11:49,800 --> 00:11:51,540
‫So there's already some validation

244
00:11:51,540 --> 00:11:54,150
‫happening here on the API I level.

245
00:11:54,150 --> 00:11:56,220
‫But as I was saying, we want to prevent

246
00:11:56,220 --> 00:11:59,370
‫from a form like this to even be submitted.

247
00:11:59,370 --> 00:12:01,380
‫And we also want to really validate.

248
00:12:01,380 --> 00:12:04,140
‫For example, if these here are numbers.

249
00:12:04,140 --> 00:12:06,660
‫And so let's move on to the next video,

250
00:12:06,660 --> 00:12:07,800
‫where we will learn

251
00:12:07,800 --> 00:12:10,413
‫how to do that with React Hook form.