1
00:00:01,140 --> 00:00:04,590
‫Now it's time to also edit a cabin.

2
00:00:04,590 --> 00:00:07,803
‫And so for that we are going to reuse the form

3
00:00:07,803 --> 00:00:09,810
‫that we have been building.

4
00:00:09,810 --> 00:00:13,620
‫So this is gonna be quite an advanced lecture here,

5
00:00:13,620 --> 00:00:15,210
‫but we can do it.

6
00:00:15,210 --> 00:00:16,773
‫So let's get started.

7
00:00:18,540 --> 00:00:22,590
‫And, first of all, let's add an edit button here

8
00:00:22,590 --> 00:00:25,050
‫to each of these rows.

9
00:00:25,050 --> 00:00:28,980
‫Maybe let's actually delete some of them here as well.

10
00:00:28,980 --> 00:00:31,740
‫So we don't need all of these here.

11
00:00:31,740 --> 00:00:34,170
‫Maybe we keep three.

12
00:00:34,170 --> 00:00:37,590
‫And so now in each cabin row,

13
00:00:37,590 --> 00:00:41,400
‫again, here let's actually add a div

14
00:00:41,400 --> 00:00:45,573
‫so that we can then add another button in there.

15
00:00:52,200 --> 00:00:54,360
‫Yeah, so just like this.

16
00:00:54,360 --> 00:00:57,540
‫And so here what we are going to do

17
00:00:57,540 --> 00:01:01,230
‫is to again temporarily create a state variable,

18
00:01:01,230 --> 00:01:04,320
‫which, if true, will display the form

19
00:01:04,320 --> 00:01:06,483
‫right here below this row.

20
00:01:07,470 --> 00:01:10,290
‫So later on we will have this in a modal window,

21
00:01:10,290 --> 00:01:12,783
‫but, for now, let's just do it like this.

22
00:01:16,287 --> 00:01:18,620
‫So showForm and setShowForm,

23
00:01:21,994 --> 00:01:23,327
‫useState, false.

24
00:01:27,840 --> 00:01:30,480
‫So what this button will do

25
00:01:30,480 --> 00:01:34,473
‫is to only toggle that state variable.

26
00:01:44,610 --> 00:01:47,550
‫And so if that state variable is true,

27
00:01:47,550 --> 00:01:51,570
‫we want to basically display that form

28
00:01:51,570 --> 00:01:54,150
‫outside of this table row.

29
00:01:54,150 --> 00:01:56,013
‫So basically right here.

30
00:01:57,510 --> 00:01:59,793
‫So if showForm,

31
00:02:01,783 --> 00:02:03,783
‫and here we want to import that.

32
00:02:05,340 --> 00:02:09,660
‫Now here the autocompletion is not working

33
00:02:09,660 --> 00:02:14,100
‫because we will need to be inside this fragment,

34
00:02:14,100 --> 00:02:17,583
‫because otherwise we end up with two parent components.

35
00:02:18,690 --> 00:02:21,360
‫And so here we will then import

36
00:02:21,360 --> 00:02:23,723
‫and display CreatCabinForm.

37
00:02:25,200 --> 00:02:26,820
‫So let's try this.

38
00:02:26,820 --> 00:02:27,933
‫Close this one.

39
00:02:29,310 --> 00:02:33,000
‫And nice, so this looks decent,

40
00:02:33,000 --> 00:02:37,023
‫at least good enough for us to work with it for now.

41
00:02:37,980 --> 00:02:40,740
‫Now, okay, so now here we will need to,

42
00:02:40,740 --> 00:02:43,620
‫of course, pre-fill all these values

43
00:02:43,620 --> 00:02:46,590
‫with the data from the current cabin.

44
00:02:46,590 --> 00:02:49,440
‫So what this means is that we need to pass

45
00:02:49,440 --> 00:02:52,877
‫that data now into CreateCabinForm.

46
00:02:55,320 --> 00:02:59,373
‫So let's here add a new prop called cabinToEdit,

47
00:03:01,830 --> 00:03:04,830
‫or for editing or something like that.

48
00:03:04,830 --> 00:03:07,563
‫But I like cabinToEdit, it's a bit shorter.

49
00:03:08,670 --> 00:03:10,590
‫And so let's pass that in,

50
00:03:10,590 --> 00:03:14,310
‫and then, in our form, we will need to accept that.

51
00:03:14,310 --> 00:03:16,200
‫So here in the form

52
00:03:16,200 --> 00:03:19,500
‫we are now going to make a lot of changes.

53
00:03:19,500 --> 00:03:22,563
‫So let's actually first duplicate this file,

54
00:03:24,300 --> 00:03:27,120
‫but maybe let's first also clean it up a bit.

55
00:03:27,120 --> 00:03:29,703
‫So all the stuff here we no longer need,

56
00:03:30,990 --> 00:03:34,650
‫and neither do we need this,

57
00:03:34,650 --> 00:03:38,190
‫and let's also reorganize our inputs.

58
00:03:38,190 --> 00:03:42,450
‫So these external libraries should always be at the top.

59
00:03:42,450 --> 00:03:45,900
‫Then I like to have my components afterwards,

60
00:03:45,900 --> 00:03:47,583
‫and then some other stuff.

61
00:03:48,810 --> 00:03:52,233
‫Now, okay, so I just copied that.

62
00:03:53,550 --> 00:03:55,950
‫Let's call it version one,

63
00:03:55,950 --> 00:03:59,400
‫and now we will keep working on this one.

