1
00:00:01,350 --> 00:00:04,710
‫Let's keep working on our form actions

2
00:00:04,710 --> 00:00:07,263
‫by handling some possible errors.

3
00:00:08,910 --> 00:00:10,620
‫Now, before we go do that,

4
00:00:10,620 --> 00:00:12,900
‫let's actually also provide the user

5
00:00:12,900 --> 00:00:17,190
‫with some feedback while the form is submitting.

6
00:00:17,190 --> 00:00:20,550
‫So let's come back here to the form.

7
00:00:20,550 --> 00:00:22,860
‫And so what I want to do is to...

8
00:00:22,860 --> 00:00:26,973
‫As we click here, to basically disable this button.

9
00:00:28,050 --> 00:00:33,030
‫So we can do that once again using the use navigation hook.

10
00:00:33,030 --> 00:00:35,910
‫Because remember, how earlier I told you

11
00:00:35,910 --> 00:00:39,240
‫that the navigation state can either be idle,

12
00:00:39,240 --> 00:00:41,940
‫loading or submitting.

13
00:00:41,940 --> 00:00:44,850
‫And so, we can do something very similar

14
00:00:44,850 --> 00:00:46,410
‫to what we did here.

15
00:00:46,410 --> 00:00:48,660
‫So here we showed the loading indicator

16
00:00:48,660 --> 00:00:52,110
‫whenever navigation.state was loading.

17
00:00:52,110 --> 00:00:54,210
‫And so now, we can do the same thing

18
00:00:54,210 --> 00:00:58,020
‫for navigation.submitting.

19
00:00:58,020 --> 00:01:01,140
‫But this one, let's actually do it right here

20
00:01:01,140 --> 00:01:03,903
‫in this CreateOrder component.

21
00:01:04,978 --> 00:01:08,100
‫(mouse clicks)
‫(keyboard clacking)

22
00:01:08,100 --> 00:01:10,983
‫So navigation, useNavigation.

23
00:01:14,760 --> 00:01:16,890
‫And then let's create a variable

24
00:01:16,890 --> 00:01:18,943
‫called const isSubmitting

25
00:01:21,390 --> 00:01:24,370
‫and then navigation.state

26
00:01:26,460 --> 00:01:29,913
‫is equal to submitting.

27
00:01:33,360 --> 00:01:38,343
‫All right, and so all we have to do now is to use that here.

28
00:01:39,544 --> 00:01:41,040
‫(keyboard clacking)

29
00:01:41,040 --> 00:01:45,090
‫So disabled whenever isSubmitting,

30
00:01:45,090 --> 00:01:50,090
‫and we can also, conditionally set some text here.

31
00:01:50,760 --> 00:01:51,593
‫So isSubmitting,

32
00:01:53,790 --> 00:01:54,933
‫then let's say,

33
00:01:56,610 --> 00:01:58,113
‫Placing order.

34
00:02:00,240 --> 00:02:05,240
‫And otherwise, then we can render Order Now.

35
00:02:07,020 --> 00:02:08,640
‫All right.

36
00:02:08,640 --> 00:02:13,260
‫Now notice how here we use the required attribute

37
00:02:13,260 --> 00:02:14,640
‫in these fields here.

38
00:02:14,640 --> 00:02:19,140
‫And so this is just standard HTML5 form validation.

39
00:02:19,140 --> 00:02:21,600
‫So React Router encourages us

40
00:02:21,600 --> 00:02:23,490
‫to use these whenever possible.

41
00:02:23,490 --> 00:02:27,570
‫And so with this, we can now not easily submit the form

42
00:02:27,570 --> 00:02:30,450
‫without having to write any JavaScript.

43
00:02:30,450 --> 00:02:34,413
‫So we actually do have to fill in this form with something.

44
00:02:35,408 --> 00:02:37,050
‫(keyboard clacking)
‫So let's do this,

45
00:02:37,050 --> 00:02:42,050
‫and then, watch what happens as I click on Order Now.

46
00:02:42,150 --> 00:02:44,460
‫So indeed, it is grayed out

47
00:02:44,460 --> 00:02:47,700
‫and then we get our order confirmation

48
00:02:47,700 --> 00:02:50,370
‫once that is finished.
‫(mouse clicks)

49
00:02:50,370 --> 00:02:54,670
‫Great, so let's come back here to the new form

50
00:02:55,530 --> 00:02:58,140
‫and work on error handling.

51
00:02:58,140 --> 00:02:59,160
‫So at error handling,

52
00:02:59,160 --> 00:03:02,970
‫what I mean, is that there might happen some errors

53
00:03:02,970 --> 00:03:05,940
‫while this form is being submitted.

54
00:03:05,940 --> 00:03:09,990
‫So for example, the phone number might be this.

55
00:03:09,990 --> 00:03:14,100
‫So this will then still pass the required

56
00:03:14,100 --> 00:03:16,230
‫filter here basically,

57
00:03:16,230 --> 00:03:18,990
‫but it is not in the shape that we want.

58
00:03:18,990 --> 00:03:21,540
‫So this is not a valid phone number.

