1
00:00:00,300 --> 00:00:01,170
That wasn't nice and easy.

2
00:00:01,500 --> 00:00:05,970
So now let's complete our register user functionality.

3
00:00:06,570 --> 00:00:13,350
And the first thing that we want to do is import our access library and in the registered user.

4
00:00:13,890 --> 00:00:20,700
Right from the get go, we want to dispatch register user opinion and as far as how we're going to handle

5
00:00:20,700 --> 00:00:22,080
that action and the reducer.

6
00:00:22,500 --> 00:00:26,100
Well, like I said, most set up is loading to true.

7
00:00:26,760 --> 00:00:32,070
So essentially, we're indicating that now we're performing the actual request.

8
00:00:32,549 --> 00:00:38,670
And as a result, or user won't be able to click one more time submit button.

9
00:00:39,030 --> 00:00:44,820
So that's the first thing I ever wanted when we want to set up, try and catch because we might encounter

10
00:00:45,030 --> 00:00:49,410
synchronous error and therefore using try and catch is super nifty.

11
00:00:49,890 --> 00:00:58,110
And then since Axios returns a promise, we want to go with award and also set up our function as async.

12
00:00:58,380 --> 00:01:02,670
Now, I don't remember whether I already set it up or not, but essentially this is what you need to

13
00:01:02,670 --> 00:01:02,910
do.

14
00:01:03,070 --> 00:01:06,160
You set it up as I think, and then we go with it.

15
00:01:06,420 --> 00:01:11,550
And then as far as the syntax, we go with actions and then post which signals that this is going to

16
00:01:11,550 --> 00:01:12,600
be a post method.

17
00:01:13,140 --> 00:01:15,390
Now why we want to set it up as both method.

18
00:01:15,590 --> 00:01:19,440
Remember, that's what we require in our server.

19
00:01:19,620 --> 00:01:20,010
Correct.

20
00:01:20,190 --> 00:01:26,670
And as a quick sign of actually other options that you can use for syntax as far as access is concerned,

21
00:01:26,670 --> 00:01:33,690
for example, if you navigate to the docs, you look at Axios API, you can go Axios and then pass in

22
00:01:33,690 --> 00:01:34,200
the object.

23
00:01:34,500 --> 00:01:40,140
But again, it is my preference here where I just set up the post right away.

24
00:01:40,140 --> 00:01:47,400
The method post patch get more deleted and then we need to provide the URL, which again is going to

25
00:01:47,400 --> 00:01:48,830
start with Portrush.

26
00:01:48,840 --> 00:01:50,910
We already covered up in the proxy.

27
00:01:51,150 --> 00:01:51,960
And what do you know?

28
00:01:52,290 --> 00:01:53,850
What is the path?

29
00:01:54,060 --> 00:01:55,800
Well, it is API version one.

30
00:01:55,980 --> 00:02:01,410
And then off and then register, and then we want to pass in the data that we're going to be sending.

31
00:02:02,100 --> 00:02:08,220
Since remember when we were testing this out in the postman, we also needed to provide a data correct.

32
00:02:08,550 --> 00:02:10,259
So we need to provide all these values.

33
00:02:10,590 --> 00:02:14,640
And that's why the second argument is going to be that current user.

34
00:02:14,940 --> 00:02:16,260
So that's going to be the object.

35
00:02:16,590 --> 00:02:24,540
Now I will log the response in our first request just because I want us to be all on the same page.

36
00:02:24,840 --> 00:02:29,760
But essentially, we're getting back a giant object with a bunch of useful information.

37
00:02:30,120 --> 00:02:31,500
But our response?

38
00:02:31,890 --> 00:02:38,580
So this one over here, the user, the token and location is going to be in the data property.

39
00:02:38,850 --> 00:02:39,300
Always.

40
00:02:39,450 --> 00:02:43,410
I mean, in this version of access is going to be in the data.

41
00:02:43,560 --> 00:02:46,800
Now they might switch that around later, but I highly doubt that.

42
00:02:47,070 --> 00:02:50,370
So we're looking for data property and what are we looking for here?

43
00:02:50,780 --> 00:02:52,680
User token location.

44
00:02:53,040 --> 00:02:58,290
And I don't think I need to switch screens to showcase why we're looking for those things when we want

45
00:02:58,290 --> 00:03:01,170
to dispatch registered user success.

46
00:03:02,040 --> 00:03:09,120
And then in here, remember when it comes to dispatch, we definitely need to go with type part.

47
00:03:09,280 --> 00:03:12,720
Optionally, we can also pass in other things.

48
00:03:13,110 --> 00:03:20,790
Now, in this case, those other things is a payload object with user token and location.

