1
00:00:00,990 --> 00:00:03,000
Instructor: Our signup form is kind of ugly right now,

2
00:00:03,000 --> 00:00:05,490
but at least we can enter an email and password

3
00:00:05,490 --> 00:00:08,820
and presumably Redux form is handling those values.

4
00:00:08,820 --> 00:00:11,040
Now that we've got this form in a reasonable state

5
00:00:11,040 --> 00:00:12,420
we're gonna be thinking about taking

6
00:00:12,420 --> 00:00:14,550
the email and password and using them

7
00:00:14,550 --> 00:00:15,840
to sign up to a new account

8
00:00:15,840 --> 00:00:18,930
with our API on the backend.

9
00:00:18,930 --> 00:00:20,790
Now, doing this actual signup process

10
00:00:20,790 --> 00:00:23,520
is going to involve you and I writing a lot of code

11
00:00:23,520 --> 00:00:26,520
into several different files almost in parallel.

12
00:00:26,520 --> 00:00:28,260
So before we kick off this process

13
00:00:28,260 --> 00:00:29,700
I just wanna give you a quick overview

14
00:00:29,700 --> 00:00:33,030
of what we're going to be doing in the next couple sections.

15
00:00:33,030 --> 00:00:36,060
All right, so kind of a deceptive diagram right here.

16
00:00:36,060 --> 00:00:38,100
We've got our SignUp Form component.

17
00:00:38,100 --> 00:00:40,590
You and I are going to define a method inside there

18
00:00:40,590 --> 00:00:42,600
called something like onSubmit.

19
00:00:42,600 --> 00:00:45,400
And this will be called Anytime a user submits the form.

20
00:00:46,260 --> 00:00:49,740
Inside of onSubmit, we're going to invoke an Action Creator

21
00:00:49,740 --> 00:00:51,390
that we still have to put together called

22
00:00:51,390 --> 00:00:54,497
something like the Signup Action Creator.

23
00:00:54,497 --> 00:00:56,820
Signup right here will take the email and password

24
00:00:56,820 --> 00:00:59,010
that the user entered into the form

25
00:00:59,010 --> 00:01:01,200
and communicate it over to the backend API

26
00:01:01,200 --> 00:01:02,640
to create a new account

27
00:01:02,640 --> 00:01:05,970
and get a JSON web token in exchange.

28
00:01:05,970 --> 00:01:08,160
Now, the reason that this process is gonna be a little bit

29
00:01:08,160 --> 00:01:09,870
complicated is that we still have to write

30
00:01:09,870 --> 00:01:14,610
a lot of code on the side to facilitate this entire process.

31
00:01:14,610 --> 00:01:16,920
For example, with our signup Action Creator

32
00:01:16,920 --> 00:01:18,960
we don't have any middleware hooked up

33
00:01:18,960 --> 00:01:21,240
to our Redux application that will allow us

34
00:01:21,240 --> 00:01:23,310
to make asynchronous request yet.

35
00:01:23,310 --> 00:01:25,800
So we still have to take care of some initial setup

36
00:01:25,800 --> 00:01:28,890
of the Redux side of things inside of our application.

37
00:01:28,890 --> 00:01:30,360
So again, I just want you to be aware

38
00:01:30,360 --> 00:01:31,193
that we're going to be going

39
00:01:31,193 --> 00:01:32,850
through a couple of different files

40
00:01:32,850 --> 00:01:35,730
and writing out a lot of code in parallel.

41
00:01:35,730 --> 00:01:38,310
All right, so now that we are properly prepped

42
00:01:38,310 --> 00:01:42,510
let's continue right now inside of our Signup form

43
00:01:42,510 --> 00:01:44,160
and we're gonna start putting together

44
00:01:44,160 --> 00:01:46,470
this onSubmit event handler to watch

45
00:01:46,470 --> 00:01:48,603
for a submission of the form.

46
00:01:50,280 --> 00:01:53,070
So I'll flip back over to my signup component

47
00:01:53,070 --> 00:01:55,080
and right above my render method

48
00:01:55,080 --> 00:01:58,890
I'm going to define a new method called onSubmit.

49
00:01:58,890 --> 00:02:01,200
And I'm going to make this an instance property

50
00:02:01,200 --> 00:02:04,320
that receives an arrow function.

51
00:02:04,320 --> 00:02:06,060
By making this an arrow function like so

52
00:02:06,060 --> 00:02:07,560
we don't have to worry about binding

53
00:02:07,560 --> 00:02:09,600
the context of onSubmit.

54
00:02:09,600 --> 00:02:11,430
So it's just gonna save us having to call

55
00:02:11,430 --> 00:02:13,353
bind somewhere and worry about that.

56
00:02:14,310 --> 00:02:17,640
The onSubmit function is gonna receive as a first argument

57
00:02:17,640 --> 00:02:20,160
all the properties that the user entered into the form.

58
00:02:20,160 --> 00:02:23,580
So essentially an object with the email and the password.

59
00:02:23,580 --> 00:02:27,360
I'll receive that as an argument called formProps.

60
00:02:27,360 --> 00:02:29,490
And then inside of onSubmit for right now,

61
00:02:29,490 --> 00:02:31,190
let's just console.log(formProps).

62
00:02:33,660 --> 00:02:35,280
Okay, so that's easy enough.

