All right.
We have two functions left.
We have had to cart as well as clear cut.
I think we're going to start with clear cut because it is going to have by far the easiest functionality
where if we would like to clear the cart we're just going to use said cart.
Remember that was the function given to us by use state and then we're just going to set car to an empty
array and that's all we have to do.
And then for the add to cart it's gonna be a bit more complicated.
But first we're just going to console log the product and then we're gonna head over to product details
because we would want to in fact right now import our current context remember previously we had this
comment dealt.
So now we're going to uncommon the court context and now I'd like to access my data and the data that
I'm looking for is my add to cart function because if I have my button to navigating to a cart or adding
to the cart and then obviously we're also navigating then we would want to add our function there.
So if I'm gonna head over to the product I'm going to click on details.
Remember we have this add to cart but so now I would want to add that functionality.
So first let me get my function.
Add to cart that is coming from.
React.
Again we're looking for use context use context and we're looking for the court context.
Once we have our add to cart then we need to pass in the product.
Remember we get the product because we run find method on all the product.
And of course we can get the correct one because we have have access to the.
Then we get the product.
We do the structuring.
However in our case we're just going to pass the whole product into our add to cart.
So we have history push.
We are in fact navigating to our cart page and right before we do that we're gonna have add to cart
and we're just going to pass the product.
Let me save it.
And then the moment I click it in a console Of course I'm going to have my product and I can head over
back to cart jurors our context and we're gonna do a bit of logic.
First of all I would want to the structure some properties out of my object because I don't want to
parse the whole thing into the cart.
There's no point for me to have the property of let's say I created that as well as description.
So let's just look for the properties we're looking for.
And by the way if you're looking for suggestion the properties you're going to need you can look no
further than local cart or you're gonna see that we need daddy title price image as well as the amount.
So the basin properties we're going to structure we're going gonna head over back to car Jess and we're
just gonna set it equal to our product.
So cost I.D. image title and price and all that is coming from the product mark so land we would want
to check whether the item is already in the cart if it isn't a cart.
We would just want to increase the amount of items it has.
So let's say if I click on the computer and in vintage one instead of adding as a new car item I would
just want to increase the amount.
So first we're going to check is the item in a cart or not.
So let's look for the item I'm going to say item and then again I just like using the spread operator
but you don't have to technically you can just access the cart but I must say that I'm just going to
copy all the values that I have in a cart and then I'm going to run the final method and then I'm going
to look for the item that has the same idea and I'm either going to have that item or that item is not
going to be in a car.
So item my D is equal to it.
So that's how we're looking again using the fine method instead of filter.
So this is going to either return undefined or we're going to have.
All right.
And since we have that piece of logic already in place I can just up might if statement and then I'm
going to say if the item is already in the cart.
Well I would just want to increase the item.
So I'm going to say increase the amount because obviously that is the method that we already have.
And then I'm just going to pass immediately remember we had already increase amount function.
So if the item is already in the cart if it is equal to something because you're not going to be able
to find that item in a cart then this is gonna be undefined.
So we're right away we're going to go to else and if that is true then we're just increased the amount
and then we're going to return from the function.
However we also have another option where the item is not in the cart yet.
So in that case we're going to create a new item somewhere a new item and in this case again we're going
to use the yes 6 shorthand where I'm gonna be setting up a d property and since my value is equal to
a variable that I already have again I can just use a shorthand where I'm going to say I'm going to
have the D.
In this particular product or new item that I'm going to have the title which is equal to the title
in passing that I'm gonna have also a price.
And lastly a month.
Now the amount I'm gonna heart code and I'm going to say that amount initially is going to be equal
to 1.
Because of course the moment we add some kind of item to the cart while the amount is just going be
one.
And then of course we would want to have that item to our cart.
Someone say cost new cart is equal to again.
We're going to use a race port operator where I'm gonna add all the items that I have currently in a
cart.
So dot dot dot cart.
So we're copying here and then we're just going to use new item.
So now we're just adding a new item like so.
So we spread out all the properties that we have.
We assign it of course to this new array and then we'll just add our last item that we just created.
And then eventually we can just use again set the cart and then we can add our new cart value.
Let's say it I think I'm gonna close my console.
I don't think there is need for it then I'm going to head over to a project that we're currently working
on.
So we have our product and let's say I'm going to try this one.
Hopefully I didn't have this one already in a cart.
The moment I click on it it doesn't show the image.
OK interesting.
Let's head over back and let's decide why we don't have the correct image.
So I'm gonna head back to my project.
I have the image and as always it's gonna be much more easier if we're just going to console log it
and let's see what we're gonna have.
So let's head over back to products.
Let's again click on this guy Mary.
Let's add the products.
And again we don't have that particular image.
So let's look in a console we have the object and ask for image of course we do need to use the url.
So that was my mistake where remember we're passing in the whole object.
So let me head over back and once I know that I need to access the RL property instead of the whole
image.
Well again we have two options either we can the structure right away.
Are you are well or in fact we can.
I don't know.
Set it up has a separate variable.
Now I'm gonna get her off the console log.
We're not going to cancel a log.
And also as a side note I purposely show you if I'm troubleshooting something because a lot of times
I see where people are asking questions but in order to get those answers it's just a simple console
log where will you just check where your data is coming from.
So if I know that I'm passing my product into my ad card just check whatever data you have.
And the moment you can check your data well then you can start looking for answers because I can clearly
see that I'm passing image right now as an object and that's the reason why my image is not displayed
properly.
So in my case what I'm going to do is I'm going to do a bit more to structuring where I'm going to say
image is gonna be an object of course.
And then what I'm looking for is this you are all property and then in this case since my item does
not match exactly the variable since I have the property by the name of image but the variable that
holds the value is the URL.
Well we're just going to rewrite a little bit.
We're going to say we're going to have the image property and the value is going to be coming from our
you are all variable.
Let's save it.
Now we should finally see the item in the cart.
So let's head or again back to product.
Let's try it one more time.
Let's try to add it.
And of course I have my item in a cart.
I can increase the value.
I'll be careful though.
If you're going to be trying out the functionality of increasing the amount if you're going to do it
let's say to one of the products one of the temporary products that we have in a cart we are going to
keep on adding these new items.
The reason for that is very simple because their ideas are different.
So whatever ideas we have within the product in my local cart you know the dummy data that we have the
ideas are different.
So if let's say I'm going to add Mac vintage computer you're going to probably wonder well why the functionality
doesn't work.
The item is already in cart why we're adding Well again we're adding it because the ideas don't match.
But let's say if I'm going to do this to the item that I already have in a cart.
Well then it's going to work.
So in this case the spectrum computer there's four items.
If I'm going to head over to the product and if I'm going to add to cart notice how spectrum now has
the amount of five.
And we can always test that by just removing our local cart.
So we're gonna head on up and instead of the local cart we're just gonna set this equal to an empty
array.
Don't worry.
In the following videos we're going to set up the local storage so that way we can persist data in between
the Loggins and in between the sessions.
But in this case we're just going to set it as a empty array.
Now of course we're always going to have initially an empty cart.
But let's say if we would want to add it and head over to our products and our product.
Let's just try one more time.
Let's add the product now my amount is of course too.
And then let's add one more.
So this guy again add to cart.
And now we have two of them.
And if I would want to add the amount then of course I can do that if I would want to decrease the amount.
The moment I'm going to go below 1 then we're going to remove the item.
And as always we can just remove the item altogether.
So our functionality works.
And now we just need to start working on the local storage.