1
00:00:07,620 --> 00:00:11,300
Let's get continue to implement the dashboard.

2
00:00:11,310 --> 00:00:20,160
And over here we have couple of steps we can start to work on calculating the total expenses and income

3
00:00:20,160 --> 00:00:22,530
for all the accounts a user have.

4
00:00:22,800 --> 00:00:26,940
But without the list of account, there is no way we can calculate.

5
00:00:26,940 --> 00:00:31,650
So let's work on the list of accounts a user has created.

6
00:00:31,860 --> 00:00:38,070
So we are going to make a request to the back end to fetch the user profile.

7
00:00:38,070 --> 00:00:45,270
And remember from API development, this is the end point to fetch a user profile that is first last

8
00:00:45,270 --> 00:00:46,050
profile.

9
00:00:46,100 --> 00:00:53,460
Then you pass in the token and as soon as you hit send and you can see that this user has no account,

10
00:00:53,460 --> 00:01:00,360
so we can go ahead and create an account for this particular user using the API.

11
00:01:00,390 --> 00:01:03,990
But for now let's leave it and we come back as we move on.

12
00:01:04,050 --> 00:01:11,310
So what you're going to do is that we are going to implement the same way of making a request to fetch

13
00:01:11,310 --> 00:01:14,190
a profile using this to or postman.

14
00:01:14,190 --> 00:01:21,300
We are going to do the same thing from the client side and to get it done unless you create an option

15
00:01:21,300 --> 00:01:21,990
for that.

16
00:01:21,990 --> 00:01:24,750
So we insert component and then context.

17
00:01:24,750 --> 00:01:32,280
So here we are going to create an action to fetch a user profile and then we are going to fill up the

18
00:01:32,280 --> 00:01:36,840
response that we get back from the API to fill this property.

19
00:01:36,840 --> 00:01:48,270
So now let's collapse the log in here and let's start with the profile and here we go, profile, action.

20
00:01:49,260 --> 00:01:56,460
The first step is we are going to create the function and for this one I will name it as first profile

21
00:01:57,360 --> 00:02:02,790
action and is equal to async and my function call and start.

22
00:02:02,790 --> 00:02:05,850
So in here I will bring try and catch.

23
00:02:06,270 --> 00:02:13,710
So for this request it is a protected endpoint, meaning that unless we pass in a token.

24
00:02:13,710 --> 00:02:16,620
So if you have a look, let me show you something here.

25
00:02:16,800 --> 00:02:18,620
You can see that on the headers.

26
00:02:18,630 --> 00:02:21,090
We added a token to it.

27
00:02:21,240 --> 00:02:24,300
So we are going to implement the same thing here.

28
00:02:24,330 --> 00:02:31,890
So because of that we are going to create a config variable and then I can pass in the authorization

29
00:02:31,890 --> 00:02:38,130
to the header the same way we did for the log in so we can copy the whole of the config.

30
00:02:38,130 --> 00:02:43,020
And now inside the profile action, let's replace with that.

31
00:02:43,200 --> 00:02:49,430
So the next step is that we want to add the authorization to it as we did over here.

32
00:02:49,440 --> 00:02:55,380
You see we added authorization and then the bearer and the token so the same roadmap.

33
00:02:55,380 --> 00:03:00,480
So after come comma let's add what is called authorization.

34
00:03:02,120 --> 00:03:05,210
And you're going to be in code authorization.

35
00:03:09,950 --> 00:03:10,460
Great.

36
00:03:10,460 --> 00:03:12,830
And it's equal to Berra.

37
00:03:12,920 --> 00:03:14,930
The same roadmap, Berra.

38
00:03:14,930 --> 00:03:16,100
And then talking.

39
00:03:16,130 --> 00:03:18,200
So here we go.

40
00:03:18,230 --> 00:03:24,200
I back take and then I'll bring in the Berra and then space.

41
00:03:24,200 --> 00:03:26,060
And here is my token.

42
00:03:26,240 --> 00:03:29,590
And here we have the user inside the state.

43
00:03:29,600 --> 00:03:37,040
So if you try to console, lock the state, you're going to have the user of which is this one.

44
00:03:37,430 --> 00:03:43,040
And on that, we're going to have the token because we have the token inside our local storage.

45
00:03:43,040 --> 00:03:44,600
And this is it.

46
00:03:44,630 --> 00:03:46,440
This is what I want to grab.

47
00:03:46,460 --> 00:03:48,500
So here we go.

48
00:03:48,680 --> 00:03:51,110
Now let's go down to where we are working.