64
00:03:59,400 --> 00:04:01,600
‫So let's accept then cabinToEdit

65
00:04:04,200 --> 00:04:06,510
‫as a prop, and now here,

66
00:04:06,510 --> 00:04:09,933
‫let's get some values out of this object.

67
00:04:12,150 --> 00:04:14,220
‫So I want to grab the id,

68
00:04:14,220 --> 00:04:18,090
‫let's actually, to make this all as clear as possible,

69
00:04:18,090 --> 00:04:19,920
‫rename this id.

70
00:04:19,920 --> 00:04:21,377
‫So this will be the editId.

71
00:04:23,037 --> 00:04:24,990
‫And then, let's just grab

72
00:04:24,990 --> 00:04:29,403
‫all other values into editValue.

73
00:04:30,420 --> 00:04:34,293
‫And we are going to grab all this data from cabinToEdit.

74
00:04:35,640 --> 00:04:38,970
‫Now, sometimes this value will actually not exist

75
00:04:38,970 --> 00:04:43,233
‫and so let's by default make this here just an empty object.

76
00:04:44,550 --> 00:04:49,550
‫Alright, and now how do we get these values into the input?

77
00:04:50,100 --> 00:04:51,810
‫Well, thankfully for us,

78
00:04:51,810 --> 00:04:54,810
‫there is once again a very easy way to do it

79
00:04:54,810 --> 00:04:57,210
‫with React Hook Form.

80
00:04:57,210 --> 00:05:01,080
‫So here we can actually pass in some options.

81
00:05:01,080 --> 00:05:05,490
‫And so one of those options is the defaultValues.

82
00:05:06,480 --> 00:05:09,120
‫However, if we are just using this form

83
00:05:09,120 --> 00:05:11,220
‫to create a new cabin,

84
00:05:11,220 --> 00:05:14,430
‫then we will not want any default values.

85
00:05:14,430 --> 00:05:16,230
‫And therefore, first of all,

86
00:05:16,230 --> 00:05:20,400
‫let's actually figure out if we are using this form to edit

87
00:05:20,400 --> 00:05:22,953
‫or to add a new cabin.

88
00:05:24,300 --> 00:05:26,070
‫So let's create a variable here

89
00:05:26,070 --> 00:05:28,053
‫which will contain that information.

90
00:05:29,520 --> 00:05:31,560
‫So let's call it isEditSession.

91
00:05:34,710 --> 00:05:36,640
‫And then, let's simply convert

92
00:05:37,830 --> 00:05:41,430
‫the editId to a Boolean.

93
00:05:41,430 --> 00:05:44,010
‫So basically if there is an editId,

94
00:05:44,010 --> 00:05:45,720
‫then this will become true.

95
00:05:45,720 --> 00:05:50,007
‫And if it's not, then the Boolean will convert it to false.

96
00:05:50,007 --> 00:05:52,170
‫And so here we can just use that.

97
00:05:52,170 --> 00:05:55,770
‫So isEditSession, and if so,

98
00:05:55,770 --> 00:05:59,430
‫then we want the editValues

99
00:05:59,430 --> 00:06:01,380
‫to become the default values.

100
00:06:01,380 --> 00:06:04,983
‫And if not, then just an empty object.

101
00:06:06,870 --> 00:06:08,853
‫So let's actually try that.

102
00:06:12,210 --> 00:06:13,653
‫And nice.

103
00:06:15,090 --> 00:06:17,370
‫So that's looking great already.

104
00:06:17,370 --> 00:06:20,400
‫Let's just now also adapt some things here,

105
00:06:20,400 --> 00:06:21,723
‫for example, this text.

106
00:06:23,430 --> 00:06:24,870
‫And so for that we are again

107
00:06:24,870 --> 00:06:29,763
‫going to use that Boolean.

108
00:06:32,610 --> 00:06:36,180
‫So here is editing session,

109
00:06:36,180 --> 00:06:40,553
‫and if so, then let's return edit cabin.

110
00:06:42,960 --> 00:06:46,770
‫And if not, then here let's say,

111
00:06:46,770 --> 00:06:50,703
‫well, actually maybe create new cabin.

112
00:06:51,556 --> 00:06:56,490
‫And finally here, let's think about the file upload.

113
00:06:56,490 --> 00:06:58,530
‫So even with the default values

114
00:06:58,530 --> 00:07:01,680
‫this file upload will still be empty,

115
00:07:01,680 --> 00:07:05,010
‫so that image will, of course, not be placed here,

116
00:07:05,010 --> 00:07:06,930
‫that's just not possible.

117
00:07:06,930 --> 00:07:10,110
‫And so usually when we edit this data here

118
00:07:10,110 --> 00:07:13,260
‫we simply want the image to stay the same.

119
00:07:13,260 --> 00:07:15,000
‫So, in this case, we want to be able

120
00:07:15,000 --> 00:07:17,130
‫to submit this form here

121
00:07:17,130 --> 00:07:20,160
‫without actually having this photo.

122
00:07:20,160 --> 00:07:24,603
‫And so this should then not be required in this case.

123
00:07:25,470 --> 00:07:29,430
‫So let's again ask if is editing session,

124
00:07:29,430 --> 00:07:31,680
‫then here we can return false,

125
00:07:31,680 --> 00:07:35,070
‫and otherwise we return this string

126
00:07:35,070 --> 00:07:38,883
‫which will then make it so that the field is required.

127
00:07:41,010 --> 00:07:46,010
‫All right, so the form is now basically working.

