Let's get continue to implement the dashboard.
And over here we have couple of steps we can start to work on calculating the total expenses and income
for all the accounts a user have.
But without the list of account, there is no way we can calculate.
So let's work on the list of accounts a user has created.
So we are going to make a request to the back end to fetch the user profile.
And remember from API development, this is the end point to fetch a user profile that is first last
profile.
Then you pass in the token and as soon as you hit send and you can see that this user has no account,
so we can go ahead and create an account for this particular user using the API.
But for now let's leave it and we come back as we move on.
So what you're going to do is that we are going to implement the same way of making a request to fetch
a profile using this to or postman.
We are going to do the same thing from the client side and to get it done unless you create an option
for that.
So we insert component and then context.
So here we are going to create an action to fetch a user profile and then we are going to fill up the
response that we get back from the API to fill this property.
So now let's collapse the log in here and let's start with the profile and here we go, profile, action.
The first step is we are going to create the function and for this one I will name it as first profile
action and is equal to async and my function call and start.
So in here I will bring try and catch.
So for this request it is a protected endpoint, meaning that unless we pass in a token.
So if you have a look, let me show you something here.
You can see that on the headers.
We added a token to it.
So we are going to implement the same thing here.
So because of that we are going to create a config variable and then I can pass in the authorization
to the header the same way we did for the log in so we can copy the whole of the config.
And now inside the profile action, let's replace with that.
So the next step is that we want to add the authorization to it as we did over here.
You see we added authorization and then the bearer and the token so the same roadmap.
So after come comma let's add what is called authorization.
And you're going to be in code authorization.
Great.
And it's equal to Berra.
The same roadmap, Berra.
And then talking.
So here we go.
I back take and then I'll bring in the Berra and then space.
And here is my token.
And here we have the user inside the state.
So if you try to console, lock the state, you're going to have the user of which is this one.
And on that, we're going to have the token because we have the token inside our local storage.
And this is it.
This is what I want to grab.
So here we go.
Now let's go down to where we are working.
And inside here, I'm going to grab the states and then on that I'm going to use the user off.
And then on that I will grab the token.
So if you're confused, just console lock the state in going to see all the properties.
So let me show you one more time here.
So let me copy this one.
And here, let's console.log the states and let's see in the browser console.
And there you go.
You can see that I have the token for my states.
So the next step is that I'm going to pass the config to the API end point.
So let's continue.
I can collapse this one and now let's make the API call.
So we are going to await the request and then Axios dot gets requests and then you pass in the you are
the you are arrow is 4/v1 user's forward slash profile.
I'll copy that one and here I will paste that and you can see the way we are copying the you are wrong
in case you miss some changes unless you go through all our code base and make changes to the API.
Because of that, I'm going to create a utility file called API.
So inside the CRC, let's add one folder and I'll call this one as Utils.
And here I'm going to add one file called API.
You are zero dot GS and here I'm going to export const and then the API and that's called you are l
is equal to this one and this one is for the user and this end point is for the user.
And you may have what is called the account transaction and many more.
So let's rename this one to API.
You are error user.
Great.
And here the base you are.
Error is for last user.
So let's remove this one.
Great.
So now back to the context.
Let's require the API.
You are a user and here we can replace the log in action here with the you are error.
So here I'm going to remove this one and let's use backtrack and then the dollar sign basis, then you
paste that one and then forward slash log in so we can copy the same thing inside the profile.
We can replace this one and change this one to put profile and that is it.
The next agreement going to be the config.
So now we are all set.
So here let's go ahead and then update our state.
If on the response we have what is called data and on that, if we have a status which is equal to success,
then it means that the response was successful and I'll go ahead and then dispatch the action.
For now, we don't have the action type inside our reducer, but we can go ahead and then grab the action
type from the previous video.
So here is going to be as fetch pull file failed and then fetch profile success.
We have these two action types inside here.
Let's dispatch with a type and here we go with a type and fetch profile six.
And then the payload is payload is equal to the response dot data and that is it.
So let's handle that one inside our reducer.
All right.
Lastly, I forgot to add the arrow keys.
So here we go.
We bring in dispatch and then the type.
And then here we provide fetch, pull, file, field.
One thing I like about context API over real dogs to kill is that about how we can cut an error here.
If you're familiar with realistic to be able to catch error here unless you write some lines of code,
you get it done by word context.
It is easy so we can have access to the error on the error and then response.
And then on that we have the data and then we have the message.
And also for Raiders ticket, one thing I liked about it is about the tool, how we can visualize your
actions and your state at one place then this console.log it inside context API.
But don't worry.
In case you are not familiar with Redux, I'm planning to create a course solely for Redux and Redux
toolkit.
So let's get going.
Well, now we are handling the error case and then the success case.
The last step is that we need to handle the reducer down here.
Let's also handle the profile.
And here we go.
We bring in the case and the case here is fetch profile six.
This one and cut them.
So let's go up a little bit and here, let's return the initial state or pivot states as that.
And at this point, loading is force and here to there is no error.
So error is now and what we want is the profile and on that we are going to use the payload.
That is it.
And what about the error?
We can copy this one.
And down here let's change this one to fetch five failed and here loading false and error is payload
and here poor file is now great so now moment of truth.
Let's go ahead and send this action to the component where I want to render when I be going to be fetch,
fetch, pull, file action.
And I also want to send the actual data from here, the user data, and let's try to console.log the
data here and see the property that we want.
So here, let's go where I got some error response is not defined on line number 99.
I think we are making something wrong here.
Line number 99, which is this one.
Oh, sorry, I didn't assign the response.
Coming back to response.
Yes.
Great.
Now it is happy.
If I open it, I have the file and this is what I want to send.
So I'm going to be states dot profile.
So here states dot profile and let me send it data to the component.
So you're going to be as profile and I want the profile, state dot profile.
All right.
So that is it about the action to fit the profile, then this video.
Let's go ahead and then dispatch the option to fetch a user profile.