-: We've finished all of our logic for validation of our form
and now we're onto the little bit more easy part here.
We just need to actually handle the form submit event.
So right now we've got a form
but we're not really handling
when a user tries to submit it.
Now handling the submit event
here is gonna be very much like and pretty much identical
to all of the other form submits we've ever done before.
So we're going to just say,
on submit call the handle submit helper
that we pulled in from Redux form.
And when handle submit is called,
we want it to eventually call our submit handler
that we're gonna create ourselves
called this dot handle form submit
and we're going to make sure
to bind the context of that helper as well
by using dot bind this.
Now we can set up our form submit handler.
Let's say handle submit.
Remember this submit handler right here
is gonna be called with all the different properties
off of our form.
So like the email, the password
and the password confirmation.
So it's gonna be called with what we'll call form props.
So right here, this is basically a great spot
to call action creator
to sign up the user.
It's pretty much what we wanna do here.
We have the email and password.
We want to send this off
to our backend and attempt to create our account.
One thing that's really important also to note here
is that if our form is not valid
and we're checking for validation
or whether or not it is valid
by using the validate function at the bottom.
If the form is not valid,
if a user tries to submit it,
handle submit will not be called.
So Redux form is pretty intelligent about that.
If the form is not valid,
it's not going to allow handle submit to be called.
So by this point in time,
inside of here, inside of handle submit,
we can really just assume,
okay, the properties off this form are 100% valid,
we can submit them to the backend
and kind of leave it to the backend
to figure out or make that final call
on whether or not the form is actually valid.
So we don't really have an action creator
to handle the signup event just yet.
Let's just go ahead and assume
that we're gonna create an action creator here.
We've already wired up
our action creators to this component.
So I'm going to just assume
that we're going to have an action creator
called signup user
and that's going to take the email and password
that we're trying to sign our user up with.
So again, I'm going to assume
that we're gonna call this signup user.
And I want to specifically pass into this
an object that contains just the email
and the password from our form.
And so we are getting already all of our form props
inside of this argument right here,
and so I actually don't need these curly braces right here.
We can just pass through all the different properties
off the form and call it good.
So when a user clicks handle submit,
call our sign up user action creator
and pass all the different form properties into it
and we should be be good to go.
So now, nearly last step here
is to create this signup user action creator.
So to do this we're gonna flip over
to our action creators file
which is gonna be in source actions index dot js.
So we've already got a whole bunch of logic in here
for our sign in user and as it so happens
our signup user is going to end up looking nearly identical.
Really if you think about it,
we're kind of doing the exact same thing in both cases.
With the sign in user, we posted an email and a password
to some URL endpoint.
And then if the response was good,
we set the validation piece of state to true,
or excuse me the authenticated part of state to true.
We saved the token we got back
and we redirected the user over to route
that we just called feature.
If the request was bad,
we showed an error to the user like so.
And so this signup user action creator
is gonna look nearly identical.
Again, this is gonna be a great opportunity
to kind of dry up our code in the future
or kind of condense it down,
not to be quite so verbose
and duplicate a lot of logic here.
But there's gonna be another point in time
where I'm gonna kind of leave it up to you
to do a little bit of refactoring here.
So let's give a shot at our signup user action creator.
I'll say we're gonna export a function
called signup user
and it's going to be called
with an object that contains the field's email and password.
If you think about it, we really don't want
to send the password confirmation to the backend.
The backend that we've put together has really no idea
what the password confirmation even means.
We're not really making use of that piece of information
in any fashion on the backend.
So really the only two properties that we care about here
are the email and the password coming off the form.
Again, we're gonna make use of Redux thunk
by returning a function from our action creator here.
So I'm gonna return a function
that's gonna be called with the dispatch.
So at some point in the future,
we can just kind of arbitrarily
dispatch an action to the rest of our application.
Then inside of here, we'll make a post request
again to our root URL.
Except this time, instead of going to the sign in route
we're gonna go to the sign up route.
And I'm gonna attach an object here
that contains the email and the password.
Okay, so this is definitely gonna do the sign up for us.
Let's kind of test this in our browser
and make sure that we're actually able to create an account.
We're not gonna get any kinda handling of the token
or signing us in or showing any air messages just yet
but we should at least be able to create an account
by virtue of just this post request
that we've added right here.
So I'm gonna flip back over the browser.
I'm gonna refresh.
Looks like I got a little bit of a typo
with a property bind of undefined.
So I suspect that back inside of my signup component,
I mislabeled handle submit here.
Again, this is probably one of the things
that all of you are watching,
you're saying, why in the world
did you use handle form submit here
but handle submit up here?
Totally my bad.
I'm gonna change this to handle form submit.
So when a user submits the form,
it's gonna call our helper handle form submit.
I'm gonna flip back over.
Let's refresh again.
Okay, here's our email.
I'm gonna use a test123456
@example.com
and then a password of password.
And I'm gonna flip over to the network tab.
Do make sure that your server is running.
So my server is still running over here,
so I see that the server is listening in port 3090.
And I'm gonna click sign up.
And it looks like we're not immediately
getting anything back from the server.
So let's do a little bit of troubleshooting
inside the next section and see what's going on.