128
00:07:46,440 --> 00:07:50,190
‫And so let's come here again to create the function

129
00:07:50,190 --> 00:07:52,680
‫to edit the cabin.

130
00:07:52,680 --> 00:07:54,900
‫Now actually what I want to do

131
00:07:54,900 --> 00:07:57,540
‫is to also reuse this function,

132
00:07:57,540 --> 00:07:59,790
‫because otherwise we will basically

133
00:07:59,790 --> 00:08:02,250
‫be duplicating this entire code

134
00:08:02,250 --> 00:08:05,430
‫except for this one here,

135
00:08:05,430 --> 00:08:08,130
‫because all the rest will stay the same.

136
00:08:08,130 --> 00:08:12,330
‫So we will also upload new images if there is some.

137
00:08:12,330 --> 00:08:15,030
‫And yeah, so everything here

138
00:08:15,030 --> 00:08:17,370
‫will be necessary, like all of this.

139
00:08:17,370 --> 00:08:21,690
‫And, therefore, let's just reuse this function here as well.

140
00:08:21,690 --> 00:08:23,430
‫Now before we go do that,

141
00:08:23,430 --> 00:08:26,310
‫I actually wanted to mention something earlier,

142
00:08:26,310 --> 00:08:28,560
‫which is that by default,

143
00:08:28,560 --> 00:08:30,750
‫this insert function right here

144
00:08:30,750 --> 00:08:33,360
‫when we create a new row in the table

145
00:08:33,360 --> 00:08:36,633
‫will not immediately return that row.

146
00:08:37,740 --> 00:08:41,370
‫All right, so many times we actually do need that

147
00:08:41,370 --> 00:08:46,050
‫and we do return the data actually from this function.

148
00:08:46,050 --> 00:08:49,140
‫But right now that data will be empty.

149
00:08:49,140 --> 00:08:51,990
‫And so if we want to actually return

150
00:08:51,990 --> 00:08:53,760
‫that newly created object,

151
00:08:53,760 --> 00:08:57,240
‫here we need to attach .select,

152
00:08:57,240 --> 00:09:01,770
‫and then we can also attach .single

153
00:09:01,770 --> 00:09:05,490
‫which will then basically take that new element

154
00:09:05,490 --> 00:09:08,070
‫out of the array that it will be in.

155
00:09:08,070 --> 00:09:11,790
‫But, anyway, now let's actually then reuse

156
00:09:11,790 --> 00:09:13,170
‫this function here.

157
00:09:13,170 --> 00:09:15,990
‫And, first of all, let's then rename it.

158
00:09:15,990 --> 00:09:19,230
‫So createEdit function

159
00:09:19,230 --> 00:09:21,420
‫just to let us know

160
00:09:21,420 --> 00:09:24,183
‫that this function actually works for both.

161
00:09:26,100 --> 00:09:28,923
‫And so then here we need to also change that.

162
00:09:30,690 --> 00:09:34,197
‫So createEdit here, and createEdit

163
00:09:37,350 --> 00:09:38,193
‫right here.

164
00:09:39,540 --> 00:09:41,850
‫Now, if we want to edit a cabin,

165
00:09:41,850 --> 00:09:44,670
‫then we need to pass in the new cabin data

166
00:09:44,670 --> 00:09:48,780
‫plus the ID of the cabin that is being edited.

167
00:09:48,780 --> 00:09:50,490
‫And so that's how we will know

168
00:09:50,490 --> 00:09:53,253
‫if we are in an edit session or not.

169
00:09:54,420 --> 00:09:59,420
‫So we want to create the cabin here only if there is no id.

170
00:10:00,150 --> 00:10:02,643
‫So if there is no id,

171
00:10:03,540 --> 00:10:07,623
‫then basically what's gonna happen is this right here.

172
00:10:08,880 --> 00:10:12,120
‫Now here we cannot declare a new variable in here,

173
00:10:12,120 --> 00:10:13,890
‫but that's no problem at all,

174
00:10:13,890 --> 00:10:17,670
‫because we actually want to reuse this part here anyway.

175
00:10:17,670 --> 00:10:21,783
‫And so let's now write this query here in a different way.

176
00:10:22,980 --> 00:10:27,980
‫So let's declare a variable that we will keep adding to.

177
00:10:28,470 --> 00:10:30,180
‫And so this simply starts

178
00:10:30,180 --> 00:10:35,040
‫with supabase.from{'cabins'}

179
00:10:38,820 --> 00:10:40,050
‫just like this.

180
00:10:40,050 --> 00:10:44,700
‫And then, we can remove this part here,

181
00:10:44,700 --> 00:10:49,700
‫and basically we then attach this here to the query,

182
00:10:50,220 --> 00:10:53,730
‫so to this part that we created right there.

183
00:10:53,730 --> 00:10:56,550
‫And so then, later what we can do

184
00:10:56,550 --> 00:11:01,530
‫is to simply await that query that we created.

185
00:11:01,530 --> 00:11:03,720
‫So this is exactly the same thing,

186
00:11:03,720 --> 00:11:05,640
‫and it's a commonly used technique

187
00:11:05,640 --> 00:11:09,390
‫when we want to reuse parts of the query.

188
00:11:09,390 --> 00:11:11,673
‫And actually let's also remove this part,

189
00:11:13,440 --> 00:11:15,660
‫place that here.

190
00:11:15,660 --> 00:11:20,253
‫And so now let's say that this here is for create.