59
00:03:21,540 --> 00:03:24,600
‫And so we can now check this phone number

60
00:03:24,600 --> 00:03:26,310
‫right here in our action.

61
00:03:26,310 --> 00:03:31,080
‫And if it's not correct, we can then basically tell our form

62
00:03:31,080 --> 00:03:34,680
‫that there is an error right here in this field.

63
00:03:34,680 --> 00:03:38,130
‫So that sounds more confusing than it needs to be.

64
00:03:38,130 --> 00:03:41,670
‫And so let me just show you what I mean.

65
00:03:41,670 --> 00:03:44,823
‫So this is just a nice technique that we can use.

66
00:03:46,290 --> 00:03:50,313
‫So let's create simply an errors object here.

67
00:03:51,990 --> 00:03:55,320
‫And let's start with an empty object.

68
00:03:55,320 --> 00:03:58,323
‫And now, let's say, if is not,

69
00:03:59,370 --> 00:04:02,160
‫and then we have this function right here

70
00:04:02,160 --> 00:04:04,053
‫that I got from this URL.

71
00:04:07,187 --> 00:04:09,780
‫So we can pass a phone number there.

72
00:04:09,780 --> 00:04:14,780
‫And so here we can say, if it's not a valid phone number,

73
00:04:15,240 --> 00:04:19,433
‫the data or actually the order.phone,

74
00:04:21,570 --> 00:04:26,570
‫then we want errors.phone to be some error message.

75
00:04:28,350 --> 00:04:33,223
‫So let's say, "Please give us your correct phone number.

76
00:04:36,780 --> 00:04:41,780
‫We might need it to contact you."

77
00:04:44,637 --> 00:04:45,540
‫All right.

78
00:04:45,540 --> 00:04:47,460
‫So this, for this business

79
00:04:47,460 --> 00:04:50,520
‫is a very important piece of information.

80
00:04:50,520 --> 00:04:51,900
‫And so we need to make sure

81
00:04:51,900 --> 00:04:55,653
‫that each order receives a correct phone number.

82
00:04:57,510 --> 00:05:00,870
‫And now, we can basically say that whenever

83
00:05:00,870 --> 00:05:04,680
‫there is at least one property here in this object,

84
00:05:04,680 --> 00:05:07,560
‫we want to return the errors object.

85
00:05:07,560 --> 00:05:10,800
‫So instead of returning this redirect,

86
00:05:10,800 --> 00:05:14,160
‫and we will then be able to get access to that data

87
00:05:14,160 --> 00:05:16,320
‫in the form component,

88
00:05:16,320 --> 00:05:17,673
‫or actually,

89
00:05:18,780 --> 00:05:21,723
‫here in this CreateOrder component.

90
00:05:23,040 --> 00:05:24,300
‫Okay.

91
00:05:24,300 --> 00:05:28,260
‫But first, let's return this object here

92
00:05:28,260 --> 00:05:30,693
‫in case, there is at least one error.

93
00:05:31,650 --> 00:05:34,980
‫So one trick of doing that is to say,

94
00:05:34,980 --> 00:05:37,360
‫if object.keys

95
00:05:38,490 --> 00:05:42,593
‫of the errors object.length

96
00:05:45,150 --> 00:05:48,093
‫is greater than zero,

97
00:05:49,020 --> 00:05:52,950
‫then return this object.

98
00:05:52,950 --> 00:05:56,070
‫And actually, all of this should of course,

99
00:05:56,070 --> 00:05:59,373
‫be before the new order is created.

100
00:06:00,570 --> 00:06:02,730
‫So if there are some errors here,

101
00:06:02,730 --> 00:06:04,590
‫then we will return immediately

102
00:06:04,590 --> 00:06:08,070
‫and no new order is created on the server.

103
00:06:08,070 --> 00:06:13,070
‫And we also don't get redirected to the other order page.

104
00:06:15,990 --> 00:06:16,893
‫All right.

105
00:06:18,570 --> 00:06:19,983
‫Let's just write that here.

106
00:06:22,875 --> 00:06:26,933
‫"If everything is okay, create new order and redirect."

107
00:06:29,880 --> 00:06:31,200
‫All right.

108
00:06:31,200 --> 00:06:34,230
‫And so as I was saying earlier,

109
00:06:34,230 --> 00:06:36,630
‫now here in this component...

110
00:06:36,630 --> 00:06:40,233
‫So the component that is wired up with this action,

111
00:06:41,130 --> 00:06:45,180
‫so this component remember, is connected with this action

112
00:06:45,180 --> 00:06:48,870
‫because we set so here in this route definition.

113
00:06:48,870 --> 00:06:52,950
‫And so therefore, in this component we can now get access

114
00:06:52,950 --> 00:06:57,093
‫to the data that is returned from that action.

115
00:06:58,530 --> 00:07:02,700
‫So it is yet another custom hook

116
00:07:02,700 --> 00:07:04,680
‫that we are going to need here.

117
00:07:04,680 --> 00:07:09,680
‫And so let's call the result of this one here formErrors

118
00:07:11,190 --> 00:07:16,190
‫and then useActionData.
‫(keyboard clacking)

