1
00:00:01,140 --> 00:00:03,000
‫Let's now change subjects

2
00:00:03,000 --> 00:00:06,810
‫and learn how we can use React Router's actions

3
00:00:06,810 --> 00:00:11,433
‫to write data or to mutate data on the server.

4
00:00:12,900 --> 00:00:17,730
‫So while the loaders that we used earlier are to read data,

5
00:00:17,730 --> 00:00:21,870
‫actions are used to write data or to mutate data.

6
00:00:21,870 --> 00:00:25,800
‫So a state that is stored on some server.

7
00:00:25,800 --> 00:00:28,470
‫Or in other words, actions allow us

8
00:00:28,470 --> 00:00:32,970
‫to manage this remote server state using action functions

9
00:00:32,970 --> 00:00:36,720
‫and forms that we then wire up to routes

10
00:00:36,720 --> 00:00:40,113
‫similar to what we did earlier with the loaders.

11
00:00:41,010 --> 00:00:45,150
‫Okay, so remember from the project requirements

12
00:00:45,150 --> 00:00:48,780
‫that orders are made by sending a post request

13
00:00:48,780 --> 00:00:51,840
‫with the order data to the API.

14
00:00:51,840 --> 00:00:54,480
‫And so these actions and forms

15
00:00:54,480 --> 00:00:59,190
‫that we just talked about are ideal to create new orders.

16
00:00:59,190 --> 00:01:03,720
‫And so that's what we're going to do in this lecture.

17
00:01:03,720 --> 00:01:08,070
‫So we will come now to this create order page component,

18
00:01:08,070 --> 00:01:10,710
‫and there we will create a form

19
00:01:10,710 --> 00:01:12,813
‫and we will create an action.

20
00:01:14,520 --> 00:01:17,190
‫So let's open up this component

21
00:01:17,190 --> 00:01:19,590
‫and let's just take a quick look.

22
00:01:19,590 --> 00:01:22,170
‫So here we already have a cart,

23
00:01:22,170 --> 00:01:26,100
‫which is basically this fake cart right here.

24
00:01:26,100 --> 00:01:28,020
‫So when we submit a new order,

25
00:01:28,020 --> 00:01:30,240
‫we need to submit the user data

26
00:01:30,240 --> 00:01:35,070
‫plus the selected pizzas which are stored in the cart.

27
00:01:35,070 --> 00:01:37,380
‫Now, we don't have that cart yet,

28
00:01:37,380 --> 00:01:41,700
‫but we still want to already learn how to create a new order

29
00:01:41,700 --> 00:01:44,190
‫using these actions and forms.

30
00:01:44,190 --> 00:01:46,680
‫And therefore, for now, we are just going

31
00:01:46,680 --> 00:01:49,920
‫to use this fake cart object.

32
00:01:49,920 --> 00:01:53,580
‫Then you see we actually already have the form as well,

33
00:01:53,580 --> 00:01:57,270
‫and it has an input field for the customer.

34
00:01:57,270 --> 00:02:01,200
‫So for the customer name, then for the customer phone,

35
00:02:01,200 --> 00:02:04,710
‫and the address, and also to mark

36
00:02:04,710 --> 00:02:08,013
‫whether the order is priority or not.

37
00:02:09,000 --> 00:02:14,000
‫So let's actually come here to that URL, which is order/new.

38
00:02:14,700 --> 00:02:18,423
‫And so here we see exactly that form that I just described.

39
00:02:19,290 --> 00:02:24,290
‫Okay, now to make this form work nicely with React Router,

40
00:02:24,330 --> 00:02:27,960
‫we need to replace this with a form component

41
00:02:27,960 --> 00:02:30,480
‫that React Router gives us.

42
00:02:30,480 --> 00:02:34,620
‫So let's replace this form with the uppercase form

43
00:02:34,620 --> 00:02:39,210
‫that we can again import from react-router-dom.

44
00:02:39,210 --> 00:02:42,393
‫So make sure that you have this line right here.

