Okay, so now we want to use the add to cart function that we just created in the slice and we want
to use it from our product screen, right?
Because that's where we have the add to cart button.
Now there's a few things we need to do.
We need to bring in that add to cart action.
We also have to add a quantity select because right now we don't have one.
So let's, let's deal with that first.
So the quantity is going to be kept in in component state.
So let's say import use state.
And we'll create down here.
Let's see.
We'll go.
Let's go right under here and let's add our const and she will be the state and then set.
She will be the function to change that state.
We want to set that to use state.
And the default the default for that is going to be one.
Okay.
Now we need to have the output, the quantity.
Select output.
So let's come down here.
And where are we going to put this?
Let's go.
I don't have a placeholder for it, so I need to figure out exactly where this goes.
Um, so we have status in stock.
Probably right above the button.
Yeah.
So where we have this button inside the list, group item.
Let's put it right there.
Now.
We only want this to show if the product is in stock.
So let's open up some curly braces here.
And let's say if the product dot count count in stock is greater than zero, then we want to show this.
So open up some parentheses and then in our parentheses we'll do a list group.
So let's say list group and then dot item.
And then in the list item, let's do row.
And in the row we'll have our first column, which will just have like the label or whatever, the heading.
So we'll say qty for the quantity and then we'll do another call.
And then inside that call is where we want the the actual form control.
So we'll say form dot.
Control, and this is going to have a few attributes on it.
Few props.
First is going to be as and we want this to be a select list.
So we're going to say as select and then the value is going to be the quantity and the state, which
is qty.
Okay.
And then we want to have an on change.
So on change.
We're going to set that to.
Uh, function pass in our event parameter here.
And then what we want that to do is call set qty because we're going to update the quantity and we want
to make sure it's a number.
So let's use number.
And then pass in our E dot target dot value.
So that will be whatever we select.
So that's the form control open.
And then inside the form control or I should say it's a select list.
Since we have as select, we want to have a select list of numbers, but we only want the numbers to
go up to whatever the quantity is, right?
So let's say we have five in stock, we have a quantity of or we have five in stock.
If we're if we allow the user to select ten quantity and go through the process and pay for ten, that's
going to be a problem, right?
Because we don't have ten in stock.
So you don't want to just make the quantity, just an input value where they can put anything unless
of course, you're a huge company and you can just provide as many as someone orders.
But we're not.
This is this is made to be like a small shop.
So what we can do is open up some curly braces and we're going to have we're going to create an array.
So in the in the curly braces, we're going to have some brackets and then I'm going to use the spread
operator and the array constructor.
And then inside that we want the product.
So we'll say product dot and then the count in stock.
Let me just close that sidebar up.
So the count in stock and then outside of the parentheses we're going to use the dot keys method.
All right.
So what this is doing is this this array is creating an array with the length of the however many products
are in stock.
And the Keys method is used to create an array of indexes.
Now the indexes start at zero.
So we want to make sure that when we have the options we use, we add one to that because we don't want
zero as an option for quantity.
All right.
Now this everything in brackets, like I said, this creates the array.
In fact, we could probably just.
Um, I just want to show you what this actually gives us.
So if I were to just.
Come up here.
And let's.
Go right above the return.
I just want to do a console log of that so you can see exactly what that gives us.
Form is not defined.
We just need to bring form in from React Bootstrap.
All right.
And then let's let's open up the console to see what we get here.
So we have an array.
That is zero through nine.
It has ten in it.
Right.
So I'm guessing this has a quantity of ten.
I'm sorry, not a quantity.
A product in stock of ten for the headphones.
So to check that, I don't think we have that output here, but we could check just by going to our.
Back in data products.
And if we look at the headphones.
Oh, that's not it.
Right here.
Yeah.
Count in stock ten.
So you can see we're getting now in a ten item array, although it starts at zero.
So remember, we do have to add one on to that.
Okay.
Now, I just wanted to show you what that expression gives us, because it's kind of it's kind of tough
to really understand what's going on here.
So that gives us an array of zero through 10 or 0 through nine in the case where there's ten in stock.
So what we want to do is map through this array that I just showed you.
So dot map and we'll say for each we'll call it X and then what?
We want to return.
Um, is going to be the option tags.
So option.
And we need to add a key to this.
Let's say key equals and we're going to use X, but we're going to add one because remember, it starts
at zero and then we'll do the same for the value.
Let's say value of the option is going to be X plus one.
Okay.
And then inside the option, which is going to be the text that's shown, is also going to be.
I don't like how this is aligning, but whatever.
X plus one.
All right, so let's save that.
And if we come over here, we see one.
And then if I click in there, we see one through ten.
Okay.
Again, make sure you put the plus one because if you just put X, then it's going to be zero through
nine because that's what that that's what this array that we created gives us.
So make sure you have that plus one.
Now, if I go to another product, like let's say this camera, now we have the quantity options of
one through five because there's only five in stock.
This echo dot has no it's out of stock, so we don't even show the quantity.
So you have to think of a lot of different situations when you're creating an application like this.
So now that we have that, we have this, the quantity select, and when we actually select one, it
should go into the component state, right?
And we can check that if we use the react, not the redux, but the react.
Extension here.
And let's see.
Right here.
That's the props.
Where would that be?
That would be in.
What component is that?
Oh, it's just the.
The screen.
So where is this product screen?
Right here, product screen and there it is.
So in the state we have five.
If I change that to seven, then that changes to seven as well.
Good.
So now we need to have our handler.
So let's go down to the button.
And let's add a handler to this.
So we're going to say on click, then we want to call, let's say add to cart handler, which we haven't
created yet.
So we'll do that now.
So up up at the top here.
Let's see.
What do we want to put this in?
Let's go right under the quantity here.
Uh, no.
We'll go.
Yeah, right under the quantity.
And let's say const ad.
Two cart handler.
Okay.
And then what we're going to want to do in our handler is call the add to cart action that we created
in the last video.
So we need to bring that in.
So let's say import.
Add to Cart.
Actually.
Where do we bring this in from?
Its slices.
What is it?
Slices slash and the cart slice so import add to cart from.
Dot, dot slash slices.
Slash cart.
Slice.
I'm going to bring that in.
We also want to bring in.
Um use navigate from the router.
So along with use params let's bring in use navigate.
And then let's initialize that.
We also need use dispatch because we can't call add to Cart directly.
Okay.
We actually have to we have to call dispatch it.
So dispatch is from React Redux.
So we need to bring that in as well.
Let's see, Do we bring anything in from that yet?
No, we didn't.
So we'll go right here and say import and we want to bring in use dispatch.
And that's going to be from React Redux.
And then we'll go right under where we create, where we get the ID from the URL and let's say const
dispatch equals use dispatch.
And then we also need to initialize the navigate.
So const, navigate.
Equals use.
Navigate.
All right.
So now in the add to cart handler, I want to dispatch that add to cart action.
So let's say dispatch.
And then we can pass in here.
An object.
And I'm sorry, not an object I'm going to pass in.
Add to Cart.
And then pass an object into that because what we want to send is the product.
So we're going to use a spread operator and the product.
Okay, which we're getting from our query.
We should probably put this below that.
Actually.
Let's take the handler and let's put it.
Right above the return like that.
All right.
So we're passing the product.
We also want to pass in the quantity.
So q t.
And yeah, and then we just want to navigate to the cart, which we don't have that route or that page
yet, but we'll just, we'll navigate to it anyways.
So navigate.
And we want to go to slash cart.
And.
And I think that should do it.
So if we come back over here and let's say we want to add to Cart, so it brings us to slash cart,
which is fine.
This isn't showing because we haven't created it yet, but let's open up our redux state.
And if we look in our cart.
And you look in cart items you should have well, if you depends on what you did.
But I have one item here.
And let's see, I.
Chose to.
So I should have the price of two.
Items.
Price 179.
How much is this?
89.
So I have.
Yeah.
So I have to.
In here.
And then we have the tax price, which is 15%.
The shipping price is zero because it's over 100.
So the total price is 206 98.
All right.
Now, if I go to another product, let's say this phone right here, and I add.
You'll see now.
We have two products or two items in our state.
And not only should this be in our state, but it should be in our local storage as well.
So if we go to local storage here, you can see key cart and we can see it better down here.
So we have two items in our cart and it has all the pricing info as well.
All right.
So it's working perfectly as far as I can tell.
And just to kind of reiterate, when we click this button in our product screen, we're calling the
add to cart handler and then we're dispatching the add to cart action, which is being exported right
here from our slice.
And that's going to go ahead and just calculate everything up.
It's going to get our items and then it's going to put everything in local storage.
And if we reload the page, it's still going to stay in our state, right?
Our cart items are still there.
And that's because at the beginning here, we're checking to see if there's anything in local storage.
If it is, then it gets put in our initial state and that gets passed into our slice.
All right.
So hopefully that makes sense.
And if some some of this stuff is confusing still, I think that as we move along, it will become more
clear.
All right.
So what I want to do next is kind of clean up the the add to cart because there's quite a bit of code
here.
And I like to keep this clean, these reducer actions here.
So we're going to create a utility file where we can do this, the calculation stuff, because some
of this we're going to be doing in other actions as well.
So I want to just I don't want to repeat ourselves.
So we'll do a little bit of cleanup next.