191
00:11:23,640 --> 00:11:27,000
‫And then, let's have another one,

192
00:11:27,000 --> 00:11:30,570
‫B for edit.

193
00:11:30,570 --> 00:11:35,310
‫So this one is if there actually is an id.

194
00:11:35,310 --> 00:11:39,300
‫And now let's then again get a code

195
00:11:39,300 --> 00:11:41,913
‫for that right here from our API.

196
00:11:43,050 --> 00:11:44,613
‫So in the API docs,

197
00:11:45,840 --> 00:11:48,000
‫and, of course, I could just write a code,

198
00:11:48,000 --> 00:11:52,170
‫but I want to empower you to work with this on your own.

199
00:11:52,170 --> 00:11:56,130
‫So I'm showing you really where everything is coming from.

200
00:11:56,130 --> 00:12:00,690
‫So inserting and updating works like this.

201
00:12:00,690 --> 00:12:03,840
‫So this part we already have supabase.from.

202
00:12:03,840 --> 00:12:07,443
‫And then, what we want is this update right here.

203
00:12:08,340 --> 00:12:11,493
‫So only we are interested now in this part.

204
00:12:14,130 --> 00:12:18,153
‫So query, and then we can just add this.

205
00:12:19,451 --> 00:12:21,390
‫And before we change this,

206
00:12:21,390 --> 00:12:24,780
‫let's actually not forget that we need

207
00:12:24,780 --> 00:12:29,780
‫to also add a role level security policy for that.

208
00:12:32,790 --> 00:12:34,950
‫Ah, we actually did that already.

209
00:12:34,950 --> 00:12:36,390
‫Yeah, I remember.

210
00:12:36,390 --> 00:12:38,850
‫So we did that, great.

211
00:12:38,850 --> 00:12:41,523
‫So that saves us a bit of work now.

212
00:12:43,500 --> 00:12:44,900
‫And so let's come back here.

213
00:12:46,680 --> 00:12:50,040
‫So here we have the update operation,

214
00:12:50,040 --> 00:12:52,530
‫and then, we again, just like with delete,

215
00:12:52,530 --> 00:12:55,980
‫we have this equal operation, which means that,

216
00:12:55,980 --> 00:12:58,800
‫of course, we don't want to update everything,

217
00:12:58,800 --> 00:13:02,710
‫but only the row where the field of id

218
00:13:04,830 --> 00:13:09,120
‫is equal to the id that we passed in.

219
00:13:09,120 --> 00:13:12,573
‫And what we want to update is similar to this right here.

220
00:13:13,500 --> 00:13:18,120
‫So basically the updated data, and then the image path.

221
00:13:18,120 --> 00:13:20,250
‫Just notice that here we are not placing

222
00:13:20,250 --> 00:13:23,370
‫that in an array like we had to do here.

223
00:13:23,370 --> 00:13:27,213
‫So that's a small, slight difference right there.

224
00:13:28,350 --> 00:13:30,510
‫Now, all right, now we might think

225
00:13:30,510 --> 00:13:34,530
‫that with this we are finished, but we are actually not.

226
00:13:34,530 --> 00:13:38,520
‫Because remember how we made this cabin photo upload here

227
00:13:38,520 --> 00:13:41,370
‫optional for the editing session.

228
00:13:41,370 --> 00:13:45,150
‫This means that sometimes when we edit the cabin

229
00:13:45,150 --> 00:13:47,160
‫we will get a new file,

230
00:13:47,160 --> 00:13:48,660
‫so if we select one here,

231
00:13:48,660 --> 00:13:52,263
‫but if not, we will just get a URL from before.

232
00:13:53,490 --> 00:13:56,070
‫So let me demonstrate that here.

233
00:13:56,070 --> 00:13:59,820
‫So right here let's again

234
00:13:59,820 --> 00:14:02,283
‫just lock the data to the console,

235
00:14:04,260 --> 00:14:07,170
‫so instead of creating a new cabin.

236
00:14:07,170 --> 00:14:10,110
‫And so now as I click Edit Cabin,

237
00:14:10,110 --> 00:14:13,290
‫what we get here is the image path

238
00:14:13,290 --> 00:14:15,450
‫that we specified earlier.

239
00:14:15,450 --> 00:14:18,090
‫So just this URL here.

240
00:14:18,090 --> 00:14:22,290
‫But if we do specify a file, let's say this one,

241
00:14:22,290 --> 00:14:27,290
‫then we get this image.

242
00:14:27,360 --> 00:14:28,650
‫So just like before,

243
00:14:28,650 --> 00:14:31,590
‫then we get a file list with this image.

244
00:14:31,590 --> 00:14:33,930
‫So we have these two different situations

245
00:14:33,930 --> 00:14:36,063
‫that we need to account for.

246
00:14:37,230 --> 00:14:39,840
‫So both in the form itself,

247
00:14:39,840 --> 00:14:42,930
‫but also right here in this function.

248
00:14:42,930 --> 00:14:44,790
‫And the way we're going to do this

249
00:14:44,790 --> 00:14:46,530
‫is to create another variable

250
00:14:46,530 --> 00:14:49,593
‫to check what kind of image this is.

251
00:14:50,790 --> 00:14:53,163
‫So we're gonna say hasImagePath.

252
00:14:56,072 --> 00:14:57,510
‫And so then we will check

253
00:14:57,510 --> 00:15:02,510
‫if the newCabin.image.startsWith

254
00:15:06,570 --> 00:15:09,240
‫the supabase URL.