45
00:02:44,760 --> 00:02:47,550
‫Then let's just see if it closed correctly.

46
00:02:47,550 --> 00:02:49,773
‫And yeah, it did.

47
00:02:50,880 --> 00:02:54,780
‫Then here we also need to specify now the method

48
00:02:54,780 --> 00:02:58,110
‫which is going to be a post request.

49
00:02:58,110 --> 00:02:59,520
‫So just like we said earlier,

50
00:02:59,520 --> 00:03:03,480
‫we are doing a post request to create a new order.

51
00:03:03,480 --> 00:03:08,480
‫But here we could also use patch and delete, but not get.

52
00:03:08,580 --> 00:03:10,770
‫So the get method here wouldn't work

53
00:03:10,770 --> 00:03:13,680
‫in the way that we will see throughout this lecture,

54
00:03:13,680 --> 00:03:18,090
‫but post, patch, and delete are going to work.

55
00:03:18,090 --> 00:03:21,270
‫Then we could also specify the action

56
00:03:21,270 --> 00:03:23,370
‫where we could then write the path

57
00:03:23,370 --> 00:03:26,280
‫that this form should be submitted to.

58
00:03:26,280 --> 00:03:29,640
‫But this is not going to be necessary, because by default,

59
00:03:29,640 --> 00:03:33,420
‫React Router will simply match the closest route,

60
00:03:33,420 --> 00:03:38,420
‫so there's no need to write order/new, okay?

61
00:03:39,510 --> 00:03:43,533
‫But let's actually leave this here like this,

62
00:03:44,880 --> 00:03:46,860
‫because it also does work.

63
00:03:46,860 --> 00:03:50,550
‫And so I'm just going to leave both of these ways here.

64
00:03:50,550 --> 00:03:53,430
‫Now, this on its own doesn't do anything yet,

65
00:03:53,430 --> 00:03:55,770
‫and so now we need to specify,

66
00:03:55,770 --> 00:03:58,560
‫or we need to create an action.

67
00:03:58,560 --> 00:04:01,350
‫And so this is similar to the loaders

68
00:04:01,350 --> 00:04:03,540
‫that we created earlier.

69
00:04:03,540 --> 00:04:06,480
‫So we will also create now a function

70
00:04:06,480 --> 00:04:08,583
‫that we are going to export from here.

71
00:04:09,810 --> 00:04:14,280
‫So export function, and then by default,

72
00:04:14,280 --> 00:04:18,183
‫as a convention, we just call this function action.

73
00:04:19,140 --> 00:04:23,010
‫Now, as soon as we submit this special form here,

74
00:04:23,010 --> 00:04:26,370
‫that will then create a request that will basically

75
00:04:26,370 --> 00:04:29,640
‫be intercepted by this action function

76
00:04:29,640 --> 00:04:33,240
‫as soon as we have it connected with React Router.

77
00:04:33,240 --> 00:04:38,240
‫So here with this route, but more about that later.

78
00:04:38,640 --> 00:04:42,630
‫So again, whenever this form here will be submitted,

79
00:04:42,630 --> 00:04:46,020
‫behind the scenes, React Router will then call

80
00:04:46,020 --> 00:04:49,410
‫this action function and it will pass in the request

81
00:04:49,410 --> 00:04:51,180
‫that was submitted.

82
00:04:51,180 --> 00:04:54,903
‫And so here we can then get access to that.

83
00:04:56,370 --> 00:04:57,203
‫All right.

84
00:04:59,370 --> 00:05:03,093
‫Then here, let's create a variable called form data.

85
00:05:04,140 --> 00:05:07,680
‫And then here we just await request,

86
00:05:07,680 --> 00:05:11,390
‫which is this request that we just got, .formData.

87
00:05:13,560 --> 00:05:17,010
‫And this is actually just a regular web API.

88
00:05:17,010 --> 00:05:21,063
‫So this form data here is provided by the browser.

89
00:05:22,170 --> 00:05:23,610
‫So now this is complaining,

90
00:05:23,610 --> 00:05:27,663
‫because this now needs to be an async function.

