Frontend: 24.Account Details Action & Reducer

Welcome back.

In the previous video, we were able to display the account details component.

So when I click on view accounts, we can see that this is account details component.

So what we are going to do is that as soon as this component gets rendered, we are going to make HTTP

call to our endpoint to fetch the account details and to get started, definitely you may need our actions.

So inside the context folder, we are going to create one folder for the account context.

So here we go.

Going to be an account context.

And inside you may need two things as we did for the of context.

So here we go.

The first one is going to be the name of the account context itself, dot JS and then the action type

for the account for that one.

I’m going to provide it for you so I will drag and drop inside the account context folder.

And here we go.

These are the action types we may need for create, for fetching, and then for deleting.

So for the meantime, we are going to work on the fetch account details.

So you may need this action types.

So now back to the of context.

So the same way we did for the user is going to be the same thing.

The difference here is going to be the API end point where you can give yourself a challenge by posting

this video and give it a shot.

All right.

So let me show you how I’m going to serve mine.

The first step is you may need to create context.

So here we go, create context.

And down here I have it.

And I was signed to a variable called account context, const account context and is equal to that.

And let me export this one because I may need it in some part of my application.

The next step is going to be the initial state.

Initial state.

And from this I’m going to have something like this const initial state.

E or to an object for this one.

I want to search a single account, so I’m going to be an account.

And I was signed to now by default.

And this one going to be the list of accounts as account and by default going to be an array.

And definitely I may need loading by default and then error also by default there is no error.

So this is my initial state.

In case we lock something behind you, come back and fix it.

So the next one is going to be our reducer.

So here has reducer and here we go.

Const account reducer is equal to a real function and in here I have access to the states and then the

action and let’s structure the action as we did before.

And I’ll have access to the type and then the payload.

And it’s equal to the action.

All right.

So now let’s bring in our action type.

The first action type I want is this one to fit a single account.

So here are going to be account details, success.

So I think to add one s to it and then one else to it.

Great.

So now let’s come back here and let’s require that account detail success.

And the next one going to be the account details error, which is this account details field.

So I can copy this one.

And now here I’ll bring it aside.

So let’s work on this one first.

So here we go.

After that, we need to create our provider and it goes like this, as we did before.

And this one I’m going to name it as account context provider.

So here we go.

I’m going to export it as that as cost account.

Is equal to every function.

And here I need the use reducer.

So let me bring this one first before my custom import and I will need the use reducer.

And inside here I’m going to create instance of use reducer and I’ll pass in the accounts reducer and

then the initial is perfect.

So what comes back as before is going to be two variables and the first one going to be the entire state

and a method called dispatch.

So in case you’re confused about this one, I advise you to watch what we did and that the user context,

that’s out of context.

I took my time to explain everything in detail.

So at this point I assume that we are familiar with the format.

The next step is that I need to return from this function that is the provider and I’m going to make

use of the account, account context, dot provider.

And in here and into this structure, the children is a component and I inject inside here as children.

So the next step is that let’s bring in the end points for this one is different from the user.

So if I go to the collections and then for the accounts and for fresh and single, this is the end point.

Right?

So I’m going to copy this one and I’m going to create a variable and assign to it.

So inside the utils, remember this way we are passing in all our endpoint.

So here are going to be as export const and then API underscore you are underscore account.

And then is equal to that.

And for this this is a base you are error.

So I’m going to remove the ID here and here we go.

Perfect.

So now inside the accounts, let me bring in the API.

You are error for account and I’m in need at zero’s also to make the request import axios.

From Axios.

Now everything is set.

The next step is that let’s create the action and I’m going to name this one as gets account details.

Action.

And here we go.

Konst gets account singular account details.

And is equal to saying and I’m going to pass in the ID of the account and here we go.

I will break my try and catch.

And here let’s go ahead and make the request.

So going to be Axios dot gates and here I’ll pass in the you are so here but take then the dollar sign

and our place the API account and forward slash the ID which can be found upon calling the function

as an ID.

So here I need to send the token because this one is a protected endpoint.

So let’s create the header here as config and it’s equal to that.

And I need the headers as an object.

And for this I want to pass in the authorization and is equal to basic bearer and I have access to the

token inside a state here.

It’s going to be the last sign Kerry receives state’s docs user off and on that I have the token and

let me make some change here.

Great.

So now I have got the next step is entry pass in the content type but this one is optional content type

and here provide application for slash JSON.

And next step is our pass of the second element to this as config.

And what comes back, I want to assign to a variable called response.

And here let’s dispatch the action.

So here dispatch and then provide the type.

I’m going to be the account details of six.

Great.

And then the payload, as always can be found on the rest dart data.

So let’s make some checking here before you’re going to be the same thing.

But instead we are going to change this one to account for ads that wait.

Before we check, let’s make sure that the request was successful and that we have a variable on the

response that is response.

The data dot status is equal to sub six.

Let me check again here to make sure that everything is correct, let me hit send.

And now let me look at the profile for this user.

You can see that we have status quo success.

I’m going to use this one for checking.

So here, if it’s equal to success, then it means that everything is correct.

Then I can go ahead and then dispatch that.

So now the function is complete.

The next step is let’s handle the reducer function.

So here let’s bring in the default first.

Otherwise we can forget.

So return the initial states in case there is no action being called.

All right, so now let’s go.

So here we are going to make use of switch.

