1
00:00:00,570 --> 00:00:01,290
Welcome back.

2
00:00:01,410 --> 00:00:05,160
Let's implement more routes into our front-end app.

3
00:00:05,230 --> 00:00:09,430
We've just done the Sign In on the front-end.

4
00:00:09,580 --> 00:00:18,320
So now let's also work on the Register, and we already have a nice framework of what we want to do based

5
00:00:18,320 --> 00:00:34,290
on what we did with Sign In. We can again convert this to a class that extends 'React.Component'.

6
00:00:34,520 --> 00:00:37,340
And this will render

7
00:00:42,370 --> 00:00:49,870
this return statement.

8
00:00:50,100 --> 00:00:57,520
And we also want to have a couple of routes that for now we're just going to completely copy from Sign In.

9
00:01:05,120 --> 00:01:09,140
And here we'll just have – for registration

10
00:01:09,180 --> 00:01:09,830
we can say

11
00:01:12,330 --> 00:01:16,000
'email' 'password'

12
00:01:16,270 --> 00:01:18,190
And then finally also 'name'

13
00:01:21,840 --> 00:01:25,750
and we'll have to add another method here.

14
00:01:26,960 --> 00:01:35,460
That will be just for the name and this will be called 'onNameChange' and we'll have to change the

15
00:01:35,460 --> 00:01:43,680
values to 'name', 'email' and 'password'. Awesome.

16
00:01:48,230 --> 00:01:55,680
We'll save that and we'll have to actually start adding these to our component.

17
00:01:55,680 --> 00:02:02,700
The first thing we want to do is we want to use destructuring to get our component or 'onRouteChange'

18
00:02:03,600 --> 00:02:12,820
from 'this.props' and let's add 'onPasswordChange' on all the other inputs; again creating these

19
00:02:12,820 --> 00:02:36,860
on a new line.

20
00:02:37,030 --> 00:02:38,830
Whoo! All right.

21
00:02:38,990 --> 00:02:41,720
And again we want to create a 'fetch' method here.

22
00:02:41,720 --> 00:02:48,910
So looking at Sign In we definitely want to do a POST so we can just copy this for now.

23
00:02:48,910 --> 00:02:55,700
Again not a big fan of copying and repetition of code but I hope this gives you an idea of some of the

24
00:02:55,700 --> 00:03:00,410
things we can improve on as we improve our app later on.

25
00:03:00,830 --> 00:03:10,680
Now on 'submitSignIn' again we will want to do this instead of the 'onRouteChange' so let's do 'on'

26
00:03:11,350 --> 00:03:16,600
and we'll have to do 'this.onSubmitSignIn'.

27
00:03:16,740 --> 00:03:21,260
And I forgot the this keyword in all these as well.

28
00:03:25,070 --> 00:03:30,600
All right, now the – I see that we're missing the 'email' from here.

29
00:03:30,620 --> 00:03:31,480
That shouldn't be there.

30
00:03:31,500 --> 00:03:32,340
All right.

31
00:03:32,460 --> 00:03:38,010
And we will want to make sure we send the 'email' to 'this.state.email'

32
00:03:38,540 --> 00:03:39,700
-

33
00:03:43,070 --> 00:03:50,020
We'll do 'password'

34
00:03:50,120 --> 00:03:54,260
And finally we'll do 'this.state.name'.

35
00:03:58,580 --> 00:04:05,430
And 'onRouteChange' – we don't need it over here anymore do we? 'onRouteChange'

36
00:04:05,620 --> 00:04:12,610
– we want to go to 'home' once we're registered, but remember if we go to our server our '/register' returns

37
00:04:12,610 --> 00:04:13,940
the last user

38
00:04:13,960 --> 00:04:19,839
so our current user. This data will be the user.

39
00:04:19,850 --> 00:04:26,130
So let's just say user.

40
00:04:26,230 --> 00:04:36,640
So if we get a user back we will route-change to 'home' and we also probably want to update the user profile

41
00:04:37,330 --> 00:04:38,250
on the front-end.

42
00:04:39,630 --> 00:04:44,720
But if you look at the front-end, we don't have a user profile yet but maybe we should.

43
00:04:44,720 --> 00:04:52,430
So let's add that. I'm going to say user and it's going to be an object that contains 'email', which is

44
00:04:52,430 --> 00:04:53,480
an empty string.

45
00:04:54,910 --> 00:04:59,680
And we can just copy whatever we get returned from our database

46
00:05:04,180 --> 00:05:05,060
in our case

47
00:05:05,140 --> 00:05:12,580
it'll be all these values – we don't need the email because we have it down there – except everything will be

48
00:05:13,760 --> 00:05:17,690
empty to start off, and we don't need to return the password.

49
00:05:22,400 --> 00:05:30,850
'email' is removed. 'entries' will be zero for now, and 'joined' will just be an empty string.

50
00:05:30,860 --> 00:05:34,690
Ideally when we register we can update these.

51
00:05:34,760 --> 00:05:42,650
So what we can do with Register is that we will have a route change but perhaps also call a function

52
00:05:42,650 --> 00:05:51,830
call: 'updateUser' or 'loadUser', which we don't have yet.

53
00:05:51,830 --> 00:05:55,370
And we can perhaps pass the user object to this.

54
00:05:55,680 --> 00:06:01,840
And because this is something that the entire app needs I think we should build it in the App component.

55
00:06:01,970 --> 00:06:11,460
So we'll save 'this.props.loadUser(user)' and we'll go back to 'App.js' and create that function

56
00:06:12,400 --> 00:06:28,370
We'll say 'loadUser', 'user' and it'll just update the state with the user that we received.

