1
00:00:01,410 --> 00:00:05,790
‫Okay, so now it's time to finally add a new city

2
00:00:05,790 --> 00:00:08,763
‫and upload it to our fake API.

3
00:00:10,170 --> 00:00:11,730
‫But before we go do that

4
00:00:11,730 --> 00:00:14,580
‫there's two things that we need to do first.

5
00:00:14,580 --> 00:00:17,190
‫So the first thing is that imagine

6
00:00:17,190 --> 00:00:20,340
‫that the user somehow goes to the form

7
00:00:20,340 --> 00:00:23,433
‫without there being a latitude and a longitude.

8
00:00:24,270 --> 00:00:25,470
‫So what's gonna happen then

9
00:00:25,470 --> 00:00:29,400
‫is that the Geocoding API will get your location

10
00:00:29,400 --> 00:00:33,240
‫from Geolocation and then get all the city information

11
00:00:33,240 --> 00:00:36,480
‫about that location as usual.

12
00:00:36,480 --> 00:00:38,700
‫So that doesn't make a lot of sense.

13
00:00:38,700 --> 00:00:43,260
‫And so we should only run this effect here

14
00:00:43,260 --> 00:00:47,160
‫if there actually is a latitude and a longitude.

15
00:00:47,160 --> 00:00:49,860
‫Cause right now, again, there are none.

16
00:00:49,860 --> 00:00:52,080
‫So there are none in the URL.

17
00:00:52,080 --> 00:00:53,670
‫And so here in our effect

18
00:00:53,670 --> 00:00:58,670
‫we can just check if there is no latitude and no longitude

19
00:01:01,770 --> 00:01:04,563
‫then just return immediately.

20
00:01:06,150 --> 00:01:08,240
‫And so if we then try that again...

21
00:01:10,080 --> 00:01:13,020
‫So coming there just like this,

22
00:01:13,020 --> 00:01:15,270
‫then nothing is going to happen.

23
00:01:15,270 --> 00:01:20,130
‫And so then like this, no HTTP request is fired off.

24
00:01:20,130 --> 00:01:21,330
‫Now in this situation

25
00:01:21,330 --> 00:01:26,280
‫we probably also don't even want to display the form, right?

26
00:01:26,280 --> 00:01:31,280
‫And so we can then, again, account for that here.

27
00:01:31,560 --> 00:01:36,560
‫So saying that if there is no lat and no longitude

28
00:01:38,880 --> 00:01:41,913
‫then just return, again, a message.

29
00:01:44,160 --> 00:01:48,600
‫So message with the prop of message saying,

30
00:01:48,600 --> 00:01:53,600
‫start by clicking somewhere on the map.

31
00:01:56,550 --> 00:01:59,220
‫So telling the user basically what to do.

32
00:01:59,220 --> 00:02:01,470
‫And so that's what we get then.

33
00:02:01,470 --> 00:02:04,290
‫So then of course, as we click here,

34
00:02:04,290 --> 00:02:08,883
‫like on Barcelona or close, then yeah, it works.

35
00:02:09,990 --> 00:02:11,070
‫All right.

36
00:02:11,070 --> 00:02:14,580
‫Now as we go back, notice that we don't really go back

37
00:02:14,580 --> 00:02:18,120
‫to the list of cities, but instead really

38
00:02:18,120 --> 00:02:21,780
‫we just go back one in the history stack.

39
00:02:21,780 --> 00:02:25,440
‫So if we click on some city here, then on another one,

40
00:02:25,440 --> 00:02:28,260
‫but then maybe we want to go back to Barcelona

41
00:02:28,260 --> 00:02:32,760
‫we can just click here and then the map will move back.

42
00:02:32,760 --> 00:02:34,950
‫Now I'm not sure if that's really the behavior

43
00:02:34,950 --> 00:02:37,410
‫that the user is expecting,

44
00:02:37,410 --> 00:02:39,633
‫but I think it works fine like this.

45
00:02:41,550 --> 00:02:44,880
‫So we can always just come back also by clicking here

46
00:02:44,880 --> 00:02:46,233
‫on this cities button.

47
00:02:47,070 --> 00:02:48,720
‫But anyway, now it's time

48
00:02:48,720 --> 00:02:52,890
‫to actually create those new city objects.

49
00:02:52,890 --> 00:02:53,940
‫And so for that

