1
00:00:02,100 --> 00:00:05,460
For the delete button, let's again start with the Redux logic.

2
00:00:05,490 --> 00:00:11,850
So here in the actions for example, we can register a new identifier, remove from cart sounds like a fitting

3
00:00:11,850 --> 00:00:17,120
name given that we had add to cart before, so remove from cart.

4
00:00:17,110 --> 00:00:22,710
I'll also again add an action creator function here, remove from cart.

5
00:00:22,740 --> 00:00:27,750
This now only needs the ID of the product that should be removed,

6
00:00:27,750 --> 00:00:34,260
so only product ID and then this returns a new action object where the type of course is remove from

7
00:00:34,260 --> 00:00:40,800
cart and where we have the pid, the product ID, where I forward the product ID I'm getting here. Now

8
00:00:40,800 --> 00:00:44,560
in the reducer, we had that add to cart

9
00:00:44,560 --> 00:00:48,280
case, now we simply need to add another case here

10
00:00:50,290 --> 00:00:53,030
and that case is the remove from cart case.

11
00:00:53,050 --> 00:00:57,960
For that, you need to make sure you're importing the removed from cart action identifier from the cart

12
00:00:58,000 --> 00:00:58,990
actions file

13
00:01:01,840 --> 00:01:03,670
and in the remove from cart

14
00:01:03,670 --> 00:01:07,120
case here, we have two cases again.

15
00:01:07,140 --> 00:01:12,660
One is that we only had one item of that product in the cart,

16
00:01:12,660 --> 00:01:13,900
like for the blue carpet,

17
00:01:13,980 --> 00:01:16,760
in this case we need to remove it entirely from the cart

18
00:01:16,770 --> 00:01:17,850
items object,

19
00:01:17,850 --> 00:01:23,400
so from this object and this will therefore then remove it from this row which we output here.

20
00:01:23,400 --> 00:01:27,870
If we have two or more items, then we just want to reduce the quantity by 1.

21
00:01:27,870 --> 00:01:33,120
Of course you could always erase this item entirely if you wanted to but I want to show you how you

22
00:01:33,120 --> 00:01:35,450
could differentiate between these two cases.

23
00:01:35,490 --> 00:01:41,130
So actually if we have a quantity higher than one, I don't want to erase the item from the cart but actually

24
00:01:41,130 --> 00:01:43,870
just reduce the amount by 1.

25
00:01:44,100 --> 00:01:51,210
So therefore in remove from cart, we have to find out what our quantity is. So our current quantity which

26
00:01:51,210 --> 00:01:57,930
I store in this constant can be deducted from our state of course, there in the items, we have to find

27
00:01:57,960 --> 00:02:00,000
the product we're looking for

28
00:02:00,000 --> 00:02:04,770
and of course we can do that with the help of the ID which is part of our action here in the pid field

29
00:02:05,550 --> 00:02:11,440
because now state items is an object and therefore we can access action.pid here, right.

30
00:02:11,450 --> 00:02:16,680
This will dynamically access the value with the product ID

31
00:02:16,950 --> 00:02:18,380
key here in our item,

32
00:02:18,390 --> 00:02:21,220
so with the product ID we're getting on this action and

33
00:02:21,240 --> 00:02:24,950
this is how we add items to our items object here right.

34
00:02:24,960 --> 00:02:28,890
We use our product ID as an identifier,

35
00:02:28,920 --> 00:02:32,410
this is now what I use here to get access to it.

36
00:02:32,430 --> 00:02:36,940
This will have a quantity because this will hold a value which is a product item,

37
00:02:36,990 --> 00:02:41,120
you could of course also add a check whether this item is actually part of the cart

38
00:02:41,130 --> 00:02:46,290
but the way we build this app, we should never be able to reach this action without that product being

39
00:02:46,290 --> 00:02:51,690
part of the cart because we can only trigger our delete action here from inside the cart screen, so we

40
00:02:51,690 --> 00:02:55,340
don't need to check here but we definitely need to get the quantity.

41
00:02:55,410 --> 00:03:03,780
Now we can check if current quantity is greater than 1 which means we need to reduce it, we need to reduce

42
00:03:03,780 --> 00:03:06,740
it, not erase it, else

43
00:03:06,750 --> 00:03:08,940
we need to erase it.

44
00:03:09,090 --> 00:03:11,790
Now let's start with the erase case.