91
00:05:30,270 --> 00:05:32,463
‫Then let's log something to the console,

92
00:05:33,480 --> 00:05:35,517
‫so this form data here.

93
00:05:35,517 --> 00:05:37,440
‫And then I believe that we also

94
00:05:37,440 --> 00:05:39,930
‫need to always return something.

95
00:05:39,930 --> 00:05:42,930
‫So for now, let's just return now here.

96
00:05:42,930 --> 00:05:46,920
‫And now as a final step, we need to connect these two.

97
00:05:46,920 --> 00:05:48,720
‫So we need to come to our route

98
00:05:48,720 --> 00:05:51,933
‫and then connect this action to the route.

99
00:05:52,980 --> 00:05:55,410
‫So let's do that.

100
00:05:55,410 --> 00:05:59,253
‫And as always, let's first import it here.

101
00:06:00,960 --> 00:06:05,960
‫So here, action as create.

102
00:06:06,720 --> 00:06:09,753
‫Let's say createOrderAction.

103
00:06:12,897 --> 00:06:17,897
‫And then here, let's specify the action property.

104
00:06:18,930 --> 00:06:21,810
‫And then here is where we specify that one.

105
00:06:21,810 --> 00:06:26,810
‫So createOrderAction, just like this.

106
00:06:27,270 --> 00:06:31,050
‫And so now whenever there will be a new form submission

107
00:06:31,050 --> 00:06:35,010
‫on this route right here, so on this path,

108
00:06:35,010 --> 00:06:39,060
‫then this action that we specified here will be called.

109
00:06:39,060 --> 00:06:41,823
‫And so that's then this function right here.

110
00:06:42,690 --> 00:06:44,313
‫So let's just reload this here,

111
00:06:46,670 --> 00:06:48,933
‫and let's just test this with something,

112
00:06:50,250 --> 00:06:53,460
‫order now, and beautiful.

113
00:06:53,460 --> 00:06:55,830
‫So we have something here,

114
00:06:55,830 --> 00:06:59,010
‫even though we can't really see it here.

115
00:06:59,010 --> 00:07:03,213
‫So let's actually also convert it to an object.

116
00:07:08,884 --> 00:07:12,134
‫FromEntries(formData).

117
00:07:13,860 --> 00:07:17,760
‫Then let's just log the data itself.

118
00:07:17,760 --> 00:07:21,150
‫Try that again, and here we go.

119
00:07:21,150 --> 00:07:23,370
‫So it's a bit difficult to work

120
00:07:23,370 --> 00:07:25,590
‫with this form data object here,

121
00:07:25,590 --> 00:07:28,470
‫but this part is not really so important.

122
00:07:28,470 --> 00:07:30,480
‫So this is just some standard,

123
00:07:30,480 --> 00:07:34,320
‫or some recipe that we always will need to follow.

124
00:07:34,320 --> 00:07:38,280
‫But anyway, what matters here is that it was really,

125
00:07:38,280 --> 00:07:41,100
‫really easy to get all this data

126
00:07:41,100 --> 00:07:44,250
‫out of the form here into this function.

127
00:07:44,250 --> 00:07:48,000
‫So notice how this entire form right here

128
00:07:48,000 --> 00:07:50,970
‫works completely without any JavaScript

129
00:07:50,970 --> 00:07:55,110
‫and without any onSubmit handlers, for example.

130
00:07:55,110 --> 00:07:57,720
‫So all we have is this form here,

131
00:07:57,720 --> 00:08:01,620
‫and then React Router takes care of the rest.

132
00:08:01,620 --> 00:08:05,550
‫We also didn't have to create any state variables here

133
00:08:05,550 --> 00:08:07,830
‫for each of these input fields,

134
00:08:07,830 --> 00:08:11,220
‫and we didn't even have to create a loading state.

135
00:08:11,220 --> 00:08:14,730
‫So React Router will do all of this automatically

136
00:08:14,730 --> 00:08:17,520
‫without us having to do anything.

