With our cart item complete we can switch back to cart context Jesus as we would want to set up all
our functionality and as a side note if you have different products as your local cart and if you don't
like that even though it's not going to affect your functionality but if let's say you don't like that
you can head over to my github then look for Star Project react store or version 2.
Then you're going to look for the source as well as utilize.
And then you can look for the local card and these are gonna be the correct items meaning correct items
being computers because previously I just had some different random products.
So as you don't like those random products just head over there and swap them out.
Right now I'm going to leave the local card because there's some items that I would like to show there
but we're going to switch gears and we're going to start working within the cart drag jirgas on first.
I'm just gonna set up some place holders for the functions that we're going to have and we're going
to pass them in our value object.
OK we're not going to access them anywhere but I would just like to set up the place holders just to
show you why would want to use total and cart item.
Why would want to calculate them using used effect.
OK.
So let's start by setting up our placeholders again.
There's going to be no functionality in them.
We're just going to have the comment of let's say remove item and then as far as setting up the function
which is we say remove item.
Now this item is going to be looking for the idea parameter like so and then nothing within the function
body.
Now not just copy and paste it and in fact 5.0 and then the second one is going to be increase amount
increase amount and that of course is the function name.
So let's say right.
Increase amount work.
So then let's do the same for decrease.
Also it's gonna have the I.D. So it's changed around let's say decrease decrease item and we're going
to not item maybe maybe amount apologize and we're gonna decrease amount.
So it's right decrease amount both of them are going to be looking for I.D. then we have add to cart
so add to cart and then for Add to Cart we're going to pass in the product which again currently doesn't
make sense but it does not make sense once we start working on it and we're gonna write add to cart
is our function and last we have a clear cart clear cart.
And then of course same for the function name clear cart.
We're not going to passing any parameters.
I'm gonna have empty parentheses.
And now it's use the fact that we can pass all our functions into our value object.
So one by one I'm going to start by removing them.
Then we're going to have increase amount.
Then we have decrease amount.
Then we also have add to cart and then we have clear cut.
And like I said we're not going to access them but I want to make sure that we have right away the place
orders.
And now let's focus on the total as well as car.
So both of the values are going to be calculated from the car.
Correct.
You can't calculate the total from some random variable.
You need to use your car.
And since we have initial values we can right away calculate that.
The same goes for card items.
We can right away calculate how many items and I can see that I have 5 and 4 that should be 9 and then
I have three which means twelve.
So when we would want to calculate that while we're looking at it and your like saying okay we have
removed item we increase item decrease and all the way to clear a card each and every time we're working
with a card value we're going to update our cart.
Correct.
When we remove the item we're going to update our.
All right.
And you can say all right.
So each and every time we're going to call this function then we're going to calculate total as well
as card items.
And you're almost correct.
This thing is don't you think we're repeating ourselves.
We have five functions and then each and every time we're repeating the functionality so wouldn't be
better if we would use a react use effect and then just run that use effect each and every time we're
updating something about cart value.
One that make more most sense.
So let's try it out.
I'm gonna write a react react then we're gonna write.
Use a fact that is of course our callback function.
Like so right away.
As a second argument I'm going to say you're not I only want to run this callback function.
If something gets updated for my cart state value that's it only then I would like to run this callback
function.
And initially we're also gonna do something with a local storage so local storage currently doesn't
make sense.
So I'm just going to leave commandeer just so you know that eventually there's gonna be some kind of
functionality.
But let's start calculating our cart items as well as total and since my cart is an array I can just
use reduce where I can just iterate over the array and then add the value to the total.
And let's start with a cart items because that's gonna be a little bit easier one.
I mean both of them are gonna be easy but no one is gonna be even more easy than the total and we're
gonna set up within a callback function and variable I'm going to say let new cart items and I'm only
using this new because I don't want to confuse you of what we're doing.
So we're going to go with like new card items.
We're gonna send this equal to cart reduce reduce.
And then within a reduced we are seeing the callback function like so and also we need to set up the
initial value.
So since I'm calculating something with numbers my initial value is going to be zero.
And then within our callback function we have two parameters we have one accumulator.
It's a lot of times written as HCC as a murder.
But again please remember that reference is the totals that we are turning as well as each and every
item which is reference as current.
Now since are these parameters I'm just going to name them to total as well as cart item and if you're
iffy about what in fact you are doing always always within a function body you can just console log.
Now we always going to need to return the total.
So let me write return total.
And then like I said let's just cancel logging just so we all are on the same page.
So let's write console log we're going to have our total.
And then of course we're also going to have our cart item and we're going to display that within the
object.
So cart item and then once we run it we're going to check inspect.
And then within the console we're going to have three objects.
Now why I have three objects because I had three items in the array so reduce method is going to have
the callback callback is going to iterate over each and every item in the right and then within that
callback we can access those items.
So the first time total is gonna be zero and I'm gonna have my first item from the cart.
Then the second time total is still going to be 0 because we didn't set up any kind of functionality
and I'm gonna have my second item and then of course we have the same thing for the third item.
So now I know that I can access the third item what I'm looking for.
Well notice how the item has the amount properties.
Right.
So what if we would just grab from each and every item the value for the amount property and just added
to a total.
How it's going to look like.
Let me delete and let's say that not only I'm going to return the total but I would want to add from
my current iteration the amount of said cart item.
That is my current iteration and it has the amount property and now my total is not going to be zero
all the time.
In fact we're going to increase it.
And just to show you that we're going to get let's say correct values we can run it and then also why
don't we have the set card items.
So right after we have a new card items and by the way if you want you can control log that went out
as well.
So a new card items and like I said we should have 12.
And yes we do.
So we calculated correctly because of course it's not showing anywhere in our progression.
So in this case we do need to use console log and now let's use the fact that we have set card items.
Remember that was the function that was given us by you state.
So right after we calculate the items we're going to say set cart items and we're going to pass in our
new card items.
Let's passing the new card items and for the total is gonna be exactly the same.
But the difference would be that not only we have the amount.
We also have the total.
So we're gonna have to multiply amount by these whatever the prices for the item.
And then we're just gonna again append this to whatever total value we have initially we have 0 0 but
then with each iteration we're going to have more total.
So let's do that.
Let's say first of all I guess let's add some kind of comments here.
So we're gonna have cart items.
That's number one.
And then the second one is gonna be total.
So let's add comment of cart total and then we're gonna do pretty much the same syntax we're gonna have
cost or you know what let's use let's let new total is equal again to cart reduce.
Then we have our callback function.
Then again we're still calculating the numbers.
So I'm going to start with zero.
Then again we have accumulator and current.
And again I'm going to call this total and cart item.
And then within the function body again we're gonna have a return but unlike our previous function where
we just return total plus whatever was the amount on that specific item well in this case we're going
to multiplied by the price.
So our functionality is going to look following way where again we're appending this but we're gonna
say cart item.
So each and every iteration has the amount and we would want to multiply this by the price.
So also cart item has the price.
So we're gonna multiply amount by the price.
Now this once in a while is gonna give us a weird numbers.
So in order to avoid that we're also gonna set up one more functionality where we have a new total.
So that's the total I'm getting back and I'm not going to control all this time because we already looked
at the functionality but new total is gonna be equal to a two fixed.
So I'd want to use a two fixed method to make sure that I'm always getting to decimals.
Now the thing with that is it returns a string.
So we also need to use past flow.
So when you say pass load then within the past what we're going to pass in our new total and then two
fixed method like I said so we're going to make sure that there's always only two decimals like so.
And then of course again we need to run our set total.
So set.
Total is now going to be equal to a new total.
And the moment we do that within the cart page we're gonna see our total amount.
So in this case since we are displaying an application we can see that everything has been set up correctly.