45
00:03:11,850 --> 00:03:18,900
So here we just need to return a new items object which includes all the old items but doesn't include

46
00:03:18,930 --> 00:03:27,520
this item anymore. So we can have our updated cart items here where we clone state items, like this and

47
00:03:27,520 --> 00:03:36,870
now to remove a property, we can use the delete keyword Javascript knows and there, we can delete updated

48
00:03:36,870 --> 00:03:41,880
cart items for action.pid.

49
00:03:41,880 --> 00:03:49,290
So this will delete this item from our copied Javascript object here, it will delete this item entirely,

50
00:03:49,290 --> 00:03:57,020
this product item entirely from our cart items object. This is how we can erase it. Now in the other case

51
00:03:57,020 --> 00:03:59,690
that we simply need to reduce it,

52
00:04:01,040 --> 00:04:07,250
I can have my updated cart item, so that single cart item where I create a new cart item with the cart

53
00:04:07,280 --> 00:04:13,700
item class and there, I want to copy the values of the existing cart item but simply reduce the quantity.

54
00:04:14,220 --> 00:04:17,910
So cart item takes quantity right as the first values, so now here

55
00:04:17,910 --> 00:04:25,290
the goal is to get access to state items for the product ID I get on the action and since repeating this

56
00:04:25,290 --> 00:04:33,450
will be cumbersome, I'll store it in a helper a constant, selected cart item is this here,

57
00:04:33,510 --> 00:04:37,290
now we can replace that here with selected cart item

58
00:04:37,290 --> 00:04:41,760
and here I can use selected cartItem.quantity minus one.

59
00:04:41,760 --> 00:04:48,240
Now of course we know that this won't be zero because the quantity was greater than 1 and now we can

60
00:04:48,240 --> 00:04:49,820
keep the rest of the data of course.

61
00:04:49,830 --> 00:04:57,270
So we keep the product price here, we keep the product title,

62
00:04:57,270 --> 00:05:00,840
that all doesn't change, the sum however of course changes and

63
00:05:00,910 --> 00:05:05,090
that's the sum, the old sum minus the price of course,

64
00:05:05,100 --> 00:05:13,410
so minus the product price because we removed one item, we have to reduce the sum by one item's price.

65
00:05:13,470 --> 00:05:21,870
Now this updated cart item needs to replace the current item in our cart items object. So that

66
00:05:21,870 --> 00:05:26,760
we can also reuse some code, I'll actually change this a little bit and create updated cart items as a

67
00:05:26,760 --> 00:05:32,880
variable here instead of a constant here in the else block, so that I just update this variables value,

68
00:05:33,240 --> 00:05:34,230
so that here in the if block, 

69
00:05:34,230 --> 00:05:40,530
we can also use that same variable name, updated cart items where I set this equal to a copy of the existing

70
00:05:40,530 --> 00:05:49,890
items but then I replace my action pid here, so my product ID, my identifier, the value there with the

71
00:05:49,890 --> 00:05:56,610
updated cart item which is my old cart item with the updated quantity and sum. That's the updated cart

72
00:05:56,700 --> 00:05:57,520
items,

73
00:05:57,540 --> 00:06:02,550
now of course we will also need to adjust the total amount of our state, so after this

74
00:06:02,550 --> 00:06:10,800
if else block, we return a copy of the state, items can be set to updated cart items and now important,

75
00:06:11,160 --> 00:06:14,030
the total amount can be set to state

76
00:06:14,100 --> 00:06:20,160
total amount minus selected cart item

77
00:06:23,530 --> 00:06:31,030
product price because just as I updated the sum for this single cart item, the total cart sum of course

78
00:06:31,060 --> 00:06:38,200
also needs to be readjust as such. Now we can try dispatching this remove from cart action.

79
00:06:38,200 --> 00:06:46,940
So let's go to the cart screen where I in the end have this on remove function and there, I now want to

80
00:06:46,940 --> 00:06:51,860
dispatch an action, so I will need access to the dispatch function with the help of the use dispatch

81
00:06:51,890 --> 00:07:03,040
hook. We can now use that up here, get access to it by calling just use dispatch like this and then

82
00:07:03,550 --> 00:07:05,740
dispatch this down there.

83
00:07:05,740 --> 00:07:17,150
Dispatch now import all actions which we need, so import everything as cart actions from the store folder,