50
00:02:53,940 --> 00:02:57,543
‫we need to start by listening to the submit event.

51
00:02:58,380 --> 00:03:00,993
‫So onSubmit,

52
00:03:02,220 --> 00:03:06,693
‫and then let's create, as always, a handleSubmit function.

53
00:03:08,850 --> 00:03:10,863
‫So let's do that here after the effect.

54
00:03:12,180 --> 00:03:17,103
‫Function handleSubmit which gets access to the event.

55
00:03:18,570 --> 00:03:21,430
‫Now this form will get submitted

56
00:03:22,500 --> 00:03:25,920
‫when one of the buttons is clicked, remember?

57
00:03:25,920 --> 00:03:28,830
‫So that's just how HTML works.

58
00:03:28,830 --> 00:03:32,580
‫So that is also the reason why here in this back button

59
00:03:32,580 --> 00:03:35,490
‫we did e.preventDefault

60
00:03:35,490 --> 00:03:38,973
‫so that this button actually does not submit the form.

61
00:03:40,050 --> 00:03:43,557
‫So then only this add button here can submit the form.

62
00:03:43,557 --> 00:03:45,150
‫And so when we click that

63
00:03:45,150 --> 00:03:48,750
‫then the handleSubmit function will get called.

64
00:03:48,750 --> 00:03:53,723
‫And then here we need to do, again, event.preventDefault,

65
00:03:55,980 --> 00:04:00,420
‫because again otherwise our page here

66
00:04:00,420 --> 00:04:02,700
‫will actually get a hard reload

67
00:04:02,700 --> 00:04:06,390
‫which we do not want in a single page application.

68
00:04:06,390 --> 00:04:07,800
‫Now, at the beginning of the lecture

69
00:04:07,800 --> 00:04:10,560
‫I said that we should do two things

70
00:04:10,560 --> 00:04:13,290
‫before actually writing this code here.

71
00:04:13,290 --> 00:04:15,810
‫So before actually creating the city.

72
00:04:15,810 --> 00:04:17,700
‫So that was to fix the form

73
00:04:17,700 --> 00:04:21,510
‫in case there is no latitude in longitude in the URL.

74
00:04:21,510 --> 00:04:23,880
‫And second, what I want to do

75
00:04:23,880 --> 00:04:26,940
‫is that here we want a bit more

76
00:04:26,940 --> 00:04:30,660
‫of a friendly way of adding a date.

77
00:04:30,660 --> 00:04:34,080
‫So here the question is, when did you go to the city?

78
00:04:34,080 --> 00:04:37,590
‫And so, of course, this is not what we want to write.

79
00:04:37,590 --> 00:04:40,980
‫So usually we then have some kind of date picker.

80
00:04:40,980 --> 00:04:45,030
‫And so let's get ourselves a date picker, again,

81
00:04:45,030 --> 00:04:46,773
‫as an NPM package.

82
00:04:48,000 --> 00:04:51,030
‫So now maybe you'll start noticing the trend

83
00:04:51,030 --> 00:04:53,010
‫that whenever we need something

84
00:04:53,010 --> 00:04:55,530
‫that we don't want to build ourselves,

85
00:04:55,530 --> 00:04:57,780
‫we just grab it from npm.

86
00:04:57,780 --> 00:05:01,200
‫And so that is one of the huge advantages of React

87
00:05:01,200 --> 00:05:03,990
‫so that there is always some package available

88
00:05:03,990 --> 00:05:06,210
‫for whatever we need.

89
00:05:06,210 --> 00:05:10,737
‫So here we can just npm install react-datepicker

90
00:05:12,930 --> 00:05:15,060
‫which will, as the name says,

91
00:05:15,060 --> 00:05:18,690
‫give us a date picker component for React.

92
00:05:18,690 --> 00:05:20,550
‫And as always, it's a good idea

93
00:05:20,550 --> 00:05:25,550
‫to basically try to check out the documentation

94
00:05:25,680 --> 00:05:28,113
‫of whatever packages that we are bringing in.

95
00:05:29,340 --> 00:05:32,520
‫So this is the package that we're looking for

96
00:05:32,520 --> 00:05:36,720
‫and to notice how it has 4 million downloads a month.

97
00:05:36,720 --> 00:05:39,300
‫So this is a hugely popular package.

98
00:05:39,300 --> 00:05:41,943
‫And so this is what it's gonna look like.