49
00:03:21,180 --> 00:03:27,990
And if we scroll down and take a look at our action type in this case in the reducer, what are we doing?

50
00:03:28,230 --> 00:03:32,070
Well, if the action type is success, here are the steps.

51
00:03:32,070 --> 00:03:36,420
First, I want to return to state just like I did over here with ease.

52
00:03:36,420 --> 00:03:36,750
Loading.

53
00:03:36,930 --> 00:03:44,220
Basically, I want to copy all the values and then just modify one thing, not the entire state, because

54
00:03:44,460 --> 00:03:49,680
remember, eventually there's going to be way more properties there, and the user is going to be equal

55
00:03:49,680 --> 00:03:56,100
to what action payload user than token action payload token.

56
00:03:56,400 --> 00:03:58,070
And hopefully you see where I'm going.

57
00:03:58,650 --> 00:04:03,930
Now, the only thing that's going to be probably a little bit confusing is going to be this one, the

58
00:04:03,930 --> 00:04:04,680
job location.

59
00:04:05,560 --> 00:04:09,490
And this probably is going to make way more sense once we actually could get there.

60
00:04:09,820 --> 00:04:15,550
But since I have tendency to forget stuff, I'll actually add this right away state the job location,

61
00:04:15,550 --> 00:04:22,900
but I'll discuss this one in greater detail once we actually set up that page when we want to set up.

62
00:04:22,900 --> 00:04:23,810
Is loading false?

63
00:04:23,830 --> 00:04:24,250
Why?

64
00:04:24,640 --> 00:04:26,920
Well, because here we're loading online.

65
00:04:27,070 --> 00:04:31,760
Once I get back the data, I mean, I don't need to actually restrict the button.

66
00:04:31,780 --> 00:04:32,140
Correct.

67
00:04:32,560 --> 00:04:34,450
And I want to display the alert.

68
00:04:34,630 --> 00:04:40,150
And then since I want to display the green alert box, I'm going to go with success.

69
00:04:40,210 --> 00:04:43,120
That's going to be type and not whatever you want to type here.

70
00:04:43,150 --> 00:04:49,150
I'm going to go with user created and then redirecting dot dot dot because eventually, like I said,

71
00:04:49,330 --> 00:04:52,390
we will redirect our user to the dashboard.

72
00:04:52,420 --> 00:04:59,020
So this is if we have a registered user success, let's go back to our function registered user and

73
00:04:59,020 --> 00:05:04,180
let's take a look that also eventually, I want to add this to a local storage because they won't be

74
00:05:04,180 --> 00:05:05,620
persistent in reacting.

75
00:05:06,040 --> 00:05:11,410
And also, we might have the case of error, for example, the one that I have been hitting quite often

76
00:05:11,620 --> 00:05:13,690
where email is already in use, correct?

77
00:05:13,990 --> 00:05:16,420
And again, since this is our first request.

78
00:05:17,590 --> 00:05:23,440
I'm going to go with error and then response, because this is where with Axios, we get Bond Chef useful

79
00:05:23,440 --> 00:05:29,200
info again, this is going to be a giant object and we're looking for data and that message, why?

80
00:05:29,500 --> 00:05:32,950
Well, because remember our set up in the server?

81
00:05:33,220 --> 00:05:34,300
What are we sending back?

82
00:05:34,990 --> 00:05:35,470
We're here.

83
00:05:35,530 --> 00:05:36,010
Message.

84
00:05:36,370 --> 00:05:39,790
So it's going to be in the data and then more specifically, message.

85
00:05:40,270 --> 00:05:43,330
And then this one, I'm passing again in the payload.

86
00:05:43,900 --> 00:05:48,490
So in the reducer, I'm going to go with alert now.

87
00:05:48,490 --> 00:05:54,610
Again, loading will be false because we're downloading and then Charlotte through an alert type in

88
00:05:54,610 --> 00:05:55,480
this case, danger.

89
00:05:55,750 --> 00:05:59,320
And then we go with action, payload and the message.

90
00:05:59,680 --> 00:06:04,930
And before we start setting everything up, let me just mention that when it comes to a payload, property

91
00:06:05,620 --> 00:06:08,100
is just a convention effectively.

92
00:06:08,590 --> 00:06:15,400
If you prefer naming it, for example, banana bread instead, I mean, go for it as long as you leave

93
00:06:15,400 --> 00:06:19,330
the Typekit alone, meaning as it is, there will be no issues.

94
00:06:19,900 --> 00:06:27,100
But since payload is somewhat of a convention, I'm not going to be a rebel and I will follow the conventional

95
00:06:27,100 --> 00:06:27,700
approach.