1
00:00:01,260 --> 00:00:03,510
‫Now let's finish this feature

2
00:00:03,510 --> 00:00:06,060
‫and integrate the geolocation data

3
00:00:06,060 --> 00:00:08,610
‫that we just loaded using Redux

4
00:00:08,610 --> 00:00:11,013
‫into our create order form.

5
00:00:12,750 --> 00:00:16,470
‫Now, first of all, we need to fix a small bug here,

6
00:00:16,470 --> 00:00:21,363
‫which is that here, it should be called state.status.

7
00:00:22,440 --> 00:00:24,840
‫So make sure to fix that here.

8
00:00:24,840 --> 00:00:28,923
‫And then we can go back to our create order form.

9
00:00:30,060 --> 00:00:34,800
‫So we want a button like this one, but not right here.

10
00:00:34,800 --> 00:00:37,710
‫So we want it actually to be really close

11
00:00:37,710 --> 00:00:39,873
‫to the address field.

12
00:00:40,860 --> 00:00:42,543
‫Now our cart is empty again,

13
00:00:44,310 --> 00:00:45,963
‫so let's add something,

14
00:00:47,250 --> 00:00:48,960
‫and there we go.

15
00:00:48,960 --> 00:00:52,440
‫So the idea is to put this button right here,

16
00:00:52,440 --> 00:00:54,963
‫so on top of this input field.

17
00:00:55,950 --> 00:00:59,280
‫So let's grab it from here,

18
00:00:59,280 --> 00:01:00,933
‫and then down in the form,

19
00:01:02,580 --> 00:01:04,833
‫let's place it right here.

20
00:01:08,340 --> 00:01:12,360
‫All right, so of course, this now looks a bit wrong.

21
00:01:12,360 --> 00:01:16,893
‫And so let's, first of all, use our button component,

22
00:01:19,380 --> 00:01:23,550
‫which apparently we need to include manually,

23
00:01:23,550 --> 00:01:25,100
‫or actually it's already there,

24
00:01:26,250 --> 00:01:29,940
‫but we need to, of course, give it the type.

25
00:01:29,940 --> 00:01:33,303
‫And so let's make this one a small button,

26
00:01:34,200 --> 00:01:35,790
‫and that's a bit better.

27
00:01:35,790 --> 00:01:39,300
‫And so now let's basically position it absolutely

28
00:01:39,300 --> 00:01:42,660
‫here on top of this field.

29
00:01:42,660 --> 00:01:47,340
‫Now here we cannot really pass in any new class names,

30
00:01:47,340 --> 00:01:49,923
‫so let's just wrap it into a span.

31
00:01:52,170 --> 00:01:54,660
‫So that's no problem at all.

32
00:01:54,660 --> 00:01:58,410
‫And so here we need to position this absolutely.

33
00:01:58,410 --> 00:02:02,610
‫For this, we just use Tailwind's absolute class.

34
00:02:02,610 --> 00:02:03,443
‫But for that,

35
00:02:03,443 --> 00:02:05,910
‫we then need to make the closest parent

36
00:02:05,910 --> 00:02:08,790
‫relatively positioned,

37
00:02:08,790 --> 00:02:10,737
‫so with position 'relative.'

38
00:02:12,270 --> 00:02:14,340
‫So we are getting somewhere,

39
00:02:14,340 --> 00:02:16,350
‫now we just need to position it

40
00:02:16,350 --> 00:02:17,900
‫all the way to the right there,

41
00:02:19,830 --> 00:02:21,993
‫so let's say right-0,

42
00:02:22,860 --> 00:02:26,040
‫or actually let's move it a little bit more to the left.

43
00:02:26,040 --> 00:02:27,603
‫So let's do right-1,

44
00:02:28,560 --> 00:02:30,090
‫and that's a bit too much,

45
00:02:30,090 --> 00:02:32,790
‫so maybe we have 0.5,

46
00:02:32,790 --> 00:02:35,910
‫and that's a little bit too little. (chuckling)

47
00:02:35,910 --> 00:02:38,010
‫So let's use our own values here

48
00:02:38,010 --> 00:02:43,010
‫to escape Tailwind's rigidly formatted values,

49
00:02:43,380 --> 00:02:44,670
‫that's a bit too much,

50
00:02:44,670 --> 00:02:48,270
‫maybe 3 pixels just like this.

51
00:02:48,270 --> 00:02:50,880
‫And just to make sure that it stays on top here,

52
00:02:50,880 --> 00:02:53,070
‫we can also set the z index

53
00:02:53,070 --> 00:02:57,570
‫just by typing z and then just some value here,