99
00:05:42,930 --> 00:05:44,283
‫So here we did that.

100
00:05:45,270 --> 00:05:49,083
‫And notice how we also need to import then the CSS,

101
00:05:50,850 --> 00:05:52,680
‫but one thing at a time.

102
00:05:52,680 --> 00:05:56,190
‫So here... Where is that?

103
00:05:56,190 --> 00:05:57,600
‫Yeah, so when did you go?

104
00:05:57,600 --> 00:06:00,510
‫Instead of this input right here

105
00:06:00,510 --> 00:06:03,753
‫what we want is now that date picker.

106
00:06:05,430 --> 00:06:07,030
‫So let's see what it looks like.

107
00:06:08,220 --> 00:06:12,333
‫Yeah, this is the name of the element.

108
00:06:14,730 --> 00:06:16,623
‫Then let's import that also.

109
00:06:21,300 --> 00:06:26,300
‫So import DatePicker from react-datepicker like this.

110
00:06:29,580 --> 00:06:32,103
‫All right, and then let's see what we get.

111
00:06:34,110 --> 00:06:36,527
‫So this is really not so nice yet

112
00:06:36,527 --> 00:06:40,560
‫and so that's why we need to include that CSS.

113
00:06:40,560 --> 00:06:42,750
‫So let's come to our documentation,

114
00:06:42,750 --> 00:06:47,637
‫just copy this line of code and place that there.

115
00:06:47,637 --> 00:06:51,570
‫And so now let's see if we get something a bit nicer.

116
00:06:51,570 --> 00:06:54,453
‫And indeed that looks a lot better.

117
00:06:55,860 --> 00:06:57,270
‫All right.

118
00:06:57,270 --> 00:07:01,680
‫So let's now then define a few props here

119
00:07:01,680 --> 00:07:04,710
‫because of course, as we click this,

120
00:07:04,710 --> 00:07:06,150
‫so as we click a certain date,

121
00:07:06,150 --> 00:07:08,973
‫we then need to store that date somewhere.

122
00:07:09,900 --> 00:07:12,120
‫So the way we do that is to,

123
00:07:12,120 --> 00:07:16,143
‫just like any other input element, the onChange prop.

124
00:07:19,740 --> 00:07:23,880
‫So basically we can actually just grab this here

125
00:07:23,880 --> 00:07:27,180
‫or actually not really because it's gonna be different.

126
00:07:27,180 --> 00:07:28,560
‫So onChange.

127
00:07:28,560 --> 00:07:31,140
‫And then here actually in this callback function

128
00:07:31,140 --> 00:07:33,453
‫what we get is the selected date.

129
00:07:34,290 --> 00:07:36,297
‫So not an event, but really the date.

130
00:07:36,297 --> 00:07:39,700
‫And so then all we have to do is set date

131
00:07:41,100 --> 00:07:43,143
‫to that date that we just received.

132
00:07:44,040 --> 00:07:47,190
‫And then we also want to display the current date.

133
00:07:47,190 --> 00:07:51,420
‫And so usually we do that here at the value prop like this.

134
00:07:51,420 --> 00:07:55,710
‫But here instead we just use the selected prop

135
00:07:55,710 --> 00:07:59,010
‫which we then set to the current date.

136
00:07:59,010 --> 00:07:59,843
‫So at the beginning

137
00:07:59,843 --> 00:08:03,510
‫that date is going to be basically today.

138
00:08:03,510 --> 00:08:05,490
‫So that's what this is.

139
00:08:05,490 --> 00:08:10,113
‫And finally, we can also specify the date format.

140
00:08:11,460 --> 00:08:14,883
‫So with the string, and then we can say day-day,

141
00:08:15,990 --> 00:08:20,283
‫then here to uppercase Ms for the month.

142
00:08:21,360 --> 00:08:24,990
‫And so here you see that now it is nicely formatted

143
00:08:24,990 --> 00:08:28,710
‫as March 31st, which is today.

144
00:08:28,710 --> 00:08:32,010
‫And then as we click here, we can select some other date

145
00:08:32,010 --> 00:08:33,960
‫and then that's going to show up there.

146
00:08:35,400 --> 00:08:39,270
‫Okay, then let's just add this ID here as well

147
00:08:39,270 --> 00:08:44,270
‫just to make this attribute right here work.

