1
00:00:07,960 --> 00:00:09,070
Welcome back.

2
00:00:09,100 --> 00:00:15,460
In the previous video, we were able to display the account details component.

3
00:00:15,790 --> 00:00:21,610
So when I click on view accounts, we can see that this is account details component.

4
00:00:21,820 --> 00:00:28,690
So what we are going to do is that as soon as this component gets rendered, we are going to make HTTP

5
00:00:28,690 --> 00:00:36,340
call to our endpoint to fetch the account details and to get started, definitely you may need our actions.

6
00:00:36,340 --> 00:00:43,980
So inside the context folder, we are going to create one folder for the account context.

7
00:00:43,990 --> 00:00:45,970
So here we go.

8
00:00:46,210 --> 00:00:50,320
Going to be an account context.

9
00:00:50,530 --> 00:00:55,480
And inside you may need two things as we did for the of context.

10
00:00:55,480 --> 00:00:56,620
So here we go.

11
00:00:56,950 --> 00:01:06,700
The first one is going to be the name of the account context itself, dot JS and then the action type

12
00:01:06,700 --> 00:01:08,530
for the account for that one.

13
00:01:08,530 --> 00:01:15,580
I'm going to provide it for you so I will drag and drop inside the account context folder.

14
00:01:16,180 --> 00:01:17,890
And here we go.

15
00:01:17,890 --> 00:01:23,860
These are the action types we may need for create, for fetching, and then for deleting.

16
00:01:24,010 --> 00:01:29,080
So for the meantime, we are going to work on the fetch account details.

17
00:01:29,080 --> 00:01:31,630
So you may need this action types.

18
00:01:31,630 --> 00:01:34,000
So now back to the of context.

19
00:01:34,000 --> 00:01:38,440
So the same way we did for the user is going to be the same thing.

20
00:01:38,470 --> 00:01:44,680
The difference here is going to be the API end point where you can give yourself a challenge by posting

21
00:01:44,680 --> 00:01:46,540
this video and give it a shot.

22
00:01:46,540 --> 00:01:47,020
All right.

23
00:01:47,020 --> 00:01:49,060
So let me show you how I'm going to serve mine.

24
00:01:49,390 --> 00:01:52,690
The first step is you may need to create context.

25
00:01:52,690 --> 00:01:55,540
So here we go, create context.

26
00:01:55,540 --> 00:01:57,640
And down here I have it.

27
00:01:57,640 --> 00:02:07,870
And I was signed to a variable called account context, const account context and is equal to that.

28
00:02:07,870 --> 00:02:13,840
And let me export this one because I may need it in some part of my application.

29
00:02:14,110 --> 00:02:17,320
The next step is going to be the initial state.

30
00:02:17,440 --> 00:02:18,880
Initial state.

31
00:02:18,880 --> 00:02:26,380
And from this I'm going to have something like this const initial state.

32
00:02:29,670 --> 00:02:32,970
E or to an object for this one.

33
00:02:32,970 --> 00:02:37,440
I want to search a single account, so I'm going to be an account.

34
00:02:37,440 --> 00:02:40,470
And I was signed to now by default.

35
00:02:40,470 --> 00:02:48,360
And this one going to be the list of accounts as account and by default going to be an array.

36
00:02:48,600 --> 00:02:58,020
And definitely I may need loading by default and then error also by default there is no error.

37
00:02:58,530 --> 00:03:00,660
So this is my initial state.

38
00:03:00,660 --> 00:03:04,650
In case we lock something behind you, come back and fix it.

39
00:03:04,650 --> 00:03:07,950
So the next one is going to be our reducer.

40
00:03:08,070 --> 00:03:12,300
So here has reducer and here we go.

41
00:03:12,480 --> 00:03:24,120
Const account reducer is equal to a real function and in here I have access to the states and then the

42
00:03:24,120 --> 00:03:29,850
action and let's structure the action as we did before.

43
00:03:29,940 --> 00:03:33,360
And I'll have access to the type and then the payload.

44
00:03:35,500 --> 00:03:38,230
And it's equal to the action.

45
00:03:38,920 --> 00:03:39,250
All right.

46
00:03:39,250 --> 00:03:41,920
So now let's bring in our action type.