54
00:02:57,570 --> 00:02:58,870
‫it's not really important.

55
00:02:59,880 --> 00:03:02,550
‫All right, so that's working now,

56
00:03:02,550 --> 00:03:04,350
‫but if we clicked this button,

57
00:03:04,350 --> 00:03:05,970
‫then we would have a problem,

58
00:03:05,970 --> 00:03:09,450
‫because this is right now a button inside a form,

59
00:03:09,450 --> 00:03:13,350
‫and so clicking this would then automatically submit a form.

60
00:03:13,350 --> 00:03:16,653
‫So we need to prevent that default behavior.

61
00:03:17,700 --> 00:03:19,470
‫So let's do that right here,

62
00:03:19,470 --> 00:03:21,603
‫so then we need the event object.

63
00:03:22,980 --> 00:03:26,700
‫Then let's wrap all this into curly braces

64
00:03:26,700 --> 00:03:30,173
‫so that then we can first do e.preventDefault.

65
00:03:34,230 --> 00:03:35,700
‫And now if we click here,

66
00:03:35,700 --> 00:03:39,000
‫that will then, again, get our position.

67
00:03:39,000 --> 00:03:42,360
‫So here, probably, we now have a new item,

68
00:03:42,360 --> 00:03:44,190
‫which you can't really see,

69
00:03:44,190 --> 00:03:47,400
‫but that's also not really important

70
00:03:47,400 --> 00:03:50,190
‫because we actually want to get this data

71
00:03:50,190 --> 00:03:51,993
‫right here into this component.

72
00:03:53,670 --> 00:03:56,280
‫So let's select it.

73
00:03:56,280 --> 00:03:59,460
‫And this code here is getting a little bit messy,

74
00:03:59,460 --> 00:04:01,140
‫but nevermind.

75
00:04:01,140 --> 00:04:04,290
‫So we are actually already selecting some stuff here

76
00:04:04,290 --> 00:04:05,523
‫from the user state,

77
00:04:06,480 --> 00:04:08,790
‫but let's now change this.

78
00:04:08,790 --> 00:04:10,830
‫So let's remove this username here

79
00:04:10,830 --> 00:04:13,200
‫and simply get the entire user.

80
00:04:13,200 --> 00:04:15,300
‫So then we can hear the structure that

81
00:04:15,300 --> 00:04:19,380
‫into the username, the status.

82
00:04:19,380 --> 00:04:23,340
‫Let's rename that to addressStatus

83
00:04:23,340 --> 00:04:25,383
‫just to make things a bit more clear,

84
00:04:26,550 --> 00:04:31,550
‫then the position and the address.

85
00:04:34,219 --> 00:04:36,900
‫All right, so we will check then

86
00:04:36,900 --> 00:04:39,930
‫for this address status a few times.

87
00:04:39,930 --> 00:04:42,600
‫And so let's create a variable for that,

88
00:04:42,600 --> 00:04:47,600
‫so isLoadingPosition or Address.

89
00:04:49,590 --> 00:04:51,300
‫And so this is going to be true

90
00:04:51,300 --> 00:04:56,300
‫whenever the address status is gonna be equal to loading.

91
00:04:59,430 --> 00:05:02,043
‫All right, and so,

92
00:05:03,780 --> 00:05:07,623
‫let's use that right here.

93
00:05:08,880 --> 00:05:11,100
‫So here, whenever we are loading the position,

94
00:05:11,100 --> 00:05:15,150
‫we want to make this here disabled.

95
00:05:15,150 --> 00:05:18,603
‫So disabled, whenever, isLoadingAddress.

96
00:05:19,980 --> 00:05:21,873
‫And the same for this button,

97
00:05:23,070 --> 00:05:28,070
‫so disabled isLoadingAddress like this.

98
00:05:29,070 --> 00:05:31,200
‫And so let's test this.

99
00:05:31,200 --> 00:05:34,020
‫And indeed, for a short period of time,

100
00:05:34,020 --> 00:05:36,750
‫it was disabled there.

101
00:05:36,750 --> 00:05:41,280
‫And now let's again use the default value prop here

102
00:05:41,280 --> 00:05:44,700
‫to then display that address here.

103
00:05:44,700 --> 00:05:46,110
‫And so by doing this,

104
00:05:46,110 --> 00:05:50,460
‫the user is then able to edit it before submitting the form.

105
00:05:50,460 --> 00:05:53,550
‫So this, for example, might not be super helpful.

106
00:05:53,550 --> 00:05:56,943
‫And so then the user can come in and change it here.

107
00:05:57,990 --> 00:06:00,300
‫Now, if we do already have a position,