255
00:15:09,240 --> 00:15:11,820
‫So that's the trick that I came up with.

256
00:15:11,820 --> 00:15:15,130
‫So basically checking whether that image right here

257
00:15:17,460 --> 00:15:22,460
‫basically contains that supabase URL that we saw earlier.

258
00:15:22,770 --> 00:15:24,750
‫So if we edit another one,

259
00:15:24,750 --> 00:15:29,750
‫then as, well, let's place that.

260
00:15:30,150 --> 00:15:32,913
‫So as I showed you earlier, then it starts,

261
00:15:34,170 --> 00:15:35,793
‫well, not this one.

262
00:15:36,900 --> 00:15:41,100
‫But this one here will now start the image

263
00:15:41,100 --> 00:15:43,080
‫with the supabase URL.

264
00:15:43,080 --> 00:15:46,710
‫And so, in this case, there already exists an image path

265
00:15:46,710 --> 00:15:50,490
‫that we want to then keep in the database.

266
00:15:50,490 --> 00:15:52,650
‫So then we don't want to create a new one

267
00:15:52,650 --> 00:15:55,230
‫but just use that one.

268
00:15:55,230 --> 00:15:58,440
‫So here in the image path definition let's say,

269
00:15:58,440 --> 00:16:03,440
‫hasImagePath, and if so, let's just use that.

270
00:16:03,810 --> 00:16:08,160
‫So that's coming from newCabin.image.

271
00:16:08,160 --> 00:16:11,970
‫And if not, then, of course, we need to create a new one,

272
00:16:11,970 --> 00:16:13,593
‫so based on that image.

273
00:16:14,880 --> 00:16:18,810
‫Now here, this .image might not be a string.

274
00:16:18,810 --> 00:16:22,500
‫And so, in that case, we cannot call this function.

275
00:16:22,500 --> 00:16:24,657
‫And so let's do this optional chaining here

276
00:16:24,657 --> 00:16:28,053
‫and let's do it also for the function call itself.

277
00:16:28,890 --> 00:16:32,130
‫So we can do it like this as well.

278
00:16:32,130 --> 00:16:34,260
‫But this we should be covered

279
00:16:34,260 --> 00:16:37,230
‫and the function should work now.

280
00:16:37,230 --> 00:16:40,830
‫And I know that it is quite confusing and,

281
00:16:40,830 --> 00:16:43,203
‫well, as I said in the beginning.

282
00:16:44,760 --> 00:16:46,590
‫But real-world development

283
00:16:46,590 --> 00:16:49,170
‫is, of course, not always super linear

284
00:16:49,170 --> 00:16:51,273
‫and this is just how it works.

285
00:16:52,320 --> 00:16:55,530
‫But anyway, now let's use the function here, as well,

286
00:16:55,530 --> 00:16:58,650
‫to again create a mutation.

287
00:16:58,650 --> 00:17:01,410
‫So this is gonna be very similar to this,

288
00:17:01,410 --> 00:17:03,933
‫so I will just grab this.

289
00:17:04,860 --> 00:17:08,010
‫So copy/pasting it, but now here,

290
00:17:08,010 --> 00:17:13,010
‫let's call this isEditing, like this.

291
00:17:14,100 --> 00:17:18,720
‫And now let's also actually rename these mutate functions.

292
00:17:18,720 --> 00:17:23,700
‫So this first one, let's call it createCabin,

293
00:17:23,700 --> 00:17:25,527
‫and then here editCabin.

294
00:17:31,350 --> 00:17:34,210
‫And here the success message will be

295
00:17:37,260 --> 00:17:42,060
‫cabin successfully edited.

296
00:17:42,060 --> 00:17:45,090
‫And then, here we actually also need to change something

297
00:17:45,090 --> 00:17:47,160
‫in the mutation function.

298
00:17:47,160 --> 00:17:48,600
‫So here in React Query,

299
00:17:48,600 --> 00:17:52,953
‫we can actually only pass one element to this function.

300
00:17:53,880 --> 00:17:55,920
‫So I'm not sure why that is,

301
00:17:55,920 --> 00:17:59,403
‫but so let's actually create an arrow function here.

302
00:18:00,810 --> 00:18:04,620
‫And so this will then, as we said,

303
00:18:04,620 --> 00:18:07,230
‫only accept exactly one argument

304
00:18:07,230 --> 00:18:11,077
‫which will be this object with the newCabinData,

305
00:18:12,900 --> 00:18:14,310
‫so let's call it that.

306
00:18:14,310 --> 00:18:16,320
‫And then, also the id.

307
00:18:16,320 --> 00:18:19,260
‫And so then we immediately destructure that here

308
00:18:19,260 --> 00:18:23,160
‫and pass it in the function as necessary.

309
00:18:23,160 --> 00:18:26,823
‫So newCabinData and id, like this.

310
00:18:28,860 --> 00:18:30,330
‫All right.

311
00:18:30,330 --> 00:18:33,003
‫Now here we are not using DS editing.

312
00:18:34,560 --> 00:18:38,730
‫So instead of just doing things whenever we are creating,

313
00:18:38,730 --> 00:18:41,700
‫let's now do a variable that combines both.

314
00:18:41,700 --> 00:18:46,700
‫So isWorking is then isCreating

315
00:18:47,730 --> 00:18:49,197
‫or isEditing.

316
00:18:54,207 --> 00:18:56,207
‫And so let's then replace the isCreating

317
00:18:57,390 --> 00:19:01,270
‫in all of these different instances here