148
00:08:44,610 --> 00:08:47,193
‫So that we click here, then it selects that.

149
00:08:48,150 --> 00:08:50,640
‫So I'm not sure if we ever did this before,

150
00:08:50,640 --> 00:08:54,480
‫but so this is, again, just basic HTML.

151
00:08:54,480 --> 00:08:57,360
‫With the difference that in normal HTML

152
00:08:57,360 --> 00:08:59,340
‫here this is called for.

153
00:08:59,340 --> 00:09:00,960
‫At least I believe so.

154
00:09:00,960 --> 00:09:04,470
‫And then when you click here it will select the element

155
00:09:04,470 --> 00:09:07,440
‫which has the same ID name as this one.

156
00:09:07,440 --> 00:09:11,043
‫But in React here the prop is called htmlFor.

157
00:09:13,650 --> 00:09:17,610
‫Okay, so now that we have a nice way of inputting the date

158
00:09:17,610 --> 00:09:21,660
‫let's come here and do something with this.

159
00:09:21,660 --> 00:09:26,260
‫Now, first of all, if there is no city name or no date

160
00:09:28,110 --> 00:09:30,240
‫then we don't want to do anything.

161
00:09:30,240 --> 00:09:31,713
‫So then we just return.

162
00:09:32,730 --> 00:09:33,900
‫But if there is

163
00:09:33,900 --> 00:09:38,460
‫then let's create ourselves a new city object.

164
00:09:38,460 --> 00:09:40,203
‫So let's call that new city.

165
00:09:41,460 --> 00:09:46,460
‫And so here what we want is the city name, the country,

166
00:09:48,120 --> 00:09:51,813
‫the emoji, the date,

167
00:09:53,340 --> 00:09:56,463
‫the notes that the user provided here in this box.

168
00:09:57,750 --> 00:10:01,710
‫The position as well. So, position.

169
00:10:01,710 --> 00:10:03,630
‫And remember that this is an object

170
00:10:03,630 --> 00:10:07,590
‫with the latitude and longitude.

171
00:10:07,590 --> 00:10:10,470
‫And if you're not sure about the data format here

172
00:10:10,470 --> 00:10:12,933
‫then basically this is what we are looking for.

173
00:10:14,250 --> 00:10:17,550
‫All right, and so I think we have all of this now

174
00:10:17,550 --> 00:10:19,020
‫except for the ID,

175
00:10:19,020 --> 00:10:21,630
‫but that is going to be automatically created

176
00:10:21,630 --> 00:10:26,630
‫by the JSON server, so by that fake API itself.

177
00:10:28,530 --> 00:10:32,070
‫So let's just log that to the console just to make sure

178
00:10:32,070 --> 00:10:33,903
‫that everything is looking nice.

179
00:10:38,670 --> 00:10:39,503
‫Okay.

180
00:10:43,050 --> 00:10:44,673
‫And nice.

181
00:10:46,140 --> 00:10:50,130
‫So everything's looking great right here.

182
00:10:50,130 --> 00:10:53,160
‫And so let's then finally create that function

183
00:10:53,160 --> 00:10:58,160
‫which uploads this new object to our fake API.

184
00:10:58,260 --> 00:11:00,300
‫And just like all the other functions

185
00:11:00,300 --> 00:11:05,300
‫that are about that API, we do that in the context.

186
00:11:05,400 --> 00:11:08,010
‫So right here in the city's context.

187
00:11:08,010 --> 00:11:10,140
‫So we already have gat city.

188
00:11:10,140 --> 00:11:13,533
‫And now, well, let's just copy and paste this again.

189
00:11:16,230 --> 00:11:18,543
‫Here we create createCity.

190
00:11:20,940 --> 00:11:25,940
‫And this gets as input a newCity.

191
00:11:27,750 --> 00:11:28,593
‫All right.

192
00:11:31,170 --> 00:11:36,060
‫Now here, we don't need this. So just two cities.

193
00:11:36,060 --> 00:11:39,150
‫And since this is now going to be a post request

194
00:11:39,150 --> 00:11:42,573
‫we need to specify here the options object.

195
00:11:44,010 --> 00:11:47,130
‫So the method is post,

196
00:11:47,130 --> 00:11:49,650
‫then the actual data that we want to send now

197
00:11:49,650 --> 00:11:52,590
‫is in the body property.

198
00:11:52,590 --> 00:11:56,643
‫And so that's going to be the new city converted to JSON.

