1
00:00:00,980 --> 00:00:07,670
OK, and I think we will start with increased functionality, because decrease is a bit more complicated

2
00:00:07,790 --> 00:00:14,180
since you would want to remove the item if the amount is less than one, but the functionality is very

3
00:00:14,180 --> 00:00:15,160
similar to increase.

4
00:00:15,470 --> 00:00:20,550
So I think once we're done with increase, it is going to be much more easier to work with a decrease.

5
00:00:20,930 --> 00:00:25,300
Same old spiel instead of console log, we're turning a new object.

6
00:00:25,310 --> 00:00:30,500
So let's go over the return and order that now we're copying, of course, our state.

7
00:00:30,800 --> 00:00:36,430
And then we could technically set up all our functionality similar way how we have with remove.

8
00:00:36,710 --> 00:00:39,430
So I could just say carte and then set up the functionality.

9
00:00:39,870 --> 00:00:43,210
However, there's more lines of code and I think it might get confusing.

10
00:00:43,550 --> 00:00:48,170
That's the reason why I'm going to set up a separate variable and just assign it to my new car.

11
00:00:48,830 --> 00:00:50,630
So for the time being, I'm just going to say let.

12
00:00:53,090 --> 00:00:58,570
Cart is equal to an empty array, and then I'm going to say cart is equal to tramcar.

13
00:00:58,910 --> 00:01:03,590
So let me repeat, we could technically set up all the functionality that we're going to do in a second,

14
00:01:03,890 --> 00:01:10,670
set it equal to time cart right away where we have the cart, and then overwrite the old cart value

15
00:01:10,880 --> 00:01:12,050
in our state.

16
00:01:12,470 --> 00:01:17,270
But of course, the reason why I'm setting this up as a separate variable, because there's going to

17
00:01:17,270 --> 00:01:19,190
be multiple lines of code right here.

18
00:01:19,400 --> 00:01:25,610
And I think it just makes it easier that we're setting up our new cart value and then we're overriding

19
00:01:25,610 --> 00:01:27,230
that in our state.

20
00:01:27,590 --> 00:01:30,040
Now, it's, of course, not going to be an empty array.

21
00:01:30,440 --> 00:01:32,510
We will use a map method.

22
00:01:32,870 --> 00:01:35,150
So the way it works, we're going to go with state.

23
00:01:35,540 --> 00:01:37,190
Then the value is correct.

24
00:01:37,460 --> 00:01:38,780
Then we use the method.

25
00:01:39,020 --> 00:01:45,920
And that method works very similar to a filter where we have a callback function and that callback function

26
00:01:46,130 --> 00:01:51,140
is called against each and every item in our returns turns.

27
00:01:51,140 --> 00:01:57,080
And as a result, now with the model, we can change the values that we're returning.

28
00:01:57,320 --> 00:02:03,170
So Filter was checking whether the condition matched and based on that, it was either returning or

29
00:02:03,170 --> 00:02:07,260
not returning there or in this case, we will return all of them.

30
00:02:07,280 --> 00:02:10,910
So all of the items will be placed in Honiara.

31
00:02:11,180 --> 00:02:16,360
However, of course, we will mutated a bit where we will change the amount.

32
00:02:16,730 --> 00:02:18,570
So that will be our update.

33
00:02:19,040 --> 00:02:24,650
Like I said, we have our callback function and then as a parameter, we can access each and every item.

34
00:02:25,010 --> 00:02:28,850
Now, what I would want to return from my cart item.

35
00:02:29,090 --> 00:02:36,140
So I'm iterating over my cart items and then each and every item is represented by this card R.M. parameter.

36
00:02:36,440 --> 00:02:40,160
And then I need to decide what is going to be placed in my array.

37
00:02:40,400 --> 00:02:43,730
And for the time being, I'm just going to return the item the way it is.

38
00:02:44,030 --> 00:02:47,330
So I'm going to go with cart item and it is a return.

39
00:02:47,520 --> 00:02:49,880
So the moment as I'm clicking, nothing's happening.

40
00:02:50,120 --> 00:02:54,110
I mean, I don't have any errors, but I'm also not updating my ammo.

41
00:02:54,530 --> 00:02:59,960
So let's maybe start by console again just so we can see what is the Crinum.

42
00:03:00,260 --> 00:03:04,950
Maybe that way you'll have a more clearer understanding of what we're accessing.

43
00:03:05,210 --> 00:03:11,360
So if I can so log and then if I'm going to click on it, I notice this will give me all three items.