318
00:19:03,870 --> 00:19:04,773
‫with this one.

319
00:19:06,360 --> 00:19:07,293
‫Okay.

320
00:19:10,500 --> 00:19:12,990
‫Let's get rid of this console.log.

321
00:19:12,990 --> 00:19:17,113
‫And so here this one was for createCabin.

322
00:19:18,240 --> 00:19:20,520
‫And now, of course, here we also need to handle

323
00:19:20,520 --> 00:19:23,163
‫the situation of editing a cabin.

324
00:19:25,200 --> 00:19:27,600
‫So let's again use that Boolean.

325
00:19:27,600 --> 00:19:32,070
‫If is editing session, then what we will want to do

326
00:19:32,070 --> 00:19:35,670
‫is to edit the cabin

327
00:19:35,670 --> 00:19:39,303
‫and else we want to create a cabin.

328
00:19:40,170 --> 00:19:42,480
‫And before we can do any of this,

329
00:19:42,480 --> 00:19:46,320
‫now it's time to again account for the fact that the image

330
00:19:46,320 --> 00:19:50,040
‫can either be this string right here

331
00:19:50,040 --> 00:19:54,333
‫or it can be this object that we saw earlier.

332
00:19:55,230 --> 00:19:58,890
‫So this image file list right there.

333
00:19:58,890 --> 00:20:01,983
‫So this array basically.

334
00:20:03,150 --> 00:20:06,300
‫So let's check for that

335
00:20:06,300 --> 00:20:09,570
‫so that we can actually determine what image

336
00:20:09,570 --> 00:20:11,463
‫we need to pass into editCabin.

337
00:20:12,750 --> 00:20:15,960
‫So here we can use the type of operator

338
00:20:15,960 --> 00:20:20,250
‫to check whether data.image

339
00:20:20,250 --> 00:20:22,743
‫is a string.

340
00:20:24,330 --> 00:20:26,130
‫And so if it is a string,

341
00:20:26,130 --> 00:20:30,900
‫then the image will just become data.image.

342
00:20:30,900 --> 00:20:34,740
‫And otherwise, so if it is that file list,

343
00:20:34,740 --> 00:20:36,570
‫then we will again need the data

344
00:20:36,570 --> 00:20:40,920
‫to be data.image at position zero.

345
00:20:40,920 --> 00:20:42,927
‫So exactly what we have here.

346
00:20:42,927 --> 00:20:45,123
‫And so then we can replace this,

347
00:20:47,700 --> 00:20:52,700
‫and then we will also be able to pass that in here.

348
00:20:53,220 --> 00:20:56,610
‫So remember that here we needed this object

349
00:20:56,610 --> 00:20:59,343
‫with newCabinData and id.

350
00:21:01,170 --> 00:21:05,280
‫So the newCabinData will be an object similar

351
00:21:05,280 --> 00:21:07,290
‫to the one that we have below.

352
00:21:07,290 --> 00:21:12,290
‫So that's the submitted data from the form plus the image,

353
00:21:13,080 --> 00:21:16,937
‫and then the id is the editId.

354
00:21:18,570 --> 00:21:21,750
‫And with this, we should be good to go.

355
00:21:21,750 --> 00:21:26,100
‫Now I'm sure there is gonna be some bug somewhere here.

356
00:21:26,100 --> 00:21:30,003
‫And so let's try this out in order to find that bug.

357
00:21:31,410 --> 00:21:35,100
‫So let's edit maybe this first cabin right here.

358
00:21:35,100 --> 00:21:38,253
‫And so notice that this one does have an image.

359
00:21:40,860 --> 00:21:44,220
‫So let's change this here a bit.

360
00:21:44,220 --> 00:21:45,543
‫88 guests.

361
00:21:46,980 --> 00:21:48,530
‫And yeah, this would be enough.

362
00:21:49,650 --> 00:21:50,763
‫So let's edit.

363
00:21:52,110 --> 00:21:53,553
‫And, well,

364
00:21:55,020 --> 00:21:58,740
‫it seems that nothing really happened.

365
00:21:58,740 --> 00:22:00,273
‫Let's maybe reload here.

366
00:22:02,220 --> 00:22:05,340
‫Maybe it didn't just revalidate the data.

367
00:22:05,340 --> 00:22:07,260
‫Ah, but actually nothing did happen.

368
00:22:07,260 --> 00:22:11,760
‫So we have surely some problem here.

369
00:22:11,760 --> 00:22:13,740
‫So, first of all, let's check

370
00:22:13,740 --> 00:22:18,243
‫if we are actually receiving our data in this function,

371
00:22:21,390 --> 00:22:25,923
‫so the newCabin and the id.

372
00:22:28,800 --> 00:22:33,800
‫So let's just change it to something.

373
00:22:35,970 --> 00:22:39,270
‫And it seems like we are getting the data,

374
00:22:39,270 --> 00:22:41,220
‫so that's already a good sign.

375
00:22:41,220 --> 00:22:45,780
‫So we have the id and we have that new name

376
00:22:45,780 --> 00:22:46,923
‫that we specified.

377
00:22:48,540 --> 00:22:51,213
‫Yeah, but then something here didn't work.

378
00:22:52,200 --> 00:22:53,613
‫So let's check.

379
00:22:54,840 --> 00:22:58,200
‫And the problem actually lies right here.

380
00:22:58,200 --> 00:23:00,090
‫So here we cannot do just this,

381
00:23:00,090 --> 00:23:03,960
‫but instead we need to reassign the query variable.