199
00:11:58,680 --> 00:12:01,203
‫Or actually to a string, not to JSON.

200
00:12:02,460 --> 00:12:05,560
‫And then here we just pass in the newCity.

201
00:12:06,750 --> 00:12:09,933
‫And finally, we need to specify some headers.

202
00:12:15,270 --> 00:12:19,080
‫So in this case, the Content-Type header

203
00:12:19,080 --> 00:12:24,080
‫should be set to application/json

204
00:12:24,300 --> 00:12:28,263
‫just so that the API knows what data format it is receiving.

205
00:12:29,520 --> 00:12:32,070
‫All right, so pretty standard stuff.

206
00:12:32,070 --> 00:12:33,690
‫And if you're not used to this,

207
00:12:33,690 --> 00:12:36,953
‫then this is again, nothing about React.

208
00:12:36,953 --> 00:12:39,030
‫This is just the standard way

209
00:12:39,030 --> 00:12:42,120
‫of creating a post request to an API.

210
00:12:42,120 --> 00:12:46,230
‫So basically to send some data to an API.

211
00:12:46,230 --> 00:12:50,760
‫All right, then here for now, we don't need to set anything.

212
00:12:50,760 --> 00:12:53,130
‫And then all I want to do for now here

213
00:12:53,130 --> 00:12:56,313
‫is to see the results of doing this operation.

214
00:12:57,510 --> 00:13:01,620
‫Okay, and so now we are ready to call this function

215
00:13:01,620 --> 00:13:04,803
‫inside our handler function in the form.

216
00:13:05,640 --> 00:13:08,103
‫So let's pass this into the context.

217
00:13:09,510 --> 00:13:11,430
‫So createCity,

218
00:13:11,430 --> 00:13:15,933
‫and then we can grab that function from there right here.

219
00:13:17,430 --> 00:13:22,430
‫So const createCity and then useCities.

220
00:13:28,260 --> 00:13:32,643
‫And yeah, then let's do that.

221
00:13:33,660 --> 00:13:38,660
‫Let's remove that and instead createCity with a newCity.

222
00:13:41,550 --> 00:13:43,773
‫Okay, so let's try that.

223
00:13:45,780 --> 00:13:47,190
‫And nice.

224
00:13:47,190 --> 00:13:50,700
‫So here we are now getting back this city object

225
00:13:50,700 --> 00:13:55,700
‫not from here, but actually from this console.log over here.

226
00:13:58,140 --> 00:13:59,490
‫So this one right here.

227
00:13:59,490 --> 00:14:02,280
‫And so this is the newly created city.

228
00:14:02,280 --> 00:14:03,540
‫Now if we open this,

229
00:14:03,540 --> 00:14:07,533
‫then we see that it has this new ID, right?

230
00:14:09,300 --> 00:14:13,590
‫Okay, but now watch what happens as we go back.

231
00:14:13,590 --> 00:14:18,590
‫So maybe we expect to now see this city name there,

232
00:14:18,780 --> 00:14:22,110
‫but as we go back, it is not there.

233
00:14:22,110 --> 00:14:25,680
‫So it hasn't been added to this state right here.

234
00:14:25,680 --> 00:14:27,930
‫So why do you think that is?

235
00:14:27,930 --> 00:14:31,950
‫Well, if we think about this, then it actually makes sense

236
00:14:31,950 --> 00:14:35,730
‫because nowhere in our code we are updating the state

237
00:14:35,730 --> 00:14:38,190
‫that is displaying these cities here.

238
00:14:38,190 --> 00:14:41,730
‫So these cities are simply fetched once in the beginning

239
00:14:41,730 --> 00:14:43,233
‫but they're never updated.

240
00:14:44,880 --> 00:14:48,240
‫So this cities stayed right here.

241
00:14:48,240 --> 00:14:50,370
‫Again, it is fetched in the beginning,

242
00:14:50,370 --> 00:14:53,760
‫but we did not update that, right?

243
00:14:53,760 --> 00:14:55,740
‫Now if we reloaded the page

244
00:14:55,740 --> 00:14:58,800
‫then that new city would appear down here.

245
00:14:58,800 --> 00:15:02,700
‫But that's only because, well, we re-fetched the data.

246
00:15:02,700 --> 00:15:05,850
‫And so then of course, it needs to be there.

