Welcome back.
Let's implement more routes into our front-end app.
We've just done the Sign In on the front-end.
So now let's also work on the Register, and we already have a nice framework of what we want to do based
on what we did with Sign In. We can again convert this to a class that extends 'React.Component'.
And this will render
this return statement.
And we also want to have a couple of routes that for now we're just going to completely copy from Sign In.
And here we'll just have – for registration
we can say
'email' 'password'
And then finally also 'name'
and we'll have to add another method here.
That will be just for the name and this will be called 'onNameChange' and we'll have to change the
values to 'name', 'email' and 'password'. Awesome.
We'll save that and we'll have to actually start adding these to our component.
The first thing we want to do is we want to use destructuring to get our component or 'onRouteChange'
from 'this.props' and let's add 'onPasswordChange' on all the other inputs; again creating these
on a new line.
Whoo! All right.
And again we want to create a 'fetch' method here.
So looking at Sign In we definitely want to do a POST so we can just copy this for now.
Again not a big fan of copying and repetition of code but I hope this gives you an idea of some of the
things we can improve on as we improve our app later on.
Now on 'submitSignIn' again we will want to do this instead of the 'onRouteChange' so let's do 'on'
and we'll have to do 'this.onSubmitSignIn'.
And I forgot the this keyword in all these as well.
All right, now the – I see that we're missing the 'email' from here.
That shouldn't be there.
All right.
And we will want to make sure we send the 'email' to 'this.state.email'
-
We'll do 'password'
And finally we'll do 'this.state.name'.
And 'onRouteChange' – we don't need it over here anymore do we? 'onRouteChange'
– we want to go to 'home' once we're registered, but remember if we go to our server our '/register' returns
the last user
so our current user. This data will be the user.
So let's just say user.
So if we get a user back we will route-change to 'home' and we also probably want to update the user profile
on the front-end.
But if you look at the front-end, we don't have a user profile yet but maybe we should.
So let's add that. I'm going to say user and it's going to be an object that contains 'email', which is
an empty string.
And we can just copy whatever we get returned from our database
in our case
it'll be all these values – we don't need the email because we have it down there – except everything will be
empty to start off, and we don't need to return the password.
'email' is removed. 'entries' will be zero for now, and 'joined' will just be an empty string.
Ideally when we register we can update these.
So what we can do with Register is that we will have a route change but perhaps also call a function
call: 'updateUser' or 'loadUser', which we don't have yet.
And we can perhaps pass the user object to this.
And because this is something that the entire app needs I think we should build it in the App component.
So we'll save 'this.props.loadUser(user)' and we'll go back to 'App.js' and create that function
We'll say 'loadUser', 'user' and it'll just update the state with the user that we received.
In our case it'll be these values.
And all these values will come from the 'user' parameter. And let's just change the name here just so we
don't get confused – to 'data' for now.
'data.id'
We'll have 'name' here; we'll have 'email'
'entries'
And then finally
'joined'. I have the syntax here a little bit off. There you go.
All right if we go back to 'Register.js' we have 'onRouteChange' saved successfully. So we're loading the user
and then also changing the route. That was a lot of work without testing the code
so let's check it out.
Let's see if this works.
I'm going to go to Register. I doubt this works the first time but let's see. 'wes@gmail.com'
That's the name.
So we'll say 'wes', 'wes@gmail.com' our password is '123'. I'm going to open up the Console here just to see
what kind of errors we get.
I doubt that it works the first time but we'll see.
Register. All right.
We have a couple of errors here. "loadUser is not a function" and that is because if we go to 'App.js'
'loadUser' is never passed into 'Register'.
So let's do that.
'Register' will also receive 'loadUser'
like this.
And it'll have to be 'this.loadUser'.
-
All right.
Round two.
Let's see if this works.
One two three.
All right.
We're able to sign in but we have a bad request.
Let's see our information looks good.
'email', 'name', 'password'.
And the response we got was "error logging in".
And that's because if we go back to our Register page.
Well we didn't change just this to '/register' did we?
That's silly of us.
We change that to 'register', save
I'm going to get
tired of writing Wes's information here.
And register. All right.
No errors. Let's see what the response was of 'register'.
We get the response; Wes is user '125'; 'password' is '123'; 'entries' is 0', and 'joined' – on this day.
Again we don't really want the password.
We shouldn't really be returning the password, but it's an easy fix and we just simply remove it from
the 'server.js'.
How cool is that?
We have our self a registration.
And if we actually go back to just a root route, or if we go to localhost, let's go on this side over
here.
And just go to the root route; we've refreshed again so Wes is not there but if you register again ...
Again this is exactly why we cannot wait to have a database.
Let's try that again and look at that.
We have Wes as our user.
Very cool.
And now there's a bit of repetition right? We just pretty much fetch in order to connect with our server
and both parties want to make sure that they send the right data and the server responds with the right
data.
There's definitely a lot of cleanup that we can do – a lot of errors that can happen – for example if I
enter an invalid email and password or username.
But I think you're starting to get the point.
All right.
I'll see you in the next one. Bye-bye