47
00:03:42,070 --> 00:03:47,140
The first action type I want is this one to fit a single account.

48
00:03:47,140 --> 00:03:50,380
So here are going to be account details, success.

49
00:03:50,380 --> 00:03:55,390
So I think to add one s to it and then one else to it.

50
00:03:55,390 --> 00:03:55,810
Great.

51
00:03:55,810 --> 00:04:02,110
So now let's come back here and let's require that account detail success.

52
00:04:02,110 --> 00:04:08,310
And the next one going to be the account details error, which is this account details field.

53
00:04:08,380 --> 00:04:09,700
So I can copy this one.

54
00:04:09,700 --> 00:04:12,050
And now here I'll bring it aside.

55
00:04:12,070 --> 00:04:14,260
So let's work on this one first.

56
00:04:14,260 --> 00:04:16,029
So here we go.

57
00:04:16,329 --> 00:04:21,970
After that, we need to create our provider and it goes like this, as we did before.

58
00:04:22,210 --> 00:04:26,620
And this one I'm going to name it as account context provider.

59
00:04:26,620 --> 00:04:27,760
So here we go.

60
00:04:27,790 --> 00:04:33,460
I'm going to export it as that as cost account.

61
00:04:35,180 --> 00:04:38,990
Is equal to every function.

62
00:04:39,260 --> 00:04:42,170
And here I need the use reducer.

63
00:04:42,190 --> 00:04:50,420
So let me bring this one first before my custom import and I will need the use reducer.

64
00:04:50,720 --> 00:04:58,280
And inside here I'm going to create instance of use reducer and I'll pass in the accounts reducer and

65
00:04:58,280 --> 00:05:00,650
then the initial is perfect.

66
00:05:00,650 --> 00:05:07,640
So what comes back as before is going to be two variables and the first one going to be the entire state

67
00:05:07,640 --> 00:05:09,890
and a method called dispatch.

68
00:05:11,630 --> 00:05:19,340
So in case you're confused about this one, I advise you to watch what we did and that the user context,

69
00:05:19,340 --> 00:05:20,480
that's out of context.

70
00:05:20,480 --> 00:05:23,420
I took my time to explain everything in detail.

71
00:05:23,420 --> 00:05:27,260
So at this point I assume that we are familiar with the format.

72
00:05:27,530 --> 00:05:33,950
The next step is that I need to return from this function that is the provider and I'm going to make

73
00:05:33,950 --> 00:05:41,150
use of the account, account context, dot provider.

74
00:05:41,900 --> 00:05:51,890
And in here and into this structure, the children is a component and I inject inside here as children.

75
00:05:52,070 --> 00:05:58,700
So the next step is that let's bring in the end points for this one is different from the user.

76
00:05:58,700 --> 00:06:06,320
So if I go to the collections and then for the accounts and for fresh and single, this is the end point.

77
00:06:06,770 --> 00:06:07,160
Right?

78
00:06:07,160 --> 00:06:12,260
So I'm going to copy this one and I'm going to create a variable and assign to it.

79
00:06:12,260 --> 00:06:17,060
So inside the utils, remember this way we are passing in all our endpoint.

80
00:06:17,060 --> 00:06:26,870
So here are going to be as export const and then API underscore you are underscore account.

81
00:06:30,060 --> 00:06:33,060
And then is equal to that.

82
00:06:33,420 --> 00:06:36,440
And for this this is a base you are error.

83
00:06:36,450 --> 00:06:41,920
So I'm going to remove the ID here and here we go.

84
00:06:41,940 --> 00:06:42,450
Perfect.

85
00:06:42,450 --> 00:06:46,770
So now inside the accounts, let me bring in the API.

86
00:06:47,580 --> 00:06:56,580
You are error for account and I'm in need at zero's also to make the request import axios.

87
00:06:58,120 --> 00:07:00,250
From Axios.

88
00:07:00,430 --> 00:07:02,170
Now everything is set.

89
00:07:02,350 --> 00:07:11,260
The next step is that let's create the action and I'm going to name this one as gets account details.

90
00:07:13,330 --> 00:07:14,170
Action.

91
00:07:17,100 --> 00:07:18,720
And here we go.

92
00:07:18,870 --> 00:07:24,660
Konst gets account singular account details.