And then let’s bring this one inside a Swiss statement and start.

All right.

So now we are going to check for type.

And then here the case is the case is equal to account success.

Then we want to update the initial states.

I’m going to spread all the state.

And what I want to update is the account, not the account and going to be the payload that is it.

And here to load in is force and error is force loading in force and then error.

That is not meaning at this point.

There is no error bar for error case.

We can copy this one and down here plus eight and change this one to fail.

And here for the action, we can even make it now here at this point and loading is fast and error eight.

Here we have an error, so bring it here.

Now everything is set.

The next step is that I need to send this action type and entire state to my component, and that is

the account detail.

So here let’s provide a value.

And here to write the get account details.

Action.

So let me add action to it.

This optional, though, I prefer to add action to know the kind of function it does.

Great.

So now moment of truth.

Let’s go ahead and then console.log the response here in case you have it.

Response.

So now where are we going to dispatch box.

We are going to dispatch it inside the account details.

So here we go.

So inside the account details, that is dashboard account details.

Here we go for this one.

I want to have access to the params.

So here I’m going to use use params for react root dom and I’m going to create instance of that as ID

here is equal to params.

Is equal to use params as a hook.

And now let’s console.log the params and see that I’m going to have this ID here inside our console.

Let’s check it out and open.

And you see that we have the account ID of which I specified inside the app.

Let me show you guys is here.

That is the account ID if I make use of anything or any, you can see that indeed I have in here.

All right.

So let me change it back to the ID account ID.

So here I can structure the account ID quickly.

Here and here, let’s make use of use effects from React.

And down here, let’s create instance of use effect as a function call and dependencies depend on the

account ID.

So we need to bring in the use context and here we go.

And we also need the account context, which is this one.

Now we are good to go.

So here we are going to make use of the use context and our pass in the account context.

And here let’s assign what comes back from that state and I need get account details action so here

I can even structure that quickly as we did for the user.

So inside the use effects, let’s call that function called get account.

It is action and moment of truth when I save it.

Now let’s check of I got some beautiful error.

Oh I used to import this one like common JS so import and then going to be from I think it’s good to

import let’s save it another thing now the last error is a response on line number 66.

Which is down yet.

Line number 66.

Oh, yeah.

This error here is supposed to be error, but for this one, we have the actual error, not on the error

data, but instead we have it on the data that responds.

Dot message data.

Dot response dot message.

So now let’s save it.

And now let’s check it out.

Well, we got some beautiful error, meaning that it cannot access the account details.

The problem is that we are not wrapping the account provider to our component.

So let’s get back to the index and then provide that one to every component.

So let’s go back to index and I need to bring in the account context provider.

And for this we can nest multiple providers.

So here after the authentication, it can before or after.

And here we go.

I’ll provide that.

And next page I’m going to place the app inside.

Now, moment of truth.

Let’s refresh it and you can see that everything is fine.

But we got promise pending.

It means that we are not handling the promise.

So let’s see where we went wrong.

What is the provider?

And let’s move on.

Oh, I forgot to bring the wait in front of the Axios error.

Wait.

Our moment of truth.

A great something is happening now.

There is no error.

But let’s see the feedback.

We are also not seeing anything in the console or where.

Because it’s double S here.

Yeah.

Double S and now let’s refresh it where I get no response.

Meaning that this one is not right.

So let’s bring this one before our dispatching and let’s see the response.

And also nothing is console.log in it.

And let’s check our network tab and let’s see what is wrong.

I see.

Undefined where?

Oh, I see it because we need to pass in the ID of the account you see.

So here you’re going to pass in the ID to the function core as account ID.

So good.

So let’s see now let’s go to the console.

And this time around I have beautiful message.

If I check on the data, I have the account, which is this with empty transactions.

So now inside the account context, we can pass that one into our component.

So here let’s console.log the state so that we can pass the right data to the component console of the

states.

And let’s remove this one from here.

Yeah, yeah.

Let’s run from here and let’s see if you’re going to have something.

Well, we don’t see anything, so let’s see where we are wrong.

I think it’s about the action where we have the actual payload and.

Let’s see.

Oh, sorry, guy.

This.

I’m supposed to be a count, but not action.

Yes.

So now let’s save and let’s see.

Let’s refresh it and let’s console.log this date again.

I think I mystically remove that and let’s see.

And now on the account we have the entire states.

So what I want is state dot account.

So now I’m going to pass that one as a second argument to this account and going to be states dirt account.

Great.

So now let’s save it.

And here we go.

So now inside the components, I can structure that and get a name of my account and a transaction down

here also.

So here inside the account details, we also have access to the account.

So now let’s fill up.

So this one now becomes the actual account name as account duck’s name.

And let’s go down here to the balance here.

And the path to fetch our expenses.

Don’t worry.

You come back to this one.

Yeah, I think that’s all what we need for now.

And you can see that I have education project and if I go to my dashboard, I want to read more about

my mom’s building.

I’ll click on that.

You can see I have mom’s building.

I go to Dashboard and I click on Personal.

I have the personal data.

The next step is to be able to calculate the total balance, the total expenses, the total income for

this one.

I’m going to give it to you as a challenge, but don’t worry, I will show you how to do that one.

So this is how we can populate details about an account.

The next step is to fill up or display the list of transactions, and for this account we don’t have

any transactions.

So in the next video, let’s see how we can solve this.