63
00:02:35,280 --> 00:02:36,660
Now we need to make sure that anytime

64
00:02:36,660 --> 00:02:40,560
the user submits the form, we call onSubmit,

65
00:02:40,560 --> 00:02:42,000
but it's not quite as easy

66
00:02:42,000 --> 00:02:45,690
as adding that callback to the form itself.

67
00:02:45,690 --> 00:02:48,452
Remember that when we make use of Redux form

68
00:02:48,452 --> 00:02:53,286
we get a function on our props object called handleSubmit.

69
00:02:53,286 --> 00:02:55,500
And it's that function that we have to call

70
00:02:55,500 --> 00:02:57,030
that's going to make sure that we take

71
00:02:57,030 --> 00:02:59,370
the email and password out of the form itself

72
00:02:59,370 --> 00:03:01,953
and provide it to our onSubmit callback.

73
00:03:03,060 --> 00:03:05,400
So before we try adding any callback directly

74
00:03:05,400 --> 00:03:06,450
to the form tag

75
00:03:06,450 --> 00:03:10,920
we have to destructure the handleSubmit function

76
00:03:10,920 --> 00:03:12,540
from our props object.

77
00:03:12,540 --> 00:03:13,740
And again, as a reminder

78
00:03:13,740 --> 00:03:16,023
this is provided to us by Redux form.

79
00:03:17,130 --> 00:03:19,470
It's now on the form tag itself,

80
00:03:19,470 --> 00:03:21,340
we can add on an onSubmit

81
00:03:22,230 --> 00:03:26,640
and we'll call handleSubmit and to handleSubmit,

82
00:03:26,640 --> 00:03:29,880
we will pass the callback that we want to be executed

83
00:03:29,880 --> 00:03:32,040
when the user submits the form.

84
00:03:32,040 --> 00:03:32,910
And so for you and me,

85
00:03:32,910 --> 00:03:35,880
that's gonna be the onSubmit method that we just created.

86
00:03:35,880 --> 00:03:38,283
So we'll pass this.onSubmit.

87
00:03:39,240 --> 00:03:40,410
And then as a quick reminder,

88
00:03:40,410 --> 00:03:43,260
we are not putting on any parentheses here

89
00:03:43,260 --> 00:03:44,940
cuz we don't want to call onSubmit

90
00:03:44,940 --> 00:03:46,860
the instant we render this form.

91
00:03:46,860 --> 00:03:48,390
Instead, we want to render it

92
00:03:48,390 --> 00:03:51,210
or call onSubmit at some point in the future.

93
00:03:51,210 --> 00:03:53,070
So we're not gonna put on the parentheses

94
00:03:53,070 --> 00:03:55,290
so that we instead pass a reference

95
00:03:55,290 --> 00:03:57,903
to the onSubmit function to handle submit.

96
00:03:59,190 --> 00:04:00,900
Now the very last thing we have to do inside of here

97
00:04:00,900 --> 00:04:03,960
is make sure that our form has a button inside of it

98
00:04:03,960 --> 00:04:05,550
that the user can click to actually

99
00:04:05,550 --> 00:04:07,323
attempt to submit the form itself.

100
00:04:08,250 --> 00:04:10,713
So down towards the bottom of the form tag,

101
00:04:11,550 --> 00:04:15,630
I'll add on a button

102
00:04:15,630 --> 00:04:16,463
that simply says

103
00:04:16,463 --> 00:04:19,079
something like Sign up.

104
00:04:19,079 --> 00:04:20,043
I think that works.

105
00:04:20,940 --> 00:04:23,040
Okay, so now we're ready to test this out

106
00:04:23,040 --> 00:04:24,960
and all we're really testing right now is making sure

107
00:04:24,960 --> 00:04:27,600
that we can call onSubmit and see a console log

108
00:04:27,600 --> 00:04:30,400
with the email and password that we enter into the form.

109
00:04:31,680 --> 00:04:34,380
So I'm gonna flip back over to my application.

110
00:04:34,380 --> 00:04:37,170
I'm gonna enter in some email and password

111
00:04:37,170 --> 00:04:38,520
totally arbitrary what you put in there

112
00:04:38,520 --> 00:04:39,810
it doesn't really matter.

113
00:04:39,810 --> 00:04:41,460
And then we'll click on Sign Up

114
00:04:41,460 --> 00:04:43,650
and we should see our email and password

115
00:04:43,650 --> 00:04:46,080
appear in the object inside the console.

116
00:04:46,080 --> 00:04:46,913
Very good.

117
00:04:46,913 --> 00:04:48,690
Okay, so that part wasn't that bad.

118
00:04:48,690 --> 00:04:50,130
In the next section, we're gonna come back

119
00:04:50,130 --> 00:04:50,970
and we're gonna start thinking

120
00:04:50,970 --> 00:04:53,820
about wiring up this signup Action Creator.

121
00:04:53,820 --> 00:04:55,410
And as a reminder, we still have to hook

122
00:04:55,410 --> 00:04:58,560
up some asynchronous middleware to our application as well

123
00:04:58,560 --> 00:05:00,450
so that we can actually make network requests

124
00:05:00,450 --> 00:05:02,220
from that Action Creator.

125
00:05:02,220 --> 00:05:04,920
So quick break and we'll continue in the next section.