57
00:06:30,570 --> 00:06:33,030
In our case it'll be these values.

58
00:06:46,030 --> 00:06:54,100
And all these values will come from the 'user' parameter. And let's just change the name here just so we

59
00:06:54,100 --> 00:06:57,350
don't get confused – to 'data' for now.

60
00:07:02,120 --> 00:07:03,260
'data.id'

61
00:07:06,890 --> 00:07:11,110
We'll have 'name' here; we'll have 'email'

62
00:07:15,360 --> 00:07:16,210
'entries'

63
00:07:16,530 --> 00:07:17,490
And then finally

64
00:07:23,520 --> 00:07:33,950
'joined'. I have the syntax here a little bit off. There you go.

65
00:07:34,080 --> 00:07:41,130
All right if we go back to 'Register.js' we have 'onRouteChange' saved successfully. So we're loading the user

66
00:07:41,670 --> 00:07:46,020
and then also changing the route. That was a lot of work without testing the code

67
00:07:46,020 --> 00:07:47,300
so let's check it out.

68
00:07:47,400 --> 00:07:48,570
Let's see if this works.

69
00:07:49,440 --> 00:08:02,890
I'm going to go to Register. I doubt this works the first time but let's see. 'wes@gmail.com'

70
00:08:03,230 --> 00:08:03,920
That's the name.

71
00:08:03,950 --> 00:08:12,370
So we'll say 'wes', 'wes@gmail.com' our password is '123'. I'm going to open up the Console here just to see

72
00:08:12,370 --> 00:08:13,710
what kind of errors we get.

73
00:08:15,860 --> 00:08:17,810
I doubt that it works the first time but we'll see.

74
00:08:17,810 --> 00:08:19,930
Register. All right.

75
00:08:19,930 --> 00:08:29,590
We have a couple of errors here. "loadUser is not a function" and that is because if we go to 'App.js'

76
00:08:29,630 --> 00:08:34,450
'loadUser' is never passed into 'Register'.

77
00:08:34,530 --> 00:08:35,190
So let's do that.

78
00:08:38,110 --> 00:08:42,730
'Register' will also receive 'loadUser'

79
00:08:46,810 --> 00:08:47,200
like this.

80
00:08:50,720 --> 00:08:52,130
And it'll have to be 'this.loadUser'.

81
00:08:52,220 --> 00:08:52,780
-

82
00:08:53,300 --> 00:08:53,830
All right.

83
00:08:53,870 --> 00:08:54,520
Round two.

84
00:08:54,620 --> 00:08:55,960
Let's see if this works.

85
00:09:03,250 --> 00:09:08,190
One two three.

86
00:09:08,190 --> 00:09:08,710
All right.

87
00:09:08,730 --> 00:09:17,160
We're able to sign in but we have a bad request.

88
00:09:17,190 --> 00:09:21,210
Let's see our information looks good.

89
00:09:21,210 --> 00:09:23,210
'email', 'name', 'password'.

90
00:09:23,630 --> 00:09:26,830
And the response we got was "error logging in".

91
00:09:27,110 --> 00:09:31,580
And that's because if we go back to our Register page.

92
00:09:31,610 --> 00:09:34,390
Well we didn't change just this to '/register' did we?

93
00:09:34,400 --> 00:09:35,680
That's silly of us.

94
00:09:36,580 --> 00:09:39,190
We change that to 'register', save

95
00:09:42,670 --> 00:09:42,910
I'm going to get

96
00:09:42,920 --> 00:09:45,420
tired of writing Wes's information here.

97
00:09:50,000 --> 00:09:54,700
And register. All right.

98
00:09:54,720 --> 00:10:00,990
No errors. Let's see what the response was of 'register'.

99
00:10:01,180 --> 00:10:11,340
We get the response; Wes is user '125'; 'password' is '123'; 'entries' is 0', and 'joined' – on this day.

100
00:10:11,470 --> 00:10:13,590
Again we don't really want the password.

101
00:10:13,630 --> 00:10:22,250
We shouldn't really be returning the password, but it's an easy fix and we just simply remove it from

102
00:10:22,250 --> 00:10:24,490
the 'server.js'.

103
00:10:24,500 --> 00:10:25,420
How cool is that?

104
00:10:25,430 --> 00:10:27,700
We have our self a registration.

105
00:10:28,130 --> 00:10:35,260
And if we actually go back to just a root route, or if we go to localhost, let's go on this side over

106
00:10:35,270 --> 00:10:35,730
here.

107
00:10:36,940 --> 00:10:44,470
And just go to the root route; we've refreshed again so Wes is not there but if you register again ...

108
00:10:48,050 --> 00:10:53,020
Again this is exactly why we cannot wait to have a database.

109
00:10:53,060 --> 00:10:55,630
Let's try that again and look at that.

110
00:10:55,670 --> 00:10:59,230
We have Wes as our user.

111
00:10:59,290 --> 00:11:00,520
Very cool.

112
00:11:00,520 --> 00:11:06,760
And now there's a bit of repetition right? We just pretty much fetch in order to connect with our server

113
00:11:07,060 --> 00:11:12,910
and both parties want to make sure that they send the right data and the server responds with the right

114
00:11:12,910 --> 00:11:13,480
data.

115
00:11:13,480 --> 00:11:18,190
There's definitely a lot of cleanup that we can do – a lot of errors that can happen – for example if I

116
00:11:18,190 --> 00:11:23,210
enter an invalid email and password or username.

117
00:11:23,430 --> 00:11:26,280
But I think you're starting to get the point.

118
00:11:26,290 --> 00:11:26,650
All right.

119
00:11:26,740 --> 00:11:28,040
I'll see you in the next one. Bye-bye