247
00:15:05,850 --> 00:15:09,750
‫And so what we also need to do here

248
00:15:09,750 --> 00:15:14,190
‫is to add that new city to our state.

249
00:15:14,190 --> 00:15:17,370
‫So basically, we're gonna keep the application state

250
00:15:17,370 --> 00:15:20,550
‫in sync with the state from the UI.

251
00:15:20,550 --> 00:15:22,980
‫Or in other words, using the terminology

252
00:15:22,980 --> 00:15:25,410
‫that we have learned earlier in the section

253
00:15:25,410 --> 00:15:30,410
‫we're gonna keep the UI state in sync with remote state.

254
00:15:30,540 --> 00:15:33,180
‫Now, this is usually not the way to go

255
00:15:33,180 --> 00:15:35,460
‫but in a small application like this one

256
00:15:35,460 --> 00:15:37,680
‫it is perfectly fine of doing this.

257
00:15:37,680 --> 00:15:39,960
‫And then the next big application

258
00:15:39,960 --> 00:15:42,600
‫we will then learn how to better do this.

259
00:15:42,600 --> 00:15:46,320
‫So there we will use a specialized tool called React Query

260
00:15:46,320 --> 00:15:47,610
‫which will make it so

261
00:15:47,610 --> 00:15:51,150
‫that whenever we add something new to the remote state

262
00:15:51,150 --> 00:15:54,120
‫that data will then automatically get re-fetched

263
00:15:54,120 --> 00:15:55,770
‫into our application.

264
00:15:55,770 --> 00:15:58,170
‫So that would fix this problem.

265
00:15:58,170 --> 00:16:02,310
‫But in this case we will just do the same thing manually.

266
00:16:02,310 --> 00:16:05,343
‫So we'll now just also setCities

267
00:16:07,110 --> 00:16:11,880
‫and then we take the current cities and return a new array

268
00:16:11,880 --> 00:16:16,020
‫with the current cities plus the data,

269
00:16:16,020 --> 00:16:18,093
‫which is basically the new city.

270
00:16:19,530 --> 00:16:22,290
‫Okay, so let's try that again.

271
00:16:22,290 --> 00:16:24,513
‫Somewhere else, maybe here.

272
00:16:28,260 --> 00:16:29,810
‫It's not really important here.

273
00:16:30,930 --> 00:16:35,593
‫And so now let's add and then let's go back.

274
00:16:35,593 --> 00:16:38,190
‫And there it is, nice.

275
00:16:38,190 --> 00:16:39,840
‫And of course, if we reload

276
00:16:39,840 --> 00:16:43,023
‫it has been persisted to the API as well.

277
00:16:44,970 --> 00:16:49,710
‫So really if we open this file, it is now here in this file.

278
00:16:49,710 --> 00:16:51,900
‫So these new cities that we added

279
00:16:51,900 --> 00:16:56,900
‫have indeed been added also here to our cities.json.

280
00:16:56,970 --> 00:16:59,910
‫So this is how this fake API works.

281
00:16:59,910 --> 00:17:03,270
‫So it really works as if it was a real API.

282
00:17:03,270 --> 00:17:05,463
‫It's hard to notice that it isn't.

283
00:17:06,600 --> 00:17:09,090
‫All right, but now going back,

284
00:17:09,090 --> 00:17:11,640
‫we are still not really finished.

285
00:17:11,640 --> 00:17:13,980
‫So let's click somewhere else here.

286
00:17:13,980 --> 00:17:17,460
‫And so, two things that we need to improve.

287
00:17:17,460 --> 00:17:20,580
‫First of all, there needs to be some loading indicator

288
00:17:20,580 --> 00:17:23,880
‫that tells the user that we are currently adding a city.

289
00:17:23,880 --> 00:17:26,940
‫And then after that we want to navigate back

290
00:17:26,940 --> 00:17:28,800
‫to the cities list.

291
00:17:28,800 --> 00:17:31,290
‫And so that's the use case that I mentioned

292
00:17:31,290 --> 00:17:34,740
‫when I first talked about programmatic navigation.

293
00:17:34,740 --> 00:17:35,613
‫Remember that?

294
00:17:37,140 --> 00:17:41,400
‫So first of all, let's get the loading state.

295
00:17:41,400 --> 00:17:45,750
‫So because right now when we're creating a city

