So now with the product item component reorganized, it's time to be able to let's say delete the items because
that's actually amongst the simplest things we can do.
This takes us back to Redux and there, it's now time to work on the products and I'll start in the actions
which currently is an empty file,
the products.js file in the actions folder where I want to export an action that helps us with deleting
products. The identifier therefore is simply named delete product and it holds a delete product
text here and I'll also export an action creator delete product which takes the product ID, like this and
which then returns an action object where the type is delete product and the pid, the product ID is
simply the forwarded product ID, like this.
Now in the reducer, in the products reducer file, we can listen to that because currently, we're never
caring about any action. Now we can switch on the action type here and handle the case that it's delete
product which we get from our products action file and hence you need to add that import. If delete
product is the case, we need to remove the product from our user products array and of course also from
the available products array because it's deleted in general, not just in our user products but from
the entire app.
Hence here,
I will return a new object where we copy the existing state to be sure we don't lose any state and now
user products is simply state.userProducts,
so the old user products on which we can filter, that's a built-in Javascript method which returns a
new array, a new array that basically is created by running a function on every item in the old array
and if that function returns true, we keep that item, if it returns false we drop the item.
So this executes a function where we get the product, this function is executed for us by Javascript
so to say and it passes in the item it's currently having a look at to this function.
So we get the product for each product in our user products array and we want to return product ID,
unlike action pid which is the product ID we want to delete.
What this means is that basically it will keep all products where the IDs do not match,
if they do match, we know it's the product we want to get rid of
and therefore we return false
which means in the new array, it will not be included.
Now it's essentially the same logic for the available products,
there we just need to go through all available products and filter out the product there.
This is one change we need to make, another change needs to be made in the cart
however because when we delete a product, it should be removed from the cart as well because otherwise
we have a product in the cart which doesn't exist anymore.
So here, I also will add a case for delete product and hence you need to import delete product from actions
products in the cart.js
reducer as well
and in here, we need to make sure that we remove the product from the cart if it was deleted.
So here in the cart, of course we get our product ID of the product we want to delete, it's this pid
in that action which is dispatched, so therefore here we return a new state where we want to update our
cart and the total amount such that the product is gone and with gone, I mean totally erased from
the cart, not just reduced by one but totally erased. So items is here in the end a copy of the existing
items
without that product, so I'll create a new constant, updated items where I copy my existing state items
here, like this
and then I delete updated items for the action pid, so I delete this item from the cart.
Of course this only makes sense if this item exists in the cart, so I will first of all check if state
items for action pid, if that returns anything meaningful
and if it is not the case, then I will just return the existing state because then I'm done with this
case, I don't need to change anything in the state, so I'll just return the existing state without changes.
If I make it past this if check,
then I know that the product with the ID we're about to delete is part of the item.
So then I continue copying my items, then delete the product from there but before I do that, get the item
total by accessing state items for the action pid and then there, of course we have this, if we have a look at the
cart item model I mean, we have this sum field here, so in the end here I need to
remove the sum. I'm interested in the sum because now I can update my items down there with the updated
items where I did delete it with the delete keyword and the total amount of the cart is state
total amount minus item total, so the total of this cart item we had added before. So now we update the cart
appropriately as well
when we delete this. Now we just need to dispatch this deletion,
so back in user products, here in delete,
we want to dispatch. So from React Redux we can import use dispatch to get access to the dispatch function
here
by calling use dispatch as we did it many times before
and then here, when delete is pressed, we can dispatch our action and for that of course, we need to import
this action, so
let's do this,
let's import maybe everything as products actions from the store folder, there from the actions folder
and there from the products file and now we use products action down there
when we dispatch this to call delete product and forward the product ID which of course is
itemData.item.id here because we're going through all the products here
and that basically means that itemData.item refers to instances of our product model,
every instance has an ID property and we're forwarding this to delete product.
So if we give this a try and we go to admin and I click delete on the red shirt, indeed it's gone here
and if I go back to products, it's gone here as well.
Now if we reload this and I do add the red shirt to the cart, you see it here, I added it twice.
Now if I go to admin and I delete it and I go back to products and to the cart, the cart is empty now.
On the other hand, if I do add let's say the carpet and the coffee mug now, go back to admin, delete the
carpet but not the coffee mug, you see in products, the coffee mug is still in the cart,
so that did work. By the way, you might notice that coffee mug is a bit cut off here, that's something
I'll fix later together with the fact that here, we actually see a minus now for the total,
that's also something I'll fix in a second.
First of all let's make sure that we can
however in the admin section go to the edit screen or that we also have an item up there that allows
us to add a new product.