1
00:00:00,810 --> 00:00:03,030
-: We've made some good progress on our signup form

2
00:00:03,030 --> 00:00:05,280
but it still has some goofy behavior.

3
00:00:05,280 --> 00:00:06,810
Let me show you really quick.

4
00:00:06,810 --> 00:00:09,180
I'm gonna flip back over to my application

5
00:00:09,180 --> 00:00:11,340
and I'm gonna sign up for a new account.

6
00:00:11,340 --> 00:00:15,300
I'll use an email of browser@browser.com

7
00:00:15,300 --> 00:00:18,450
and a password and then I'll sign in.

8
00:00:18,450 --> 00:00:20,190
Now if I go to my network tab

9
00:00:20,190 --> 00:00:23,070
I can very plainly see that that request just succeeded.

10
00:00:23,070 --> 00:00:24,990
But if I click on that button again

11
00:00:24,990 --> 00:00:27,840
I get an error message and if I look at that request

12
00:00:27,840 --> 00:00:30,990
it tells me very plainly that the email is in use.

13
00:00:30,990 --> 00:00:31,830
So we need to make sure

14
00:00:31,830 --> 00:00:34,620
that if the request to sign up fails,

15
00:00:34,620 --> 00:00:37,020
we communicate that error back over to the user

16
00:00:37,020 --> 00:00:39,210
and tell them, "Hey, something just went wrong.

17
00:00:39,210 --> 00:00:41,580
You probably signed up for an account

18
00:00:41,580 --> 00:00:43,580
with an email that's already been used."

19
00:00:44,430 --> 00:00:46,230
Now in order to get that error message

20
00:00:46,230 --> 00:00:48,330
you'll recall that inside of our auth reducer

21
00:00:48,330 --> 00:00:49,980
we said that we would have that error

22
00:00:49,980 --> 00:00:53,910
or we called it error message piece of state.

23
00:00:53,910 --> 00:00:57,750
So all we have to do is inside of our signup action creator

24
00:00:57,750 --> 00:01:00,120
check to see if that request fails.

25
00:01:00,120 --> 00:01:02,670
And if it does fail we'll dispatch an action

26
00:01:02,670 --> 00:01:03,877
that tells our reducer,

27
00:01:03,877 --> 00:01:06,270
"Hey, something just went wrong."

28
00:01:06,270 --> 00:01:09,663
So to get started, I'll open up my signup action creator.

29
00:01:11,070 --> 00:01:13,620
When we're using the async await syntax

30
00:01:13,620 --> 00:01:15,810
we can catch errors that are thrown

31
00:01:15,810 --> 00:01:17,970
from our request right here

32
00:01:17,970 --> 00:01:21,570
by wrapping it with a try catch statement.

33
00:01:21,570 --> 00:01:25,710
So around our request, I'll put a try block.

34
00:01:25,710 --> 00:01:28,230
So there's my opening curly brace

35
00:01:28,230 --> 00:01:30,273
and then my closing curly brace.

36
00:01:32,610 --> 00:01:35,250
And then I'll add on the catch case.

37
00:01:35,250 --> 00:01:38,280
So now right here, this code will run if anything goes wrong

38
00:01:38,280 --> 00:01:40,580
with our request to sign up for a new account.

39
00:01:41,670 --> 00:01:44,580
For us we probably want to dispatch an action

40
00:01:44,580 --> 00:01:48,360
with some type of something like auth error

41
00:01:48,360 --> 00:01:50,340
and we'll give a payload of some error message

42
00:01:50,340 --> 00:01:52,260
to show to our user.

43
00:01:52,260 --> 00:01:54,540
So if we get down here into that catch case

44
00:01:54,540 --> 00:01:58,270
I will dispatch an action with type auth error

45
00:02:00,210 --> 00:02:02,507
and a payload of something like email,

46
00:02:02,507 --> 00:02:06,243
let's do it in normal caps, email in use.

47
00:02:09,250 --> 00:02:11,520
Okay, so now if anything goes wrong with our request

48
00:02:11,520 --> 00:02:12,690
to sign up for a new account,

49
00:02:12,690 --> 00:02:15,960
we will dispatch an action of type auth error.

50
00:02:15,960 --> 00:02:18,000
Now we have not yet actually defined this type

51
00:02:18,000 --> 00:02:20,550
so let's make sure that we very quickly do that.

52
00:02:20,550 --> 00:02:23,553
I'm gonna add that type to the import statement at the top.

53
00:02:26,730 --> 00:02:28,860
And then I will flip over to my types file

