Nice work on setting up the colors next hour, I want to work on the buttons so increased and increased
functionality as well as add to cart link.
So I'm going to navigate back to my add to cart component.
And in here I would want to set up one more state value.
And this is going to be equal to my amounts.
I'm going to go with an amount and of course a set amount and that one will be equal to use state.
And since there's no point on adding zero items to the card, by default, it is going to be one.
And of course, there's going to be two functions.
There's going to be one for increase and one for decrease.
Now, since I'm going to be passing them down into amount buttons component, I'm just going to set
up placeholders.
So that way I don't have to hop back and forth.
Sauniere will go with const increase.
Is equal to my function, but said I'm not going to even consider going to think of everything works
and we also have a decrease show and again, we just set up nice placeholders.
Now, once we have everything in place as far as the state's value and two functions now, I would want
to work on my return.
So scroll down a little bit.
I'm going to remember we had our B10 container and instead of this B10 container, there's going to
be a Mountbatten's component like so.
And then the second thing is going to be a link again.
Eventually, once we click on a link, we will invoke have the card function for the time being is just
going to be a link to a card page.
So we're using Dehlin components from reactor down.
We add here card and we'll add also a class name of B10 just so we have nice styling and as far as decks
we're going to go with add to CART.
We save it for now so we should see our link and my buttons and any buttons will pass and three things
will pass in the amount of pass and increase as well as the decoration.
So where we have the amount buttons, three props amount is equal to the amount that increase is equal
to increase and then decrease is equal to decrease.
So three things over here decrease and you can probably already guess that we'll just set up the return
in the amount buttons.
So, of course, all our logic is in place and then we'll deal with these functions and essentially
increase and decrease is going to be pretty much the same like we have worked before.
But the difference in this case is we'll have to check for the stock if the amount gets bigger than
that value, because, of course, I would always want to add only the amount of items that I have in
the stock.
I don't want to add 30 items to the cart, even though I can sell maybe only five.
Hopefully that makes sense.
And like I said, I would want to navigate right now to my buttons and set up my return.
So the structure, all these three things might let me close the sidebar increase, decrease as well
as the amount.
And then when it comes to wrapper, I'll have a component style component.
But I also would want the class name, because this is going to be another case where there's some styling
from the outside.
So we're going to go with amount and then beat the arms like Shell.
And inside of this component, what we're going to do is just set up three buttons.
So we're going to go with button will add type or A..
Sorry, two buttons and then one having to type.
Is it going to be equal to a button?
Then let's add a class name of amount between amount Mithian.
So and since this is going to be decreased one will say on KLAC, so once we click we're going to decrease
the amount.
So of course we'll invoke the function.
Now in this case, we already set up all the functionality in the card so I can simply pass it as a
reference.
And then as far as the actual button, I'm just going to say five minutes.
That is the icon that I would want on display.
And of course, I just need to change this around copy and paste and it's still going to have the class
of a button, but on click.
We're going to go with increase, I'm afraid my nose is going to turn into F.A.A. plus and then in between
them, why don't we set up a heading tale with a last name amount and inside of it, we're going to
pass in whatever is the amount.
And remember, by default, we were setting this up as one.
So once we save, we should have two buttons as well as the amount.
Now, of course, nothing happens because we haven't set up the functionality in ATM card.
So now I'm going to navigate back to court and I guess I'm going to start with increased.
Doesn't really matter which one.
Again, the Gotcher is going to be that.
We'll have to check that we don't go over the stock value.
So instead of the increase, I'm going to invoke my set amount function that controls that that value.
And I'm just going to go with functional approach.
And in this case, I'm going to say that the parameter name will be all the amount, so that is the
value before the update.
And then remember, whatever we are returning from this function is going to be that new value.
So say that amount is equal or not?
I'm going to call the stamp amount.
My stamp amount is equal to all the amount plus one since we're increasing all the amount plus one.
But here's the gotcha.
I would want to check if the Temple Mount is bigger than stock, if it is bigger than stock value.
So how many items I have in the stock then of course I'm just going to set it equal to the stock so
that our user can click all day long, but he or she won't be able to increase more than the actual
amount of items I have in stock.
So and say let's say Temple Mount is bigger than stock.
If that is the case.
And of course I would want to set my Temple Mount is equal to the stock.
And then eventually remember, whatever we were returning is going to be that Newsted value.
So we just go with time and now we just need to do the same thing for decrease the copy and paste.
And I'm going to rename it, by the way, I already have decreased my bad.
So in this case, I can just delete my placeholder here and say decreased set amount, all the money
that still stays the same, but of course, since I'm decreasing, is going to be minus one and I'm
not going to be checking for the stock.
I'm going to be checking for the value that is less than one, because like I said, there's no point
to add zero items to the car.
So I'll say if that amount is less than one, that amount is equal to one.
And again, we're returning a temperament.
And what you'll notice is that you're clicking notice you should get to the lemon, because that is
the amount of items that this product has in stock.
So we cannot go more than 11.
And if the user tries to totally remove the items.
It's not possible.
Oswal.
So we'll always have one because it doesn't make sense to have zero items to the card.
And of course, once you click on Add to Cart, we just navigate to the card page because we haven't
set up the functionality.
Now let me take a look at the other product.
Maybe this one, so this one has one, and again, it only has two items in stock.
That's why we cannot go below one and we cannot add more than two items to the cart.
Hopefully we are all in good shape and now we can move on to the next step.