93
00:07:26,330 --> 00:07:33,980
And is equal to saying and I'm going to pass in the ID of the account and here we go.

94
00:07:34,220 --> 00:07:36,400
I will break my try and catch.

95
00:07:36,410 --> 00:07:39,550
And here let's go ahead and make the request.

96
00:07:39,560 --> 00:07:49,220
So going to be Axios dot gates and here I'll pass in the you are so here but take then the dollar sign

97
00:07:49,220 --> 00:07:58,190
and our place the API account and forward slash the ID which can be found upon calling the function

98
00:07:58,190 --> 00:07:59,270
as an ID.

99
00:07:59,390 --> 00:08:05,030
So here I need to send the token because this one is a protected endpoint.

100
00:08:05,030 --> 00:08:10,730
So let's create the header here as config and it's equal to that.

101
00:08:10,730 --> 00:08:15,140
And I need the headers as an object.

102
00:08:15,140 --> 00:08:25,850
And for this I want to pass in the authorization and is equal to basic bearer and I have access to the

103
00:08:25,850 --> 00:08:28,040
token inside a state here.

104
00:08:28,400 --> 00:08:39,440
It's going to be the last sign Kerry receives state's docs user off and on that I have the token and

105
00:08:39,440 --> 00:08:41,539
let me make some change here.

106
00:08:41,720 --> 00:08:42,110
Great.

107
00:08:42,110 --> 00:08:49,550
So now I have got the next step is entry pass in the content type but this one is optional content type

108
00:08:51,320 --> 00:08:56,240
and here provide application for slash JSON.

109
00:08:56,420 --> 00:09:01,670
And next step is our pass of the second element to this as config.

110
00:09:01,850 --> 00:09:06,200
And what comes back, I want to assign to a variable called response.

111
00:09:06,410 --> 00:09:09,500
And here let's dispatch the action.

112
00:09:10,400 --> 00:09:15,530
So here dispatch and then provide the type.

113
00:09:15,970 --> 00:09:19,190
I'm going to be the account details of six.

114
00:09:20,690 --> 00:09:21,110
Great.

115
00:09:21,110 --> 00:09:26,630
And then the payload, as always can be found on the rest dart data.

116
00:09:27,710 --> 00:09:31,460
So let's make some checking here before you're going to be the same thing.

117
00:09:31,460 --> 00:09:38,540
But instead we are going to change this one to account for ads that wait.

118
00:09:38,660 --> 00:09:44,720
Before we check, let's make sure that the request was successful and that we have a variable on the

119
00:09:44,720 --> 00:09:46,970
response that is response.

120
00:09:46,970 --> 00:09:54,470
The data dot status is equal to sub six.

121
00:09:55,880 --> 00:10:00,770
Let me check again here to make sure that everything is correct, let me hit send.

122
00:10:00,770 --> 00:10:04,460
And now let me look at the profile for this user.

123
00:10:04,550 --> 00:10:06,920
You can see that we have status quo success.

124
00:10:06,920 --> 00:10:08,870
I'm going to use this one for checking.

125
00:10:09,140 --> 00:10:13,100
So here, if it's equal to success, then it means that everything is correct.

126
00:10:13,100 --> 00:10:15,650
Then I can go ahead and then dispatch that.

127
00:10:15,650 --> 00:10:17,750
So now the function is complete.

128
00:10:17,750 --> 00:10:21,320
The next step is let's handle the reducer function.

129
00:10:21,410 --> 00:10:24,020
So here let's bring in the default first.

130
00:10:24,020 --> 00:10:26,240
Otherwise we can forget.

131
00:10:26,240 --> 00:10:31,250
So return the initial states in case there is no action being called.

132
00:10:31,640 --> 00:10:33,860
All right, so now let's go.

133
00:10:34,310 --> 00:10:37,100
So here we are going to make use of switch.

134
00:10:38,010 --> 00:10:43,230
And then let's bring this one inside a Swiss statement and start.

135
00:10:43,500 --> 00:10:44,160
All right.

136
00:10:44,160 --> 00:10:47,590
So now we are going to check for type.

137
00:10:48,030 --> 00:10:53,710
And then here the case is the case is equal to account success.

138
00:10:53,730 --> 00:10:57,510
Then we want to update the initial states.