137
00:08:17,520 --> 00:08:21,390
‫And the idea behind all this is to basically allow us

138
00:08:21,390 --> 00:08:26,340
‫to go back to the basics, so to the way HTML used to work

139
00:08:26,340 --> 00:08:30,300
‫back in the day before everyone started using JavaScript

140
00:08:30,300 --> 00:08:31,860
‫for the front end.

141
00:08:31,860 --> 00:08:35,250
‫So back then, we simply created HTML forms

142
00:08:35,250 --> 00:08:38,400
‫similar to this one, and then when we submitted them,

143
00:08:38,400 --> 00:08:40,650
‫a request was sent to the server,

144
00:08:40,650 --> 00:08:43,980
‫which then did the work that it needed to.

145
00:08:43,980 --> 00:08:46,350
‫So this here is now very similar.

146
00:08:46,350 --> 00:08:49,170
‫The only difference is that the data then gets

147
00:08:49,170 --> 00:08:53,730
‫into this action where we can then do our action.

148
00:08:53,730 --> 00:08:55,920
‫Well, just as the name says.

149
00:08:55,920 --> 00:09:00,330
‫The only thing that we need to do, again, to make this work,

150
00:09:00,330 --> 00:09:04,263
‫is to connect this URL here with the action.

151
00:09:07,080 --> 00:09:07,913
‫All right.

152
00:09:09,090 --> 00:09:12,840
‫Now next up we also want to get our cart data

153
00:09:12,840 --> 00:09:15,270
‫here into this action.

154
00:09:15,270 --> 00:09:18,870
‫So the cart is right here in this component,

155
00:09:18,870 --> 00:09:23,340
‫but we also now want to basically submit it in the form

156
00:09:23,340 --> 00:09:26,940
‫so that we can then get access to it in the action.

157
00:09:26,940 --> 00:09:31,170
‫So you might think that we can just use this variable here

158
00:09:31,170 --> 00:09:33,390
‫right in the action, but later on,

159
00:09:33,390 --> 00:09:36,330
‫this cart will actually come from Redux.

160
00:09:36,330 --> 00:09:39,150
‫And so then we can really only get this cart

161
00:09:39,150 --> 00:09:40,623
‫right here in the component.

162
00:09:42,900 --> 00:09:45,450
‫Now, thankfully for us, there is a nice way

163
00:09:45,450 --> 00:09:49,260
‫of actually getting some data into the action

164
00:09:49,260 --> 00:09:52,080
‫without it being a form field.

165
00:09:52,080 --> 00:09:56,010
‫So what we can do is a hidden input.

166
00:09:56,010 --> 00:09:59,100
‫So we can do that anywhere in the form,

167
00:09:59,100 --> 00:10:02,073
‫but let's just do it here at the very end.

168
00:10:03,840 --> 00:10:08,840
‫So if we set it to type hidden, and the name to cart,

169
00:10:13,230 --> 00:10:18,150
‫and the value to JSON.stringify,

170
00:10:18,150 --> 00:10:22,380
‫because this cart is right now an object,

171
00:10:22,380 --> 00:10:25,290
‫but here we can only have strings.

172
00:10:25,290 --> 00:10:28,140
‫So we need to convert this to a string here.

173
00:10:28,140 --> 00:10:31,200
‫So if we do it like this, then later on,

174
00:10:31,200 --> 00:10:33,030
‫when we submit this form again,

175
00:10:33,030 --> 00:10:37,530
‫it should then show up right here in our form data as well.

176
00:10:37,530 --> 00:10:39,753
‫So let's actually try that immediately.

177
00:10:40,650 --> 00:10:42,033
‫And there it is.

178
00:10:43,860 --> 00:10:48,180
‫So right there, but what about this priority field?

179
00:10:48,180 --> 00:10:51,300
‫So I think I have to actually select it here

180
00:10:51,300 --> 00:10:53,190
‫in order for it to show up.

181
00:10:53,190 --> 00:10:54,810
‫And indeed, there it is.

