OK, so now that we are done with everything, we can check everything in the browser, but right now
the things will not work because this was just the logic.
But we have not yet connected it to ask you why.
So so just the logic part.
And even if you go to the browser and let me take you so the things will not work because the buttons
are not yet been like provided on key functions and also let us just go around into.
And you will understand what I'm trying to say.
OK, so first of all, let us go to the cart item component and let us.
See if things are proper here or.
What, as far as I can see, there are all there are like already things here.
OK, so the thing is we have not yet completed our context, not just here.
We have not yet created any dispatch or actions from here which we will be taking from there to reduce
it.
So let's go ahead and do it first.
So we already have some coordinate and we have imported you stayed.
You have to do serious contact and text and create context from the app.
And we also input the data and the producer everything.
And we have also created the context, and the loading also have been set to next in the app provider.
We are passing the children and the constant state dispatch and we will do producer and the initial
state are also here.
But now let us go ahead and create each function, which we have like tied in the reducer like we need
to call that function from here for.
Always also.
So first of all, we cleared the cons to clear God.
Oh my God.
This is a federal function, no arguments, nothing at all.
And what I tried to do was to make a lot of IPOs, OK, next inside this function will.
Will dispatch now dispatch is what the.
Action, which needs to be dispelled on that particular type.
OK, so despite what dispatch the type, when when the tide?
And the type.
Is clear, card Mia, remember what we told that same thing, clear card.
So to this action, simple, simple, simple.
Next, let's create four remove.
I'm going a little faster here because this is just calling the functions nothing at all.
Simple as that.
Now remove the function with the particular ID.
That is why I'm providing ID in it for dispatch dispatch and why.
Yeah, dispatch what dispatch I.
The bags should be removed.
That that should be.
Remove and payload lowered, should we I.D..
Below should be it.
And next, we'll have the increase in the degrees.
Those simple bonds.
Increase is equal to a fair total function, and it will expect an I.D. like which product you want
to increase or decrease, so.
Why?
OK.
Inside this inside, Chris will add another dispatch.
Maybe we can just copy this line because we are repeating it for so, so many times.
It will copy and paste this particular line here.
So dispatch type is an order to move is increase increase and the payload, it should be the ready.
Same goes with the decrease.
We'll just change the name.
And that will be decrease.
It is paused dispatch I would with degrees the spring, which will be degrees and the payload will be
sent alight next after the degrees will fetch the data from the API.
Now what we were doing so far is we were getting the data from a local system.
I created the media folder.
I provided the images, the title, the price to the product.
Everything was local.
But now let me just grab the data from an external API.
OK, before that, I need to provide you all, or you can call it an end point.
Basically, whatever the data which we grab from you all so that you are known as the end point or the
API endpoint.
So we'll create that contest.
You are all is equal to oh, let me just copy and paste this URL because they're just so big and that
is this right here is.
Okay.
So, yeah, this one right here and we were already going into the African context and all.
So after the decrees.
Now will create will further data using the async function, not async function, if you don't have
any idea, let me just tell you.
Well, I've already discussed about async function in one of the products solid projects, not products,
products, project products, async.
Like async and await.
These are.
The soul of the script when it comes to grabbing the data from an API dispatch.
And that would be the type.
And it will be said to loading when the total, when the data is being grabbed from the API is the date
for the state in the state, looting will be set to true.
Right.
So now concrete response on this response.
Now this is a it now.
But you are telling.
Bad enough.
OK, I made a typo that was not a notability.
Yeah, now we'll.
Creates another concern that the guard and, of course, will given away to it.
It means what I want is just simple, like whenever the execution comes from the top and it's coming
and it's coming and it's coming and when the dollar collapses, oh, he has given away.
So that means I'm telling the script, Hey, I was going, I've given you, wait, wait, you guys,
I'm grabbing this data from an external Libya or I'm doing whatever.
You can just go for there and you can just check if we have any other work.
And until then, I will grab the data and I will finish my operation and then you can come back to me
and see if my work is done or not.
Either way, it means simple that isn't going away.
It is all about that, like giving the telling the script that, Hey, wait, I'm doing something,
I'm grabbing the data from another source.
And then, can you just do another work?
Assemble in the simple language.
Now, if you go to the documentation and if you see that it would be in more detail, you can just google
it async and it in Dallas could.
But the basic principle is this.
OK, so that's all you need to know for this project, OK?
So after this, the court will await the response and we'll provide dart juice.
And now the response which we have grab from the PatchWall can be in any format.
So now we want to create that response into the adjacent format because the API, because the data which
we fetch from the API generally should be in the JSON format.
And if it's not, we can convert it by giving the dart JSON dysfunction.
OK, so Dodgson.
So now the data will be created in the different format.
Simple.
Now, the dispatch dispatch.
Now, this expert's argument that the type.
I would be display items.
And the payload will be caught.
Got.
Who?
After this.
We'll provide a semicolon and.
Now will create the toggle amount like whenever we.
But it is something or we add something to a card, so that time.
The amount should be affected by our actions, right?
So that is what I'm doing here.
Simple.
Now we'll dispatch.
And.
The Typekit withdrawal among I will be.
Toggle.
Amount and there will be a payload.
So that would be.
Best type.
OK.
That's it for this.
Now let us create a use effect.
Use effect for providing this data on loading the page.
OK, so here.
Scientists will call the fatty data.
But data and will provide an empty area.
Now I've already once I explained the what is the use effect now?
It simply means that whenever we load the day, we whenever we load the page.
So this data functions should be executed as simple as that.
Now the dependency array is empty here.
That means this will load for the very first time and that is some date.
That is some variable inside their dependency, and that means that the function is dependent on their
dependency.
Like, whenever the whenever the variable will change, so then the then the function will be executed.
OK?
So fetch data and.
That search for the youth affected will create one more after this, and that will be used a fact and
the fact, of course, there will be a function.
What?
Yes.
So use effect and.
Inside this will dispatch.
Dispatch.
And the type would be type get total.
That totals and.
The dependency area will be the third dot cart.
Now what dependency array will do like whatever is present inside this dependency, whatever the variable
is present now, whenever this variable will change.
So this dispatch will be executed.
OK, who will write state?
The state will.
God.
OK, so we are done with the use effect and inside that is done now instead of this date.
We'll provide some other variables like like along the street.
There should be some other value that needs to be passed as a prop, as a prop inside this Waterloo
bill passed the clear whatever we have created so far, all that just passes up Bossert as a prop inside
this component.
As simple as that regard.
Next, I remove.
Don't make any type of that's very important.
Increase decrease.
And the total amount.
Boggles the amount, you know, let's save it, and I hope we don't see any error.
OK, so would we have not seen any other?
Let me go here and let me rephrase the page.
OK, the loading is being displayed.
OK, guys, so here we are.
We are seeing all of the changes which we make.
We are getting the data from the external API we are getting.
They made this title and the price and and but we can't see the quantity.
So let me just go ahead and tune this.
First of all, let me change this for a moment because the amount is being shown to us in the US dollars
and above to create converted into the Indian rupees.
So just now, one of my friend told me that the amount of one point seventy five rupees for I will multiply
that value from seventy five and that will be converted.
So let me first find out where that is being an index, of course, that will be in the guide item and
where is the amount?
Okay.
Okay, so.
Come on.
Our container.
Your wish list is a long.
So I'll multiply it by by what, seventy five, because one, one point seventy five it'll be.
So when I save it, I guess the changes will be reflected.
And look, no.
OK, I think the screen was dark.
Let me repeat it again.
I've just multiplied seventy five here with the total amount so that we see are.
The currency in Indian rupee is that.
And.
When refresh, nothing happens.
Why, why is that happening?
OK, so that was the total amount.
But we want to show it individually so that this inside the card item, so we'll multiply that here
in the price seventy five.
And one more thing that was missing is that in between the increase in degrees, there was no there
was no like the number, the quantity was not there.
So that we'll see when in between this increase and decrease.
So that is the two that should be the amount.
That is so simple, so I'll just add one line here.
And we'll save it.
And now when we go to the browser and see, yeah.
Who certainly fresh again to see if things are going on.
Yeah, let me see the total, yeah, total is also going on.
OK, guys, let me see you remove if I can remove ya.
Let me see if we can clear the card.
OK, the clear card is not working.
Let me ask why it's not working.
So that is a clear card.
Maybe he'll.
OK, because we have not added the functionality to the clear card.
OK, so inside the card container, that is.
Your card, so will, first of all, will import the global, we've already put the global stage, so
here will be for the clear car.
Earlier, but I hope this is the spelling.
We believe this.
And we just try to clear the card.
Here and let me see if.
And let me just go to the browser and see how things are being cleared.
OK, guys, we have completed the project, so this was the project.
I hope you guys learned a lot.
You know, you might have learned thought you said you state use context, how to create global context,
how to fetch data from the external API, and how to map the data within different, different components.
How to share data within the components.
And that was it for the video.
Thank you so much, and I hope you've learned a lot.
Thank you.