139
00:10:57,780 --> 00:10:59,970
I'm going to spread all the state.

140
00:10:59,970 --> 00:11:07,770
And what I want to update is the account, not the account and going to be the payload that is it.

141
00:11:07,890 --> 00:11:15,780
And here to load in is force and error is force loading in force and then error.

142
00:11:16,050 --> 00:11:17,820
That is not meaning at this point.

143
00:11:17,820 --> 00:11:20,550
There is no error bar for error case.

144
00:11:20,550 --> 00:11:26,070
We can copy this one and down here plus eight and change this one to fail.

145
00:11:28,260 --> 00:11:37,940
And here for the action, we can even make it now here at this point and loading is fast and error eight.

146
00:11:37,980 --> 00:11:39,930
Here we have an error, so bring it here.

147
00:11:39,960 --> 00:11:42,060
Now everything is set.

148
00:11:42,450 --> 00:11:49,650
The next step is that I need to send this action type and entire state to my component, and that is

149
00:11:49,650 --> 00:11:50,950
the account detail.

150
00:11:50,970 --> 00:11:54,150
So here let's provide a value.

151
00:11:54,150 --> 00:11:58,410
And here to write the get account details.

152
00:11:59,650 --> 00:12:00,370
Action.

153
00:12:00,910 --> 00:12:02,890
So let me add action to it.

154
00:12:05,080 --> 00:12:11,350
This optional, though, I prefer to add action to know the kind of function it does.

155
00:12:11,890 --> 00:12:12,260
Great.

156
00:12:12,280 --> 00:12:14,170
So now moment of truth.

157
00:12:14,200 --> 00:12:18,550
Let's go ahead and then console.log the response here in case you have it.

158
00:12:19,090 --> 00:12:19,960
Response.

159
00:12:20,110 --> 00:12:22,990
So now where are we going to dispatch box.

160
00:12:22,990 --> 00:12:26,640
We are going to dispatch it inside the account details.

161
00:12:26,650 --> 00:12:28,570
So here we go.

162
00:12:28,810 --> 00:12:35,680
So inside the account details, that is dashboard account details.

163
00:12:35,680 --> 00:12:37,570
Here we go for this one.

164
00:12:37,570 --> 00:12:39,910
I want to have access to the params.

165
00:12:39,910 --> 00:12:49,300
So here I'm going to use use params for react root dom and I'm going to create instance of that as ID

166
00:12:49,300 --> 00:12:53,530
here is equal to params.

167
00:12:55,900 --> 00:12:59,710
Is equal to use params as a hook.

168
00:12:59,980 --> 00:13:08,080
And now let's console.log the params and see that I'm going to have this ID here inside our console.

169
00:13:08,530 --> 00:13:10,660
Let's check it out and open.

170
00:13:10,660 --> 00:13:17,140
And you see that we have the account ID of which I specified inside the app.

171
00:13:17,260 --> 00:13:19,450
Let me show you guys is here.

172
00:13:19,450 --> 00:13:27,580
That is the account ID if I make use of anything or any, you can see that indeed I have in here.

173
00:13:27,700 --> 00:13:28,060
All right.

174
00:13:28,060 --> 00:13:31,960
So let me change it back to the ID account ID.

175
00:13:31,960 --> 00:13:37,150
So here I can structure the account ID quickly.

176
00:13:37,150 --> 00:13:42,010
Here and here, let's make use of use effects from React.

177
00:13:42,340 --> 00:13:54,040
And down here, let's create instance of use effect as a function call and dependencies depend on the

178
00:13:54,040 --> 00:13:55,180
account ID.

179
00:13:55,210 --> 00:13:59,530
So we need to bring in the use context and here we go.

180
00:13:59,530 --> 00:14:04,120
And we also need the account context, which is this one.

181
00:14:04,210 --> 00:14:06,010
Now we are good to go.

182
00:14:06,280 --> 00:14:12,580
So here we are going to make use of the use context and our pass in the account context.

183
00:14:12,580 --> 00:14:21,610
And here let's assign what comes back from that state and I need get account details action so here

184
00:14:21,610 --> 00:14:26,140
I can even structure that quickly as we did for the user.