108
00:06:00,300 --> 00:06:01,590
‫it doesn't make sense

109
00:06:01,590 --> 00:06:05,340
‫to then keep displaying the button here, I guess,

110
00:06:05,340 --> 00:06:09,480
‫and so let's make some conditional rendering here

111
00:06:09,480 --> 00:06:11,190
‫and say that we want to display this

112
00:06:11,190 --> 00:06:13,803
‫only if there is no latitude.

113
00:06:14,670 --> 00:06:17,410
‫So that's position.latitude

114
00:06:20,070 --> 00:06:23,037
‫and no position.longitude.

115
00:06:26,190 --> 00:06:29,130
‫And so only then, we want to display the button.

116
00:06:29,130 --> 00:06:32,250
‫And so now since we already fetched the position,

117
00:06:32,250 --> 00:06:33,450
‫the button is gone.

118
00:06:33,450 --> 00:06:36,210
‫But if we reloaded this, then it would be back,

119
00:06:36,210 --> 00:06:37,590
‫which I'm not going to do now,

120
00:06:37,590 --> 00:06:42,300
‫because then we have to add another item to the cart again.

121
00:06:42,300 --> 00:06:46,500
‫Let me just also use that state right here

122
00:06:46,500 --> 00:06:49,620
‫in the submitting one

123
00:06:49,620 --> 00:06:52,080
‫so that here we can also not submit

124
00:06:52,080 --> 00:06:54,393
‫if we are loading the address.

125
00:06:56,040 --> 00:07:01,023
‫Next up, let's also display a possible error there.

126
00:07:03,062 --> 00:07:06,063
‫So let's copy that style from here.

127
00:07:07,140 --> 00:07:09,420
‫So taking all of this,

128
00:07:09,420 --> 00:07:11,283
‫which we already styled earlier,

129
00:07:12,570 --> 00:07:15,750
‫and then let's place that here.

130
00:07:15,750 --> 00:07:18,240
‫And of course, here we will want to display it

131
00:07:18,240 --> 00:07:22,943
‫whenever the address status is equal to error,

132
00:07:24,660 --> 00:07:29,660
‫so that we set here in this situation, right?

133
00:07:29,730 --> 00:07:31,680
‫So whenever this happens here,

134
00:07:31,680 --> 00:07:34,203
‫we then want to display some message.

135
00:07:35,190 --> 00:07:38,673
‫So let's actually use this error message right there.

136
00:07:39,990 --> 00:07:43,413
‫So I think we haven't grabbed that yet.

137
00:07:45,870 --> 00:07:49,053
‫So let's call that error address.

138
00:07:52,135 --> 00:07:56,550
‫So let's take this here from the state, so error,

139
00:07:56,550 --> 00:08:01,550
‫and renaming it to errorAddress like this.

140
00:08:02,640 --> 00:08:04,443
‫So now we need to reload this.

141
00:08:08,970 --> 00:08:11,943
‫So let's add some new item to the cart,

142
00:08:15,780 --> 00:08:16,680
‫there we go.

143
00:08:16,680 --> 00:08:19,230
‫And now as we get the position,

144
00:08:19,230 --> 00:08:23,220
‫ah, but we forgot to actually disallow it again,

145
00:08:23,220 --> 00:08:26,640
‫because that is what will create that error.

146
00:08:26,640 --> 00:08:30,120
‫So we need to basically block this here.

147
00:08:30,120 --> 00:08:32,580
‫So you can click here and block it,

148
00:08:32,580 --> 00:08:35,130
‫but then we need to again reload first,

149
00:08:35,130 --> 00:08:38,403
‫or maybe we can try to reset the state here,

150
00:08:44,585 --> 00:08:48,960
‫or we could also just try to revert to this state here,

151
00:08:48,960 --> 00:08:51,600
‫yeah, and so this is now the nice thing

152
00:08:51,600 --> 00:08:53,430
‫about these Redux DevTools,

153
00:08:53,430 --> 00:08:56,670
‫which is that we can basically travel in time.

154
00:08:56,670 --> 00:08:58,860
‫And so now if we click this,

155
00:08:58,860 --> 00:09:00,993
‫then there should be some error.

156
00:09:03,270 --> 00:09:04,953
‫Well, somehow there isn't,

157
00:09:06,630 --> 00:09:08,883
‫at least that what it seems like.

158
00:09:10,620 --> 00:09:15,620
‫Or actually, we do see here that we got an error,

159
00:09:15,750 --> 00:09:18,690
‫and here, the user denied geolocation,

160
00:09:18,690 --> 00:09:21,663
‫but for some reason, it's not showing up here in the UI.