296
00:17:45,750 --> 00:17:48,000
‫we also set its loading to true.

297
00:17:48,000 --> 00:17:50,220
‫And so we can then, as always,

298
00:17:50,220 --> 00:17:53,160
‫get access to that here in this component

299
00:17:53,160 --> 00:17:54,783
‫through our context.

300
00:17:55,920 --> 00:17:58,383
‫So we can get access to that value.

301
00:17:59,700 --> 00:18:02,760
‫So isLoading.

302
00:18:02,760 --> 00:18:05,260
‫And we could now give it any other name

303
00:18:06,129 --> 00:18:07,683
‫but this is okay as well.

304
00:18:08,820 --> 00:18:10,200
‫So when this is loading

305
00:18:10,200 --> 00:18:14,043
‫I want to now add a special class here that I created.

306
00:18:14,880 --> 00:18:17,850
‫So let's check that out.

307
00:18:17,850 --> 00:18:20,733
‫It is, yeah, just the loading class.

308
00:18:21,660 --> 00:18:25,770
‫So that will then make the button here look disabled

309
00:18:25,770 --> 00:18:28,830
‫and also the opacity will go down a bit.

310
00:18:28,830 --> 00:18:30,120
‫But let's see.

311
00:18:30,120 --> 00:18:32,760
‫So once again, when we need multiple classes

312
00:18:32,760 --> 00:18:36,190
‫with CSS modules, we create a template literal

313
00:18:39,810 --> 00:18:43,500
‫and then here we can add that class conditionally.

314
00:18:43,500 --> 00:18:48,500
‫So isLoading, then here we want styles.loading.

315
00:18:52,920 --> 00:18:55,293
‫And if not, then nothing.

316
00:18:58,140 --> 00:19:00,453
‫So let's do a Portuguese city now again.

317
00:19:02,850 --> 00:19:06,300
‫Let's edit. And nice.

318
00:19:06,300 --> 00:19:10,800
‫So you saw for a short moment here the form grayed out

319
00:19:10,800 --> 00:19:12,720
‫and was inactive.

320
00:19:12,720 --> 00:19:16,020
‫And then after that the new city appeared here.

321
00:19:16,020 --> 00:19:18,840
‫So immediately then when the form became visible again

322
00:19:18,840 --> 00:19:21,570
‫that pin showed up there on the map

323
00:19:21,570 --> 00:19:24,840
‫meaning that the new city has indeed been added.

324
00:19:24,840 --> 00:19:27,780
‫And so now finally what we want to do

325
00:19:27,780 --> 00:19:31,983
‫is to then programmatically navigate back to that list.

326
00:19:32,880 --> 00:19:36,483
‫So we do that right here.

327
00:19:37,590 --> 00:19:42,590
‫So, well first we need to actually get that function.

328
00:19:46,770 --> 00:19:50,403
‫So remember that is what the useNavigate hook.

329
00:19:52,260 --> 00:19:54,543
‫And then we can use that here.

330
00:19:58,050 --> 00:20:02,860
‫All right, and we want to go back to the app page

331
00:20:03,990 --> 00:20:08,040
‫which remember, will then automatically redirect to cities.

332
00:20:08,040 --> 00:20:11,613
‫So we can actually write it here immediately.

333
00:20:12,600 --> 00:20:13,890
‫All right.

334
00:20:13,890 --> 00:20:15,810
‫However, if we do it like this

335
00:20:15,810 --> 00:20:17,940
‫it's not gonna work as expected

336
00:20:17,940 --> 00:20:21,930
‫because then right after we call this function here

337
00:20:21,930 --> 00:20:24,960
‫immediately the navigation will happen.

338
00:20:24,960 --> 00:20:26,580
‫But that's not what we want.

339
00:20:26,580 --> 00:20:29,390
‫Instead, since this is an async function...

340
00:20:30,690 --> 00:20:33,330
‫So it is indeed an async function

341
00:20:33,330 --> 00:20:35,310
‫and so it will return a promise.

342
00:20:35,310 --> 00:20:37,860
‫And so we can then await that here

343
00:20:37,860 --> 00:20:42,363
‫for which of course we need to make this async in turn.

344
00:20:43,560 --> 00:20:47,400
‫All right, so that's perfectly fine.

345
00:20:47,400 --> 00:20:50,490
‫So the handler function can be an async function.

346
00:20:50,490 --> 00:20:52,620
‫That's no problem at all.