182
00:10:54,810 --> 00:10:57,720
‫So now we have priority on.

183
00:10:57,720 --> 00:11:01,470
‫So we have our raw data right here in the action now,

184
00:11:01,470 --> 00:11:03,840
‫but we need to model it a little bit.

185
00:11:03,840 --> 00:11:06,750
‫So this priority should be always existent

186
00:11:06,750 --> 00:11:09,270
‫in the data that we are going to submit,

187
00:11:09,270 --> 00:11:12,540
‫and it should be true or false, not just on.

188
00:11:12,540 --> 00:11:15,390
‫And of course the cart also needs to be converted

189
00:11:15,390 --> 00:11:17,550
‫back to an object.

190
00:11:17,550 --> 00:11:20,460
‫And so let's now quickly do that.

191
00:11:20,460 --> 00:11:25,083
‫So let's create a new variable here called the order,

192
00:11:26,970 --> 00:11:29,030
‫just like this.

193
00:11:29,030 --> 00:11:32,220
‫And then let's start by spreading in the data,

194
00:11:32,220 --> 00:11:34,743
‫and then we will just overwrite some of them.

195
00:11:35,640 --> 00:11:40,607
‫So the cart should be JSON.parse(data.cart).

196
00:11:49,530 --> 00:11:54,150
‫And then the priority will be data.priority,

197
00:11:54,150 --> 00:11:58,023
‫and then we just check if it is equal to on.

198
00:12:00,690 --> 00:12:02,820
‫More like this.

199
00:12:02,820 --> 00:12:06,273
‫And then let's log it to the console.

200
00:12:09,480 --> 00:12:10,713
‫Let's clean this up.

201
00:12:11,760 --> 00:12:14,373
‫And this looks beautiful.

202
00:12:15,480 --> 00:12:20,370
‫So here now we have our cart back to being an array,

203
00:12:20,370 --> 00:12:22,830
‫and priority is set to true.

204
00:12:22,830 --> 00:12:24,990
‫And if we change this here now,

205
00:12:24,990 --> 00:12:27,303
‫then the priority should be false.

206
00:12:28,500 --> 00:12:32,400
‫Nice, so we have the data now in the shape

207
00:12:32,400 --> 00:12:35,580
‫that we want it to be, and so now we can use it

208
00:12:35,580 --> 00:12:38,310
‫to create a new order.

209
00:12:38,310 --> 00:12:42,240
‫So we already, once again, have an API endpoint

210
00:12:42,240 --> 00:12:46,053
‫for that inside a function right here in APIRestaurant.

211
00:12:47,370 --> 00:12:49,920
‫So we have the createOrder function,

212
00:12:49,920 --> 00:12:54,153
‫which receives a new order object as an argument.

213
00:12:55,200 --> 00:12:57,093
‫So that's pretty straightforward.

214
00:12:58,710 --> 00:13:01,543
‫And so let's do createOrder,

215
00:13:05,580 --> 00:13:08,820
‫and make sure that it has been correctly imported.

216
00:13:08,820 --> 00:13:11,553
‫And then we pass in the order.

217
00:13:13,203 --> 00:13:16,080
‫Now, let's just open up this function here again,

218
00:13:16,080 --> 00:13:19,800
‫so that I can show you that this createOrder function

219
00:13:19,800 --> 00:13:23,370
‫actually returns the newly created object.

220
00:13:23,370 --> 00:13:27,390
‫So the new order is actually returned.

221
00:13:27,390 --> 00:13:29,310
‫And so the nice thing about that

222
00:13:29,310 --> 00:13:33,093
‫is that we can now await that here.

223
00:13:34,950 --> 00:13:37,560
‫So we can call this here newOrder.

224
00:13:37,560 --> 00:13:39,420
‫And then what we will want to do

225
00:13:39,420 --> 00:13:44,420
‫is to immediately redirect the page to the order/ID.

226
00:13:45,150 --> 00:13:48,180
‫So basically showing the user all the information

227
00:13:48,180 --> 00:13:50,340
‫about that new order.