161
00:09:22,530 --> 00:09:24,543
‫So let's see if we did something wrong,

162
00:09:27,450 --> 00:09:29,310
‫but I don't think we did.

163
00:09:29,310 --> 00:09:31,953
‫Let's try to write something else here.

164
00:09:35,610 --> 00:09:37,620
‫No, that's not working.

165
00:09:37,620 --> 00:09:41,130
‫But yeah, this is actually the same thing.

166
00:09:41,130 --> 00:09:43,740
‫And we are now at error,

167
00:09:43,740 --> 00:09:45,630
‫so I'm not sure what's happening here.

168
00:09:45,630 --> 00:09:48,210
‫Let's maybe just actually reload,

169
00:09:48,210 --> 00:09:51,873
‫add another item to the menu,

170
00:09:53,220 --> 00:09:57,150
‫and then here, let's again disallow geolocation.

171
00:09:57,150 --> 00:10:00,330
‫So for that, we can also do it here.

172
00:10:00,330 --> 00:10:02,460
‫Yeah, and it is already disallowed,

173
00:10:02,460 --> 00:10:05,070
‫so let's try to get that.

174
00:10:05,070 --> 00:10:09,570
‫Ah, and now it is actually working, nice!

175
00:10:09,570 --> 00:10:12,660
‫So I don't really like that error message there,

176
00:10:12,660 --> 00:10:14,610
‫but let's fix that in a minute.

177
00:10:14,610 --> 00:10:18,393
‫For now, let's just fix here the positioning of the error.

178
00:10:23,760 --> 00:10:28,760
‫So here we probably also need to add this to the top,

179
00:10:31,650 --> 00:10:35,613
‫so top and 3 pixels as well.

180
00:10:38,340 --> 00:10:41,040
‫Now, this worked actually on the smaller screen,

181
00:10:41,040 --> 00:10:44,070
‫but right now, we need a bit more.

182
00:10:44,070 --> 00:10:48,933
‫So basically, let's just add some media queries here.

183
00:10:51,030 --> 00:10:52,773
‫So I think it's the small one.

184
00:10:54,990 --> 00:10:57,180
‫So this, of course, just a minor detail,

185
00:10:57,180 --> 00:11:00,393
‫but if we're doing it, let's do it right.

186
00:11:01,680 --> 00:11:06,543
‫All right, so now we have it positioned correctly again.

187
00:11:13,440 --> 00:11:18,440
‫Let's make it here, the media query,

188
00:11:18,990 --> 00:11:20,823
‫and that looks just right.

189
00:11:22,680 --> 00:11:24,810
‫Now here, let's change the error message

190
00:11:24,810 --> 00:11:28,290
‫to something a bit more actionable.

191
00:11:28,290 --> 00:11:33,290
‫So let's say, "There was a problem getting your address.

192
00:11:37,927 --> 00:11:42,927
‫"Make sure to fill this field."

193
00:11:43,735 --> 00:11:46,135
‫'Cause this one is, of course, really important.

194
00:11:47,790 --> 00:11:50,553
‫All right, let's just try this one more time.

195
00:11:55,290 --> 00:11:56,673
‫Yeah, beautiful.

196
00:11:58,740 --> 00:12:02,943
‫Okay, but now let's actually allow it again,

197
00:12:05,040 --> 00:12:06,900
‫so that also works.

198
00:12:06,900 --> 00:12:08,550
‫And then as the last step,

199
00:12:08,550 --> 00:12:12,030
‫we, of course, also need to get this data then

200
00:12:12,030 --> 00:12:15,003
‫here into our form action.

201
00:12:17,588 --> 00:12:19,710
‫So right here in the form action,

202
00:12:19,710 --> 00:12:21,600
‫when we submit the new order,

203
00:12:21,600 --> 00:12:23,310
‫we will also want to submit it

204
00:12:23,310 --> 00:12:25,590
‫with the actual position data,

205
00:12:25,590 --> 00:12:28,020
‫so with the user's GPS location,

206
00:12:28,020 --> 00:12:30,300
‫because that's going to be really important

207
00:12:30,300 --> 00:12:32,610
‫or really helpful for the company

208
00:12:32,610 --> 00:12:35,220
‫to deliver the pizza.

209
00:12:35,220 --> 00:12:38,640
‫And so let's use the same trick that we used here

210
00:12:38,640 --> 00:12:40,290
‫for the cart.

211
00:12:40,290 --> 00:12:42,573
‫So let's do another hidden input field,

212
00:12:44,430 --> 00:12:46,917
‫so of the type of 'hidden,'