347
00:20:52,620 --> 00:20:56,133
‫And so I think with this, we have everything that we needed.

348
00:20:56,970 --> 00:20:58,413
‫So let's try another one.

349
00:21:00,870 --> 00:21:03,843
‫And beautiful.

350
00:21:04,710 --> 00:21:06,450
‫So that other city is down here

351
00:21:06,450 --> 00:21:08,450
‫that's why we didn't see it immediately.

352
00:21:10,560 --> 00:21:12,630
‫But yeah, there it is.

353
00:21:12,630 --> 00:21:16,050
‫And so with this, we finish this feature.

354
00:21:16,050 --> 00:21:20,640
‫So this was the biggest and hardest feature yet, I believe.

355
00:21:20,640 --> 00:21:24,390
‫So let's just very quickly recap everything that we did.

356
00:21:24,390 --> 00:21:29,390
‫So first of all, we got the position basically from the URL

357
00:21:30,420 --> 00:21:32,553
‫as soon as the form is opened.

358
00:21:33,630 --> 00:21:35,610
‫So for that, we created this custom hook

359
00:21:35,610 --> 00:21:38,223
‫which will get us the latitude and longitude.

360
00:21:39,090 --> 00:21:40,980
‫Then each time those change

361
00:21:40,980 --> 00:21:44,250
‫we fetch the data about that location.

362
00:21:44,250 --> 00:21:47,940
‫So the city name, the country name and so on

363
00:21:47,940 --> 00:21:51,600
‫so that we can then display that here nicely in the form.

364
00:21:51,600 --> 00:21:55,260
‫So otherwise the user would have to write that out manually

365
00:21:55,260 --> 00:21:57,390
‫which is not nice.

366
00:21:57,390 --> 00:21:59,160
‫It would also not have been nice

367
00:21:59,160 --> 00:22:01,680
‫if they had to write out the date here manually.

368
00:22:01,680 --> 00:22:05,460
‫Therefore, we gave the users this date picker

369
00:22:05,460 --> 00:22:08,490
‫so that they can choose from there.

370
00:22:08,490 --> 00:22:10,920
‫And then with all the data in place

371
00:22:10,920 --> 00:22:13,080
‫we are ready to submit the form.

372
00:22:13,080 --> 00:22:15,480
‫So then we create this new object here

373
00:22:15,480 --> 00:22:18,483
‫and pass that into the createCity function.

374
00:22:19,380 --> 00:22:23,280
‫So this createCity function lives in our cities context

375
00:22:23,280 --> 00:22:26,280
‫along with all the other functions that are responsible

376
00:22:26,280 --> 00:22:30,270
‫for updating the state that is related to cities.

377
00:22:30,270 --> 00:22:32,253
‫And so that's why this lives here.

378
00:22:33,390 --> 00:22:37,710
‫And so this then creates a post request, which will mutate,

379
00:22:37,710 --> 00:22:42,420
‫so it'll update the server state, so the remote state.

380
00:22:42,420 --> 00:22:46,200
‫And we then also update the UI state right here

381
00:22:46,200 --> 00:22:50,040
‫so that the new object immediately gets reflected

382
00:22:50,040 --> 00:22:52,590
‫in our UI here as well.

383
00:22:52,590 --> 00:22:56,130
‫So otherwise, we would have to manually re-fetch the data

384
00:22:56,130 --> 00:22:57,843
‫so that it then shows up.

385
00:22:58,770 --> 00:23:02,550
‫And then finally, after all that is done,

386
00:23:02,550 --> 00:23:04,770
‫so we await that operation here,

387
00:23:04,770 --> 00:23:07,680
‫and then in the end we navigate back to the page

388
00:23:07,680 --> 00:23:09,300
‫where we came from.

389
00:23:09,300 --> 00:23:10,530
‫And that's it.

390
00:23:10,530 --> 00:23:13,200
‫So maybe try to review this on your own

391
00:23:13,200 --> 00:23:15,030
‫if it's still a bit confusing.

392
00:23:15,030 --> 00:23:17,580
‫But if everything is crystal clear,

393
00:23:17,580 --> 00:23:20,070
‫then let's move on to the next lecture

394
00:23:20,070 --> 00:23:22,980
‫where we will just quickly create the ability

395
00:23:22,980 --> 00:23:25,023
‫of also deleting cities.