119
00:07:17,310 --> 00:07:18,813
‫Just like this.

120
00:07:20,100 --> 00:07:22,920
‫And notice that it's not called something

121
00:07:22,920 --> 00:07:24,960
‫like useActionErrors.

122
00:07:24,960 --> 00:07:27,240
‫So it's really for any data.

123
00:07:27,240 --> 00:07:29,940
‫But the most common use case of this hook

124
00:07:29,940 --> 00:07:33,120
‫is to actually do what we are doing right now.

125
00:07:33,120 --> 00:07:37,230
‫So to return some errors that we can then display right here

126
00:07:37,230 --> 00:07:38,763
‫in the user interface.

127
00:07:39,990 --> 00:07:44,553
‫So let's then display something immediately after this.

128
00:07:45,660 --> 00:07:46,983
‫So here we can say,

129
00:07:48,599 --> 00:07:51,663
‫formErrors and then some optional chaining.

130
00:07:53,790 --> 00:07:58,410
‫So if there is basically formErrors.phone,

131
00:07:58,410 --> 00:08:02,130
‫then here, let's just render a paragraph

132
00:08:02,130 --> 00:08:04,323
‫with exactly that text.

133
00:08:05,580 --> 00:08:09,233
‫So with a string that is at formErrors.phone.

134
00:08:11,820 --> 00:08:14,160
‫And that's actually it.

135
00:08:14,160 --> 00:08:15,753
‫So let's try this.

136
00:08:17,250 --> 00:08:18,900
‫Then here's something like this,

137
00:08:18,900 --> 00:08:21,783
‫which is definitely not a valid phone number.

138
00:08:22,890 --> 00:08:24,750
‫Let's just clean here,

139
00:08:24,750 --> 00:08:26,850
‫and beautiful.

140
00:08:26,850 --> 00:08:29,490
‫So here is our error message.

141
00:08:29,490 --> 00:08:32,553
‫And so let's just recap what just happened.

142
00:08:33,690 --> 00:08:38,190
‫So this order.phone was clearly not valid.

143
00:08:38,190 --> 00:08:40,950
‫And so therefore, we added the phone property

144
00:08:40,950 --> 00:08:42,750
‫to the errors object.

145
00:08:42,750 --> 00:08:45,570
‫Therefore, some errors existed,

146
00:08:45,570 --> 00:08:47,700
‫which means that this error object

147
00:08:47,700 --> 00:08:49,980
‫was then returned immediately.

148
00:08:49,980 --> 00:08:52,593
‫So the new order was then not created.

149
00:08:54,630 --> 00:08:56,310
‫And so then, in a component

150
00:08:56,310 --> 00:08:58,920
‫that is connected to this action,

151
00:08:58,920 --> 00:09:02,610
‫we can get access to whatever was returned from that action

152
00:09:02,610 --> 00:09:04,863
‫in case there was no submission.

153
00:09:05,820 --> 00:09:08,493
‫And so, let's just fix that here.

154
00:09:09,330 --> 00:09:12,990
‫So let's hope that they like this one.

155
00:09:12,990 --> 00:09:14,430
‫And now it works.

156
00:09:14,430 --> 00:09:18,390
‫Our order is being placed and there it is.

157
00:09:18,390 --> 00:09:21,180
‫I just wish that in 40 minutes from now,

158
00:09:21,180 --> 00:09:23,460
‫someone would actually knock on my door

159
00:09:23,460 --> 00:09:25,170
‫and get me some pizzas.

160
00:09:25,170 --> 00:09:29,223
‫'Cause it's actually already kind of dinnertime.

161
00:09:30,270 --> 00:09:34,710
‫But anyway, this is how we do error handling in forms

162
00:09:34,710 --> 00:09:37,890
‫using this technique that I just showed you.

163
00:09:37,890 --> 00:09:40,890
‫So basically, returning something from the action

164
00:09:40,890 --> 00:09:43,770
‫and then receiving that here in order to display

165
00:09:43,770 --> 00:09:46,230
‫an error message like this.

166
00:09:46,230 --> 00:09:49,680
‫And with this, we actually wrap up this initial

167
00:09:49,680 --> 00:09:52,860
‫React Router data loading section.

168
00:09:52,860 --> 00:09:54,090
‫So at this point,

169
00:09:54,090 --> 00:09:57,870
‫we know how we can fetch data using loaders

170
00:09:57,870 --> 00:10:01,500
‫and how we can write data using actions.

171
00:10:01,500 --> 00:10:04,170
‫So these are the two most important concepts

172
00:10:04,170 --> 00:10:07,800
‫in the new and modern React Router.

173
00:10:07,800 --> 00:10:10,980
‫So make sure that you understand everything

174
00:10:10,980 --> 00:10:12,240
‫that we did here.

175
00:10:12,240 --> 00:10:13,770
‫And then moving on,

176
00:10:13,770 --> 00:10:18,330
‫it is time to finally apply some styling to this year.

177
00:10:18,330 --> 00:10:22,650
‫And so hopefully, I see you soon in our Tailwind CSS,

178
00:10:22,650 --> 00:10:24,123
‫Crash Course Section.