185
00:14:26,320 --> 00:14:30,820
So inside the use effects, let's call that function called get account.

186
00:14:30,820 --> 00:14:35,170
It is action and moment of truth when I save it.

187
00:14:35,170 --> 00:14:38,350
Now let's check of I got some beautiful error.

188
00:14:38,740 --> 00:14:49,540
Oh I used to import this one like common JS so import and then going to be from I think it's good to

189
00:14:49,540 --> 00:14:56,740
import let's save it another thing now the last error is a response on line number 66.

190
00:14:58,000 --> 00:14:59,230
Which is down yet.

191
00:15:00,070 --> 00:15:01,560
Line number 66.

192
00:15:01,570 --> 00:15:02,020
Oh, yeah.

193
00:15:02,050 --> 00:15:09,550
This error here is supposed to be error, but for this one, we have the actual error, not on the error

194
00:15:09,550 --> 00:15:14,520
data, but instead we have it on the data that responds.

195
00:15:14,530 --> 00:15:17,080
Dot message data.

196
00:15:17,110 --> 00:15:21,880
Dot response dot message.

197
00:15:22,090 --> 00:15:23,200
So now let's save it.

198
00:15:23,200 --> 00:15:24,850
And now let's check it out.

199
00:15:24,880 --> 00:15:30,850
Well, we got some beautiful error, meaning that it cannot access the account details.

200
00:15:30,940 --> 00:15:37,220
The problem is that we are not wrapping the account provider to our component.

201
00:15:37,240 --> 00:15:42,180
So let's get back to the index and then provide that one to every component.

202
00:15:42,190 --> 00:15:48,760
So let's go back to index and I need to bring in the account context provider.

203
00:15:49,120 --> 00:15:52,450
And for this we can nest multiple providers.

204
00:15:52,450 --> 00:15:56,020
So here after the authentication, it can before or after.

205
00:15:56,320 --> 00:15:57,820
And here we go.

206
00:15:57,860 --> 00:15:59,050
I'll provide that.

207
00:15:59,050 --> 00:16:02,590
And next page I'm going to place the app inside.

208
00:16:03,040 --> 00:16:05,050
Now, moment of truth.

209
00:16:05,080 --> 00:16:08,920
Let's refresh it and you can see that everything is fine.

210
00:16:08,920 --> 00:16:10,810
But we got promise pending.

211
00:16:11,170 --> 00:16:13,630
It means that we are not handling the promise.

212
00:16:13,630 --> 00:16:16,210
So let's see where we went wrong.

213
00:16:16,240 --> 00:16:17,800
What is the provider?

214
00:16:17,800 --> 00:16:19,630
And let's move on.

215
00:16:19,630 --> 00:16:26,020
Oh, I forgot to bring the wait in front of the Axios error.

216
00:16:26,020 --> 00:16:26,410
Wait.

217
00:16:27,160 --> 00:16:29,050
Our moment of truth.

218
00:16:29,140 --> 00:16:32,290
A great something is happening now.

219
00:16:32,290 --> 00:16:33,610
There is no error.

220
00:16:33,610 --> 00:16:36,070
But let's see the feedback.

221
00:16:36,070 --> 00:16:40,150
We are also not seeing anything in the console or where.

222
00:16:40,150 --> 00:16:42,190
Because it's double S here.

223
00:16:42,190 --> 00:16:42,670
Yeah.

224
00:16:42,790 --> 00:16:48,670
Double S and now let's refresh it where I get no response.

225
00:16:48,670 --> 00:16:51,190
Meaning that this one is not right.

226
00:16:51,550 --> 00:16:57,580
So let's bring this one before our dispatching and let's see the response.

227
00:16:59,890 --> 00:17:03,130
And also nothing is console.log in it.

228
00:17:03,160 --> 00:17:08,119
And let's check our network tab and let's see what is wrong.

229
00:17:08,140 --> 00:17:08,770
I see.

230
00:17:08,770 --> 00:17:11,410
Undefined where?

231
00:17:11,800 --> 00:17:17,890
Oh, I see it because we need to pass in the ID of the account you see.

232
00:17:18,220 --> 00:17:25,180
So here you're going to pass in the ID to the function core as account ID.

233
00:17:26,440 --> 00:17:27,609
So good.