213
00:12:48,780 --> 00:12:53,310
‫let's name this one here simply 'position.'

214
00:12:53,310 --> 00:12:55,200
‫And then as a value here,

215
00:12:55,200 --> 00:12:58,113
‫let's actually simply create a string,

216
00:12:59,310 --> 00:13:04,310
‫so let's say position.latitude,

217
00:13:07,890 --> 00:13:11,103
‫position.longitude,

218
00:13:12,300 --> 00:13:13,533
‫just like this,

219
00:13:14,850 --> 00:13:19,800
‫and apparently, we forgot to close the element, and nice.

220
00:13:20,790 --> 00:13:24,690
‫However, when the user denies the geolocation

221
00:13:24,690 --> 00:13:27,780
‫or if there is some other problem with geolocation,

222
00:13:27,780 --> 00:13:30,870
‫then we do not get this position right here.

223
00:13:30,870 --> 00:13:34,920
‫But still, we want to allow the user to submit the form

224
00:13:34,920 --> 00:13:36,330
‫in that situation,

225
00:13:36,330 --> 00:13:39,300
‫so they can still manually input their address here,

226
00:13:39,300 --> 00:13:41,370
‫and that should be good enough.

227
00:13:41,370 --> 00:13:44,040
‫And so let's first check here

228
00:13:44,040 --> 00:13:45,963
‫if this position actually exists.

229
00:13:47,370 --> 00:13:50,643
‫So if position.longitude,

230
00:13:51,600 --> 00:13:56,460
‫then let's basically submit this string

231
00:13:56,460 --> 00:13:57,720
‫that we just created,

232
00:13:57,720 --> 00:14:00,093
‫and otherwise, just an empty string.

233
00:14:02,850 --> 00:14:07,473
‫Here we should probably also ask for position.latitude,

234
00:14:10,770 --> 00:14:12,240
‫so both of these.

235
00:14:12,240 --> 00:14:13,260
‫So if they exist,

236
00:14:13,260 --> 00:14:17,010
‫then we pass this formatted GPS position

237
00:14:17,010 --> 00:14:18,450
‫into the form action,

238
00:14:18,450 --> 00:14:22,473
‫and if not, well, then it just receives that empty string.

239
00:14:25,500 --> 00:14:30,500
‫So let's just check out what we get here with the order,

240
00:14:31,710 --> 00:14:36,243
‫but once again, without actually doing any of this here,

241
00:14:38,490 --> 00:14:41,760
‫let's just do a big comment like this,

242
00:14:41,760 --> 00:14:44,853
‫and then we also need to return null again.

243
00:14:47,100 --> 00:14:49,233
‫So let's check our console.

244
00:14:51,570 --> 00:14:55,530
‫We just input some name here and some valid phone number.

245
00:14:55,530 --> 00:14:57,213
‫And then let's try to order,

246
00:14:58,080 --> 00:14:59,730
‫let's see what we get.

247
00:14:59,730 --> 00:15:04,730
‫And indeed, there is our GPS position, beautiful!

248
00:15:04,860 --> 00:15:07,170
‫And so now as we submit this order,

249
00:15:07,170 --> 00:15:10,080
‫it will be submitted not only with this address,

250
00:15:10,080 --> 00:15:14,790
‫but also with this position, great!

251
00:15:14,790 --> 00:15:16,203
‫So we can put this back,

252
00:15:19,710 --> 00:15:21,030
‫just like this.

253
00:15:21,030 --> 00:15:24,930
‫And actually, with this, our work is finished.

254
00:15:24,930 --> 00:15:27,870
‫Let's just submit this here just to make sure,

255
00:15:27,870 --> 00:15:32,280
‫but we shouldn't get any problems after implementing this.

256
00:15:32,280 --> 00:15:36,663
‫And indeed, it seems like it worked, nice!

257
00:15:37,710 --> 00:15:41,250
‫So this was a lot of work over these two lectures

258
00:15:41,250 --> 00:15:43,590
‫only to implement this small feature,

259
00:15:43,590 --> 00:15:45,630
‫but if it makes the application better,

260
00:15:45,630 --> 00:15:47,370
‫it's totally worth it.

261
00:15:47,370 --> 00:15:48,900
‫And in this case, of course,

262
00:15:48,900 --> 00:15:51,420
‫this was more of a learning exercise

263
00:15:51,420 --> 00:15:54,390
‫so that we could learn and practice

264
00:15:54,390 --> 00:15:57,900
‫how to use these Redux Thunks

265
00:15:57,900 --> 00:16:01,683
‫with this new function here inside Redux Toolkit.