‫Next in line is deleting pizzas from the cart.
‫And doing so is really easy
‫because the most difficult part is already done,
‫which is actually our reducer here.
‫So all we have to do is to now dispatch an action
‫that is created by the delete item action creator
‫each time that we click here, on this delete button.
‫So, let's go do that.
‫But before we blindly just attach an event handler
‫to this button, let's think about this.
‫So, we want to delete the pizza from the card right here
‫but the same thing might also be true in the menu.
‫So, if we go back to the menu,
‫then we might also want to delete a pizza right here.
‫So for example, let's say we added
‫one of these pizzas here by mistake.
‫And so if we then give the user a delete button immediately
‫that will then allow them to fix that error.
‫So, in other words, we want that delete button
‫not only in the cart, but also here in the menu item.
‫So, what this means
‫is that we should create a reusable component here.
‫So, let's do that.
‫So, new file here and then delete item.JSX.
‫And then basically we can take that delete button
‫that we already have here and place that right there,
‫in that component that we are building right now.
‫So, let's grab this and return that from here,
‫and of course we need to import that button here,
‫and yeah, let's actually just go back to the cart,
‫and so then we need to add that button back.
‫So, add it here to the cart item.
‫So that was right here, I believe.
‫And so delete item right here.
‫So, visually we have the same thing as before
‫but now we can also add this same button here
‫to each menu item.
‫But actually let's do that a bit later.
‫So, let's first actually worry here
‫about this delete item button itself.
‫So, here we will want to add the onClick prop
‫because here is where we want
‫to dispatch that delete action.
‫So, dispatch, which we need to get
‫as always from useDispatch.
‫And then we need our action creator,
‫which is deleteItem, just like this.
‫Here we have a duplicate const apparently,
‫and now let's think about this delete item.
‫So, remember that right here,
‫the payload in this reducer needs to be the pizza ID
‫because this pizza ID is necessary
‫to actually delete the item from the cart.
‫And so we need to pass that right here
‫into this delete item function call.
‫However, here we don't really have that data
‫and so we need to pass it in as a prop.
‫So, pizza ID here, and then we use that
‫and then back in the cart,
‫which I already closed for some reason.
‫So back here when we, yeah, or actually it is not even here,
‫it's in the cart item.
‫So here is where we include delete item.
‫And so here is where we now need to pass in
‫that pizza ID prop.
‫And so that is exactly called pizza ID.
‫All right, so the way the data flows here
‫through this application might be a little bit confusing.
‫So, if you have any doubts about this,
‫just make sure to pause the video at any point
‫and really analyze the data flow.
‫You can as always also use here,
‫the component tree for that.
‫But basically what happens is that in the cart,
‫we have a list of cart items
‫and each of the cart items receives indeed the item.
‫And so that includes the pizza ID, the name,
‫the quantity, and the total price,
‫which is all the things that we see here.
‫And so then we take that pizza ID
‫and pass it here into the delete item component
‫so that this component can then use it
‫to effectively delete that item.
‫So, let's add a few more here
‫just so we actually see this happening,
‫and so let's see what happens when we click.
‫Beautiful.
‫So, we had three pizzas, now we only have one,
‫and the reason for that
‫is that we had two times Pizza Romana,
‫which we are not supposed to have.
‫But again, we will fix that a little bit later,
‫and actually right in the next video.
‫So, let's just add another one here
‫and maybe this one, just to make sure.
‫And so now we can indeed delete them one by one.
‫And so then our cart is empty
‫and then we can add some other ones.
‫So, we placed all this code into the separate component
‫so that now we can reuse it in the menu item as well.
‫And so let's do that.
‫Let's close it here.
‫Let's just clean this up.
‫And then let's place that button right here.
‫For now, I will simply place it here,
‫which will create some problems,
‫as we will see, but let's actually wait for them.
‫So, delete item and it needs to receive the pizza ID
‫which here is actually just called ID,
‫and then we need to of course import that component.
‫So, import, delete item,
‫and then we need to go up and into the cart folder,
‫and then from there, delete item.
‫All right, and so now we have this button here always.
‫So all the components have this button,
‫which, of course, doesn't make a lot of sense
‫because most of these, or actually right now,
‫none of these pizzas is actually in the cart.
‫And so it doesn't make any sense that this button is here.
‫So for example, if I click here, then nothing happens,
‫or actually I think there was a new error or maybe not.
‫So yeah, actually really nothing happens,
‫but in any case, we only want to display this delete button
‫if the pizza is actually in the cart.
‫So, how can we do that?
‫Well, basically we need to determine
‫whether the quantity of each of these pizzas
‫is greater than zero in the cart.
‫And if it is, then we can display the delete button
‫and not the ADD TO CART button.
‫But if there is no pizza in the cart,
‫then we only show the add to cart.
‫So, let's try to do that up here.
‫So, basically we need the current quantity.
‫So, that can be used selector,
‫which for some reason is not importing.
‫Let's do that manually,
‫and then here we need to write some selector.
‫However, none of the selectors that we have yet
‫works in this situation because the only selector
‫that we have down here is to get the total quantity,
‫but not the quantity for each individual pizza, right?
‫And so we need to now, here, create another one.
‫So, the way we want this one to work
‫is getCurrentQuantityByID,
‫and then we want to pass in actually the current pizza ID.
‫So, this looks a bit confusing,
‫but let's now implement exactly this selector right here.
‫All right, so export const, getCurrenQquantityByID
‫and then remember that we passed in actually an ID here,
‫so the ID is the argument,
‫and then what this should return is a selector of this type.
‫So, a function that receives a state
‫and then returns something.
‫So, what we're gonna do is to try to find an item
‫in the cart with this pizza ID,
‫and if there is one, then we return the quantity,
‫otherwise we just return zero.
‫So, that is state.cart.cart.find
‫and then item where the item.pizza ID
‫is equal to the one that has been passed in.
‫And so then if this exists,
‫we use optional chaining for that,
‫we get the quantity, and if not, then we return zero.
‫All right, and so all we have to do now
‫is to then import this function,
‫which for some reason doesn't really work,
‫but we can also just add that here.
‫Now we get cannot access ID before initialization.
‫So, let's move that up here,
‫and now this should actually work.
‫So, let's just lock this value to the console
‫the current quantity,
‫and so now we should get a bunch of zeros.
‫So each of these here right now is zero times
‫in the cart, right?
‫So, let's clear this and then let's add this one here,
‫and so we see that the quantity
‫has indeed been updated to one for this one component.
‫So, we can see that actually by updating the cart state here
‫not the entire application is re-rendered
‫but really only this one component.
‫And so that's because of the internal optimizations
‫that Redux has now, all right?
‫So, now we can use this value here basically
‫to compute another state, which is just called isInCart.
‫And so here we can just say
‫if the current quantity is greater than zero.
‫So in this case, the component is in the cart, right?
‫And so basically we only want to display
‫this right here if isInCart.
‫And so with this, it disappeared from everywhere
‫except from this one here,
‫which we just added to the cart earlier.
‫Now here, we don't want to then display this button.
‫And so let's also say
‫that the ADD TO CART button should only be visible
‫if it's not sold out, and it is not in the cart.
‫So, it isInCart.
‫Great.
‫And so here we can now only delete this pizza
‫but not add another one, so at least not for now.
‫So, watch what happens when we add this one.
‫And so now in the cart, we should have one Margarita
‫one Romana, and let's try one Diavola here.
‫And indeed here we have the three of them.
‫Now here there's a problem.
‫So let's quickly try to fix that.
‫So inside a cart, maybe we don't have,
‫ah, here we have item.key and not item.,
‫it's probably called ID, not sure about that.
‫So, let's just go back and then render this page again,
‫and so now the error is gone.
‫So, let's go back again,
‫and now as we delete this, nice,
‫then the ADD TO CART button is back.
‫And of course the pizza is also gone here from the cart.
‫So now we can basically toggle between these two states.
‫And you can also see down here
‫that the value then keeps updating.
‫So, here the complicated part was definitely
‫to get the information whether each pizza item
‫is actually in the cart or not.
‫So, we did that right here by writing this special selector.
‫So, here the selector function is actually a function
‫that returns another function
‫which is already pretty advanced JavaScript
‫but at this point, I'm sure this is nothing new,
‫and nothing complicated for you.
‫So, just make sure to review how this function here works,
‫and so I think that after that,
‫all of this will make sense to you.
‫And then all we have left to do
‫regarding our cart state is to update the quantities.