228
00:13:50,340 --> 00:13:54,123
‫So basically what we implemented in the previous lecture.

229
00:13:55,740 --> 00:13:59,580
‫So let's do that here, but we cannot do it

230
00:13:59,580 --> 00:14:03,570
‫using the navigate function, because the navigate function

231
00:14:03,570 --> 00:14:07,350
‫comes from calling the useNavigate hook,

232
00:14:07,350 --> 00:14:11,340
‫but we cannot call hooks inside this function.

233
00:14:11,340 --> 00:14:14,550
‫So hooks can only be called inside components.

234
00:14:14,550 --> 00:14:17,790
‫And so here we need to use another function,

235
00:14:17,790 --> 00:14:19,683
‫which is called redirect.

236
00:14:21,030 --> 00:14:25,590
‫So this is basically another function that is provided to us

237
00:14:25,590 --> 00:14:29,490
‫by React Router, which basically will just create

238
00:14:29,490 --> 00:14:32,850
‫a new response or a new request.

239
00:14:32,850 --> 00:14:36,960
‫I'm not really sure, but it's also not so important.

240
00:14:36,960 --> 00:14:39,330
‫What matters is that behind the scenes,

241
00:14:39,330 --> 00:14:42,630
‫all of this really works with the web API's

242
00:14:42,630 --> 00:14:46,620
‫standard request and response API's.

243
00:14:46,620 --> 00:14:50,400
‫And so if from here we return a new response,

244
00:14:50,400 --> 00:14:53,250
‫then React Router will automatically go

245
00:14:53,250 --> 00:14:57,570
‫to the URL that is contained in that new response.

246
00:14:57,570 --> 00:15:01,020
‫So again, this redirect here will actually create

247
00:15:01,020 --> 00:15:04,200
‫that response, which we can see right here

248
00:15:04,200 --> 00:15:06,063
‫in this TypeScript definition.

249
00:15:06,990 --> 00:15:10,980
‫But anyway, long story short, all we have to do here

250
00:15:10,980 --> 00:15:15,980
‫is to now specify basically this new URL.

251
00:15:15,990 --> 00:15:19,543
‫So order/slash and then newOrder.id,

252
00:15:23,760 --> 00:15:28,200
‫which will have been created on the server by the API.

253
00:15:28,200 --> 00:15:30,900
‫So again, this new order that we get here

254
00:15:30,900 --> 00:15:33,810
‫is already the new object that is coming back

255
00:15:33,810 --> 00:15:38,460
‫from the API as a response of calling this function here.

256
00:15:38,460 --> 00:15:41,340
‫And so this will then already contain the ID,

257
00:15:41,340 --> 00:15:44,280
‫which will then be placed here in the URL,

258
00:15:44,280 --> 00:15:47,580
‫which will then fetch that new order immediately

259
00:15:47,580 --> 00:15:50,130
‫from the server and display it here.

260
00:15:50,130 --> 00:15:54,003
‫So that's again what we implemented in the previous lecture.

261
00:15:54,930 --> 00:15:59,930
‫So let's try this now again, and nothing happened.

262
00:16:01,200 --> 00:16:05,040
‫So let's see here our network tab to see...

263
00:16:05,040 --> 00:16:10,040
‫Well, maybe we should clear all of this and try that again.

264
00:16:10,710 --> 00:16:14,010
‫So just to see if any request was created.

265
00:16:14,010 --> 00:16:16,530
‫And indeed, it actually was.

266
00:16:16,530 --> 00:16:18,840
‫Ah, and now it did work.

267
00:16:18,840 --> 00:16:21,690
‫So then we quickly saw the loader here,

268
00:16:21,690 --> 00:16:25,830
‫and then we just got our brand new order.

269
00:16:25,830 --> 00:16:28,860
‫So mine is here on May 1st, but you will see

270
00:16:28,860 --> 00:16:32,193
‫exactly the date that you are on right now.

271
00:16:34,110 --> 00:16:36,900
‫And these prizes here will be the same,

