‫Alright.
‫So to finish this part where we are working
‫with the cart state, let's update the pizza quantities.
‫And this is going to be very similar
‫to what we did before with deleting pizzas from the cart.
‫So we will want to be able to increase
‫and to decrease the amount of pizzas
‫both in each of these menu items here,
‫and also right here in the cart items.
‫And so just like with delete item,
‫we will now create a reusable component for that.
‫So let's call this one
‫UpdateItemQuantity.JSX.
‫Our nice snippet here, and here, just like before.
‫We will also need to receive the current pizza ID.
‫Now here we will then have two buttons.
‫So one for decreasing and one for increasing.
‫So let's bring in our button here,
‫and the type will be a new one.
‫So we will create a round button.
‫And then for now let's not specify the onClick,
‫let's leave that for later.
‫So here we have the minus
‫and then another one for the plus.
‫And then let's immediately include that right here.
‫So before the delete item.
‫So update item quantity
‫with the pizza ID of pizza ID.
‫Just like this.
‫And there are our buttons.
‫Now we just need to
‫now create this new round type.
‫And so let's do that right here.
‫So adding a new entry into our styles object.
‫And this one will actually be pretty similar
‫to the small one.
‫Here let's just decrease these headings here a little bit.
‫So let's say 2.5 and one.
‫And then here, let's say
‫3.5 and two.
‫Let's make the text a bit bigger with text small.
‫And there we go.
‫Nice, now we just need some space between them.
‫And so let's add that right here.
‫So let's make this a flex container with a gap of one.
‫And since later we will add another item here,
‫or another child element,
‫let's also align items to the center.
‫So just like this.
‫And then as we have, or as we reach a bigger break point,
‫let's make the gap a bit bigger.
‫Beautiful.
‫So this is looking really cool.
‫And so let's now then add
‫our onClick event handlers.
‫And so just like before,
‫this is where we will now dispatch our actions.
‫So dispatch,
‫for which just like before, we need to get that function.
‫And then remember that right here
‫we have increased item quantity and decreased item quantity.
‫And both of them, as the payload, need the pizza ID.
‫So that's why we pass the pizza ID here
‫right into this component.
‫So here we dispatch decreaseItemQuantity
‫with the pizza ID.
‫And then here let's just grab this
‫and increase
‫just like this.
‫And so this should already be working.
‫So let's test this.
‫And, beautiful.
‫So notice how here the value went up, here as well,
‫and also the price increased.
‫And as we keep clicking here, then we keep going up.
‫So we have nine plus one now, which is exactly 10.
‫Now watch what happens when we do minus here
‫when we are already at one.
‫So (laughs) we basically go down to zero and to minus one,
‫and our cart then keeps getting cheaper
‫and we keep getting less and less pizzas.
‫So this, of course, should not be allowed.
‫And so let's actually prevent that right in our reducer.
‫So here what we can do, and remember that at this point
‫the item quantity has already been updated.
‫And so what we can do is to check
‫if the item.quantity is equal to zero,
‫then we want to completely delete the item from the cart.
‫So that's, again, a very common thing to see
‫in web applications like some online shopping.
‫So essentially when we decrease the quantity
‫from one to zero, then that element is taken out.
‫So basically here we want to then delete that item.
‫And so we could write exactly this logic right here.
‫However, we don't have to because we can reuse this logic
‫by using a really nice trick that I'm about to show you.
‫So we can do
‫cartSlice.casereducers,
‫reducers, and then we can basically manually
‫call one of these reducers.
‫So then let's call deleteItem
‫with the same state and action that we just received here.
‫Alright, so let's test this.
‫Let's add this one to the cart.
‫Now here we get, again, some problem.
‫But let's take care of that later.
‫So updating here still works,
‫so increasing.
‫And then watch what happens as we click here now.
‫So one less time as it is one right now, and nice.
‫So with that or pizza got deleted just like it should.
‫Now let's just see here about this error.
‫So let's add two different ones and then,
‫well, React, somehow, is not complaining anymore.
‫So not sure why that is, but better for us.
‫And now just to finish this component
‫let's actually also display here the current number
‫of pizzas between these two buttons.
‫So, again, something I'm sure you have seen.
‫So for that here we also need access
‫to the current quantity.
‫So let's call that actually currentQuantity.
‫And then, yeah, right here we need to pass that in.
‫So, how do we get access to that?
‫Well, we already wrote our selector for that earlier, right?
‫Right here in the menu item.
‫So we want exactly this here right now.
‫So I'm just grabbing it and pasting that here.
‫And then React will not like this,
‫so let's import this one
‫and also this function right here.
‫And here it is called pizza ID.
‫And so here we have the current quantity,
‫which we can now pass here into this component.
‫So current quantity is equal to current quantity,
‫which we can then display here in the middle.
‫So let's create some span element here.
‫Not with that, but with the current quantity.
‫Let's just style this a little bit.
‫Let's make the text smaller.
‫So text small, and also give it some more boldness.
‫So let's say font medium here,
‫and then maybe also increasing the gap.
‫Okay, nice.
‫However, for some reason, here we get zero.
‫So this is not really working.
‫So let's maybe try to lock this to the console here
‫to the current quantity.
‫And yeah, it always stays at zero somehow.
‫Ah, but I don't know why.
‫But here we are passing in an ID,
‫so that's not supposed, and now that works.
‫Great, so in this case
‫we might think that this value is not really necessary
‫because we already have it up here.
‫But just like the delete button,
‫we now actually want to reuse this
‫in the menu right here.
‫And so here, of course,
‫we will not know how many pizzas are already in the menu.
‫And so, not in the menu but in the cart.
‫And so let's also, of course, include that right here.
‫So along the DeleteItem button.
‫So let's wrap this here in some div.
‫We then need to close here in the end.
‫And then let's do UpdateItemQuantity.
‫So let's, again, then import that manually.
‫So UpdateItemQuantity.
‫And there we can already see something.
‫All we have to do is to pass in the prompts.
‫So the pizza ID should be pizza ID.
‫And then the currentQuantity,
‫in this case we already have it.
‫Here it's called ID,
‫but there we go.
‫Now we just need some styling here as well.
‫So let's make this
‫a flex container items.
‫Center it here, and then some gap.
‫So gap of three.
‫And then in the small view port
‫let's immediately increase this by a lot.
‫So let's say gap eight.
‫Alright, nice.
‫So let's delete this here,
‫and this one as well, and start from scratch.
‫Let's just reload to get rid of those errors,
‫and then let's add this one.
‫Ah, beautiful.
‫So now we have exactly one item in our cart, and we can,
‫of course, delete it like this, or we can keep adding more.
‫So then they appear down here.
‫And just like before, as soon as we reach zero
‫then the item is completely deleted from the cart,
‫we no longer have in the overview here,
‫and we get back the button of adding to cart.
‫Now, alright, and so there you have it.
‫This is basically how we can implement
‫a very simple shopping cart using Redux.
‫So this feels really real world right now
‫because in many of the shopping apps that you have used
‫they will probably work exactly like this.
‫So I hope that you really liked doing this part.
‫But, of course, we are still not done here
‫because now we actually need to use exactly this data
‫to then submit an order.
‫So here in the next page.
‫Here, again, we have some problem.
‫So let's again go to cart here.
‫And so maybe here it is not ID, but pizza ID.
‫Alright, so let's go back here
‫and then open the cart again.
‫And so maybe (laughs) now it is fixed.
‫But in any case, as I was saying,
‫now as we order the pizzas
‫we actually want to use exactly the pizzas
‫that are in the cart to submit the order.
‫And that shouldn't be too hard.
‫And so let's quickly do that right in the next video.