Instructor: Our signup form is kind of ugly right now,
but at least we can enter an email and password
and presumably Redux form is handling those values.
Now that we've got this form in a reasonable state
we're gonna be thinking about taking
the email and password and using them
to sign up to a new account
with our API on the backend.
Now, doing this actual signup process
is going to involve you and I writing a lot of code
into several different files almost in parallel.
So before we kick off this process
I just wanna give you a quick overview
of what we're going to be doing in the next couple sections.
All right, so kind of a deceptive diagram right here.
We've got our SignUp Form component.
You and I are going to define a method inside there
called something like onSubmit.
And this will be called Anytime a user submits the form.
Inside of onSubmit, we're going to invoke an Action Creator
that we still have to put together called
something like the Signup Action Creator.
Signup right here will take the email and password
that the user entered into the form
and communicate it over to the backend API
to create a new account
and get a JSON web token in exchange.
Now, the reason that this process is gonna be a little bit
complicated is that we still have to write
a lot of code on the side to facilitate this entire process.
For example, with our signup Action Creator
we don't have any middleware hooked up
to our Redux application that will allow us
to make asynchronous request yet.
So we still have to take care of some initial setup
of the Redux side of things inside of our application.
So again, I just want you to be aware
that we're going to be going
through a couple of different files
and writing out a lot of code in parallel.
All right, so now that we are properly prepped
let's continue right now inside of our Signup form
and we're gonna start putting together
this onSubmit event handler to watch
for a submission of the form.
So I'll flip back over to my signup component
and right above my render method
I'm going to define a new method called onSubmit.
And I'm going to make this an instance property
that receives an arrow function.
By making this an arrow function like so
we don't have to worry about binding
the context of onSubmit.
So it's just gonna save us having to call
bind somewhere and worry about that.
The onSubmit function is gonna receive as a first argument
all the properties that the user entered into the form.
So essentially an object with the email and the password.
I'll receive that as an argument called formProps.
And then inside of onSubmit for right now,
let's just console.log(formProps).
Okay, so that's easy enough.
Now we need to make sure that anytime
the user submits the form, we call onSubmit,
but it's not quite as easy
as adding that callback to the form itself.
Remember that when we make use of Redux form
we get a function on our props object called handleSubmit.
And it's that function that we have to call
that's going to make sure that we take
the email and password out of the form itself
and provide it to our onSubmit callback.
So before we try adding any callback directly
to the form tag
we have to destructure the handleSubmit function
from our props object.
And again, as a reminder
this is provided to us by Redux form.
It's now on the form tag itself,
we can add on an onSubmit
and we'll call handleSubmit and to handleSubmit,
we will pass the callback that we want to be executed
when the user submits the form.
And so for you and me,
that's gonna be the onSubmit method that we just created.
So we'll pass this.onSubmit.
And then as a quick reminder,
we are not putting on any parentheses here
cuz we don't want to call onSubmit
the instant we render this form.
Instead, we want to render it
or call onSubmit at some point in the future.
So we're not gonna put on the parentheses
so that we instead pass a reference
to the onSubmit function to handle submit.
Now the very last thing we have to do inside of here
is make sure that our form has a button inside of it
that the user can click to actually
attempt to submit the form itself.
So down towards the bottom of the form tag,
I'll add on a button
that simply says
something like Sign up.
I think that works.
Okay, so now we're ready to test this out
and all we're really testing right now is making sure
that we can call onSubmit and see a console log
with the email and password that we enter into the form.
So I'm gonna flip back over to my application.
I'm gonna enter in some email and password
totally arbitrary what you put in there
it doesn't really matter.
And then we'll click on Sign Up
and we should see our email and password
appear in the object inside the console.
Very good.
Okay, so that part wasn't that bad.
In the next section, we're gonna come back
and we're gonna start thinking
about wiring up this signup Action Creator.
And as a reminder, we still have to hook
up some asynchronous middleware to our application as well
so that we can actually make network requests
from that Action Creator.
So quick break and we'll continue in the next section.