54
00:02:28,860 --> 00:02:30,610
and define it inside there as well.

55
00:02:31,710 --> 00:02:33,120
So over inside my types file,

56
00:02:33,120 --> 00:02:36,213
I'll do export const auth error.

57
00:02:37,890 --> 00:02:41,730
And then finally I will flip back over to my auth reducer

58
00:02:41,730 --> 00:02:44,330
and make sure that we watch for the type auth error.

59
00:02:45,300 --> 00:02:47,790
So inside my reducer file,

60
00:02:47,790 --> 00:02:51,813
I will grab the type import at the top, auth error.

61
00:02:52,800 --> 00:02:55,593
And then finally we can add a new case to our reducer.

62
00:02:56,430 --> 00:03:00,873
So inside the reducer itself we'll do case auth error.

63
00:03:01,710 --> 00:03:05,160
And if that happens, we'll return our state object

64
00:03:05,160 --> 00:03:10,160
with an error message property of action dot payload.

65
00:03:13,770 --> 00:03:16,470
Cool, so now all we have to do is go back over

66
00:03:16,470 --> 00:03:19,200
to our signup component and make sure

67
00:03:19,200 --> 00:03:21,660
that we pull this error message piece of state

68
00:03:21,660 --> 00:03:23,313
into the component itself.

69
00:03:24,300 --> 00:03:26,710
So inside of my signup dot js file

70
00:03:27,660 --> 00:03:29,610
I'll go down to the bottom of the file.

71
00:03:30,660 --> 00:03:32,160
Right now we are not pulling any

72
00:03:32,160 --> 00:03:33,930
pieces of state out of redux.

73
00:03:33,930 --> 00:03:38,130
Here's our empty connect map state to props argument.

74
00:03:38,130 --> 00:03:42,873
So I will add a map state to props function.

75
00:03:44,670 --> 00:03:46,800
It will receive our state object

76
00:03:46,800 --> 00:03:51,210
and we will return an error message property

77
00:03:51,210 --> 00:03:54,300
from state dot auth

78
00:03:54,300 --> 00:03:56,793
dot error message.

79
00:04:01,980 --> 00:04:03,240
And then I will make sure that I pass

80
00:04:03,240 --> 00:04:05,940
that function as the first argument into connect.

81
00:04:05,940 --> 00:04:08,013
So map state to props.

82
00:04:11,430 --> 00:04:13,560
Okay, so that looks pretty good.

83
00:04:13,560 --> 00:04:15,510
Now the very last thing we have to do is make sure

84
00:04:15,510 --> 00:04:17,550
that if we are given this

85
00:04:17,550 --> 00:04:19,529
error message property inside of our component,

86
00:04:19,529 --> 00:04:21,870
we try to show it inside the form.

87
00:04:21,870 --> 00:04:25,470
So how about just right on top of our button right here

88
00:04:25,470 --> 00:04:29,520
I'll add on a div that will show the result

89
00:04:29,520 --> 00:04:34,263
of this dot props dot error message.

90
00:04:36,720 --> 00:04:38,280
Okay, so now we're going to print out

91
00:04:38,280 --> 00:04:40,920
the error message inside the form.

92
00:04:40,920 --> 00:04:43,140
I'm gonna flip back over to the browser

93
00:04:43,140 --> 00:04:45,450
and we'll test this out really quickly.

94
00:04:45,450 --> 00:04:48,480
So if I put in desk@desk.com

95
00:04:48,480 --> 00:04:50,220
or any email that you've used before.

96
00:04:50,220 --> 00:04:52,053
I think actually I used browser.

97
00:04:53,880 --> 00:04:55,530
I'll put my password in

98
00:04:55,530 --> 00:04:57,180
and then if I sign up you'll notice

99
00:04:57,180 --> 00:04:58,770
that we get the error message there.

100
00:04:58,770 --> 00:05:01,470
But you'll also notice that our div

101
00:05:01,470 --> 00:05:03,600
with that error message did not actually show up.

102
00:05:03,600 --> 00:05:05,220
So chances are I just made

103
00:05:05,220 --> 00:05:07,770
a little typo somewhere along the way here.

104
00:05:07,770 --> 00:05:09,420
Let's take a quick pause right now.

105
00:05:09,420 --> 00:05:10,530
I'll find that typo

106
00:05:10,530 --> 00:05:11,940
and then we'll come back in the next section

107
00:05:11,940 --> 00:05:14,160
and figure out exactly what went wrong.

108
00:05:14,160 --> 00:05:16,610
So quick break and I'll see you in just a minute.