‫So, let's start using our cart state
‫by adding new pizzas to the cart.
‫So, where exactly are we going to do that in our code?
‫Well, here in the user interface,
‫the user is able to add new pizzas to the cart
‫simply by clicking here on these buttons.
‫And so, all we have to do is to come to the menu items
‫and then implement that functionality right there.
‫So, here is where the cart
‫and the menu features intersect a little bit.
‫And so, we now need to implement some cart functionality
‫here, in the item.
‫But of course, things are never so linear
‫in any real-world application.
‫So carts cannot be completely separated
‫from the menu feature.
‫And so, yeah, sometimes we need to implement
‫some parts of a feature inside another feature,
‫because again, of course, these will intersect.
‫Let's make this a bit smaller.
‫This doesn't need to be so big.
‫And I want to actually start
‫by only rendering this button here
‫in case that the pizza is not sold out.
‫So if not sold out,
‫then render this button.
‫So here, we do not need that.
‫Now here, we actually want to pass
‫in now an on-click handler.
‫So in regular buttons, so in HTML buttons
‫we are able to pass in some function here into a button.
‫Now our own button right now doesn't have
‫that functionality yet, but let's do that in a second.
‫Let's just immediately create that function here.
‫So handle it to cart.
‫And so here is where we create that event handler
‫function
‫just like this.
‫But as I was saying, we now need to enable our own custom
‫button to actually receive this on-click prop.
‫So let's open that up and accept that here as yet,
‫another prop.
‫So, on click
‫and now here what I'm gonna do is to
‫do something similar.
‫So, we'll copy this and say if there is on click
‫then, return this button with the on-click handler.
‫All right?
‫And only if there is no two and no on-click prop
‫then just return this regular button.
‫So, this one without the on click.
‫So, we have a bit
‫of duplicate code right here,
‫but this is really not a problem.
‫Now right?
‫And so, let's just check here.
‫So, let's just console log the pizza ID here to the console.
‫So, when we click here, we get one.
‫When we click here, we get three.
‫So basically, these pizzas here are in order.
‫So, this one is number 10 and so on and so forth.
‫And so now what we need to do is to
‫create a new pizza object.
‫So, a new item that has this exact shape, right here.
‫So, actually let's copy this.
‫Let's delete this.
‫Let's call this a new item.
‫And here of course, we will not hard code this value.
‫So this is again, the current ID.
‫Then here, the name is the name of the pizza.
‫The quantity will initially be one, the unit price
‫will be the unit price, and the total price will be
‫the unit price times one.
‫So, this one is of course not necessary, it's just
‫to indicate that it is computed using these two values.
‫And now, all we need to do is to again dispatch an action.
‫So, we already know how that works at this point.
‫So, we use the use dispatch hook provided by React Redux,
‫and now we can dispatch actions from here.
‫And this action object will be created by calling the
‫at item action creator.
‫So, this one that we export right here.
‫Now, right?
‫So, for at item then the payload needs to be the new item,
‫which is exactly what we're going to pass in here.
‫So, that one right there.
‫So add item, make sure to import that interior pass
‫in the new item.
‫Alright, and this should already be working.
‫So let's reload here and add this pizza.
‫And we didn't get any errors, so that's already
‫a great sign.
‫But of course, also nothing happened in the UI, which is
‫because nothing is really using this state yet.
‫However, luckily for us we have the Redux dev tools.
‫remember them?
‫So we installed them way back in the Redux section.
‫And so, let's get them back here.
‫So we see that here the at item action was indeed
‫dispatched.
‫And so let's see what our state looks like right
‫now.
‫So we have our user, which is of course, still empty,
‫and then here we have the cart state.
‫And then in there we have the cart array.
‫And so then, this is where we have these two items
‫and we have two of them
‫because this one is our initial state.
‫And then, we just added this one.
‫So we clicked here, which is pizza Romana,
‫as it says here with a pizza ID of three, one
‫and the price is 15,
‫exactly as it says here.
‫Beautiful. So this worked great.
‫So let's try that again.
‫Let's add this one as well.
‫And there it is.
‫And so now, if we come back here,
‫indeed we have another one.
‫So, this is working.
‫And so next up, let's then use this new data,
‫so all the pizzas
‫in our cart to update this card overview down here.
‫So, this is just fake dummy data for now
‫but in the next video we will make this real data.