84
00:07:17,150 --> 00:07:24,080
from actions cart like this, again using this bundled import which is totally optional, you can also target

85
00:07:24,080 --> 00:07:25,760
the specific things you need,

86
00:07:25,790 --> 00:07:31,610
so target the specific action creators, in this case the remove from cart creator which we would need

87
00:07:32,480 --> 00:07:35,400
and then down there, simply execute this action creator,

88
00:07:35,420 --> 00:07:41,780
in my case by using cart actions.removeFromCart, forward the product ID which we of course get

89
00:07:41,780 --> 00:07:45,030
here, it's itemData.item.

90
00:07:45,110 --> 00:07:50,810
and now keep in mind that we're looping through items of this shape, so we'll have a product ID field in

91
00:07:50,810 --> 00:07:55,840
there and hence we can use this here to forward this to remove from cart,

92
00:07:55,850 --> 00:08:00,770
this should hopefully therefore allow us to update this. And that should be all, Redux should do the

93
00:08:00,770 --> 00:08:05,470
rest behind the scenes and should automatically rerender the cart screen whenever the cart changes,

94
00:08:05,570 --> 00:08:12,060
so whenever we remove items. So I added two red shirts and one blue carpet and if I remove one red shirt,

95
00:08:13,260 --> 00:08:13,790
indeed

96
00:08:13,800 --> 00:08:17,000
well one problem we have is the order switches, we'll have to fix that

97
00:08:17,010 --> 00:08:19,800
but you see the quantity was updated correctly.

98
00:08:19,920 --> 00:08:25,620
If I now remove this, the total amount also updated correctly, if I now remove this, indeed it's gone entirely

99
00:08:26,360 --> 00:08:28,080
and now this also is disabled.

100
00:08:28,080 --> 00:08:31,970
So this generally works but of course the order being switched,

101
00:08:31,980 --> 00:08:34,140
that's not something I want to happen here.

102
00:08:34,380 --> 00:08:40,620
Now to avoid that the order switches, we can simply go to the cart screen where I change my items to

103
00:08:40,620 --> 00:08:45,960
be an array and there, we just need to make sure this array is always sorted in the same way because

104
00:08:45,990 --> 00:08:51,690
this selector will always re-trigger and refetch our data whenever our Redux state changes.

105
00:08:52,320 --> 00:08:57,540
So therefore here, we will always get the latest data snapshot we have in there and hence, it's in here

106
00:08:57,540 --> 00:09:02,670
where we just need to sort it in the same way all the time and will therefore always render it in the

107
00:09:02,670 --> 00:09:03,790
same way.

108
00:09:03,900 --> 00:09:11,250
So we just need to make sure that our transformed cart items array is sorted by calling sort there.

109
00:09:11,410 --> 00:09:17,310
If I call it like this, I start adding some data here,

110
00:09:17,410 --> 00:09:21,820
now you see this alone didn't do the trick because we're not telling it how to sort it and it doesn't

111
00:09:21,820 --> 00:09:28,480
know how to do this for objects out of the box but we can pass a function to sort where we always compare

112
00:09:28,480 --> 00:09:34,490
two items, a and b, to each other and then sort has to return a number

113
00:09:34,600 --> 00:09:38,140
in the end that determines what comes first

114
00:09:38,190 --> 00:09:40,780
and there, you can of course sort this however you want,

115
00:09:40,800 --> 00:09:50,530
for example by product ID, so we can simply return a comparison where we check A's product ID, compare

116
00:09:50,530 --> 00:09:58,110
this to B's product ID and if it's greater, then with a ternary expression here, I returned one,

117
00:09:58,150 --> 00:10:02,210
otherwise I return minus one.

118
00:10:02,370 --> 00:10:07,620
This is the normal sort function Javascript ships with and now this ensures that we always sort in

119
00:10:07,620 --> 00:10:08,610
the same way,

120
00:10:08,670 --> 00:10:17,520
hence now you see if I remove this, the red short stays in its place and therefore our cart logic is finished.

121
00:10:17,520 --> 00:10:23,620
Now we can make sure that we can actually also click on that order now button and we add this as an

122
00:10:23,610 --> 00:10:29,250
order which we thereafter can visit with the helpful drawer here that allows us to go to the orders screen

123
00:10:29,250 --> 00:10:31,190
which we of course also have yet to add.