1
00:00:02,320 --> 00:00:09,040
So now with the product item component reorganized, it's time to be able to let's say delete the items because

2
00:00:09,040 --> 00:00:14,120
that's actually amongst the simplest things we can do.

3
00:00:14,170 --> 00:00:19,600
This takes us back to Redux and there, it's now time to work on the products and I'll start in the actions

4
00:00:19,600 --> 00:00:21,120
which currently is an empty file,

5
00:00:21,160 --> 00:00:26,450
the products.js file in the actions folder where I want to export an action that helps us with deleting

6
00:00:26,560 --> 00:00:35,350
products. The identifier therefore is simply named delete product and it holds a delete product

7
00:00:35,350 --> 00:00:46,900
text here and I'll also export an action creator delete product which takes the product ID, like this and

8
00:00:46,900 --> 00:00:53,430
which then returns an action object where the type is delete product and the pid, the product ID is

9
00:00:53,440 --> 00:00:55,990
simply the forwarded product ID, like this.

10
00:00:59,620 --> 00:01:07,990
Now in the reducer, in the products reducer file, we can listen to that because currently, we're never

11
00:01:08,560 --> 00:01:17,110
caring about any action. Now we can switch on the action type here and handle the case that it's delete

12
00:01:17,230 --> 00:01:23,900
product which we get from our products action file and hence you need to add that import. If delete

13
00:01:23,900 --> 00:01:29,840
product is the case, we need to remove the product from our user products array and of course also from

14
00:01:29,840 --> 00:01:34,490
the available products array because it's deleted in general, not just in our user products but from

15
00:01:34,490 --> 00:01:35,290
the entire app.

16
00:01:37,990 --> 00:01:39,190
Hence here,

17
00:01:39,190 --> 00:01:48,100
I will return a new object where we copy the existing state to be sure we don't lose any state and now

18
00:01:48,100 --> 00:01:51,630
user products is simply state.userProducts,

19
00:01:51,640 --> 00:01:57,070
so the old user products on which we can filter, that's a built-in Javascript method which returns a

20
00:01:57,070 --> 00:02:04,640
new array, a new array that basically is created by running a function on every item in the old array

21
00:02:04,660 --> 00:02:09,930
and if that function returns true, we keep that item, if it returns false we drop the item.

22
00:02:10,000 --> 00:02:15,490
So this executes a function where we get the product, this function is executed for us by Javascript

23
00:02:15,490 --> 00:02:20,720
so to say and it passes in the item it's currently having a look at to this function.

24
00:02:20,800 --> 00:02:29,110
So we get the product for each product in our user products array and we want to return product ID,

25
00:02:29,650 --> 00:02:33,390
unlike action pid which is the product ID we want to delete.

26
00:02:33,400 --> 00:02:39,530
What this means is that basically it will keep all products where the IDs do not match,

27
00:02:39,550 --> 00:02:41,890
if they do match, we know it's the product we want to get rid of

28
00:02:41,890 --> 00:02:43,240
and therefore we return false

29
00:02:43,240 --> 00:02:46,340
which means in the new array, it will not be included.

30
00:02:46,370 --> 00:02:50,890
Now it's essentially the same logic for the available products,

31
00:02:50,900 --> 00:02:55,530
there we just need to go through all available products and filter out the product there.

32
00:02:55,550 --> 00:03:01,090
This is one change we need to make, another change needs to be made in the cart

33
00:03:01,090 --> 00:03:06,400
however because when we delete a product, it should be removed from the cart as well because otherwise

34
00:03:06,400 --> 00:03:09,690
we have a product in the cart which doesn't exist anymore.

35
00:03:09,820 --> 00:03:17,410
So here, I also will add a case for delete product and hence you need to import delete product from actions

36
00:03:17,410 --> 00:03:18,810
products in the cart.js

37
00:03:18,820 --> 00:03:20,290
reducer as well

38
00:03:23,060 --> 00:03:27,830
and in here, we need to make sure that we remove the product from the cart if it was deleted.

39
00:03:29,670 --> 00:03:36,150
So here in the cart, of course we get our product ID of the product we want to delete, it's this pid

40
00:03:36,300 --> 00:03:47,940
in that action which is dispatched, so therefore here we return a new state where we want to update our

41
00:03:47,950 --> 00:03:53,680
cart and the total amount such that the product is gone and with gone, I mean totally erased from

42
00:03:53,680 --> 00:04:01,920
the cart, not just reduced by one but totally erased. So items is here in the end a copy of the existing