234
00:17:27,609 --> 00:17:29,920
So let's see now let's go to the console.

235
00:17:29,920 --> 00:17:33,090
And this time around I have beautiful message.

236
00:17:33,100 --> 00:17:39,400
If I check on the data, I have the account, which is this with empty transactions.

237
00:17:39,640 --> 00:17:45,610
So now inside the account context, we can pass that one into our component.

238
00:17:45,730 --> 00:17:53,110
So here let's console.log the state so that we can pass the right data to the component console of the

239
00:17:53,110 --> 00:17:53,770
states.

240
00:17:54,280 --> 00:17:57,460
And let's remove this one from here.

241
00:17:58,150 --> 00:17:59,260
Yeah, yeah.

242
00:17:59,260 --> 00:18:03,010
Let's run from here and let's see if you're going to have something.

243
00:18:03,520 --> 00:18:06,970
Well, we don't see anything, so let's see where we are wrong.

244
00:18:07,000 --> 00:18:12,250
I think it's about the action where we have the actual payload and.

245
00:18:12,250 --> 00:18:13,210
Let's see.

246
00:18:14,270 --> 00:18:15,540
Oh, sorry, guy.

247
00:18:15,560 --> 00:18:15,740
This.

248
00:18:15,740 --> 00:18:19,790
I'm supposed to be a count, but not action.

249
00:18:20,090 --> 00:18:20,840
Yes.

250
00:18:21,020 --> 00:18:22,970
So now let's save and let's see.

251
00:18:23,510 --> 00:18:27,520
Let's refresh it and let's console.log this date again.

252
00:18:27,530 --> 00:18:32,840
I think I mystically remove that and let's see.

253
00:18:33,740 --> 00:18:38,200
And now on the account we have the entire states.

254
00:18:38,210 --> 00:18:41,060
So what I want is state dot account.

255
00:18:41,060 --> 00:18:50,900
So now I'm going to pass that one as a second argument to this account and going to be states dirt account.

256
00:18:51,470 --> 00:18:51,830
Great.

257
00:18:51,830 --> 00:18:52,850
So now let's save it.

258
00:18:52,850 --> 00:18:54,440
And here we go.

259
00:18:54,650 --> 00:19:01,700
So now inside the components, I can structure that and get a name of my account and a transaction down

260
00:19:01,700 --> 00:19:02,660
here also.

261
00:19:02,990 --> 00:19:09,380
So here inside the account details, we also have access to the account.

262
00:19:10,960 --> 00:19:13,210
So now let's fill up.

263
00:19:13,360 --> 00:19:19,300
So this one now becomes the actual account name as account duck's name.

264
00:19:20,140 --> 00:19:23,320
And let's go down here to the balance here.

265
00:19:23,530 --> 00:19:26,680
And the path to fetch our expenses.

266
00:19:26,980 --> 00:19:27,460
Don't worry.

267
00:19:27,460 --> 00:19:28,990
You come back to this one.

268
00:19:29,020 --> 00:19:31,410
Yeah, I think that's all what we need for now.

269
00:19:31,420 --> 00:19:39,160
And you can see that I have education project and if I go to my dashboard, I want to read more about

270
00:19:39,160 --> 00:19:40,450
my mom's building.

271
00:19:40,480 --> 00:19:41,510
I'll click on that.

272
00:19:41,530 --> 00:19:43,680
You can see I have mom's building.

273
00:19:43,700 --> 00:19:47,180
I go to Dashboard and I click on Personal.

274
00:19:47,230 --> 00:19:49,060
I have the personal data.

275
00:19:49,420 --> 00:19:56,110
The next step is to be able to calculate the total balance, the total expenses, the total income for

276
00:19:56,110 --> 00:19:56,840
this one.

277
00:19:56,860 --> 00:20:01,120
I'm going to give it to you as a challenge, but don't worry, I will show you how to do that one.

278
00:20:01,150 --> 00:20:05,040
So this is how we can populate details about an account.

279
00:20:05,050 --> 00:20:11,860
The next step is to fill up or display the list of transactions, and for this account we don't have

280
00:20:11,860 --> 00:20:12,820
any transactions.

281
00:20:12,820 --> 00:20:16,000
So in the next video, let's see how we can solve this.