382
00:23:03,960 --> 00:23:05,250
‫So it needs to be query

383
00:23:05,250 --> 00:23:08,190
‫then equals the query that we already have.

384
00:23:08,190 --> 00:23:11,010
‫And then, we add here this insert

385
00:23:11,010 --> 00:23:12,663
‫and here this update to it.

386
00:23:14,280 --> 00:23:16,920
‫So I just forgot to place that there,

387
00:23:16,920 --> 00:23:20,013
‫and so hopefully that will already solve it.

388
00:23:21,090 --> 00:23:23,823
‫So let's try to edit this one again,

389
00:23:27,000 --> 00:23:28,683
‫change this to 22.

390
00:23:30,390 --> 00:23:32,403
‫And let's see.

391
00:23:35,010 --> 00:23:38,340
‫So this is taking some time.

392
00:23:38,340 --> 00:23:42,123
‫Ah, and beautiful, so now we got test.

393
00:23:43,380 --> 00:23:45,420
‫Somehow we got 18,

394
00:23:45,420 --> 00:23:48,570
‫even though I think we did 22 there,

395
00:23:48,570 --> 00:23:50,280
‫so that's strange.

396
00:23:50,280 --> 00:23:52,983
‫And also the image is gone.

397
00:23:54,990 --> 00:23:56,643
‫So let's check that here.

398
00:23:58,350 --> 00:24:02,190
‫So maybe for some reason we overwrote that URL there.

399
00:24:02,190 --> 00:24:05,940
‫And, so yeah, this is always a lot of work.

400
00:24:05,940 --> 00:24:07,380
‫There are always a lot of bugs,

401
00:24:07,380 --> 00:24:09,873
‫because there are so many moving parts.

402
00:24:12,150 --> 00:24:16,410
‫So here now we have a problem that this is called undefined.

403
00:24:16,410 --> 00:24:19,140
‫So this means that something went wrong here

404
00:24:19,140 --> 00:24:20,857
‫with this hasImagePath.

405
00:24:22,410 --> 00:24:26,190
‫So let's again check our console.log,

406
00:24:26,190 --> 00:24:27,573
‫ah, which is now gone.

407
00:24:29,206 --> 00:24:31,833
‫So let's try to edit this one as well.

408
00:24:34,230 --> 00:24:36,600
‫So let's call this one jonas.

409
00:24:36,600 --> 00:24:39,720
‫Let's give it a capacity of 88.

410
00:24:39,720 --> 00:24:42,450
‫So hopefully that will then work.

411
00:24:42,450 --> 00:24:46,290
‫And so now this will probably break this image, as well,

412
00:24:46,290 --> 00:24:49,233
‫but I just want to see what happens.

413
00:24:51,270 --> 00:24:53,550
‫So here indeed, we have that image

414
00:24:53,550 --> 00:24:57,813
‫which starts with the supabase URL.

415
00:24:59,010 --> 00:25:02,790
‫And yeah, so now that image is broken as well.

416
00:25:02,790 --> 00:25:07,173
‫Which means that here we did create a new image path,

417
00:25:08,010 --> 00:25:11,940
‫and so that means that this here is not working.

418
00:25:11,940 --> 00:25:15,873
‫And, ah, I see, it should be supabaseURL.

419
00:25:18,810 --> 00:25:21,303
‫So what a stupid bug right there.

420
00:25:24,840 --> 00:25:27,960
‫And now apparently we cannot delete,

421
00:25:27,960 --> 00:25:29,820
‫but let's deal with that later.

422
00:25:29,820 --> 00:25:31,863
‫We just try that again.

423
00:25:33,240 --> 00:25:35,820
‫All right, but we will deal with that later,

424
00:25:35,820 --> 00:25:37,953
‫but now we need to add more cabins,

425
00:25:39,420 --> 00:25:40,980
‫because we need them to have

426
00:25:40,980 --> 00:25:45,303
‫the correct image.

427
00:25:51,180 --> 00:25:53,970
‫So let's use this one here,

428
00:25:53,970 --> 00:25:56,940
‫and hopefully this still works.

429
00:25:56,940 --> 00:25:58,860
‫And yeah, there it is.

430
00:25:58,860 --> 00:26:02,073
‫Let's just create the 008 again.

431
00:26:08,820 --> 00:26:10,980
‫And so then, hopefully,

432
00:26:10,980 --> 00:26:14,253
‫we will be able to edit them correctly.

433
00:26:15,810 --> 00:26:17,973
‫So let's wait for that to upload.

434
00:26:21,660 --> 00:26:23,043
‫And there we are.

435
00:26:23,970 --> 00:26:28,970
‫So then let's edit this last one here to test.

436
00:26:35,790 --> 00:26:38,730
‫Now, and I see that sometimes when you scroll here,

437
00:26:38,730 --> 00:26:40,350
‫then that changes the number.

438
00:26:40,350 --> 00:26:41,940
‫So that's the reason why earlier

439
00:26:41,940 --> 00:26:45,193
‫this must have changed from 18 to 22.

440
00:26:46,080 --> 00:26:49,173
‫So let's make it, well, maybe just 100.

441
00:26:50,460 --> 00:26:53,520
‫And so now we are not editing the image,

442
00:26:53,520 --> 00:26:56,883
‫and so then we expect that this is not going to break.

443
00:26:57,990 --> 00:26:59,043
‫So let's wait.

444
00:27:00,060 --> 00:27:02,100
‫And yeah, nice.