43
00:04:01,920 --> 00:04:02,760
items

44
00:04:02,760 --> 00:04:12,610
without that product, so I'll create a new constant, updated items where I copy my existing state items

45
00:04:12,610 --> 00:04:13,910
here, like this

46
00:04:15,010 --> 00:04:22,820
and then I delete updated items for the action pid, so I delete this item from the cart.

47
00:04:22,820 --> 00:04:29,600
Of course this only makes sense if this item exists in the cart, so I will first of all check if state

48
00:04:29,750 --> 00:04:33,940
items for action pid, if that returns anything meaningful

49
00:04:34,220 --> 00:04:40,310
and if it is not the case, then I will just return the existing state because then I'm done with this

50
00:04:40,310 --> 00:04:44,750
case, I don't need to change anything in the state, so I'll just return the existing state without changes.

51
00:04:45,230 --> 00:04:46,840
If I make it past this if check,

52
00:04:46,850 --> 00:04:52,330
then I know that the product with the ID we're about to delete is part of the item.

53
00:04:52,340 --> 00:05:00,790
So then I continue copying my items, then delete the product from there but before I do that, get the item

54
00:05:00,790 --> 00:05:11,970
total by accessing state items for the action pid and then there, of course we have this, if we have a look at the

55
00:05:11,970 --> 00:05:20,150
cart item model I mean, we have this sum field here, so in the end here I need to

56
00:05:20,150 --> 00:05:27,300
remove the sum. I'm interested in the sum because now I can update my items down there with the updated

57
00:05:27,300 --> 00:05:34,440
items where I did delete it with the delete keyword and the total amount of the cart is state

58
00:05:34,620 --> 00:05:44,540
total amount minus item total, so the total of this cart item we had added before. So now we update the cart

59
00:05:44,540 --> 00:05:45,760
appropriately as well

60
00:05:45,860 --> 00:05:50,600
when we delete this. Now we just need to dispatch this deletion,

61
00:05:50,660 --> 00:05:52,960
so back in user products, here in delete,

62
00:05:52,990 --> 00:06:00,170
we want to dispatch. So from React Redux we can import use dispatch to get access to the dispatch function

63
00:06:00,170 --> 00:06:00,490
here

64
00:06:00,500 --> 00:06:04,140
by calling use dispatch as we did it many times before

65
00:06:04,490 --> 00:06:12,290
and then here, when delete is pressed, we can dispatch our action and for that of course, we need to import

66
00:06:12,290 --> 00:06:12,980
this action, so

67
00:06:12,980 --> 00:06:13,870
let's do this,

68
00:06:13,880 --> 00:06:24,130
let's import maybe everything as products actions from the store folder, there from the actions folder

69
00:06:24,160 --> 00:06:29,650
and there from the products file and now we use products action down there

70
00:06:29,650 --> 00:06:36,100
when we dispatch this to call delete product and forward the product ID which of course is 

71
00:06:36,100 --> 00:06:40,340
itemData.item.id here because we're going through all the products here

72
00:06:40,480 --> 00:06:46,830
and that basically means that itemData.item refers to instances of our product model,

73
00:06:46,840 --> 00:06:51,870
every instance has an ID property and we're forwarding this to delete product.

74
00:06:51,940 --> 00:06:58,900
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

75
00:06:58,900 --> 00:07:01,960
and if I go back to products, it's gone here as well.

76
00:07:02,200 --> 00:07:08,680
Now if we reload this and I do add the red shirt to the cart, you see it here, I added it twice.

77
00:07:08,680 --> 00:07:16,380
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.

78
00:07:16,520 --> 00:07:23,090
On the other hand, if I do add let's say the carpet and the coffee mug now, go back to admin, delete the

79
00:07:23,090 --> 00:07:28,460
carpet but not the coffee mug, you see in products, the coffee mug is still in the cart,

80
00:07:28,520 --> 00:07:35,850
so that did work. By the way, you might notice that coffee mug is a bit cut off here, that's something

81
00:07:35,880 --> 00:07:41,240
I'll fix later together with the fact that here, we actually see a minus now for the total,

82
00:07:41,250 --> 00:07:43,680
that's also something I'll fix in a second.

83
00:07:43,680 --> 00:07:45,810
First of all let's make sure that we can

84
00:07:45,840 --> 00:07:52,830
however in the admin section go to the edit screen or that we also have an item up there that allows

85
00:07:52,830 --> 00:07:54,720
us to add a new product.