44
00:03:11,720 --> 00:03:13,300
So I'm going to have something.

45
00:03:13,310 --> 00:03:14,360
I'm going to have my pixels.

46
00:03:14,570 --> 00:03:19,070
And what this represents is my array, some iterating.

47
00:03:19,080 --> 00:03:19,620
All right.

48
00:03:19,910 --> 00:03:21,890
That's why I can see all three items.

49
00:03:22,230 --> 00:03:27,560
Now, what I would want to check, of course, I would want to check whether the ID that I'm passing

50
00:03:27,710 --> 00:03:28,930
from the card item.

51
00:03:29,000 --> 00:03:34,060
Remember, when we have a increase, we also pass a payload with an ID.

52
00:03:34,310 --> 00:03:39,730
So if the ID matches, then what I would want to do, well, then I would want to update that amount.

53
00:03:39,980 --> 00:03:41,530
I see that I have Samsung Galaxy.

54
00:03:41,580 --> 00:03:41,990
Correct.

55
00:03:42,290 --> 00:03:44,510
So that is the item that I just clicked on.

56
00:03:44,750 --> 00:03:50,830
So I'd want to check if the ID matches and then the amount should be increased by one.

57
00:03:51,020 --> 00:03:52,220
So here is going to be my setup.

58
00:03:52,550 --> 00:03:55,850
If the ID matches it, then we will update amount.

59
00:03:56,090 --> 00:04:03,110
If not regardless, we will still return our card item, so we will return the rest of them, the ones

60
00:04:03,110 --> 00:04:07,100
that do not have a matching amount because I still want them in my card.

61
00:04:07,310 --> 00:04:10,850
But the one that matches should be increased by one.

62
00:04:11,270 --> 00:04:13,640
Now let me get out of the console log as always.

63
00:04:13,640 --> 00:04:16,640
You can always keep it, but in my case I will get rid of it.

64
00:04:16,640 --> 00:04:24,410
And now I'm going to say if Karti remedy matches to whatever I'm passing in my payload or a no action

65
00:04:24,890 --> 00:04:33,260
payload ID, if that is the case, then set up a card item and set it up equal to a new value.

66
00:04:33,590 --> 00:04:36,260
So now my car item will be equal to a new value.

67
00:04:36,500 --> 00:04:39,950
If it doesn't match, we will return whatever we already have here.

68
00:04:40,170 --> 00:04:41,960
That's it we don't really care about.

69
00:04:42,140 --> 00:04:47,300
If it matches, then we will create a new one, specially updated version.

70
00:04:47,600 --> 00:04:49,610
So in my case, I'm going to go with the dart.

71
00:04:49,880 --> 00:04:52,910
Let me copy all the properties from the car item.

72
00:04:52,910 --> 00:04:55,580
And as a side note, I just said that we will mutate.

73
00:04:55,580 --> 00:04:56,750
So that was my mistake.

74
00:04:56,750 --> 00:04:57,580
We will not mutate.

75
00:04:57,800 --> 00:05:04,460
We'll copy everything using the spread operator and then we'll decide which property would want to change.

76
00:05:04,670 --> 00:05:07,040
And of course, the one that I would want to change is the amount.

77
00:05:07,040 --> 00:05:10,940
Correct, because as we increase, we would want to change this amount.

78
00:05:10,950 --> 00:05:17,690
Value Summerset, copy everything that you're getting from the car item because the ID matched and this

79
00:05:17,690 --> 00:05:19,700
should be the one that has the increased amount.

80
00:05:19,940 --> 00:05:26,330
So instead of mutating like I have by mistake said a minute ago, we will override that, we will have

81
00:05:26,330 --> 00:05:27,050
a car item.

82
00:05:27,380 --> 00:05:31,850
All the values have been copied and then for the amount we'll have a new one.

83
00:05:32,150 --> 00:05:34,760
So I'm going to go with cart item amount.

84
00:05:34,760 --> 00:05:39,440
So whatever the amount was in the car item and add one.

85
00:05:40,070 --> 00:05:41,030
So let's save that.

86
00:05:41,240 --> 00:05:44,120
And now as I'm clicking on increase, check it out.

87
00:05:44,270 --> 00:05:50,720
Now, the Samsung one has two items in the car and the same thing I can do for Pixel, same thing I

88
00:05:50,720 --> 00:05:52,010
can do for my third one.

89
00:05:52,310 --> 00:05:52,410
So.

90
00:05:52,530 --> 00:05:59,210
Now, we successfully added functionality where we can increase the amount of items in our car.