49
00:03:51,110 --> 00:04:00,080
And inside here, I'm going to grab the states and then on that I'm going to use the user off.

50
00:04:00,230 --> 00:04:03,350
And then on that I will grab the token.

51
00:04:03,830 --> 00:04:08,570
So if you're confused, just console lock the state in going to see all the properties.

52
00:04:08,570 --> 00:04:10,310
So let me show you one more time here.

53
00:04:10,430 --> 00:04:12,980
So let me copy this one.

54
00:04:13,070 --> 00:04:20,600
And here, let's console.log the states and let's see in the browser console.

55
00:04:20,600 --> 00:04:21,760
And there you go.

56
00:04:21,769 --> 00:04:25,340
You can see that I have the token for my states.

57
00:04:25,430 --> 00:04:30,950
So the next step is that I'm going to pass the config to the API end point.

58
00:04:30,950 --> 00:04:32,510
So let's continue.

59
00:04:32,690 --> 00:04:37,670
I can collapse this one and now let's make the API call.

60
00:04:37,790 --> 00:04:48,260
So we are going to await the request and then Axios dot gets requests and then you pass in the you are

61
00:04:48,500 --> 00:04:53,890
the you are arrow is 4/v1 user's forward slash profile.

62
00:04:53,900 --> 00:05:01,280
I'll copy that one and here I will paste that and you can see the way we are copying the you are wrong

63
00:05:01,310 --> 00:05:07,550
in case you miss some changes unless you go through all our code base and make changes to the API.

64
00:05:08,060 --> 00:05:12,980
Because of that, I'm going to create a utility file called API.

65
00:05:12,980 --> 00:05:19,070
So inside the CRC, let's add one folder and I'll call this one as Utils.

66
00:05:19,370 --> 00:05:23,240
And here I'm going to add one file called API.

67
00:05:23,240 --> 00:05:34,070
You are zero dot GS and here I'm going to export const and then the API and that's called you are l

68
00:05:34,100 --> 00:05:42,680
is equal to this one and this one is for the user and this end point is for the user.

69
00:05:42,680 --> 00:05:47,450
And you may have what is called the account transaction and many more.

70
00:05:47,450 --> 00:05:50,210
So let's rename this one to API.

71
00:05:50,210 --> 00:05:51,950
You are error user.

72
00:05:52,760 --> 00:05:53,360
Great.

73
00:05:53,360 --> 00:05:55,340
And here the base you are.

74
00:05:55,340 --> 00:05:57,530
Error is for last user.

75
00:05:57,530 --> 00:05:59,210
So let's remove this one.

76
00:06:00,770 --> 00:06:01,520
Great.

77
00:06:02,120 --> 00:06:04,680
So now back to the context.

78
00:06:04,700 --> 00:06:07,120
Let's require the API.

79
00:06:07,130 --> 00:06:15,500
You are a user and here we can replace the log in action here with the you are error.

80
00:06:15,500 --> 00:06:23,210
So here I'm going to remove this one and let's use backtrack and then the dollar sign basis, then you

81
00:06:23,210 --> 00:06:30,440
paste that one and then forward slash log in so we can copy the same thing inside the profile.

82
00:06:30,440 --> 00:06:35,900
We can replace this one and change this one to put profile and that is it.

83
00:06:35,960 --> 00:06:38,840
The next agreement going to be the config.

84
00:06:39,140 --> 00:06:41,840
So now we are all set.

85
00:06:42,020 --> 00:06:46,130
So here let's go ahead and then update our state.

86
00:06:46,160 --> 00:06:57,170
If on the response we have what is called data and on that, if we have a status which is equal to success,

87
00:06:57,170 --> 00:07:03,980
then it means that the response was successful and I'll go ahead and then dispatch the action.

88
00:07:03,980 --> 00:07:11,540
For now, we don't have the action type inside our reducer, but we can go ahead and then grab the action

89
00:07:11,540 --> 00:07:13,670
type from the previous video.

90
00:07:13,670 --> 00:07:19,850
So here is going to be as fetch pull file failed and then fetch profile success.

91
00:07:19,850 --> 00:07:23,900
We have these two action types inside here.

92
00:07:23,960 --> 00:07:31,850
Let's dispatch with a type and here we go with a type and fetch profile six.

93
00:07:32,060 --> 00:07:41,300
And then the payload is payload is equal to the response dot data and that is it.

94
00:07:41,300 --> 00:07:45,170
So let's handle that one inside our reducer.