445
00:27:02,100 --> 00:27:05,460
‫So this part at least works now.

446
00:27:05,460 --> 00:27:08,400
‫And even though the form

447
00:27:08,400 --> 00:27:11,310
‫is not resetting for some reason,

448
00:27:11,310 --> 00:27:12,410
‫even though it should.

449
00:27:14,160 --> 00:27:19,160
‫So somewhere here we have that where we reset the form,

450
00:27:19,680 --> 00:27:22,800
‫but for some reason that's not doing its job.

451
00:27:22,800 --> 00:27:26,850
‫But I guess the reason is that it will then simply

452
00:27:26,850 --> 00:27:29,460
‫automatically fill again the form

453
00:27:29,460 --> 00:27:31,920
‫whenever the new data arrives.

454
00:27:31,920 --> 00:27:33,810
‫So it will do the job temporarily,

455
00:27:33,810 --> 00:27:36,513
‫but then it gets filled again.

456
00:27:38,190 --> 00:27:41,940
‫All right, and now let's try this other one.

457
00:27:41,940 --> 00:27:44,730
‫So here, or maybe here,

458
00:27:44,730 --> 00:27:48,060
‫let's now upload the correct file again.

459
00:27:48,060 --> 00:27:50,610
‫And so that should then overwrite

460
00:27:50,610 --> 00:27:53,160
‫that image that is already there,

461
00:27:53,160 --> 00:27:56,943
‫so that image URL, which right now is pointing to nowhere.

462
00:27:57,810 --> 00:28:01,653
‫So now that's taking some time to upload here.

463
00:28:05,370 --> 00:28:07,590
‫And beautiful.

464
00:28:07,590 --> 00:28:11,160
‫So cabin number two now has the image again.

465
00:28:11,160 --> 00:28:13,920
‫And now let's just test this one more time.

466
00:28:13,920 --> 00:28:17,343
‫So I just want to be sure that this part is now working.

467
00:28:18,390 --> 00:28:22,533
‫So here, let's try cabin number five maybe.

468
00:28:23,640 --> 00:28:25,893
‫So let's edit, wait for it.

469
00:28:30,150 --> 00:28:34,170
‫And, well, now I'm not even sure which one it was,

470
00:28:34,170 --> 00:28:39,170
‫but apparently it did work, great.

471
00:28:39,960 --> 00:28:43,170
‫So this was a lot of work,

472
00:28:43,170 --> 00:28:45,690
‫probably a lot of confusion as well.

473
00:28:45,690 --> 00:28:47,340
‫But, as I mentioned earlier,

474
00:28:47,340 --> 00:28:49,830
‫this is just what web development is.

475
00:28:49,830 --> 00:28:51,930
‫So things are not that linear

476
00:28:51,930 --> 00:28:54,873
‫and you sometimes run into bugs,

477
00:28:57,420 --> 00:29:00,060
‫and yeah, that's why I'm not going to cut

478
00:29:00,060 --> 00:29:02,670
‫all of this stuff out of the video,

479
00:29:02,670 --> 00:29:04,680
‫but instead show you the process

480
00:29:04,680 --> 00:29:07,830
‫in which we can fix all this stuff.

481
00:29:07,830 --> 00:29:10,440
‫Now let's try to delete this one here

482
00:29:10,440 --> 00:29:14,220
‫that says jonas from here,

483
00:29:14,220 --> 00:29:16,500
‫like just doing it manually.

484
00:29:16,500 --> 00:29:21,130
‫And then, I will need to find out why there is a problem

485
00:29:22,290 --> 00:29:25,293
‫whenever we try to delete it now like this.

486
00:29:27,120 --> 00:29:30,240
‫Well, now it did actually work.

487
00:29:30,240 --> 00:29:32,073
‫Well, that's super strange.

488
00:29:33,810 --> 00:29:35,673
‫Let's try to delete this one as well.

489
00:29:38,760 --> 00:29:43,020
‫And great, so actually everything now works,

490
00:29:43,020 --> 00:29:47,640
‫including deleting again and also editing a cabin.

491
00:29:47,640 --> 00:29:50,280
‫So we can edit it basically in two ways

492
00:29:50,280 --> 00:29:54,930
‫which is to edit the image or to not edit it.

493
00:29:54,930 --> 00:29:57,660
‫So that was, I think the most confusing part

494
00:29:57,660 --> 00:29:59,400
‫here of this video,

495
00:29:59,400 --> 00:30:01,980
‫and so please make sure to review everything

496
00:30:01,980 --> 00:30:03,810
‫that we did here.

497
00:30:03,810 --> 00:30:06,090
‫Of course, we could also have created

498
00:30:06,090 --> 00:30:09,150
‫different functions here and different components,

499
00:30:09,150 --> 00:30:12,090
‫but I think that might have been even more confusing,

500
00:30:12,090 --> 00:30:14,190
‫especially if then at a later point

501
00:30:14,190 --> 00:30:16,260
‫we had to change something.

502
00:30:16,260 --> 00:30:19,560
‫And so I think that this is overall the best solution

503
00:30:19,560 --> 00:30:21,990
‫that we could come up with.

504
00:30:21,990 --> 00:30:26,760
‫But anyway, let's now finally wrap up this super long video.

505
00:30:26,760 --> 00:30:28,200
‫And then, in the next one,

506
00:30:28,200 --> 00:30:33,090
‫we will basically export these mutations and all the places

507
00:30:33,090 --> 00:30:36,903
‫where we use React Query into our own custom hooks.