272
00:16:36,900 --> 00:16:40,620
‫because we are all using still this fake cart here,

273
00:16:40,620 --> 00:16:41,453
‫of course.

274
00:16:42,360 --> 00:16:43,470
‫Beautiful.

275
00:16:43,470 --> 00:16:45,660
‫So that worked really nicely.

276
00:16:45,660 --> 00:16:48,330
‫And so once again, this is really,

277
00:16:48,330 --> 00:16:52,200
‫really an amazing pattern for doing data manipulation

278
00:16:52,200 --> 00:16:56,970
‫and also for writing new data simply using these actions

279
00:16:56,970 --> 00:17:00,210
‫and React Router's form component.

280
00:17:00,210 --> 00:17:02,850
‫So without writing all the boilerplate code

281
00:17:02,850 --> 00:17:04,980
‫that we used to write earlier.

282
00:17:04,980 --> 00:17:07,110
‫So where we had to create state variables

283
00:17:07,110 --> 00:17:11,100
‫for all these inputs, then we had to handle

284
00:17:11,100 --> 00:17:12,300
‫the request here.

285
00:17:12,300 --> 00:17:16,383
‫We had to prevent default, and really all that stuff.

286
00:17:17,730 --> 00:17:21,270
‫But with this, we kind of go back to the roots.

287
00:17:21,270 --> 00:17:25,560
‫All we do is to have a form and then we submit this form,

288
00:17:25,560 --> 00:17:30,270
‫and then since we wired up this action that we created

289
00:17:30,270 --> 00:17:34,020
‫to this URL, then we catch that request

290
00:17:34,020 --> 00:17:37,260
‫right here in this action and do whatever work

291
00:17:37,260 --> 00:17:38,820
‫that we have to do.

292
00:17:38,820 --> 00:17:43,230
‫So in this case, we get all the data from the form,

293
00:17:43,230 --> 00:17:45,870
‫which is probably always going to be

294
00:17:45,870 --> 00:17:48,210
‫these two lines of code here,

295
00:17:48,210 --> 00:17:50,790
‫which might change in the future, I think,

296
00:17:50,790 --> 00:17:53,640
‫but for now, this is just how it works.

297
00:17:53,640 --> 00:17:56,130
‫Then we create our new order object

298
00:17:56,130 --> 00:17:58,200
‫and submit it with a post request

299
00:17:58,200 --> 00:18:02,370
‫to this createOrder right here.

300
00:18:02,370 --> 00:18:06,870
‫So the post request is really made here.

301
00:18:06,870 --> 00:18:08,670
‫So here in this fetch request,

302
00:18:08,670 --> 00:18:10,860
‫where we have this post method,

303
00:18:10,860 --> 00:18:14,583
‫this is where, actually, the new order is created.

304
00:18:15,570 --> 00:18:19,020
‫All right, then we get back that new order object

305
00:18:19,020 --> 00:18:22,783
‫and we redirect immediately to order/ the newOrder.id.

306
00:18:24,810 --> 00:18:29,520
‫So the ID of this newly created order is exactly this,

307
00:18:29,520 --> 00:18:32,130
‫and for you, it's going to be another one.

308
00:18:32,130 --> 00:18:34,350
‫So let's just copy this here.

309
00:18:34,350 --> 00:18:36,630
‫Let's go back to the homepage,

310
00:18:36,630 --> 00:18:41,340
‫and then we can of course paste this in here, hit enter,

311
00:18:41,340 --> 00:18:43,740
‫and then we will get exactly that order

312
00:18:43,740 --> 00:18:46,200
‫that we just created right here.

313
00:18:46,200 --> 00:18:49,530
‫So in other words, the user can now search

314
00:18:49,530 --> 00:18:51,663
‫for the order that they created.

315
00:18:52,830 --> 00:18:56,070
‫Great, so I hope that this made sense.

316
00:18:56,070 --> 00:18:58,890
‫And now all we have to do in the next lecture

317
00:18:58,890 --> 00:19:00,993
‫is some error handling here.