95
00:07:45,560 --> 00:07:46,010
All right.

96
00:07:46,010 --> 00:07:48,980
Lastly, I forgot to add the arrow keys.

97
00:07:48,980 --> 00:07:50,540
So here we go.

98
00:07:50,780 --> 00:07:54,350
We bring in dispatch and then the type.

99
00:07:55,520 --> 00:07:59,360
And then here we provide fetch, pull, file, field.

100
00:07:59,540 --> 00:08:07,010
One thing I like about context API over real dogs to kill is that about how we can cut an error here.

101
00:08:07,310 --> 00:08:13,450
If you're familiar with realistic to be able to catch error here unless you write some lines of code,

102
00:08:13,460 --> 00:08:15,200
you get it done by word context.

103
00:08:15,200 --> 00:08:23,360
It is easy so we can have access to the error on the error and then response.

104
00:08:23,570 --> 00:08:30,170
And then on that we have the data and then we have the message.

105
00:08:30,560 --> 00:08:36,679
And also for Raiders ticket, one thing I liked about it is about the tool, how we can visualize your

106
00:08:36,679 --> 00:08:42,620
actions and your state at one place then this console.log it inside context API.

107
00:08:42,650 --> 00:08:43,789
But don't worry.

108
00:08:43,789 --> 00:08:50,780
In case you are not familiar with Redux, I'm planning to create a course solely for Redux and Redux

109
00:08:50,780 --> 00:08:51,260
toolkit.

110
00:08:51,260 --> 00:08:52,940
So let's get going.

111
00:08:53,030 --> 00:08:57,800
Well, now we are handling the error case and then the success case.

112
00:08:57,800 --> 00:09:02,060
The last step is that we need to handle the reducer down here.

113
00:09:02,060 --> 00:09:04,250
Let's also handle the profile.

114
00:09:04,250 --> 00:09:05,840
And here we go.

115
00:09:06,230 --> 00:09:13,010
We bring in the case and the case here is fetch profile six.

116
00:09:14,300 --> 00:09:16,220
This one and cut them.

117
00:09:16,280 --> 00:09:25,550
So let's go up a little bit and here, let's return the initial state or pivot states as that.

118
00:09:25,550 --> 00:09:32,090
And at this point, loading is force and here to there is no error.

119
00:09:32,090 --> 00:09:40,790
So error is now and what we want is the profile and on that we are going to use the payload.

120
00:09:40,820 --> 00:09:41,690
That is it.

121
00:09:41,870 --> 00:09:43,460
And what about the error?

122
00:09:43,460 --> 00:09:44,930
We can copy this one.

123
00:09:44,930 --> 00:09:55,190
And down here let's change this one to fetch five failed and here loading false and error is payload

124
00:09:55,190 --> 00:10:01,130
and here poor file is now great so now moment of truth.

125
00:10:01,160 --> 00:10:09,050
Let's go ahead and send this action to the component where I want to render when I be going to be fetch,

126
00:10:09,920 --> 00:10:11,870
fetch, pull, file action.

127
00:10:11,870 --> 00:10:20,510
And I also want to send the actual data from here, the user data, and let's try to console.log the

128
00:10:20,510 --> 00:10:23,900
data here and see the property that we want.

129
00:10:23,900 --> 00:10:31,070
So here, let's go where I got some error response is not defined on line number 99.

130
00:10:31,640 --> 00:10:33,740
I think we are making something wrong here.

131
00:10:33,740 --> 00:10:38,390
Line number 99, which is this one.

132
00:10:39,800 --> 00:10:43,040
Oh, sorry, I didn't assign the response.

133
00:10:43,040 --> 00:10:44,960
Coming back to response.

134
00:10:45,080 --> 00:10:45,680
Yes.

135
00:10:46,280 --> 00:10:46,620
Great.

136
00:10:46,640 --> 00:10:47,930
Now it is happy.

137
00:10:47,990 --> 00:10:52,330
If I open it, I have the file and this is what I want to send.

138
00:10:52,340 --> 00:10:55,610
So I'm going to be states dot profile.

139
00:10:55,610 --> 00:11:01,070
So here states dot profile and let me send it data to the component.

140
00:11:01,070 --> 00:11:08,240
So you're going to be as profile and I want the profile, state dot profile.

141
00:11:08,510 --> 00:11:09,140
All right.

142
00:11:09,140 --> 00:11:13,640
So that is it about the action to fit the profile, then this video.

143
00:11:13,640 --> 00:11:17,870
Let's go ahead and then dispatch the option to fetch a user profile.